<!doctype html>
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
<link rel="help" href="https://html.spec.whatwg.org/#the-input-element">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
<title>Test that typing lots of characters inside vertical text inputs doesn't cause scroll position changes</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>

<style>
    .spacer {
        height: 100vh;
    }
    input { font-family: monospace; }
</style>

<div class="spacer"></div>
<input id="testInput">
<div class="spacer"></div>

<script>
for (const inputType of ["text", "email", "tel", "url", "password", "search", "number"]) {
    testInput.type = inputType;
    for (const writingMode of ["vertical-lr", "vertical-rl", "sideways-lr", "sideways-rl"]) {
        if (!CSS.supports("writing-mode", writingMode))
            continue;
        promise_test(async t => {
            assert_true(
                document.documentElement.scrollHeight > document.documentElement.clientHeight,
                "Page is scrollable"
            );
            testInput.style.writingMode = writingMode;
            document.documentElement.scrollTop = 0;
            t.add_cleanup(() => {
                document.documentElement.scrollTop = 0;
                testInput.value = "";
            });

            // Align input to the bottom edge
            testInput.scrollIntoView({block: "end", inline: "nearest"});

            assert_true(
                document.documentElement.scrollTop > 0,
                "Successfully scrolled"
            );

            const oldScrollTop = document.documentElement.scrollTop;

            const numCharsToOverflow = document.documentElement.clientHeight / parseInt(getComputedStyle(testInput).fontSize);
            const value = "1".repeat(numCharsToOverflow);

            testInput.focus();

            await test_driver.send_keys(testInput, value);

            assert_equals(
                document.documentElement.scrollTop,
                oldScrollTop,
                "Typing lots of characters in input did not cause scrolling"
            );
        }, `input[type=${inputType}] in ${writingMode}: typing characters in input should not cause the page to scroll`);
    }
}
</script>
