Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/CSS2/margin-padding-clear/margin-collapse-041.xht - WPT Dashboard Interop Dashboard
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>CSS Test: margin collapsing - clear with descendants margins</title>
<!--
Inspired by
-->
<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>