Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-sizing/stretch/stretch-anonymous-block-001.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Test: 'stretch' heights resolve through an anonymous block wrapper</title>
<link rel="match" href="stretch-anonymous-block-001-ref.html">
<meta name="assert"
content="When a block container has mixed block-level and inline-level children, the inline children are wrapped in an anonymous block box. height:stretch on those inline children should still resolve against the (non-anonymous) containing block, not be treated as indefinite due to the anonymous block wrapper sitting between.">
<style>
.container {
height: 200px;
}
iframe {
box-sizing: border-box;
height: stretch;
width: 40px;
border: 5px solid blue;
margin: 0;
background: cyan;
}
</style>
<body>
<div class="container">
<!-- The block-level <div> forces .container's children to be non-inline,
wrapping the following inline iframe in an anonymous block box. -->
<div style="height: 0"></div>
<iframe></iframe>
</div>
</body>