<!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/ui-helper.js"></script>
    <script src="../../../resources/js-test.js"></script>
    <style>
        body {
            margin: 0;
        }

        #input {
            width: 100%;
            height: 50px;
            position: fixed;
            left: 0;
            top: 0;
        }

        div {
            background-image: linear-gradient(blue, red);
            height: 10000px;
        }
    </style>
</head>
<body>
<div>
<input id="input"></input>
</div>
</body>
<script>
jsTestIsAsync = true;

(() => {
    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;
    }

    UIHelper.activateAndWaitForInputSessionAt(innerWidth / 2, 30)
    .then(() => UIHelper.getUICaretRect())
    .then((rect) => {
        initialCaretRect = rect;
        shouldBe("initialCaretRect.left", "6");
        shouldBe("initialCaretRect.top", "21");
        shouldBe("initialCaretRect.width", "3");
        shouldBe("initialCaretRect.height", "15");
        document.scrollingElement.scrollTop += 5000;
        return UIHelper.getUICaretRect();
    })
    .then((rect) => {
        finalCaretRect = rect;
        shouldBe("finalCaretRect.left", "6");
        shouldBe("finalCaretRect.top", "5021");
        shouldBe("finalCaretRect.width", "3");
        shouldBe("finalCaretRect.height", "15");
        finishJSTest();
    });
})();
</script>
</html>