text-input-vertical-overflow-no-scroll.html (3204B)
1 <!doctype html> 2 <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> 3 <link rel="help" href="https://html.spec.whatwg.org/#the-input-element"> 4 <link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow"> 5 <title>Test that typing lots of characters inside vertical text inputs doesn't cause scroll position changes</title> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/resources/testdriver.js"></script> 9 <script src="/resources/testdriver-vendor.js"></script> 10 11 <style> 12 .spacer { 13 height: 100vh; 14 } 15 input { 16 font-family: monospace; 17 18 /* Use an explicit whole-number-of-pixels height, to avoid tripping 19 Mozilla bug 1851066, regarding fractional scroll positions 20 triggering an async 1px adjustment to scrollTop. We can remove this 21 once that bug is fixed. 22 (Without this hack, the input element may end up with a height 23 that's a fractional number of pixels, depending on the font. 24 And then this test's call to 'scrollIntoView' puts us at a 25 fractional scroll-position, to bottom-align the input element. And 26 that's sufficient to trigger bug 1851066 and get an asynchronous 1px 27 adjustment to scrollTop, which this test doesn't expect. 28 */ 29 height: 200px; 30 } 31 </style> 32 33 <div class="spacer"></div> 34 <input id="testInput"> 35 <div class="spacer"></div> 36 37 <script> 38 for (const inputType of ["text", "password", "search", "number"]) { 39 testInput.type = inputType; 40 for (const writingMode of ["vertical-lr", "vertical-rl", "sideways-lr", "sideways-rl"]) { 41 if (!CSS.supports("writing-mode", writingMode)) 42 continue; 43 promise_test(async t => { 44 assert_true( 45 document.documentElement.scrollHeight > document.documentElement.clientHeight, 46 "Page is scrollable" 47 ); 48 testInput.style.writingMode = writingMode; 49 document.documentElement.scrollTop = 0; 50 t.add_cleanup(() => { 51 document.documentElement.scrollTop = 0; 52 testInput.value = ""; 53 }); 54 55 // Align input to the bottom edge 56 testInput.scrollIntoView({block: "end", inline: "nearest"}); 57 58 assert_true( 59 document.documentElement.scrollTop > 0, 60 "Successfully scrolled" 61 ); 62 63 const oldScrollTop = document.documentElement.scrollTop; 64 65 const numCharsToOverflow = document.documentElement.clientHeight / parseInt(getComputedStyle(testInput).fontSize); 66 const value = "1".repeat(numCharsToOverflow); 67 68 testInput.focus({ preventScroll: true }); 69 70 await test_driver.send_keys(testInput, value); 71 72 assert_equals( 73 document.documentElement.scrollTop, 74 oldScrollTop, 75 "Typing lots of characters in input did not cause scrolling" 76 ); 77 }, `input[type=${inputType}] in ${writingMode}: typing characters in input should not cause the page to scroll`); 78 } 79 } 80 </script>