Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- Manifest: layout/reftests/svg/sizing/reftest.list
<!--↩
Any copyright is dedicated to the Public Domain.↩
-->↩
<head>↩
↩
↩
<title>Test: percentage height on absolutely positioned SVG</title>↩
↩
<!--↩
This testcase checks that percentage values for height on absolutely↩
positioned SVG will be computed relative to their containing block, and↩
not relative to the content area of the user agent.↩
-->↩
↩
<style type="text/css">↩
↩
html, body {↩
padding: 0;↩
border: 0;↩
margin: 0;↩
height: 100%;↩
background: lime;↩
}↩
↩
</style>↩
</head>↩
<body>↩
↩
<!-- create containing block for absolutely positioned children -->↩
<div style="position:relative;">↩
↩
<!-- div to expand parent div to a computed height of 20px -->↩
<div style="height:20px; background:red;"/>↩
↩
<!-- absolutely positioned SVG - the explicit 100% percentage height↩
should compute as a percentage of the parent div's computed height,↩
not as a percentage of the body's height! I.e. no red should show.↩
-->↩
<svg xmlns="http://www.w3.org/2000/svg" style="position:absolute; top:0; width: 100%; height: 100%">↩
<rect width="100%" height="100%" fill="red"/>↩
<rect width="100%" height="20px" fill="lime"/>↩
</svg>↩
↩
</div>↩
↩
</body>↩
</html>↩