1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
<!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;
/* Use an explicit whole-number-of-pixels height, to avoid tripping
Mozilla bug 1851066, regarding fractional scroll positions
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
that's sufficient to trigger bug 1851066 and get an asynchronous 1px
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>
|
