mirror of
https://github.com/servo/servo
synced 2026-04-28 18:37:39 +02:00
69 lines
2.7 KiB
HTML
69 lines
2.7 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: Height determination for block-level non-replaced elements in normal flow when 'overflow' computes to 'visible' and elements' margins do not collapse</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 block-non-replaced-height-009"; }
|
|
@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/visudet.html#normal-block" />
|
|
|
|
<meta name="flags" content="" />
|
|
<meta name="assert" content="When a block-level non-replaced element is in normal flow, 'overflow' computes to 'visible', the 'height' is 'auto' and top and bottom margins do not collapse. The 'height' is the distance from the top of the topmost margin edge of the content to the bottom edge of the bottom (possibly collapsed) margin of its last in-flow child, if the child's bottom margin does not collapse with the element's bottom margin." />
|
|
<style type="text/css">
|
|
#div1
|
|
{
|
|
position: relative;
|
|
}
|
|
#div2
|
|
{
|
|
background: blue;
|
|
border-bottom: 0.25in solid blue;
|
|
border-top: 0.25in solid blue;
|
|
}
|
|
#div2, #div3, #div4, #div5
|
|
{
|
|
width: 1in;
|
|
}
|
|
#div3, #div4
|
|
{
|
|
background: blue;
|
|
height: 0.25in;
|
|
}
|
|
#div3
|
|
{
|
|
border-top: 0.25in solid blue;
|
|
margin-top: 0.25in;
|
|
}
|
|
#div4
|
|
{
|
|
border-bottom: 0.25in solid blue;
|
|
margin-bottom: 0.25in;
|
|
}
|
|
#div5
|
|
{
|
|
background: blue;
|
|
height: 2in;
|
|
left: 1in;
|
|
position: absolute;
|
|
top: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<p>Test passes if there is a blue square.</p>
|
|
<div id="div1">
|
|
<div id="div2">
|
|
<div id="div3"></div>
|
|
<div id="div4"></div>
|
|
</div>
|
|
<div id="div5"></div>
|
|
</div>
|
|
</body>
|
|
</html> |