<!DOCTYPE html>

<html>
<head>
    <style>
        body {
            height: 2000px;
        }
        iframe {
            height: 300px;
            width: 400px;
            margin: 20px;
            box-shadow: 0 0 10px black;
        }
        .composited {
            -webkit-transform: translateZ(0);
            width: 1px;
            height: 1px;
        }
    </style>
    <script>
        if (window.testRunner) {
            testRunner.dumpAsText();
            testRunner.waitUntilDone();
        }

        var expectedLoads = 2;
        function documentLoaded()
        {
            if (!--expectedLoads) {
                // Timeout is required to allow layer to paint before the scroll.
                window.setTimeout(doTest, 0);
            }
        }
        
        function doTest()
        {
            if (window.testRunner)
                testRunner.displayAndTrackRepaints(); // Flush pending compositing repaints.

            if (window.internals)
                window.internals.startTrackingRepaints();

            document.getElementById('frame').contentWindow.scrollTo(0, 100);

            if (window.internals)
                document.getElementById('repaintRects').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
            
            if (window.testRunner)
                testRunner.notifyDone();
        }
                
        window.addEventListener('load', documentLoaded, false);
    </script>
</head>
<body>

<iframe id="frame" onload="documentLoaded()" src="resources/compositing-document.html"></iframe>
<pre id="repaintRects"></pre>
<div class="composited"></div> <!-- To get the root composited in WebKit1 -->

</body>
</html>