layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-2-ref.html@fc2d59ddac77
layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-2-ref.html
Wed, 31 Dec 2014 07:22:50 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 07:22:50 +0100
- branch
- TOR_BUG_3246
- changeset 4
- fc2d59ddac77
- permissions
- -rw-r--r--
Correct previous dual key logic pending first delivery installment.
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>
