layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-1.html@a63d609f5ebe
layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-1.html
Thu, 15 Jan 2015 15:55:04 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Thu, 15 Jan 2015 15:55:04 +0100
- branch
- TOR_BUG_9701
- changeset 9
- a63d609f5ebe
- permissions
- -rw-r--r--
Back out 97036ab72558 which inappropriately compared turds to third parties.
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 single-line flex container maintains the containers's cross size, but doesn't otherwise impact flex layout</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-1-ref.html">
12 <meta charset="utf-8">
13 <style>
14 .flexContainer {
15 display: flex;
16 background: yellow;
17 border: 1px dotted black;
18 float: left;
19 margin: 5px;
20 }
21 .flexContainer > * {
22 /* All flex items have 20px base size */
23 width: 20px;
24 }
25 .collapse {
26 visibility: collapse;
27 }
28 .flexible {
29 flex: 1 auto;
30 }
31 .heightTall {
32 height: 40px;
33 background: purple;
34 }
35 .heightAuto {
36 background: teal;
37 }
38 .heightShort {
39 height: 10px;
40 background: pink;
41 }
42 </style>
43 </head>
44 <body>
45 <!-- FIRST ROW: -->
46 <!-- Just one (collapsed) flex item, which ends up establishing
47 the container's size (even though it's collapsed): -->
48 <div class="flexContainer">
49 <div class="heightTall collapse"></div>
50 </div>
52 <div style="clear: both"></div>
54 <!-- SECOND ROW: -->
55 <!-- One collapsed flex item, one short flex item.
56 (Container ends up with collapsed item's height) -->
57 <div class="flexContainer">
58 <div class="heightTall collapse"></div>
59 <div class="heightShort"></div>
60 </div>
61 <!-- (same, but with items in opposite order) -->
62 <div class="flexContainer">
63 <div class="heightShort"></div>
64 <div class="heightTall collapse"></div>
65 </div>
67 <div style="clear: both"></div>
69 <!-- THIRD ROW: -->
70 <!-- One collapsed flex item, one stretched flex item.
71 (Container and stretched item end up with collapsed item's height) -->
72 <div class="flexContainer">
73 <div class="heightTall collapse"></div>
74 <div class="heightAuto"></div>
75 </div>
76 <!-- (again, with items in opposite order) -->
77 <div class="flexContainer">
78 <div class="heightAuto"></div>
79 <div class="heightTall collapse"></div>
80 </div>
82 <div style="clear: both"></div>
84 <!-- FOURTH ROW: -->
85 <!-- One collapsed flex item, one other flex item; both are flexible.
86 (The non-collapsed one should take all of the available width.) -->
87 <div class="flexContainer">
88 <div class="heightAuto flexible collapse"></div>
89 <div class="heightTall flexible"></div>
90 </div>
91 <!-- (again, with items in opposite order) -->
92 <div class="flexContainer">
93 <div class="heightTall flexible"></div>
94 <div class="heightAuto flexible collapse"></div>
95 </div>
97 </body>
98 </html>
