layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-2-ref.html@925c144e1f1f
layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-2-ref.html
Fri, 16 Jan 2015 18:13:44 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Fri, 16 Jan 2015 18:13:44 +0100
- branch
- TOR_BUG_9701
- changeset 14
- 925c144e1f1f
- permissions
- -rw-r--r--
Integrate suggestion from review to improve consistency with existing code.
1 <!DOCTYPE html>
2 <!--
3 Any copyright is dedicated to the Public Domain.
4 http://creativecommons.org/publicdomain/zero/1.0/
5 -->
6 <html>
7 <head>
8 <title>CSS Reftest Reference</title>
9 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
10 <meta charset="utf-8">
11 <style>
12 .flexContainer {
13 display: flex;
14 flex-wrap: wrap;
16 /* These let us show where each flex line begins (and hence, how tall
17 the flex lines end up) */
18 align-content: flex-start;
19 align-items: flex-start;
21 width: 30px;
22 background: yellow;
23 border: 1px dotted black;
24 float: left;
25 margin: 5px;
26 }
27 .collapsedItem {
28 width: 0;
29 height: 25px;
30 }
31 .halfWidthItem {
32 width: 15px;
33 height: 15px;
34 background: teal;
35 }
36 .fullWidthItem {
37 width: 30px;
38 height: 20px;
39 background: purple;
40 }
41 .veryTallItem {
42 width: 15px;
43 height: 40px;
44 background: olive;
45 }
46 </style>
47 </head>
48 <body>
49 <!-- FIRST ROW: -->
50 <!-- One collapsed flex item, at the beginning of a flex line, which
51 ends up establishing its flex line's cross size: -->
52 <div class="flexContainer">
53 <div class="collapsedItem"></div>
54 <div class="halfWidthItem"></div>
55 <div class="fullWidthItem"></div>
56 </div>
57 <!-- ...and now with it being at the end of that flex line: -->
58 <div class="flexContainer">
59 <div class="halfWidthItem"></div>
60 <div class="collapsedItem"></div>
61 <div class="fullWidthItem"></div>
62 </div>
64 <div style="clear: both"></div>
66 <!-- SECOND ROW: -->
67 <!-- One collapsed flex item, initially in its own line. It ends
68 up being merged into another line after it collapses, due to its
69 (post-collapse) zero main-size. -->
70 <div class="flexContainer">
71 <div class="collapsedItem"></div>
72 <div class="fullWidthItem"></div>
73 <div class="fullWidthItem"></div>
74 </div>
75 <div class="flexContainer">
76 <div class="fullWidthItem"></div>
77 <div class="collapsedItem"></div>
78 <div class="fullWidthItem"></div>
79 </div>
80 <div class="flexContainer">
81 <div class="fullWidthItem"></div>
82 <div class="fullWidthItem"></div>
83 <div class="collapsedItem"></div>
84 </div>
86 <div style="clear: both"></div>
88 <!-- THIRD ROW: -->
89 <!-- One collapsed flex item, initially in a line with an even-taller item.
90 The collapsed item ends up shifting into another line after it
91 collapses, but it carries the taller item's cross size with it, as its
92 strut size. -->
93 <div class="flexContainer">
94 <div class="fullWidthItem"></div>
95 <div class="collapsedItem" style="height: 40px"></div>
96 <div class="veryTallItem"></div>
97 </div>
98 <!-- ...and now with two (differently-sized) struts in first line:
99 (the one that's taller - due to being initially grouped with the tall
100 item - wins out.) -->
101 <div class="flexContainer">
102 <div class="collapsedItem"></div>
103 <div class="fullWidthItem"></div>
104 <div class="collapsedItem" style="height: 40px"></div>
105 <div class="veryTallItem"></div>
106 </div>
107 </body>
108 </html>
