require-own-backing-recalc-order.html

<!DOCTYPE html>
<style>
#clipping-repaint-container {
    will-change: transform;
    overflow: hidden;
    position: absolute;
    left: 49px;
    top: 49px;
    width: 348px;
    height: 348px;
    border: black 1px solid;
}

#non-repaint-container-compositing-layer {
    -webkit-perspective: 1px;
    position: absolute;
    left: 49px;
    top: 49px;
    width: 248px;
    height: 248px;
    border: red 1px solid;
}

#painting-layer {
    display: none;
    position: absolute;
    transform-style: preserve-3d;
    left: 49px;
    top: 49px;
    width: 148px;
    height: 148px;
    border: green 1px solid;
}

#compositing-child1 {
    will-change: transform;
    transform: translateZ(-1px);
    position: absolute;
    left: 48px;
    top: 48px;
    width: 48px;
    height: 48px;
    border: blue 2px solid;
}

#compositing-child2 {
    will-change: transform;
    transform: translateZ(-1px);
    position: absolute;
    left: 49px;
    top: 49px;
    width: 48px;
    height: 48px;
    border: blue 1px solid;
}
</style>

<script src="../../resources/run-after-layout-and-paint.js"></script>
<script>
    if (window.testRunner)
        testRunner.waitUntilDone();

    window.onload = function() {
        var paintingLayer = document.getElementById("painting-layer");
        paintingLayer.style.display = "block";
        runAfterLayoutAndPaint(function() {
            var compositingChild2 = document.getElementById("compositing-child2");
            compositingChild2.style.transform = "translateZ(0)";
            if (window.testRunner)
                testRunner.notifyDone();
        });
    }
</script>

<div id="clipping-repaint-container">
    <div id="non-repaint-container-compositing-layer">
        <div id="painting-layer">
            <div id="compositing-child1">
            </div>
            <div id="compositing-child2">
            </div>
        </div>
    </div>
</div>
chromium/third_party/blink/web_tests/compositing/geometry/require-own-backing-recalc-order.html
