blob: 915513d3807d34dc19106c929a3824872515ee82 [file] [log] [blame]
<style>
div {
overflow:scroll;
position:absolute;
}
.box {
display:block;
background-color:green;
width:100px;
height:100px;
}
</style>
<body>
Test that scrollbar width is added to the intrinsic width of different display types.
<div style="top: 100px"><span class="box"></span></div>
<div style="top: 100px; left: 150px; display: -webkit-box;"><span class="box"></span></div>
<div style="top: 100px; left: 300px; -webkit-writing-mode: vertical-rl; overflow-x: hidden" data-no-horizontal-scrollbar><span class="box"></span></div>
<div style="top: 100px; left: 450px; overflow-y: hidden" data-no-vertical-scrollbar><span class="box"></span></div>
<script src="../../resources/check-layout.js"></script>
<script>
var dummy = document.createElement('h1');
dummy.style.overflow = 'scroll';
document.body.appendChild(dummy);
var scrollbarWidth = dummy.offsetWidth - dummy.clientWidth;
document.body.removeChild(dummy);
Array.prototype.forEach.call(document.querySelectorAll('div'), function(node) {
var width = 100;
if (!node.hasAttribute('data-no-vertical-scrollbar'))
width += scrollbarWidth;
node.setAttribute('data-expected-width', width);
var height = 100;
if (!node.hasAttribute('data-no-horizontal-scrollbar'))
height += scrollbarWidth;
node.setAttribute('data-expected-height', height);
});
checkLayout('body');
</script>
</body>