mirror of
https://github.com/servo/servo
synced 2026-04-28 18:37:39 +02:00
63 lines
2.3 KiB
HTML
63 lines
2.3 KiB
HTML
<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
<title>CSS Test: Clearance calculations - clear box non-collapsing margins with larger clearance than margins</title>
|
|
<style type="text/css">
|
|
@page { font: italic 8pt sans-serif; color: gray;
|
|
margin: 7%;
|
|
counter-increment: page;
|
|
@top-left { content: "CSS 2.1 Conformance Test Suite"; }
|
|
@top-right { content: "Test clear-clearance-calculation-002"; }
|
|
@bottom-right { content: counter(page); }
|
|
}
|
|
</style>
|
|
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
|
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" />
|
|
<link rel="match" href="reference/clear-clearance-calculation-002-ref.xht" />
|
|
|
|
<meta name="flags" content="ahem image" />
|
|
<meta name="assert" content="If after margin collapsing the position of the cleared element is above or hypothetically positioned within the layout position of the float. Then the cleared element is positioned directly below the floated element." />
|
|
<!-- C1 = H-M2 -->
|
|
<!-- C2 = Max(M1, M2) - M1 - M2 -->
|
|
<style type="text/css">
|
|
div
|
|
{
|
|
font: 20px/1em Ahem;
|
|
width: 5em;
|
|
}
|
|
#parent
|
|
{
|
|
background: url('support/clear-clearance-calculation-002.png');
|
|
min-height: 8em;
|
|
}
|
|
div div
|
|
{
|
|
background: green;
|
|
height: 1em;
|
|
}
|
|
#div1
|
|
{
|
|
margin-bottom: 4em;
|
|
}
|
|
#div2
|
|
{
|
|
float: left;
|
|
height: 2em;
|
|
margin: 0;
|
|
}
|
|
#div3
|
|
{
|
|
clear: left;
|
|
margin-top: 3em;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<p>Test passes if there is no red.</p>
|
|
<div id="parent">
|
|
<div id="div1"></div>
|
|
<div id="div2"></div>
|
|
<div id="div3"></div>
|
|
</div>
|
|
</body>
|
|
</html> |