|
1 <!DOCTYPE html> |
|
2 <!-- Any copyright is dedicated to the Public Domain. |
|
3 http://creativecommons.org/publicdomain/zero/1.0/ --> |
|
4 <!-- Testcase for how we fragment a flex container with several children in a |
|
5 multi-line vertical flexbox. |
|
6 --> |
|
7 <html> |
|
8 <head> |
|
9 <style> |
|
10 .multicol { |
|
11 height: 40px; |
|
12 width: 100px; |
|
13 -moz-column-width: 60px; |
|
14 -moz-column-fill: auto; |
|
15 border: 2px solid purple; |
|
16 margin-bottom: 15px; /* (just for spacing between testcases) */ |
|
17 } |
|
18 .flexContainer { |
|
19 background: yellow; |
|
20 border: 1px dashed black; |
|
21 } |
|
22 .item { |
|
23 width: 40px; |
|
24 height: 15px; |
|
25 border: 1px dotted teal; |
|
26 margin: 1px; |
|
27 font: 10px; |
|
28 float: left; |
|
29 } |
|
30 </style> |
|
31 </head> |
|
32 <body> |
|
33 <!-- auto-height container: --> |
|
34 <div class="multicol"> |
|
35 <div class="flexContainer" style="height: 38px"> |
|
36 <div class="item">1</div> |
|
37 <div class="item">3</div> |
|
38 <div class="item">2</div> |
|
39 </div> |
|
40 </div> |
|
41 |
|
42 <!-- auto-height container, with enough children that our last flex line |
|
43 overflows (in the cross axis) --> |
|
44 <!-- XXXdholbert Ultimately (in bug 939897 probably) we should push the |
|
45 overflowing flex line to a continuation of the flex container --> |
|
46 <div class="multicol"> |
|
47 <div class="flexContainer" style="height: 38px"> |
|
48 <div style="width: 132px"> |
|
49 <div class="item">1</div> |
|
50 <div class="item">3</div> |
|
51 <div class="item">5</div> |
|
52 <div class="item">2</div> |
|
53 <div class="item">4</div> |
|
54 </div> |
|
55 </div> |
|
56 </div> |
|
57 |
|
58 <!-- fixed-height container--> |
|
59 <div class="multicol"> |
|
60 <div class="flexContainer" style="height: 70px"> |
|
61 <div class="item">1</div> |
|
62 <div class="item">3</div> |
|
63 <div class="item">2</div> |
|
64 </div> |
|
65 </div> |
|
66 |
|
67 <!-- fixed-height container, with enough children that our last flex line |
|
68 overflows (in the cross axis) --> |
|
69 <!-- XXXdholbert Ultimately (in bug 939897 probably) we should push the |
|
70 overflowing flex line to a continuation of the flex container --> |
|
71 <div class="multicol"> |
|
72 <div class="flexContainer" style="height: 70px"> |
|
73 <div style="width: 132px"> |
|
74 <div class="item">1</div> |
|
75 <div class="item">3</div> |
|
76 <div class="item">5</div> |
|
77 <div class="item">2</div> |
|
78 <div class="item">4</div> |
|
79 </div> |
|
80 </div> |
|
81 </div> |
|
82 </body> |
|
83 </html> |