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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5
   6   .box {
   7     width: 100px;
   8     height: 100px;
   9   }
  10
  11   .green {
  12     background-color: green;
  13   }
  14
  15   .lime {
  16     background-color: lime;
  17   }
  18
  19   .blue {
  20     background-color: blue;
  21   }
  22
  23   .behind {
  24     position: absolute;
  25     top: 50px;
  26     left: 50px;
  27   }
  28
  29   .inmiddle {
  30     position: absolute;
  31     top: 80px;
  32     left: 80px;
  33   }
  34
  35   .ontop {
  36     position: absolute;
  37     top: 110px;
  38     left: 110px;
  39   }
  40
  41   #layertree {
  42     position: absolute;
  43     left: 10000px;
  44     top: 0px;
  45   }
  46
  47   body {
  48     overflow: hidden;
  49   }
  50
  51 </style>
  52 </head>
  53
  54 <body>
  55   <!-- This green div should be completely underneath the lime div -->
  56   <div class="green box behind"> </div>
  57   <!-- This lime colored div should correctly detect overlap and become composited. -->
  58   <div class="lime box inmiddle"> </div>
  59   <!-- The blue colord div should also correctly detect overlap on top of the second layer. -->
  60   <div class="blue box ontop"> </div>
  61 </body>
  62
  63 </html>