src/third_party/WebKit/LayoutTests/compositing/layer-creation/backing-requirement-changes.html

   1 <html>
   2 <head>
   3   <style>
   4     #outer {
   5       position: absolute;
   6       top: 0px;
   7       left: -1000px;
   8       height: 300px;
   9       width: 300px;
  10       z-index: 1;
  11       overflow: auto;
  12       background-color: green;
  13     }
  14
  15     #inner {
  16       transform: translateZ(0);
  17       background-color: blue;
  18     }
  19
  20     #overlap {
  21       width: 500px;
  22       height: 500px;
  23       background-color: yellow;
  24       transform: translateZ(0);
  25     }
  26   </style>
  27   <script type="text/javascript">
  28     if (window.testRunner) {
  29       testRunner.waitUntilDone();
  30     }
  31
  32     function doTest()
  33     {
  34       if (window.internals) {
  35         window.internals.forceCompositingUpdate(document);
  36       }
  37       // Move green div so that it overlaps the yellow div, and hence
  38       // needs its own backing.
  39       document.getElementById("outer").style.left = "0px";
  40       if (window.testRunner) {
  41         testRunner.notifyDone();
  42       }
  43     }
  44
  45     window.addEventListener('load', doTest, false);
  46   </script>
  47 </head>
  48
  49 <body>
  50   <div id="outer">
  51     <div id="inner"></div>
  52   </div>
  53   <div id="overlap"></div>
  54 </body>
  55 </html>