layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-flow-2-ref.html@7540298fafa1
layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-flow-2-ref.html
Thu, 15 Jan 2015 21:13:52 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Thu, 15 Jan 2015 21:13:52 +0100
- branch
- TOR_BUG_9701
- changeset 12
- 7540298fafa1
- permissions
- -rw-r--r--
Remove forgotten relic of ABI crash risk averse overloaded method change.
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 height: 60px;
14 width: 60px;
15 font: 10px sans-serif;
16 background: yellow;
17 float: left;
18 border: 1px solid black;
19 }
20 .flexContainer > * {
21 border: 1px dotted gray;
22 width: 28px;
23 height: 28px;
24 float: left;
25 }
27 /* The single-line flex containers' flex items are shrunk in main axis: */
28 .singleLineHoriz > * {
29 width: 18px;
30 }
31 .singleLineVert > * {
32 height: 18px;
33 float: none;
34 }
35 .hidden {
36 /* We use this to hide the "4" box in each of the multi-line chunks.
37 The testcase has 3 flex items in each flex container, but it's easier
38 to write this reference case w/ a hidden 4th box as a space-filler. */
39 visibility: hidden;
40 }
41 </style>
42 </head>
43 <body>
44 <!-- single-line (flex-wrap unspecified): -->
45 <div class="flexContainer singleLineHoriz"><!-- flex-flow: row -->
46 <div>1</div><div>2</div><div>3</div>
47 </div>
48 <div class="flexContainer singleLineHoriz"><!-- flex-flow: row-reverse -->
49 <div>3</div><div>2</div><div>1</div>
50 </div>
51 <div class="flexContainer singleLineVert"><!-- flex-flow: column -->
52 <div>1</div><div>2</div><div>3</div>
53 </div>
54 <div class="flexContainer singleLineVert"><!-- flex-flow: column-reverse -->
55 <div>3</div><div>2</div><div>1</div>
56 </div>
58 <div style="clear:both"></div>
60 <!-- now using "wrap", after flex-direction: -->
61 <div class="flexContainer"><!-- flex-flow: row wrap -->
62 <div>1</div><div>2</div><div>3</div><div class="hidden">4</div>
63 </div>
64 <div class="flexContainer"><!-- flex-flow: row-reverse wrap -->
65 <div>2</div><div>1</div><div class="hidden">4</div><div>3</div>
66 </div>
67 <div class="flexContainer"><!-- flex-flow: column wrap -->
68 <div>1</div><div>3</div><div>2</div><div class="hidden">4</div>
69 </div>
70 <div class="flexContainer"><!-- flex-flow: column-reverse wrap -->
71 <div>2</div><div class="hidden">4</div><div>1</div><div>3</div>
72 </div>
74 <div style="clear:both"></div>
76 <!-- now using "wrap", before flex-direction: -->
77 <div class="flexContainer"><!-- flex-flow: wrap row -->
78 <div>1</div><div>2</div><div>3</div><div class="hidden">4</div>
79 </div>
80 <div class="flexContainer"><!-- flex-flow: wrap row-reverse -->
81 <div>2</div><div>1</div><div class="hidden">4</div><div>3</div>
82 </div>
83 <div class="flexContainer"><!-- flex-flow: wrap column -->
84 <div>1</div><div>3</div><div>2</div><div class="hidden">4</div>
85 </div>
86 <div class="flexContainer"><!-- flex-flow: wrap column-reverse -->
87 <div>2</div><div class="hidden">4</div><div>1</div><div>3</div>
88 </div>
90 <div style="clear:both"></div>
92 <!-- now using "wrap-reverse", after flex-direction: -->
93 <div class="flexContainer"><!-- flex-flow: row wrap-reverse -->
94 <div>3</div><div class="hidden">4</div><div>1</div><div>2</div>
95 </div>
96 <div class="flexContainer"><!-- flex-flow: row-reverse wrap-reverse -->
97 <div class="hidden">4</div><div>3</div><div>2</div><div>1</div>
98 </div>
99 <div class="flexContainer"><!-- flex-flow: column wrap-reverse -->
100 <div>3</div><div>1</div><div class="hidden">4</div><div>2</div>
101 </div>
102 <div class="flexContainer"><!-- flex-flow: column-reverse wrap-reverse -->
103 <div class="hidden">4</div><div>2</div><div>3</div><div>1</div>
104 </div>
106 <div style="clear:both"></div>
108 <!-- now using "wrap-reverse", before flex-direction: -->
109 <div class="flexContainer"><!-- flex-flow: wrap-reverse row -->
110 <div>3</div><div class="hidden">4</div><div>1</div><div>2</div>
111 </div>
112 <div class="flexContainer"><!-- flex-flow: wrap-reverse row-reverse -->
113 <div class="hidden">4</div><div>3</div><div>2</div><div>1</div>
114 </div>
115 <div class="flexContainer"> <!-- flex-flow: wrap-reverse column -->
116 <div>3</div><div>1</div><div class="hidden">4</div><div>2</div>
117 </div>
118 <div class="flexContainer"><!-- flex-flow: wrap-reverse column-reverse -->
119 <div class="hidden">4</div><div>2</div><div>3</div><div>1</div>
120 </div>
122 <div style="clear:both"></div>
124 <!-- now just specifying flex-wrap (no flex-direction) -->
125 <div class="flexContainer"><!-- flex-flow: wrap -->
126 <div>1</div><div>2</div><div>3</div><div class="hidden">4</div>
127 </div>
128 <div class="flexContainer"><!-- flex-flow: wrap-reverse -->
129 <div>3</div><div class="hidden">4</div><div>1</div><div>2</div>
130 </div>
132 </body>
133 </html>
