newly-composited-on-scroll.html | Explore in Territory

<html>
<head>
    <title>Reduction</title>
    <style>
    #content-container {
        position:absolute;
        top:48px;
        bottom:0;
        left:0;
        right:0;
        margin-left:225px;
    }

    #composited {
        height: 38px;
        transform:translate3d(0px, 0px, 0px);
    }

    #positioned-2 {
        position:absolute;
        top:40px;
        bottom:0;
        left:0;
        right:0;
    }

    .positioned-3 {
        position:absolute;
        top:0;
        bottom:0;
        left:0;
        right:0;
    }
    
    #transformed-container {
        transform: translateX(0);
        height:300px;
        width:600px;
    }
    
    #overflow {
        overflow:auto;
        border: 2px solid black;
    }
    
    .positioned-4 {
        position:absolute;
        top:20px;
        height:80px;
        right:20px;
        width:80px;
    }
    </style>
</head>

<script src="../../../resources/run-after-layout-and-paint.js"></script>

<script>
    if (window.testRunner)
        testRunner.waitUntilDone();

    function repaintTest() {
        runAfterLayoutAndPaint(function() {
            document.getElementById('overflow').scrollTop = 30;
            runAfterLayoutAndPaint(function() {
                document.getElementById('overflow').scrollTop = 50;
                testRunner.notifyDone();
            });
        });
    }

</script>

<body onload="repaintTest()">
    <div id="content-container">
        <div id="composited"></div>
        <div id="positioned-2">
            <div id="transformed-container" class="positioned-3">
                <div id="overflow" class="positioned-3">
                    <div class="positioned-4"></div>
        
                    <div style="background-color:purple; width:50px; height:300px;"></div>
                    <br/>
                    <div style="width:500px; height:50px; background-color:green;"></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
chromium/third_party/blink/web_tests/paint/invalidation/compositing/newly-composited-on-scroll.html
