| |
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 div.flexbox { |
| |
13 border: 1px dashed black; |
| |
14 width: 60px; |
| |
15 height: 20px; |
| |
16 margin: 2px; |
| |
17 float: left; |
| |
18 } |
| |
19 div.item { |
| |
20 width: 28px; |
| |
21 border: 1px solid blue; |
| |
22 background: lightblue; |
| |
23 } |
| |
24 div.fullCrossSize { |
| |
25 height: 18px; |
| |
26 } |
| |
27 div.halfCrossSize { |
| |
28 height: 8px; |
| |
29 } |
| |
30 div.shrunkMainSize { |
| |
31 width: 18px; |
| |
32 } |
| |
33 </style> |
| |
34 </head> |
| |
35 <body> |
| |
36 <div class="flexbox"> |
| |
37 <div class="item fullCrossSize"></div> |
| |
38 </div> |
| |
39 <div class="flexbox"> |
| |
40 <div class="item fullCrossSize"></div> |
| |
41 </div> |
| |
42 <div class="flexbox"> |
| |
43 <div class="item fullCrossSize"></div> |
| |
44 </div> |
| |
45 <div class="flexbox"> |
| |
46 <div class="item fullCrossSize"></div> |
| |
47 </div> |
| |
48 <div class="flexbox"> |
| |
49 <div class="item fullCrossSize"></div> |
| |
50 </div> |
| |
51 <div style="clear: both"></div> |
| |
52 |
| |
53 <div class="flexbox"> |
| |
54 <div class="item fullCrossSize" style="float: left"></div> |
| |
55 <div class="item fullCrossSize" style="float: left"></div> |
| |
56 </div> |
| |
57 <div class="flexbox"> |
| |
58 <div class="item fullCrossSize" style="float: left"></div> |
| |
59 <div class="item fullCrossSize" style="float: left"></div> |
| |
60 </div> |
| |
61 <div class="flexbox"> |
| |
62 <div class="item fullCrossSize" style="float: left"></div> |
| |
63 <div class="item fullCrossSize" style="float: left"></div> |
| |
64 </div> |
| |
65 <div class="flexbox"> |
| |
66 <div class="item fullCrossSize" style="float: left"></div> |
| |
67 <div class="item fullCrossSize" style="float: left"></div> |
| |
68 </div> |
| |
69 <div class="flexbox"> |
| |
70 <div class="item fullCrossSize" style="float: left"></div> |
| |
71 <div class="item fullCrossSize" style="float: left"></div> |
| |
72 </div> |
| |
73 <div style="clear: both"></div> |
| |
74 |
| |
75 <div class="flexbox"> |
| |
76 <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> |
| |
77 <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> |
| |
78 <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> |
| |
79 </div> |
| |
80 <div class="flexbox"> |
| |
81 <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> |
| |
82 <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> |
| |
83 <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> |
| |
84 </div> |
| |
85 <div class="flexbox"> |
| |
86 <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> |
| |
87 <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> |
| |
88 <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> |
| |
89 </div> |
| |
90 <div class="flexbox"> |
| |
91 <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> |
| |
92 <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> |
| |
93 <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> |
| |
94 </div> |
| |
95 <div class="flexbox"> |
| |
96 <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> |
| |
97 <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> |
| |
98 <div class="item fullCrossSize shrunkMainSize" style="float: left"></div> |
| |
99 </div> |
| |
100 </body> |
| |
101 </html> |