<!DOCTYPE html> <!-- webkit-test-runner [ useFlexibleViewport=true ] -->
<html>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<head>
    <script src="../../../resources/js-test-pre.js"></script>
    <style>
        body {
            margin: 0;
        }

        input {
            width: 100%;
            height: 50px;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 1;
        }

        #content {
            background-image: linear-gradient(blue, red);
            width: 100vw;
            height: 4000px;
            position: absolute;
            top: 0;
            left: 0;
        }

        #bottom {
            width: 100%;
            height: 50px;
            position: fixed;
            left: 0;
            bottom: 0;
            z-index: 1;
            background-color: blue;
        }
    </style>
    <script>
    if (window.testRunner) {
        testRunner.dumpAsText();
        testRunner.waitUntilDone();
    }

    function tapInInputScript(tapX, tapY)
    {
        return `(function() {
            uiController.didShowKeyboardCallback = function() {
                uiController.doAfterNextStablePresentationUpdate(function() {
                    uiController.uiScriptComplete(JSON.stringify(uiController.inputViewBounds));
                });
            };
            uiController.singleTapAtPoint(${tapX}, ${tapY}, function() { });
        })()`;
    }

    function simulateScrollingScript(offsetTop)
    {
        return `(function() {
            uiController.stableStateOverride = false;
            uiController.immediateScrollToOffset(0, ${offsetTop});
            uiController.stableStateOverride = true;
            uiController.doAfterNextStablePresentationUpdate(function() {
                uiController.uiScriptComplete();
            });
        })()`;
    }

    function getInputViewBoundScript()
    {
        return `(function() {
            uiController.uiScriptComplete(JSON.stringify(uiController.inputViewBounds));
        })();`;
    }

    function toString(rect)
    {
        return `[${rect.left} ${rect.top} ; ${rect.width} ${rect.height}]`;
    }

    function run()
    {
        if (!window.testRunner || !testRunner.runUIScript) {
            description("To manually test, tap this input field and scroll up. The text caret should not end up outside of the input.");
            return;
        }

        window.initialLayoutViewport = internals.layoutViewportRect();
        testRunner.runUIScript(tapInInputScript(window.innerWidth / 2, 30), inputViewBounds => {
            inputViewBounds = JSON.parse(inputViewBounds);
            const maxScrollTopWithKeyboard = document.scrollingElement.scrollHeight - window.innerHeight + inputViewBounds.height;
            window.layoutViewportAfterShowingKeyboard = internals.layoutViewportRect();
            testRunner.runUIScript(simulateScrollingScript(maxScrollTopWithKeyboard), () => {
                window.layoutViewportAfterScrollingPastEnd = internals.layoutViewportRect();
                testRunner.runUIScript(simulateScrollingScript(maxScrollTopWithKeyboard + 25), () => {
                    window.layoutViewportAfterScrollingToEnd = internals.layoutViewportRect();
                    debug(`The initial layout viewport is: ${toString(initialLayoutViewport)}`);
                    debug(`The layout viewport after showing the keyboard is: ${toString(layoutViewportAfterShowingKeyboard)}`);
                    debug(`The layout viewport after scrolling to the end is: ${toString(layoutViewportAfterScrollingPastEnd)}`);
                    debug(`The layout viewport after scrolling past the end is: ${toString(layoutViewportAfterScrollingToEnd)}`);
                    shouldBe("initialLayoutViewport.height", "layoutViewportAfterShowingKeyboard.height");
                    shouldBe("layoutViewportAfterScrollingPastEnd.top", "layoutViewportAfterScrollingToEnd.top");
                    testRunner.notifyDone();
                });
            });
        });
    }
    </script>
</head>
<body onload=run()>
    <input></input>
    <div id="content"></div>
    <div id="bottom"></div>
    <script src="../../../resources/js-test-post.js"></script>
</body>

</html>