Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/CSS2/normal-flow/inline-block-replaced-width-007.xht - WPT Dashboard Interop Dashboard
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
<head>
<title>CSS Test: width of inline-block replaced element with no intrinsic height, no intrinsic width and no intrinsic ratio</title>
<link rel="author" title="GĂ©rard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<link rel="match" href="../positioning/absolute-replaced-width-003a-ref.xht" />
<meta name="flags" content="nonHTML svg" />
<meta name="assert" content="If an inline-block replaced element (like the svg element in this test) has no intrinsic width and no intrinsic height, then the used value of 'width' becomes 300px and the used value of 'height' becomes 150px." />
<style type="text/css"><![CDATA[
div
{
height: 225px;
width: 450px;
}
svg#overlapped-red
{
display: inline-block;
vertical-align: top;
}
div#overlapping-green
{
background-color: green;
bottom: 150px;
height: 150px;
position: relative;
width: 300px;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green rectangle and <strong>no red</strong>.</p>
<div>
<svg:svg version="1.1" xmlns:svg="http://www.w3.org/2000/svg" baseProfile="full" id="overlapped-red">
<svg:rect x="0" y="0" width="600" height="300" fill="red" />
</svg:svg>
<div id="overlapping-green"></div>
</div>
</body>
</html>