Thu, 15 Jan 2015 15:55:04 +0100
Back out 97036ab72558 which inappropriately compared turds to third parties.
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>
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>
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>
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>