src/third_party/WebKit/LayoutTests/compositing/overflow/opt-into-composited-scrolling-positioned-ancestor.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style>
   6     .container {
   7       width: 200px;
   8       height: 200px;
   9       overflow: scroll;
  10       margin: 20px;
  11       border: 1px solid black;
  12     }
  13
  14     .scrolled {
  15       width: 180px;
  16       height: 90px;
  17       margin: 10px;
  18       background-color: gray;
  19       position: relative;
  20     }
  21
  22     .positioned {
  23       width: 120px;
  24       height: 240px;
  25       position: absolute;
  26     }
  27
  28     #firstChild {
  29       z-index: 1;
  30     }
  31
  32     #secondChild {
  33       z-index: 2;
  34     }
  35
  36     #predecessor {
  37       left: 20px;
  38       top: 20px;
  39       z-index: 0;
  40       background-color: green;
  41     }
  42
  43     #ancestor {
  44       background-color: blue;
  45     }
  46
  47   </style>
  48   <script src="resources/automatically-opt-into-composited-scrolling.js"></script>
  49   <script>
  50     if (window.testRunner)
  51       testRunner.dumpAsText();
  52
  53     if (window.internals)
  54       window.internals.settings.setAcceleratedCompositingForOverflowScrollEnabled(true);
  55
  56     function doTest()
  57     {
  58       var predecessor = document.getElementById('predecessor');
  59       var ancestor = document.getElementById('ancestor');
  60       var container = document.getElementById('container');
  61       var firstChild = document.getElementById('firstChild');
  62       var secondChild = document.getElementById('secondChild');
  63
  64       // Force a synchronous style recalc and layout.
  65       document.body.offsetTop;
  66
  67       if (window.internals) {
  68         window.internals.forceCompositingUpdate(document);
  69
  70         if (didOptIn(container))
  71           write('Passed - correctly opted into composited scrolling with a positioned ancestor.')
  72         else
  73           write('FAILED - did not opt into composited scrolling with a positioned ancestor when it would safe.')
  74       }
  75     } // function doTest
  76
  77     window.addEventListener('load', doTest, false);
  78   </script>
  79 </head>
  80
  81 <body>
  82   <div class="positioned" id="predecessor"></div>
  83   <div class="positioned" id="ancestor">
  84     <div class="container" id="container">
  85       <div class="scrolled" id="firstChild"></div>
  86       <div class="scrolled" id="secondChild"></div>
  87     </div>
  88   </div>
  89   <pre id="console"></pre>
  90 </body>
  91 </html>