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