src/third_party/WebKit/LayoutTests/compositing/layer-creation/overlap-transformed-layer.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         overflow: hidden;
  40     }
  41
  42 </style>
  43
  44 <script>
  45     if (window.testRunner) {
  46         testRunner.dumpAsTextWithPixelResults();
  47         window.addEventListener('load', function() {
  48             document.getElementById("layertree").innerText = window.internals.layerTreeAsText(document);
  49         }, false);
  50     }
  51 </script>
  52
  53 <body>
  54     <div id="container">
  55         <!-- This red square should not be visible -->
  56         <div id="indicator"></div>
  57         <div id="composited"></div>
  58     </div>
  59
  60     <!-- This green square should render completely on top of the red one -->
  61     <div id="green"></div>
  62
  63     <pre id="layertree"></pre>
  64 </body>
  65 </html>