src/third_party/WebKit/LayoutTests/compositing/layer-creation/scroll-partial-update.html

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