<!-- Based on compositing/repaint/clipping-should-not-repaint-composited-descendants.html -->
<!DOCTYPE html>
<style>
    .spacer {
        position: relative;
        width: 300px;
        height: 300px;
    }

    .clipping-container {
        position: absolute;
        height: 300px;
        transform: translateZ(0);
    }

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

    .clipped-composited-child {
        width: 250px;
        height: 250px;
        background-color: yellow;
        border: 1px solid black;
        transform: translateZ(0);
    }
</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/paint-invalidation-test.js"></script>
<script>
    if (window.testRunner)
        testRunner.dumpAsText();
    var alt1 = document.getElementById('alt1');
    var alt2 = document.getElementById('alt2');
    alt2.disabled = true;

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

    runPaintInvalidationTest();
</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>