layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-1-ref.html@925c144e1f1f
layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-1-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 <!-- In this reference case, we have blocks in place of the testcase's
7 flex containers. The testcase's collapsed flex items are entirely
8 absent here (and the remaining content is sized using exact pixel
9 values).
10 -->
11 <html>
12 <head>
13 <title>CSS Reftest Reference</title>
14 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
15 <meta charset="utf-8">
16 <style>
17 .flexContainer {
18 display: flex;
19 background: yellow;
20 border: 1px dotted black;
21 float: left;
22 margin: 5px;
23 }
24 .flexContainer > * {
25 /* All flex items have 20px base size */
26 width: 20px;
27 }
28 .collapse {
29 flex-basis: 0;
30 height: 20px;
31 }
32 .flexible {
33 flex: 1 auto;
34 }
35 .heightTall {
36 height: 40px;
37 background: purple;
38 }
39 .heightAuto {
40 background: teal;
41 }
42 .heightShort {
43 height: 10px;
44 background: pink;
45 }
46 </style>
47 </head>
48 <body>
49 <!-- FIRST ROW: -->
50 <!-- Just one (collapsed) flex item, which ends up establishing
51 the container's size (even though it's collapsed): -->
52 <div class="flexContainer">
53 <div class="heightTall collapse"></div>
54 </div>
56 <div style="clear: both"></div>
58 <!-- SECOND ROW: -->
59 <!-- One collapsed flex item, one short flex item.
60 (Container ends up with collapsed item's height) -->
61 <div class="flexContainer">
62 <div class="heightTall collapse"></div>
63 <div class="heightShort"></div>
64 </div>
65 <!-- (same, but with items in opposite order) -->
66 <div class="flexContainer">
67 <div class="heightShort"></div>
68 <div class="heightTall collapse"></div>
69 </div>
71 <div style="clear: both"></div>
73 <!-- THIRD ROW: -->
74 <!-- One collapsed flex item, one stretched flex item.
75 (Container and stretched item end up with collapsed item's height) -->
76 <div class="flexContainer">
77 <div class="heightTall collapse"></div>
78 <div class="heightAuto"></div>
79 </div>
80 <!-- (again, with items in opposite order) -->
81 <div class="flexContainer">
82 <div class="heightAuto"></div>
83 <div class="heightTall collapse"></div>
84 </div>
86 <div style="clear: both"></div>
88 <!-- FOURTH ROW: -->
89 <!-- One collapsed flex item, one other flex item; both are flexible.
90 (The non-collapsed one should take all of the available width.) -->
91 <div class="flexContainer">
92 <div class="heightAuto collapse"></div>
93 <div class="heightTall flexible"></div>
94 </div>
95 <!-- (again, with items in opposite order) -->
96 <div class="flexContainer">
97 <div class="heightTall flexible"></div>
98 <div class="heightAuto collapse"></div>
99 </div>
101 </body>
102 </html>
