squash-same-transform-ancestor.html

<!DOCTYPE html>
<style>
#transform-parent {
    transform: translate(100px, 100px)rotate(-30deg);
    width: 100px;
    height: 100px;
    background: green;
}

#squashing {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    background: white;
}

#squashed {
    position: absolute;
    right: 0;
    top: 0;
    width: 200px;
    height: 200px;
    overflow: hidden;
}
</style>
<div id="transform-parent">
<div id="squashing" style="will-change: transform;"></div>
<div id="squashed">
The purpose of the test is to make sure when squashing, the compositing ancestor of the squashing
host, the squashing host itself, and the squashed layers all share the same transform ancestor,
even in presence of 2D transformed parent.
</div>
</div>
<script>
if (window.testRunner) {
    testRunner.dumpAsText();
    testRunner.setCustomTextOutput(internals.layerTreeAsText(document));
}
</script>

chromium/third_party/blink/web_tests/compositing/squashing/squash-same-transform-ancestor.html