Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 16 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-writing-modes/forms/text-input-vertical-overflow-no-scroll.html - WPT Dashboard Interop Dashboard
<!doctype html>
<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;
/* Use an explicit whole-number-of-pixels height, to avoid tripping
triggering an async 1px adjustment to scrollTop. We can remove this
once that bug is fixed.
(Without this hack, the input element may end up with a height
that's a fractional number of pixels, depending on the font.
And then this test's call to 'scrollIntoView' puts us at a
fractional scroll-position, to bottom-align the input element. And
adjustment to scrollTop, which this test doesn't expect.
*/
height: 200px;
}
</style>
<div class="spacer"></div>
<input id="testInput">
<div class="spacer"></div>
<script>
for (const inputType of ["text", "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({ preventScroll: true });
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>