<!DOCTYPE html> <!-- webkit-test-runner [ useFlexibleViewport=true ] -->

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <script src="../../../resources/js-test-pre.js"></script>
    <script>
        jsTestIsAsync = true;

        function simulateScrollingStart(offsetTop)
        {
            return `(function() {
                uiController.stableStateOverride = false;
                uiController.immediateScrollToOffset(0, ${offsetTop});
                uiController.doAfterPresentationUpdate(function() {
                    uiController.uiScriptComplete();
                });
            })()`;
        }

        function simulateScrollingEnd(offsetTop)
        {
            return `(function() {
                uiController.stableStateOverride = true;
                uiController.doAfterNextStablePresentationUpdate(function() {
                    uiController.uiScriptComplete();
                });
            })()`;
        }

        var boundingClientRect;
        var expectedTop;
        function checkBoundingClientRect(top)
        {
            var target = document.getElementById('target');
            boundingClientRect = target.getBoundingClientRect();
            expectedTop = top;
            shouldBe('boundingClientRect.top', 'expectedTop');
        }

        function doTest()
        {
            checkBoundingClientRect(350);
            debug('Doing unstable scroll');
            testRunner.runUIScript(simulateScrollingStart(500), function() {
                checkBoundingClientRect(-150);

                debug('Finishing scroll');
                testRunner.runUIScript(simulateScrollingEnd(), function() {
                    checkBoundingClientRect(-150);
                    finishJSTest();
                });
            });
        }

        window.addEventListener('load', doTest, false);
    </script>
    <style>
        body {
            height: 5000px;
        }
        #target {
            position: absolute;
            top: 350px;
            left: 20px;
            height: 200px;
            width: 200px;
            background-color: gray;
        }
    </style>
</head>
<body>
    
    <div id="target"></div>

    <script src="../../../resources/js-test-post.js"></script>
</body>
</html>