blob: 742d93f4a6f08fa1d0765fce417e7b304d9d180d (
plain)
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
|
<!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 - clear with descendants margins</title>
<!--
Inspired by
http://test.csswg.org/suites/css2.1/20110323/html4/c5525-fltmult-000.htm
-->
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<link rel="reviewer" title="Arron Eicholz" href="arronei(at)gmail.com" /> <!-- 2013-07-30 -->
<link rel="bookmark" href="http://lists.w3.org/Archives/Public/public-css-testsuite/2012Jan/0022.html" title="[RC6] c5525-fltmult-000 imprecise and failed by several browsers" />
<link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins" title="8.3.1 Collapsing margins" />
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
<meta name="assert" content="An element on which 'clear' is set to a value other than 'none' can have its own margin-top collapse with the margin-top of its first inflow block-level child (which may also be the resulting combined margin of its own subtree of descendants) as long as no line boxes, no clearance, no padding and no border separate them." />
<style type="text/css"><![CDATA[
body {margin: 8px;}
p {margin: 1em 0em;}
div#overlapped-red
{
background-color: red;
height: 100px;
position: absolute;
width: 100px;
z-index: -1;
}
div#floated-left
{
background-color: green;
color: green;
float: left;
font: 1em/1.25 serif;
padding: 15px;
/*
15px : padding-top
+
20px : line box height
+
15px : padding-bottom
=====
50px
*/
width: 70px;
}
div#cleared-left {clear: left;}
div#child-of-cleared-left
{
background-color: red;
margin-top: 50px;
width: 100px;
}
div#grandchild-of-cleared-left
{
background-color: red;
margin-top: 40px;
}
div#grand-grandchild-of-cleared-left
{
background-color: green;
color: green;
height: 50px;
margin-top: 30px;
}
/*
The idea is to have div#cleared-left's margin-top collapse
with div#child-of-clear-left's margin-top. The margin
collapsing of margin-tops of descendants of div#cleared-left
should occur before calculating clearance.
*/
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="overlapped-red"></div>
<div id="floated-left">flt lft</div>
<div id="cleared-left">
<div id="child-of-cleared-left">
<div id="grandchild-of-cleared-left">
<div id="grand-grandchild-of-cleared-left">ggchld</div>
</div>
</div>
</div>
</body>
</html>
|
