layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-flow-1.html@deefc01c0e14
layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-flow-1.html
Thu, 15 Jan 2015 21:03:48 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Thu, 15 Jan 2015 21:03:48 +0100
- branch
- TOR_BUG_9701
- changeset 11
- deefc01c0e14
- permissions
- -rw-r--r--
Integrate friendly tips from Tor colleagues to make (or not) 4.5 alpha 3;
This includes removal of overloaded (but unused) methods, and addition of
a overlooked call to DataStruct::SetData(nsISupports, uint32_t, bool.)
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 all the values of the "flex-flow" shorthand property, with 4 flex items in each container</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/#flex-flow-property">
11 <link rel="match" href="flexbox-flex-flow-1-ref.html">
12 <meta charset="utf-8">
13 <style>
14 .flexContainer {
15 display: flex;
16 height: 60px;
17 width: 60px;
18 font: 10px sans-serif;
19 background: yellow;
20 float: left;
21 border: 1px solid black;
22 }
23 .flexContainer > * {
24 border: 1px dotted gray;
25 width: 28px;
26 height: 28px;
27 }
28 </style>
29 </head>
30 <body>
31 <!-- single-line (flex-wrap unspecified): -->
32 <div class="flexContainer" style="flex-flow: row">
33 <div>1</div><div>2</div><div>3</div><div>4</div>
34 </div>
35 <div class="flexContainer" style="flex-flow: row-reverse">
36 <div>1</div><div>2</div><div>3</div><div>4</div>
37 </div>
38 <div class="flexContainer" style="flex-flow: column">
39 <div>1</div><div>2</div><div>3</div><div>4</div>
40 </div>
41 <div class="flexContainer" style="flex-flow: column-reverse">
42 <div>1</div><div>2</div><div>3</div><div>4</div>
43 </div>
45 <div style="clear:both"></div>
47 <!-- now using "wrap", after flex-direction: -->
48 <div class="flexContainer" style="flex-flow: row wrap">
49 <div>1</div><div>2</div><div>3</div><div>4</div>
50 </div>
51 <div class="flexContainer" style="flex-flow: row-reverse wrap">
52 <div>1</div><div>2</div><div>3</div><div>4</div>
53 </div>
54 <div class="flexContainer" style="flex-flow: column wrap">
55 <div>1</div><div>2</div><div>3</div><div>4</div>
56 </div>
57 <div class="flexContainer" style="flex-flow: column-reverse wrap">
58 <div>1</div><div>2</div><div>3</div><div>4</div>
59 </div>
61 <div style="clear:both"></div>
63 <!-- now using "wrap", before flex-direction: -->
64 <div class="flexContainer" style="flex-flow: wrap row">
65 <div>1</div><div>2</div><div>3</div><div>4</div>
66 </div>
67 <div class="flexContainer" style="flex-flow: wrap row-reverse">
68 <div>1</div><div>2</div><div>3</div><div>4</div>
69 </div>
70 <div class="flexContainer" style="flex-flow: wrap column">
71 <div>1</div><div>2</div><div>3</div><div>4</div>
72 </div>
73 <div class="flexContainer" style="flex-flow: wrap column-reverse">
74 <div>1</div><div>2</div><div>3</div><div>4</div>
75 </div>
77 <div style="clear:both"></div>
79 <!-- now using "wrap-reverse", after flex-direction: -->
80 <div class="flexContainer" style="flex-flow: row wrap-reverse">
81 <div>1</div><div>2</div><div>3</div><div>4</div>
82 </div>
83 <div class="flexContainer" style="flex-flow: row-reverse wrap-reverse">
84 <div>1</div><div>2</div><div>3</div><div>4</div>
85 </div>
86 <div class="flexContainer" style="flex-flow: column wrap-reverse">
87 <div>1</div><div>2</div><div>3</div><div>4</div>
88 </div>
89 <div class="flexContainer" style="flex-flow: column-reverse wrap-reverse">
90 <div>1</div><div>2</div><div>3</div><div>4</div>
91 </div>
93 <div style="clear:both"></div>
95 <!-- now using "wrap-reverse", before flex-direction: -->
96 <div class="flexContainer" style="flex-flow: wrap-reverse row">
97 <div>1</div><div>2</div><div>3</div><div>4</div>
98 </div>
99 <div class="flexContainer" style="flex-flow: wrap-reverse row-reverse">
100 <div>1</div><div>2</div><div>3</div><div>4</div>
101 </div>
102 <div class="flexContainer" style="flex-flow: wrap-reverse column">
103 <div>1</div><div>2</div><div>3</div><div>4</div>
104 </div>
105 <div class="flexContainer" style="flex-flow: wrap-reverse column-reverse">
106 <div>1</div><div>2</div><div>3</div><div>4</div>
107 </div>
109 <div style="clear:both"></div>
111 <!-- now just specifying flex-wrap (no flex-direction) -->
112 <div class="flexContainer" style="flex-flow: wrap">
113 <div>1</div><div>2</div><div>3</div><div>4</div>
114 </div>
115 <div class="flexContainer" style="flex-flow: wrap-reverse">
116 <div>1</div><div>2</div><div>3</div><div>4</div>
117 </div>
119 </body>
120 </html>
