src/third_party/WebKit/LayoutTests/compositing/geometry/foreground-layer.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style type="text/css">
   5     .box {
   6       position: relative;
   7       display: inline-block;
   8       margin: 30px;
   9       width: 200px;
  10       height: 200px;
  11       -webkit-transform: translateZ(0);
  12     }
  13
  14     .main {
  15       border: 40px solid black;
  16       box-shadow: black 0 0 20px; /* Makes compositing layer larger */
  17       background-color: red;
  18     }
  19
  20     .child {
  21       position: absolute;
  22       width: 150px;
  23       height: 150px;
  24       padding: 20px;
  25       -webkit-transform: translateZ(1px);
  26     }
  27
  28     .negative {
  29       z-index: -1;
  30       top: 0;
  31       left: 0;
  32       height: 10px;
  33       width: 10px;
  34     }
  35
  36     img {
  37       background-color: green;
  38       height: 200px;
  39       width: 200px;
  40     }
  41
  42     .embiggener {
  43       position: absolute;
  44       height: 10px;
  45       width: 10px;
  46       top: -50px;
  47       left: -50px;
  48       background-color: blue;
  49     }
  50
  51     #layer-tree {
  52       opacity: 0; /* hide from pixel test */
  53       height: 10px; /* avoid scrollbars */
  54       overflow: hidden;
  55     }
  56
  57   </style>
  58   <script type="text/javascript" charset="utf-8">
  59     if (window.testRunner)
  60       testRunner.dumpAsTextWithPixelResults();
  61
  62     function dumpLayerTree()
  63     {
  64       if (window.testRunner)
  65         document.getElementById('layer-tree').innerText = window.internals.layerTreeAsText(document);
  66     }
  67
  68     window.addEventListener('load', dumpLayerTree, false);
  69   </script>
  70 </head>
  71 <body>
  72
  73 <!-- Both boxes should look the same. You should see no red. -->
  74 <div class="main box">
  75   <img>
  76   <div class="negative child"></div>
  77 </div>
  78
  79 <div class="main box" style="overflow: hidden;">
  80   <img>
  81   <div class="negative child"></div>
  82 </div>
  83
  84 <pre id="layer-tree"></pre>
  85 </body>
  86 </html>