overflow-auto-resizes-correctly.html

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

<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 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>
chromium/third_party/blink/web_tests/css3/flexbox/overflow-auto-resizes-correctly.html
