layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-2.html@b8a032363ba2
layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-2.html
Thu, 22 Jan 2015 13:21:57 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Thu, 22 Jan 2015 13:21:57 +0100
- branch
- TOR_BUG_9701
- changeset 15
- b8a032363ba2
- permissions
- -rw-r--r--
Incorporate requested changes from Mozilla in review:
https://bugzilla.mozilla.org/show_bug.cgi?id=1123480#c6
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 Test: Testing that visibility:collapse on a flex item in a multi-line flex container creates struts, and that they can migrate between lines</title>
9 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
10 <link rel="help" href="http://www.w3.org/TR/css3-flexbox/#algo-visibility">
11 <link rel="match" href="flexbox-collapsed-item-horiz-2-ref.html">
12 <meta charset="utf-8">
13 <style>
14 .flexContainer {
15 display: flex;
16 flex-wrap: wrap;
18 /* These let us show where each flex line begins (and hence, how tall
19 the flex lines end up) */
20 align-content: flex-start;
21 align-items: flex-start;
23 width: 30px;
24 background: yellow;
25 border: 1px dotted black;
26 float: left;
27 margin: 5px;
28 }
29 .collapsedItem {
30 visibility: collapse;
31 width: 15px;
32 height: 25px;
33 }
34 .halfWidthItem {
35 width: 15px;
36 height: 15px;
37 background: teal;
38 }
39 .fullWidthItem {
40 width: 30px;
41 height: 20px;
42 background: purple;
43 }
44 .veryTallItem {
45 width: 15px;
46 height: 40px;
47 background: olive;
48 }
49 </style>
50 </head>
51 <body>
52 <!-- FIRST ROW: -->
53 <!-- One collapsed flex item, at the beginning of a flex line, which
54 ends up establishing its flex line's cross size: -->
55 <div class="flexContainer">
56 <div class="collapsedItem"></div>
57 <div class="halfWidthItem"></div>
58 <div class="fullWidthItem"></div>
59 </div>
60 <!-- ...and now with it being at the end of that flex line: -->
61 <div class="flexContainer">
62 <div class="halfWidthItem"></div>
63 <div class="collapsedItem"></div>
64 <div class="fullWidthItem"></div>
65 </div>
67 <div style="clear: both"></div>
69 <!-- SECOND ROW: -->
70 <!-- One collapsed flex item, initially in its own line. It ends
71 up being merged into another line after it collapses, due to its
72 (post-collapse) zero main-size. -->
73 <div class="flexContainer">
74 <div class="collapsedItem"></div>
75 <div class="fullWidthItem"></div>
76 <div class="fullWidthItem"></div>
77 </div>
78 <div class="flexContainer">
79 <div class="fullWidthItem"></div>
80 <div class="collapsedItem"></div>
81 <div class="fullWidthItem"></div>
82 </div>
83 <div class="flexContainer">
84 <div class="fullWidthItem"></div>
85 <div class="fullWidthItem"></div>
86 <div class="collapsedItem"></div>
87 </div>
89 <div style="clear: both"></div>
91 <!-- THIRD ROW: -->
92 <!-- One collapsed flex item, initially in a line with an even-taller item.
93 The collapsed item ends up shifting into another line after it
94 collapses, but it carries the taller item's cross size with it, as its
95 strut size. -->
96 <div class="flexContainer">
97 <div class="fullWidthItem"></div>
98 <div class="collapsedItem"></div>
99 <div class="veryTallItem"></div>
100 </div>
101 <!-- ...and now with two (differently-sized) struts in first line:
102 (the one that's taller - due to being initially grouped with the tall
103 item - wins out.) -->
104 <div class="flexContainer">
105 <div class="collapsedItem"></div>
106 <div class="fullWidthItem"></div>
107 <div class="collapsedItem"></div>
108 <div class="veryTallItem"></div>
109 </div>
110 </body>
111 </html>
