43 lines
1.4 KiB
HTML
43 lines
1.4 KiB
HTML
<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>
|