|
1 <?xml version="1.0" encoding="UTF-8"?> |
|
2 <!-- |
|
3 Any copyright is dedicated to the Public Domain. |
|
4 http://creativecommons.org/publicdomain/zero/1.0/ |
|
5 --> |
|
6 <html xmlns="http://www.w3.org/1999/xhtml"> |
|
7 <head> |
|
8 <title>CSS Reftest Reference</title> |
|
9 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> |
|
10 <style> |
|
11 div.flexbox { |
|
12 height: 200px; |
|
13 margin-right: 2px; |
|
14 border: 1px dotted black; |
|
15 float: left; |
|
16 } |
|
17 div.a { |
|
18 width: 10px; |
|
19 height: 10px; |
|
20 background: lightgreen; |
|
21 border-style: solid; |
|
22 border-color: purple; |
|
23 border-top-width: 4px; |
|
24 border-right-width: 3px; |
|
25 border-bottom-width: 2px; |
|
26 border-left-width: 1px; |
|
27 padding: 2px; |
|
28 } |
|
29 div.b { |
|
30 width: 10px; |
|
31 height: 50px; |
|
32 background: pink; |
|
33 padding: 1px 2px 3px 4px; |
|
34 margin: 5px 4px 3px 2px; |
|
35 } |
|
36 div.c { |
|
37 width: 10px; |
|
38 height: 100px; |
|
39 background: orange; |
|
40 margin: 3px; |
|
41 margin-top: 6px; /* Increased to counteract for collapsing */ |
|
42 border: 2px dashed teal; |
|
43 } |
|
44 </style> |
|
45 </head> |
|
46 <body> |
|
47 |
|
48 <!-- default (start) --> |
|
49 <div class="flexbox"> |
|
50 <div class="a"/> |
|
51 </div> |
|
52 <div class="flexbox"> |
|
53 <div class="a"/><div class="b"></div> |
|
54 </div> |
|
55 <div class="flexbox"> |
|
56 <div class="a"/><div class="b"/><div class="c"/> |
|
57 </div> |
|
58 |
|
59 <!-- flex-start --> |
|
60 <div class="flexbox"> |
|
61 <div class="a"/> |
|
62 </div> |
|
63 <div class="flexbox"> |
|
64 <div class="a"/><div class="b"/> |
|
65 </div> |
|
66 <div class="flexbox"> |
|
67 <div class="a"/><div class="b"/><div class="c"/> |
|
68 </div> |
|
69 |
|
70 <!-- flex-end --> |
|
71 <div class="flexbox"> |
|
72 <div class="a" style="margin-top: 180px"/> |
|
73 </div> |
|
74 <div class="flexbox"> |
|
75 <div class="a" style="margin-top: 118px"/><div class="b"/> |
|
76 </div> |
|
77 <div class="flexbox"> |
|
78 <div class="a" style="margin-top: 8px"/><div class="b"/><div class="c"/> |
|
79 </div> |
|
80 |
|
81 <!-- center --> |
|
82 <div class="flexbox"> |
|
83 <div class="a" style="margin-top: 90px"/> |
|
84 </div> |
|
85 <div class="flexbox"> |
|
86 <div class="a" style="margin-top: 59px"/><div class="b"/> |
|
87 </div> |
|
88 <div class="flexbox"> |
|
89 <div class="a" style="margin-top: 4px"/><div class="b"/><div class="c"/> |
|
90 </div> |
|
91 |
|
92 <!-- space-between --> |
|
93 <div class="flexbox"> |
|
94 <div class="a"/> |
|
95 </div> |
|
96 <div class="flexbox"> |
|
97 <div class="a"/><div style="margin-top: 123px"><div class="b"/></div> |
|
98 </div> |
|
99 <div class="flexbox"> |
|
100 <div class="a" |
|
101 /><div style="margin-top: 9px"><div class="b"/></div |
|
102 ><div style="margin-top: 10px"><div class="c"/></div> |
|
103 </div> |
|
104 |
|
105 <!-- space-around --> |
|
106 <div class="flexbox"> |
|
107 <div class="a" style="margin-top: 90px"/> |
|
108 </div> |
|
109 <div class="flexbox"> |
|
110 <div class="a" style="margin-top: 29.5px" |
|
111 /><div style="margin-top: 64px"><div class="b"/></div> |
|
112 </div> |
|
113 <div class="flexbox"> |
|
114 <div class="a" style="margin-top: calc(8px / 6)" |
|
115 /><div style="margin-top: calc(5px + 8px / 3)"><div class="b"/></div |
|
116 ><div style="margin-top: calc(6px + 8px / 3)"><div class="c"/></div> |
|
117 </div> |
|
118 |
|
119 </body> |
|
120 </html> |