<!-- webkit-test-runner [ useThreadedScrolling=false ] -->
<!DOCTYPE html>

<html>
<head>
    <title>It should be possible to cover the red box with the green box by scrolling.</title>
    <style>
    html {
        direction: rtl;
    }

    body {
        width: 5000px;
    }

    .box {
        width: 200px;
        height: 100%;
        top: 0px;
    }

    #background {
        position: absolute;
        background-color: red;
        right: 500px;
    }

    #cover {
        position: fixed;
        background-color: green;
        left: 50%;
    }

    #layers {
        opacity: 0;
    }
    </style>
    <script>
    if (window.testRunner)
        testRunner.dumpAsText(true);

    function runTest()
    {
        window.scrollTo(-300, 0);
        if (window.testRunner)
            document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
    }

    window.addEventListener('load', runTest, false);
    </script>
</head>
<body>
    <div id="background" class="box"></div>
    <div id="cover" class="box"></div>

    <pre id="layers">Layer tree goes here.</pre>
</body>
</html>