third_party/WebKit/LayoutTests/compositing/contents-opaque/overflow-hidden-child-layers.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <style>
   5         .box {
   6             height: 100px;
   7             width: 100px;
   8             margin: 50px;
   9             background-color: blue;
  10             box-shadow: 0 0 20px black;
  11             overflow: hidden;
  12             transform: translateZ(0);
  13         }
  14         .child {
  15             position: relative;
  16             top: -30px;
  17             left: -30px;
  18             width: 300px;
  19             height: 300px;
  20             background-color: silver;
  21         }
  22     </style>
  23     <script type="text/javascript">
  24         if (window.testRunner)
  25             testRunner.dumpAsText();
  26
  27         function doTest() {
  28             if (window.testRunner && window.internals)
  29                 document.getElementById('layertree').innerText = window.internals.layerTreeAsText(document);
  30         }
  31         window.addEventListener('load', doTest, false);
  32     </script>
  33 </head>
  34 <body>
  35
  36     <div class="box">
  37         <div class="child">
  38         </div>
  39     </div>
  40     <pre id="layertree"></pre>
  41 </body>
  42 </html>