Blitz - WPT: stretch-anonymous-block-001.html

wpt / css / css-sizing / stretch / stretch-anonymous-block-001.html

/css/css-sizing/stretch/stretch-anonymous-block-001.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Test: 'stretch' heights resolve through an anonymous block wrapper</title>
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#sizing-values">
<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>

/css/css-sizing/stretch/stretch-anonymous-block-001-ref.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Reference Case</title>
<style>
  .container {
    height: 200px;
  }
  iframe {
    box-sizing: border-box;
    height: 200px;
    width: 40px;
    border: 5px solid blue;
    margin: 0;
    background: cyan;
  }
</style>
<body>
  <div class="container">
    <div style="height: 0"></div>
    <iframe></iframe>
  </div>
</body>