src/third_party/WebKit/LayoutTests/compositing/layer-creation/overlap-transformed-layer-with-transform-body.html

   1 <html>
   2 <head>
   3 <style>
   4     #container {
   5         transform: translate(-10px, 0px);
   6     }
   7
   8     #indicator {
   9         position: absolute;
  10         left: 15px;
  11         top: 0px;
  12         height: 256px;
  13         width: 256px;
  14         background-color: red;
  15     }
  16
  17     #green {
  18         position: absolute;
  19         left: 0px;
  20         top: 0px;
  21         width: 300px;
  22         height: 300px;
  23         background-color: green;
  24     }
  25
  26     #composited {
  27         position: absolute;
  28         left: 400px;
  29         transform:translateZ(0);
  30     }
  31
  32     #layertree {
  33         position: absolute;
  34         left: 10000px;
  35         top: 0px;
  36     }
  37
  38     body {
  39         transform:translateZ(0);
  40         overflow: hidden;
  41     }
  42
  43 </style>
  44
  45 <script>
  46     if (window.testRunner) {
  47         testRunner.dumpAsTextWithPixelResults();
  48         window.addEventListener('load', function() {
  49             document.getElementById("layertree").innerText = window.internals.layerTreeAsText(document);
  50         }, false);
  51     }
  52 </script>
  53
  54 <body>
  55     <div id="container">
  56         <!-- This red square should not be visible -->
  57         <div id="indicator"></div>
  58         <div id="composited"></div>
  59     </div>
  60
  61     <!-- This green square should render completely on top of the red one -->
  62     <div id="green"></div>
  63
  64     <pre id="layertree"></pre>
  65 </body>
  66 </html>