clipping-should-not-repaint-composited-descendants.html

<!DOCTYPE html>
<style>
    .spacer {
        position: relative;
        width: 300px;
        height: 300px;
    }

    .clipping-container {
        position: absolute;
        height: 300px;
        will-change: transform;
    }

    .with-initial-clipping {
        clip: rect(50px, 250px, 250px, 50px);
    }

    .clipped-composited-child {
        width: 250px;
        height: 250px;
        background-color: yellow;
        border: 1px solid black;
        will-change: transform;
    }
</style>
<style id="alt1">
    .clipping-container {
        width: 300px;
    }
</style>
<style id="alt2">
    .clipping-container {
        width: 100%;
        clip: rect(100px, 200px, 200px, 100px);
    }
</style>
<script src="../resources/text-based-repaint.js"></script>
<script>
    var alt1 = document.getElementById('alt1');
    var alt2 = document.getElementById('alt2');
    alt2.disabled = true;

    function repaintTest() {
        alt2.disabled = false;
        alt1.disabled = true;
    }

    runRepaintTest();
</script>

<div class="spacer">
    <div class="clipping-container">
        <div class="clipped-composited-child"></div>
    </div>
</div>
<div class="spacer">
    <div class="clipping-container with-initial-clipping">
        <div class="clipped-composited-child"></div>
    </div>
</div>

chromium/third_party/blink/web_tests/paint/invalidation/compositing/clipping-should-not-repaint-composited-descendants.html