blob: 915513d3807d34dc19106c929a3824872515ee82 [file] [log] [blame]
hyatt@apple.com88290752009-07-17 18:36:03 +00001<style>
2div {
3 overflow:scroll;
4 position:absolute;
5}
6
7.box {
8 display:block;
9 background-color:green;
10 width:100px;
11 height:100px;
12}
13</style>
hyatt@apple.com88290752009-07-17 18:36:03 +000014
ojan@chromium.org0021cb02013-01-10 19:22:49 +000015<body>
16Test that scrollbar width is added to the intrinsic width of different display types.
ojan@chromium.org6a06c732013-01-10 20:32:24 +000017<div style="top: 100px"><span class="box"></span></div>
18<div style="top: 100px; left: 150px; display: -webkit-box;"><span class="box"></span></div>
19<div style="top: 100px; left: 300px; -webkit-writing-mode: vertical-rl; overflow-x: hidden" data-no-horizontal-scrollbar><span class="box"></span></div>
20<div style="top: 100px; left: 450px; overflow-y: hidden" data-no-vertical-scrollbar><span class="box"></span></div>
ojan@chromium.org0021cb02013-01-10 19:22:49 +000021
22<script src="../../resources/check-layout.js"></script>
23<script>
24var dummy = document.createElement('h1');
25dummy.style.overflow = 'scroll';
26document.body.appendChild(dummy);
27var scrollbarWidth = dummy.offsetWidth - dummy.clientWidth;
28document.body.removeChild(dummy);
29
30Array.prototype.forEach.call(document.querySelectorAll('div'), function(node) {
ojan@chromium.org6a06c732013-01-10 20:32:24 +000031 var width = 100;
32 if (!node.hasAttribute('data-no-vertical-scrollbar'))
33 width += scrollbarWidth;
34 node.setAttribute('data-expected-width', width);
35 var height = 100;
36 if (!node.hasAttribute('data-no-horizontal-scrollbar'))
37 height += scrollbarWidth;
38 node.setAttribute('data-expected-height', height);
ojan@chromium.org0021cb02013-01-10 19:22:49 +000039});
40checkLayout('body');
41</script>
42</body>