src/third_party/WebKit/LayoutTests/compositing/layer-creation/overlap-negative-z-index.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5
   6   .composited {
   7     transform:translatez(0);
   8   }
   9
  10   .box {
  11     width: 100px;
  12     height: 100px;
  13   }
  14
  15   .red {
  16     background-color: red;
  17   }
  18
  19   .lime {
  20     background-color: lime;
  21   }
  22
  23   .behind {
  24     z-index: -2;
  25     position: absolute;
  26     top: 100px;
  27     left: 100px;
  28   }
  29
  30   .ontop {
  31     z-index: -1;
  32     position: absolute;
  33     top: 100px;
  34     left: 100px;
  35   }
  36
  37   #layertree {
  38     position: absolute;
  39     left: 10000px;
  40     top: 0px;
  41   }
  42
  43   body {
  44     overflow: hidden;
  45   }
  46
  47 </style>
  48 <script>
  49     if (window.testRunner) {
  50         testRunner.dumpAsTextWithPixelResults();
  51         testRunner.waitUntilDone();
  52     }
  53
  54     window.addEventListener('load', function() {
  55         if (window.testRunner) {
  56             document.getElementById("layertree").innerText = window.internals.layerTreeAsText(document);
  57             testRunner.notifyDone();
  58         }
  59     }, false);
  60 </script>
  61
  62 </head>
  63
  64 <body>
  65   <!-- This red div should be completely underneath the green div -->
  66   <div class="composited red box behind"> </div>
  67
  68   <!-- This lime colored div should correctly detect overlap and become composited. -->
  69   <div class="lime box ontop"> </div>
  70
  71   <pre id="layertree"></pre>
  72 </body>
  73
  74 </html>