| <!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> |
