src/third_party/WebKit/LayoutTests/compositing/layer-creation/overlap-child-layer.html

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