Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 1 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /html/interaction/focus/processing-model/preventScroll-textarea.html - WPT Dashboard Interop Dashboard
<!doctype html>
<title>focus(options) - preventScroll on textarea element</title>
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<div style="height: 200vh"></div>
<textarea>ABCD</textarea>
<input value="EFGH">
<button></button>
<div style="height: 200vh"></div>
<script>
promise_test(async function(t) {
await new Promise(resolve => window.addEventListener("load", resolve));
let elements = document.querySelectorAll("textarea, input, button");
assert_equals(elements.length, 3, `Precondition`);
for (let element of elements) {
let name = element.nodeName;
assert_equals(window.scrollY, 0, `${name}: Precondition`);
element.focus({ preventScroll: true });
assert_equals(window.scrollY, 0, `${name}: Should not have scrolled`);
assert_equals(document.activeElement, element, `${name}: Should have been focused`);
// Wait a couple event loop turns because the original bug was triggered off
// an async event.
await new Promise(resolve => t.step_timeout(resolve, 0));
await new Promise(resolve => t.step_timeout(resolve, 0));
assert_equals(window.scrollY, 0, `${name}: Should not have scrolled after a couple event loop ticks`);
assert_equals(document.activeElement, element, `${name}: Should remain focused`);
// Also wait for rendering, just out of paranoia.
await new Promise(resolve => requestAnimationFrame(resolve));
await new Promise(resolve => requestAnimationFrame(resolve));
assert_equals(window.scrollY, 0, `${name}: Should not have scrolled after rendering`);
assert_equals(document.activeElement, element, `${name}: Should remain focused after rendering`);
}
}, "preventScroll: true on a textarea element");
</script>