wpt / css / css-flexbox / flex-wrap-006.html

Status: FAIL | Duration: 14ms | Subtests: 0/1 | Open test on wpt.live | Open ref on wpt.live | wpt.fyi

TestRefTest SourceRef Source

/css/css-flexbox/flex-wrap-006.html

<!DOCTYPE html>
<title>CSS Flexbox Test: Tests correct block size with percentages and dynamic changes</title>
<link rel="author" title="Google LLC" href="http://www.google.com">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=999253" />
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#cross-sizing" />

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<!-- Each item should stretch to the size of the flex line. Because the first
     item has no explicit height, the percentage should resolve to zero in
     the line height calculation stage, so the second item should determine
     the total height (500px at first, 100px after the change). When the first
     item gets relaid out for stretching, the percentage can resolve.
     The bug that motivated this testcase resolved the line height using
     the previous post-stretching height of the first flex item (and
     therefore resolves the percentage against 500px), which is incorrect.
  -->
<div id="flex" style="display: flex; flex-wrap: wrap;">
  <div>
    <div style="height: 100%; background: green; width: 100px;"></div>
  </div>
  <div style="height: 500px;" id="item"></div>
</div>

<script>
var flex = document.getElementById("flex");
flex.offsetHeight;
var item2 = document.getElementById("item");
item2.style.height = "100px";
</script>

/css/reference/ref-filled-green-100px-square.xht

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>CSS Reftest Reference</title>
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
  <style type="text/css"><![CDATA[
  div
  {
  background-color: green;
  height: 100px;
  width: 100px;
  }
  ]]></style>
 </head>
 <body>
  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
  <div></div>
 </body>
</html>