|
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 { height: 20px; border: 0; } |
|
12 div.flexbox { |
|
13 width: 200px; |
|
14 margin-bottom: 2px; |
|
15 } |
|
16 |
|
17 <!-- customizations for flexbox border/padding --> |
|
18 .borderA { |
|
19 border-style: dashed; |
|
20 border-color: purple; |
|
21 border-top-width: 6px; |
|
22 border-right-width: 4px; |
|
23 border-bottom-width: 2px; |
|
24 border-left-width: 8px; |
|
25 } |
|
26 |
|
27 .borderB { |
|
28 border-style: dashed; |
|
29 border-color: purple; |
|
30 border-top-width: 4px; |
|
31 border-right-width: 5px; |
|
32 border-bottom-width: 6px; |
|
33 border-left-width: 7px; |
|
34 } |
|
35 |
|
36 .paddingA { |
|
37 padding: 4px 3px 2px 1px; |
|
38 } |
|
39 |
|
40 .paddingB { |
|
41 padding: 8px 11px 14px 17px; |
|
42 } |
|
43 |
|
44 div.child1 { |
|
45 display: inline-block; |
|
46 width: 74px; |
|
47 background: lightgreen; |
|
48 border-style: dotted; |
|
49 border-left-width: 2px; |
|
50 border-right-width: 4px; |
|
51 } |
|
52 div.child2 { |
|
53 display: inline-block; |
|
54 width: 110px; |
|
55 background: yellow; |
|
56 border-style: dashed; |
|
57 border-left-width: 7px; |
|
58 border-right-width: 3px; |
|
59 } |
|
60 </style> |
|
61 </head> |
|
62 <body> |
|
63 <div class="flexbox borderA" |
|
64 ><div class="child1"/><div class="child2"/></div> |
|
65 <div class="flexbox borderA paddingA" |
|
66 ><div class="child1"/><div class="child2"/></div> |
|
67 <div class="flexbox borderA paddingB" |
|
68 ><div class="child1"/><div class="child2"/></div> |
|
69 <div class="flexbox borderB" |
|
70 ><div class="child1"/><div class="child2"/></div> |
|
71 <div class="flexbox borderB paddingA" |
|
72 ><div class="child1"/><div class="child2"/></div> |
|
73 <div class="flexbox borderB paddingB" |
|
74 ><div class="child1"/><div class="child2"/></div> |
|
75 <div class="flexbox paddingA" |
|
76 ><div class="child1"/><div class="child2"/></div> |
|
77 <div class="flexbox paddingB" |
|
78 ><div class="child1"/><div class="child2"/></div> |
|
79 </body> |
|
80 </html> |
|
81 |