wpt / css / css-flexbox / flex-outer-flexbox-column-recalculate-height-on-resize-001.html

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

TestTest Source

/css/css-flexbox/flex-outer-flexbox-column-recalculate-height-on-resize-001.html

<!DOCTYPE html>
<html>
<title>CSS Flexbox: height resizing with flex-direction: column</title>
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property">
<link rel="help" href="https://crbug.com/527039">
<meta name="assert" content="This test checks that resizing the height of a layout with two nested flexboxes using 'flex-direction: column' correctly recalculates the outer box's height." />

<style>
body,
html {
  height: 100%;
}

.OuterFlexbox {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.InnerFlexbox {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  outline: 1px blue solid;
}

.InnerFlexbox-body {
  flex: 1 1 auto;
  overflow-y: hidden;
}
</style>

<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>

<body onload="update()">

<div class="OuterFlexbox" data-expected-height="250">
  <div class="InnerFlexbox" data-expected-height="250">
       <div class="InnerFlexbox-body" data-expected-height="250">
         <ul>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
           <li>Suspendisse eu nunc lectus. Curabitur.</li>
         </ul>
       </div>
  </div>
</div>

<script>
function update() {
  document.body.offsetHeight;
  document.body.style.height = '50px';
  document.body.offsetHeight;
  document.body.style.height = '250px';
  document.body.offsetHeight;
  checkLayout('.OuterFlexbox');
}
</script>
</body>
</html>