src/third_party/WebKit/LayoutTests/compositing/squashing/universal-accelerated-overflow-scrolling.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <style>
   5       #container {
   6         width: 300px;
   7         height: 300px;
   8         border: 3px solid black;
   9         overflow: scroll;
  10       }
  11
  12       .card {
  13         width: 100px;
  14         height: 100px;
  15         margin: 5px;
  16       }
  17
  18       .fixed {
  19         position: fixed;
  20         background: blue;
  21         z-index: 1;
  22         left: 80px;
  23         top: 80px;
  24       }
  25
  26       .scrolled {
  27         position: relative;
  28         background: green;
  29       }
  30     </style>
  31     <script>
  32       if (window.testRunner)
  33           testRunner.dumpAsTextWithPixelResults();
  34
  35       if (window.internals) {
  36           window.internals.settings.setAcceleratedCompositingForFixedPositionEnabled(true);
  37           window.internals.settings.setAcceleratedCompositingForOverflowScrollEnabled(true);
  38           window.internals.settings.setLayerSquashingEnabled(true);
  39       }
  40
  41       function doTest() {
  42         var container = document.getElementById("container");
  43         container.scrollTop = container.scrollHeight;
  44       }
  45
  46       window.onload = doTest;
  47     </script>
  48   </head>
  49   <body>
  50     <div id="container">
  51       <div class="fixed card"></div>
  52       <div class="scrolled card"></div>
  53       <div class="scrolled card"></div>
  54       <div class="scrolled card"></div>
  55       <div class="scrolled card"></div>
  56       <div class="scrolled card"></div>
  57       <div class="scrolled card"></div>
  58       <div class="scrolled card"></div>
  59       <div class="scrolled card"></div>
  60       <div class="scrolled card"></div>
  61       <div class="scrolled card"></div>
  62       <div class="scrolled card"></div>
  63       <div class="scrolled card"></div>
  64     </div>
  65   </body>
  66 </html>