summaryrefslogtreecommitdiffstats
path: root/third_party/WebKit/LayoutTests/compositing/squashing/clipping-ancestor.html
blob: 470938c1d368c039cd287091c1aff879f9488d1a (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<style>
.hoverable:hover {
    transform: translateZ(0);
}
</style>
<script>
    if (window.testRunner)
        testRunner.dumpAsText();

    if (window.internals)
        internals.settings.setLayerSquashingEnabled(true);

    function dumpLayers()
    {
        var layersResult = document.getElementById('layers');
        if (window.testRunner)
            layersResult.innerText = window.internals.layerTreeAsText(document);
    }
  window.addEventListener('load', dumpLayers, false)
</script>
  <div style="overflow: hidden; height: 10px; width: 200px; background-color: lightblue">
    <div id="inner" style="transform: translateZ(0); height: 10px; background-color: whitesmoke"></div>
  </div>
  <!-- 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 -->
  <div class="hoverable" style="position:absolute; top: 0px; height:100px; width:100px; background-color: lightgreen"></div>
<pre id="layers">Layer tree goes here in DRT</pre>