third_party/WebKit/LayoutTests/compositing/layer-creation/overlap-negative-z-index-multiple.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   .green {
  16     background-color: green;
  17   }
  18
  19   .lime {
  20     background-color: lime;
  21   }
  22
  23   .blue {
  24     background-color: blue;
  25   }
  26
  27   .behind {
  28     z-index: -3;
  29     position: absolute;
  30     top: 50px;
  31     left: 50px;
  32   }
  33
  34   .inmiddle {
  35     z-index: -2;
  36     position: absolute;
  37     top: 80px;
  38     left: 80px;
  39   }
  40
  41   .ontop {
  42     z-index: -1;
  43     position: absolute;
  44     top: 110px;
  45     left: 110px;
  46   }
  47
  48   #layertree {
  49     position: absolute;
  50     left: 10000px;
  51     top: 0px;
  52   }
  53
  54   body {
  55     overflow: hidden;
  56   }
  57
  58 </style>
  59 <script>
  60     if (window.testRunner) {
  61         testRunner.dumpAsTextWithPixelResults();
  62         testRunner.waitUntilDone();
  63     }
  64
  65     window.addEventListener('load', function() {
  66         if (window.testRunner) {
  67             document.getElementById("layertree").innerText = window.internals.layerTreeAsText(document);
  68             testRunner.notifyDone();
  69         }
  70     }, false);
  71 </script>
  72
  73 </head>
  74
  75 <body>
  76   <!-- This green div should be completely underneath the lime div -->
  77   <div class="composited green box behind"> </div>
  78
  79   <!-- This lime colored div should correctly detect overlap and become composited. -->
  80   <div class="lime box inmiddle"> </div>
  81
  82   <!-- The blue colord div should also correctly detect overlap on top of the second layer. -->
  83   <div class="blue box ontop"> </div>
  84
  85   <pre id="layertree"></pre>
  86 </body>
  87
  88 </html>