|
1 <!DOCTYPE html> |
|
2 <!-- Any copyright is dedicated to the Public Domain. |
|
3 http://creativecommons.org/publicdomain/zero/1.0/ --> |
|
4 <html> |
|
5 <head> |
|
6 <style> |
|
7 .multicol { |
|
8 height: 10px; |
|
9 width: 100px; |
|
10 -moz-column-width: 20px; |
|
11 -moz-column-fill: auto; |
|
12 border: 2px solid orange; |
|
13 } |
|
14 .flexContainer { |
|
15 background: teal; |
|
16 /* border-width is 0 by default; some sub-testcases will increase it. */ |
|
17 border: 0 dashed black; |
|
18 } |
|
19 </style> |
|
20 </head> |
|
21 <body> |
|
22 <!-- NO BORDERS/PADDING --> |
|
23 <!-- ================== --> |
|
24 <!-- content fits exactly into 1 column: --> |
|
25 <div class="multicol"> |
|
26 <div class="flexContainer" style="height: 10px"></div> |
|
27 </div> |
|
28 |
|
29 <!-- content fits, but margin-top pushes it to overflow: --> |
|
30 <div class="multicol"> |
|
31 <div class="flexContainer" style="height: 9px; |
|
32 margin-top: 2px;"></div> |
|
33 </div> |
|
34 |
|
35 <!-- content is too tall, by 1px: --> |
|
36 <div class="multicol"> |
|
37 <div class="flexContainer" style="height: 11px"></div> |
|
38 </div> |
|
39 |
|
40 <!-- BORDERS/PADDING ON TOP --> |
|
41 <!-- ====================== --> |
|
42 <!-- content fits, but border-top makes us too tall: --> |
|
43 <div class="multicol"> |
|
44 <div class="flexContainer" style="height: 9px; |
|
45 border-top-width: 2px"></div> |
|
46 </div> |
|
47 |
|
48 <!-- content fits, but padding-top makes us too tall: --> |
|
49 <div class="multicol"> |
|
50 <div class="flexContainer" style="height: 9px; |
|
51 padding-top: 2px"></div> |
|
52 </div> |
|
53 |
|
54 <!-- content fits, but border/padding-top make us too tall: --> |
|
55 <div class="multicol"> |
|
56 <div class="flexContainer" style="height: 9px; |
|
57 border-top-width: 1px; |
|
58 padding-top: 1px"></div> |
|
59 </div> |
|
60 |
|
61 <!-- BORDERS/PADDING ON BOTTOM --> |
|
62 <!-- ========================= --> |
|
63 <!-- content fits, but border-bottom-width makes us too tall: --> |
|
64 <div class="multicol"> |
|
65 <div class="flexContainer" style="height: 9px; |
|
66 border-bottom-width: 2px"></div> |
|
67 </div> |
|
68 |
|
69 <!-- content fits, but padding-bottom makes us too tall: --> |
|
70 <div class="multicol"> |
|
71 <div class="flexContainer" style="height: 9px; |
|
72 padding-bottom: 2px"></div> |
|
73 </div> |
|
74 |
|
75 <!-- content fits, but border/padding-bottom make us too tall: --> |
|
76 <div class="multicol"> |
|
77 <div class="flexContainer" style="height: 9px; |
|
78 border-bottom-width: 1px; |
|
79 padding-bottom: 1px"></div> |
|
80 </div> |
|
81 |
|
82 <!-- BORDERS/PADDING ON TOP AND BOTTOM --> |
|
83 <!-- ================================= --> |
|
84 <!-- content fits, but border-top/bottom combined make us too tall: --> |
|
85 <div class="multicol"> |
|
86 <div class="flexContainer" style="height: 9px; |
|
87 border-top-width: 1px; |
|
88 border-bottom-width: 1px"></div> |
|
89 </div> |
|
90 |
|
91 <!-- content fits, but padding-top/bottom combined make us too tall: --> |
|
92 <div class="multicol"> |
|
93 <div class="flexContainer" style="height: 9px; |
|
94 padding-top: 1px; |
|
95 padding-bottom: 1px"></div> |
|
96 </div> |
|
97 |
|
98 </body> |
|
99 </html> |