third_party/WebKit/LayoutTests/compositing/layer-creation/stacking-context-overlap.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5     <style type="text/css" media="screen">
   6         .trigger {
   7             width: 20px;
   8             height: 20px;
   9             background-color: blue;
  10             transform: translateZ(0);
  11         }
  12
  13         .container {
  14             position: relative;
  15             z-index: 0;
  16             top: -10px;
  17             height: 120px;
  18             width: 120px;
  19             padding: 10px;
  20             border: 1px solid black;
  21         }
  22
  23         .box {
  24             position: relative;
  25             height: 100px;
  26             width: 100px;
  27             margin: 10px;
  28             background-color: silver;
  29         }
  30     </style>
  31 </head>
  32 <script>
  33     if (window.testRunner) {
  34         testRunner.dumpAsText();
  35         testRunner.waitUntilDone();
  36     }
  37
  38     function doTest()
  39     {
  40         if (window.testRunner) {
  41             document.getElementById('layertree').innerText = window.internals.layerTreeAsText(document);
  42             testRunner.notifyDone();
  43         }
  44     }
  45
  46     window.addEventListener('load', doTest, false);
  47 </script>
  48 <body>
  49     <div class="trigger"></div>
  50
  51     <div class="container">
  52         <div class="child box">
  53           <!-- This box doesn't need its own layer. -->
  54         </div>
  55     </div>
  56     <pre id="layertree"></pre>
  57 </body>
  58 </html>