1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3
4 <head>
5
6 <title>CSS Test: Margin collapsing with clearance - clearance may be negative</title>
7
8 <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins">
9 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#normal-block">
10 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
11 <link rel="author" title="Bruno Fassino" href="fassino[at]gmail.com">
12 <meta content="Clearance is created above the top margin of the element with clear set. Clearance can be negative. Clearance stops the collapsing of the element's margins with the preceding siblings' margins and with the parent block's bottom margin." name="assert">
13 <meta content="" name="flags">
14
15 <style type="text/css">
16 #relatively-positioned-wrapper
17 {
18 position: relative;
19 }
20
21 #parent-lime
22 {
23 background-color: lime;
24 width: 50%;
25 }
26
27 #sole-preceding-sibling-aqua
28 {
29 background-color: aqua;
30 height: 60px;
31 margin-bottom: 40px;
32 }
33
34 #float-left-blue
35 {
36 background-color: blue;
37 float: left;
38 height: 100px;
39 width: 100px;
40 }
41
42 #clear-left
43 {
44 clear: left;
45 margin-top: 120px;
46 }
47
48 #next-yellow
49 {
50 background-color: yellow;
51 height: 100px;
52 }
53
54 .ref-overlapped-red
55 {
56 background-color: red;
57 position: absolute;
58 z-index: -1;
59 }
60
61 #ref1
62 {
63 height: 200px;
64 top: 0px;
65 width: 50%;
66 }
67
68 #ref2
69 {
70 height: 100px;
71 top: 200px;
72 width: 100%;
73 }
74 </style>
75
76 </head>
77
78 <body>
79
80 <p>Test passes if there is no red visible on the page.</p>
81
82 <div id="relatively-positioned-wrapper">
83
84 <!--
85 #parent-lime should have height 200px, sum of:
86 height of #sole-preceding-sibling-aqua plus its margin-bottom (100px)
87 height of #float-left-blue (100px)
88 -->
89
90 <div id="parent-lime">
91 <div id="sole-preceding-sibling-aqua"></div>
92 <div id="float-left-blue"></div>
93 <div id="clear-left"></div>
94 </div>
95
96 <!--
97 clearance + #clear-left's margin-top (120px) = #float-left-blue's height (100px);
98 therefore, clearance is -20px
99 -->
100
101 <div id="next-yellow"></div>
102
103 <!--
104 #ref1 and #ref2 boxes create a sort of 'reference rendering' where #ref1 should be covered, overlapped by #parent-lime while #ref2 should be covered, overlapped by #next-yellow.
105 -->
106
107 <div id="ref1" class="ref-overlapped-red"></div>
108 <div id="ref2" class="ref-overlapped-red"></div>
109
110 </div>
111
112 </body>
113 </html>