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

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style>
   6     .box {
   7       position: absolute;
   8       top: 20px;
   9       left: 20px;
  10       height: 100px;
  11       width: 100px;
  12       background-color: red;
  13     }
  14
  15     .composited {
  16       transform: translateZ(0);
  17       background-color: green;
  18       outline: 10px solid transparent; /* inflate compositing layer bounds */
  19     }
  20
  21     .box > .box {
  22       top: 50px;
  23       left: 50px;
  24       width: 200px;
  25       background-color: rgba(255, 0, 0, 0.6);
  26     }
  27
  28     #indicator {
  29       position: absolute;
  30       top: 75px;
  31       left: 75px;
  32       height: 56px;
  33       width: 56px;
  34       background-color: blue;
  35     }
  36   </style>
  37   <script>
  38       if (window.testRunner) {
  39           testRunner.dumpAsText();
  40           testRunner.waitUntilDone();
  41       }
  42
  43       function doTest()
  44       {
  45           if (window.testRunner) {
  46               document.getElementById('layertree').innerText = window.internals.layerTreeAsText(document);
  47               testRunner.notifyDone();
  48           }
  49       }
  50
  51       window.addEventListener('load', doTest, false);
  52   </script>
  53 </head>
  54 <body>
  55   <div class="composited box">
  56     <div class="composited box"></div>
  57   </div>
  58
  59   <div id="indicator"></div>
  60
  61   <pre id="layertree"></pre>
  62 </body>
  63 </html>