Blitz - WPT: stretch-quirk-002.html

wpt / css / css-sizing / stretch / stretch-quirk-002.html

/css/css-sizing/stretch/stretch-quirk-002.html

<!-- no doctype, to trigger quirks mode -->
<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="help" href="https://quirks.spec.whatwg.org/#the-body-element-fills-the-html-element-quirk">
<link rel="match" href="stretch-quirk-002-ref.html">
<meta name="assert"
      content="When body 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 body, not be treated as indefinite due to the anonymous block wrapper sitting between.">
<style>
  body {
    margin: 0;
  }
  iframe {
    box-sizing: border-box;
    height: stretch;
    width: 40px;
    border: 5px solid blue;
    margin: 0;
    background: cyan;
  }
</style>
<body>
  <!-- The block-level <div> forces body's children to be non-inline,
       wrapping the following inline iframe in an anonymous block box. -->
  <div style="height: 0"></div>
  <iframe></iframe>
</body>

/css/css-sizing/stretch/stretch-quirk-002-ref.html

<!-- no doctype, to trigger quirks mode -->
<meta charset="utf-8">
<title>CSS Reference Case</title>
<style>
  body {
    margin: 0;
  }
  iframe {
    box-sizing: border-box;
    height: 100vh;
    width: 40px;
    border: 5px solid blue;
    margin: 0;
    background: cyan;
  }
</style>
<body>
  <div style="height: 0"></div>
  <iframe></iframe>
</body>