third_party/WebKit/LayoutTests/compositing/geometry/bounds-ignores-hidden-composited-descendant.html

   1 <style>
   2   .composited {
   3     transform: translateZ(0);
   4   }
   5
   6   img {
   7     background-color: black;
   8     width: 50px;
   9     height: 50px;
  10   }
  11
  12   .box {
  13       width: 100px;
  14       height: 100px;
  15       background-color: blue;
  16   }
  17
  18   .inner {
  19       position: relative;
  20       visibility: visible;
  21   }
  22
  23   #layers {
  24       opacity: 0; /* hide from pixel result */
  25   }
  26 </style>
  27 <script>
  28     if (window.testRunner)
  29         testRunner.dumpAsText();
  30
  31     function dumpLayers()
  32     {
  33         if (window.testRunner) {
  34             document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
  35         }
  36     }
  37     window.addEventListener('load', dumpLayers, false);
  38 </script>
  39 <body>
  40     <div style="position: absolute; left: 0px; top: 0px; z-index: 1; " class="composited">
  41         <img style="position: absolute; left: 10px; top: 10px; z-index: 0;">
  42         <div style="position: absolute; left: 500px; top: 100px; z-index: 1; visibility: hidden;">
  43             stuff
  44             <div class="inner box"></div>
  45         </div>
  46     </div>
  47
  48     <div style="position: absolute; left: 0px; top: 250px; z-index: 1; " class="composited">
  49         <img style="position: absolute; left: 10px; top: 10px; z-index: 0;">
  50         <div style="position: absolute; left: 500px; top: 100px; z-index: 1; visibility: hidden;">
  51             stuff
  52             <!-- Ideally this layer wouldn't affect the bounds of its composited ancestor. -->
  53             <div class="composited inner box"></div>
  54         </div>
  55     </div>
  56
  57 <pre id="layers">Layer tree goes here in DRT</pre>
  58 </body>