| <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" data-expected-width=100 data-expected-height=100><span class="box"></span></div> |
| <div style="display: -webkit-box; top:100px; left: 150px;" data-expected-width=100 data-expected-height=100><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) { |
| node.setAttribute('data-expected-width', 100 + scrollbarWidth); |
| node.setAttribute('data-expected-height', 100 + scrollbarWidth); |
| }); |
| checkLayout('body'); |
| </script> |
| </body> |
