<!DOCTYPE html> <!-- webkit-test-runner [ shouldIgnoreMetaViewport=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 src="../../../resources/ui-helper.js"></script>
    <style>
        html, body {
            margin: 0;
            width: 320px;
            height: 100%;
            overflow: scroll;
        }

        input {
            width: 44px;
            height: 40px;
            font-size: 18px;
        }

        .outer-container {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 400px;
            width: 100%;
        }

        .inner-container {
            margin: 0 auto;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="outer-container">
        <div class="inner-container">
            <input name="search" type="tel" id="first"></input>
            <input type="tel" id="second"></input>
        </div>
    </div>
    <div id="description"></div>
    <div id="output"></div>
    <script>
    if (window.testRunner) {
        testRunner.dumpAsText();
        testRunner.waitUntilDone();
    }

    firstField = document.getElementById("first");
    secondField = document.getElementById("second");
    output = document.getElementById("output");
    currentScrollPosition = 0;
    shouldLogScrollDeltas = false;
    observedUnnecessaryScrolling = false;

    function moveFocusToOtherField(event) {
        event.target.value = event.data;
        const fieldToFocus = event.target == firstField ? secondField : firstField;
        fieldToFocus.focus();
        event.preventDefault();
    }

    firstField.addEventListener("input", moveFocusToOtherField);
    secondField.addEventListener("input", moveFocusToOtherField);

    document.addEventListener("scroll", () => {
        const scrollDelta = document.scrollingElement.scrollTop - currentScrollPosition;
        if (shouldLogScrollDeltas && Math.abs(scrollDelta) > 1) {
            testFailed(`Scrolled by amount: ${scrollDelta}`);
            observedUnnecessaryScrolling = true;
        }
        currentScrollPosition = document.scrollingElement.scrollTop;
    });

    addEventListener("load", async () => {
        description("This test verifies that moving focus between two fields that are at the same y offset does not induce vertical scrolling. To test manually, focus the left field and press any key. Focus should move to the right field, and there should be no scrolling.");
        if (!window.testRunner) {
            shouldLogScrollDeltas = true;
            return;
        }

        await UIHelper.setHardwareKeyboardAttached(false);
        await UIHelper.activateElementAndWaitForInputSession(firstField);
        await UIHelper.ensureVisibleContentRectUpdate();

        shouldLogScrollDeltas = true;

        for (let i = 0; i < 10; ++i) {
            const observedInputEvent = new Promise(resolve => {
                const resolveAfterZeroDelay = () => setTimeout(resolve, 0);
                document.activeElement.addEventListener("input", resolveAfterZeroDelay, { "once" : true });
            });
            await UIHelper.keyDown(String(i));
            await observedInputEvent;
        }

        if (observedUnnecessaryScrolling)
            testFailed("Observed unnecessary scrolling");
        else
            testPassed("Did not observe unnecessary scrolling");

        shouldLogScrollDeltas = false;

        document.activeElement.blur();
        await UIHelper.waitForKeyboardToHide();

        testRunner.notifyDone();
    });
    </script>
</body>
</html>