no-squashing-into-another-clip-layer.html

<!DOCTYPE html>
<style>
.hoverable:hover {
    will-change: transform;
}
</style>
<script>
    if (window.testRunner)
        testRunner.dumpAsText();

    function dumpLayers()
    {
        var layersResult = document.getElementById('layers');
        if (window.testRunner)
            layersResult.innerText = internals.layerTreeAsText(document);
    }
  window.addEventListener('load', dumpLayers, false)
</script>
<div style="will-change: transform; overflow: hidden; height: 10px; background-color: lightblue">
  <div id="inner" style="will-change: transform; 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>

chromium/third_party/blink/web_tests/compositing/squashing/no-squashing-into-another-clip-layer.html