third_party/WebKit/LayoutTests/compositing/layer-creation/overflow-scroll-overlap.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style type="text/css" media="screen">
   6
   7     .composited {
   8       height: 30px;
   9       width: 30px;
  10       transform:translateZ(0);
  11     }
  12
  13     .overflow {
  14       position: absolute;
  15       top: 20px;
  16       left: 20px;
  17       overflow-y: scroll;
  18       height: 200px;
  19       width: 300px;
  20       border: solid;
  21     }
  22
  23     .box {
  24       position: relative;
  25       height: 100px;
  26       width: 200px;
  27       margin: 55px 20px;
  28       background-color: blue;
  29       font-size: 18pt;
  30       text-align: center;
  31     }
  32
  33     #results {
  34       margin-top: 200px;
  35     }
  36   </style>
  37   <script type="text/javascript" charset="utf-8">
  38
  39     if (window.testRunner) {
  40       testRunner.dumpAsText();
  41       testRunner.waitUntilDone();
  42     }
  43
  44     function doTest()
  45     {
  46       window.setTimeout(function() {
  47         var scrollDiv = document.getElementById('scroller');
  48         scrollDiv.scrollTop = 200;
  49
  50
  51         if (window.testRunner) {
  52           document.getElementById('results').innerText = window.internals.layerTreeAsText(document);
  53           testRunner.notifyDone();
  54         }
  55       }, 150);
  56     }
  57
  58     window.addEventListener('load', doTest, false);
  59   </script>
  60 </head>
  61 <body>
  62
  63   <div class="composited"></div>
  64
  65   <div id="scroller" class="overflow">
  66     <div class="box" style="width: 200px";></div>
  67     <div class="box" style="width: 210px;"></div>
  68   </div>
  69   <pre id="results"></pre>
  70
  71 </body>
  72 </html>