1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Margin collapsing with clearance - margins of a 'collapsed through' box with clearance do not collapse with parent block's bottom margin</title>
<link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins" />
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#normal-block" />
<link rel="bookmark" href="http://lists.w3.org/Archives/Public/public-css-testsuite/2013Oct/0009.html" title="Issue with margin-collapse-clear-012.htm and margin-collapse-clear-013.htm" />
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<link rel="author" title="Bruno Fassino" href="fassino[at]gmail.com" />
<link rel="match" href="margin-collapse-clear-012-ref.xht" />
<meta content="When an element has had clearance applied to it and its own margins collapse, these margins do not collapse with the bottom margin of the parent block" name="assert" />
<style type="text/css"><![CDATA[
#rel-pos-wrapper {position: relative;}
#parent-lime
{
background-color: lime;
border-top: black solid 1px;
width: 50%;
}
#float-left-blue
{
background-color: blue;
float: left;
height: 100px;
width: 100px;
}
#clear-left
{
clear: left;
margin-bottom: 140px;
margin-top: 40px;
}
#next-yellow
{
background-color: yellow;
height: 100px;
}
.ref-overlapped-red
{
background-color: red;
position: absolute;
z-index: -1;
}
#ref1
{
height: 200px;
top: 1px;
width: 50%;
}
#ref2
{
height: 100px;
top: 201px;
width: 100%;
}
]]></style>
</head>
<body>
<p>Test passes if there is <strong>no red</strong>.</p>
<div id="rel-pos-wrapper">
<!--
clearance
+
margin-top of #clear-left (40px)
====================================
height of #float-left-blue (100px)
therefore, clearance is equal to +60px
-->
<!--
#parent-lime should have height 200px, sum of:
100px : height of #float-left-blue
+
(140px - 40px) : part of #clear-left's margin-bottom
exceeding #clear-left's margin-top
=======
200px
The position of the top border edge of the div#clear-left
is where it would have been if the element had a
non-zero bottom border. The margins of div#clear-left
collapse together to 140px and the top border edge of
div#clear-left is at 40px inside of it. Clearance is
added at such position, not to the whole 140px.
Issue with margin-collapse-clear-012.htm and margin-collapse-clear-013.htm
http://lists.w3.org/Archives/Public/public-css-testsuite/2013Oct/0012.html
-->
<div id="parent-lime">
<div id="float-left-blue"></div>
<div id="clear-left"></div>
</div>
<!--
#next-yellow should immediately follow #parent-lime (no margins in between)
-->
<div id="next-yellow"></div>
<!--
#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.
-->
<div id="ref1" class="ref-overlapped-red"></div>
<div id="ref2" class="ref-overlapped-red"></div>
</div>
</body>
</html>
|
