third_party/WebKit/LayoutTests/compositing/squashing/clipping-ancestor.html

   1 <!DOCTYPE html>
   2 <style>
   3 .hoverable:hover {
   4     transform: translateZ(0);
   5 }
   6 </style>
   7 <script>
   8     if (window.testRunner)
   9         testRunner.dumpAsText();
  10
  11     if (window.internals)
  12         internals.settings.setLayerSquashingEnabled(true);
  13
  14     function dumpLayers()
  15     {
  16         var layersResult = document.getElementById('layers');
  17         if (window.testRunner)
  18             layersResult.innerText = window.internals.layerTreeAsText(document);
  19     }
  20   window.addEventListener('load', dumpLayers, false)
  21 </script>
  22   <div style="overflow: hidden; height: 10px; width: 200px; background-color: lightblue">
  23     <div id="inner" style="transform: translateZ(0); height: 10px; background-color: whitesmoke"></div>
  24   </div>
  25   <!-- This div should not sqaush into the inner div, because it is inside an overflow:hidden div which therefore clips differently than this div's parent -->
  26   <div class="hoverable" style="position:absolute; top: 0px; height:100px; width:100px; background-color: lightgreen"></div>
  27 <pre id="layers">Layer tree goes here in DRT</pre>