<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<title>When a block inside a flexbox adds scrollbars due to overflow, the parent flexbox should re-flex based on the child size including scrollbars.</title>
<style>
.vflex {
  display: flex;
  flex-direction: column;
  max-width: 200px;
  margin: 10px 0 10px 0;
}
.hflex {
  display: flex;
  flex-direction: row;
  max-height: 200px;
  margin: 10px 0 10px 0;
}
.hbox {
  overflow-x: auto;
  white-space: nowrap;
}
.vbox {
  overflow-y: auto;
  max-height: 200px;
}
.intrinsic-height-box {
  min-height: min-content;
  overflow: auto;
  flex-basis: 0;
}
.rect {
  min-height: 100px;
  min-width: 100px;
  background-color: green;
  display: inline-block;
}
</style>

<div class="vflex">
  <div class="hbox">
    <div class="rect"></div>
    <div class="rect"></div>
  </div>
</div>

<div class="vflex">
  <div class="intrinsic-height-box">
    <div class="rect" style="min-width: 300px"></div>
  </div>
</div>

<div class="hflex">
  <div class="vbox">
    <div class="rect" style="min-height: 300px;"></div>
  </div>
</div>

<div style="display: flex; width: 100px; height: 100px;">
  <div id="inner" style="flex: none; height: 100px; overflow: auto;">
    <div style="width: 100px; height: 150px; background-color: green;"></div>
  </div>
</div>

<!-- This div is only for measuring scrollbar size -->
<div id="measure" style="height: 100px; width: 100px; display: inline-box; overflow: auto;">
  <div style="min-height: 300px;"></div>
</div>

<script>
  var hbox = document.querySelector('.hbox');
  test(function() {
    assert_equals(hbox.parentNode.clientHeight, hbox.parentNode.scrollHeight);
    assert_equals(hbox.clientHeight, hbox.scrollHeight);
  }, 'hbox dimensions');

  var intrinsicHeightBox = document.querySelector('.intrinsic-height-box');
  test(function() {
    assert_equals(intrinsicHeightBox.clientHeight, intrinsicHeightBox.scrollHeight);
  }, 'intrinsicHeightBox dimensions');

  var measure = document.getElementById('measure');
  var scrollbarSize = measure.offsetWidth - measure.clientWidth;
  test(function() {
    assert_not_equals(scrollbarSize, 0);
  }, 'scrollbarSize should not be zero');

  var inner = document.getElementById('inner');
  test(function() {
    assert_equals(inner.clientWidth, 100);
    assert_equals(inner.offsetWidth, 100 + scrollbarSize);
  }, 'inner dimensions');

  var vbox = document.querySelector('.vbox');
  test(function() {
    assert_equals(vbox.clientWidth, 100);
    assert_equals(vbox.offsetWidth, 100 + scrollbarSize);
  }, 'vbox dimensions');
</script>