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

    #composited {
        height: 38px;
        -webkit-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 {
        -webkit-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="../../fast/repaint/resources/repaint.js"></script>

<script>
    if (window.testRunner) {
        testRunner.dumpAsText(true);
        testRunner.waitUntilDone();
    }

    function repaintTest() {
        if (window.testRunner)
            testRunner.displayAndTrackRepaints();

        document.getElementById('overflow').scrollTop = 30;
        if (window.testRunner)
            testRunner.displayAndTrackRepaints();

        window.setTimeout(function() {
            document.getElementById('overflow').scrollTop = 50;
            testRunner.notifyDone();
        }, 0);
    }

</script>

<body onload="runRepaintTest()">
    <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>