third_party/WebKit/LayoutTests/compositing/layer-creation/fixed-position-and-transform.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5     body {
   6         height: 5000px;
   7     }
   8
   9     #indicator {
  10         width: 256px;
  11         height: 256px;
  12         background-color: red;
  13         position: fixed;
  14         left: 100px;
  15         top: 100px;
  16         transform:translateZ(0);
  17     }
  18
  19     #overlap {
  20         width: 500px;
  21         height: 500px;
  22         background-color: green;
  23         position: fixed;
  24         left: 0px;
  25         top: 0px;
  26     }
  27 </style>
  28 <script>
  29     function doTest() {
  30         window.scrollTo(0, 1000);
  31         if (window.testRunner) {
  32             document.getElementById('layertree').innerText = window.internals.layerTreeAsText(document);
  33             testRunner.dumpAsTextWithPixelResults();
  34         }
  35     }
  36     window.addEventListener("load", doTest, false);
  37 </script>
  38 </head>
  39 <body>
  40     <!-- the red indicator should be covered by the green overlap element -->
  41     <div id="indicator"></div>
  42     <div id="overlap"></div>
  43
  44     <pre id="layertree"></pre>
  45 </body>
  46 </html>