OLD | NEW |
| (Empty) |
1 <html> | |
2 <head> | |
3 <style> | |
4 div { | |
5 margin: 0px; | |
6 } | |
7 | |
8 .container { | |
9 border: thin solid blue; | |
10 width: 300px; | |
11 } | |
12 | |
13 .block { | |
14 background-color: green; | |
15 margin-top: 4px; | |
16 margin-bottom: 6px; | |
17 border: 1px dashed black; | |
18 -webkit-writing-mode: horizontal-bt; | |
19 } | |
20 | |
21 .self_collapse { | |
22 margin-top: 2px; | |
23 margin-bottom: 4px; | |
24 height: 0px; | |
25 } | |
26 | |
27 .collapse_top { | |
28 -webkit-margin-top-collapse: collapse; | |
29 } | |
30 | |
31 .collapse_bottom { | |
32 -webkit-margin-bottom-collapse: collapse; | |
33 } | |
34 | |
35 .collapse_top:before, .collapse_bottom:after { | |
36 content: "Collapse"; | |
37 } | |
38 | |
39 .discard_top { | |
40 -webkit-margin-top-collapse: discard; | |
41 } | |
42 | |
43 .discard_bottom { | |
44 -webkit-margin-bottom-collapse: discard; | |
45 } | |
46 | |
47 .discard_top:before, .discard_bottom:after { | |
48 content: "Discard"; | |
49 } | |
50 | |
51 .separate_top { | |
52 -webkit-margin-top-collapse: separate; | |
53 } | |
54 | |
55 .separate_bottom { | |
56 -webkit-margin-bottom-collapse: separate; | |
57 } | |
58 | |
59 .separate_top:before, .separate_bottom:after { | |
60 content: "Separate"; | |
61 } | |
62 </style> | |
63 </head> | |
64 <body> | |
65 <p>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=108
168">Implement the -webkit-margin-collapse properties correct rendering</a>.</p> | |
66 <p>This ref test covers basic collapsing behavior between siblin
g boxes when using -webkit-margin-collapse. The blocks have lr-bt writing mode.<
/p> | |
67 <div class="container"> | |
68 <div class="block collapse_top collapse_bottom"><br/></d
iv> | |
69 <div class="self_collapse"></div> | |
70 <div class="block collapse_top collapse_bottom"><br/></d
iv> | |
71 <div class="self_collapse"></div> | |
72 <div class="block separate_top collapse_bottom"><br/></d
iv> | |
73 <div class="self_collapse"></div> | |
74 <div class="block discard_top discard_bottom"><br/></div
> | |
75 <div class="self_collapse"></div> | |
76 <div class="block collapse_top discard_bottom"><br/></di
v> | |
77 <div class="self_collapse"></div> | |
78 <div class="block separate_top discard_bottom"><br/></di
v> | |
79 <div class="self_collapse"></div> | |
80 <div class="block discard_top separate_bottom"><br/></di
v> | |
81 <div class="self_collapse"></div> | |
82 <div class="block collapse_top separate_bottom"><br/></d
iv> | |
83 <div class="self_collapse"></div> | |
84 <div class="block separate_top separate_bottom"><br/></d
iv> | |
85 <div class="self_collapse"></div> | |
86 <div class="block discard_top collapse_bottom"><br/></di
v> | |
87 </div> | |
88 </body> | |
89 </html> | |
OLD | NEW |