third_party/WebKit/LayoutTests/fast/css/positioned-overflow-scroll.html

   1 <style>
   2 div {
   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>
  14
  15 <body>
  16 Test that scrollbar width is added to the intrinsic width of different display types.
  17 <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>
  21
  22 <script src="../../resources/check-layout.js"></script>
  23 <script>
  24 var dummy = document.createElement('h1');
  25 dummy.style.overflow = 'scroll';
  26 document.body.appendChild(dummy);
  27 var scrollbarWidth = dummy.offsetWidth - dummy.clientWidth;
  28 document.body.removeChild(dummy);
  29
  30 Array.prototype.forEach.call(document.querySelectorAll('div'), function(node) {
  31     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);
  39 });
  40 checkLayout('body');
  41 </script>
  42 </body>