Bug 1930522 [wpt PR 49104] - Prevent document from scrolling in custo…

…mizable select popover, a=testonly Automatic update from web-platform-tests Prevent document from scrolling in customizable select popover Pressing up or down on the first or last option of a customizable select should not let the document scroll. This was happening because the default event handler of the option was not handling the default if there was no option to focus in this keyboard event handler, but by setting the default as handled anyway this bug goes away. This was identified here: openui/open-ui#1087 (comment) Change-Id: I56ab094f468df1ef4847011763e20ea7e759d3f0 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6006515 Commit-Queue: Joey Arhar <jarharchromium.org> Reviewed-by: Traian Captan <tcaptanchromium.org> Cr-Commit-Position: refs/heads/main{#1381284} -- wpt-commits: f9488ce540284c1af7c25868a058f36a80cf646a wpt-pr: 49104 UltraBlame original commit: c7a5c58521dbc0efc233511f53f3c1e07c890039
marco-c · Nov 16, 2024 · 2eb63ca · 2eb63ca
1 parent a0f8f17
commit 2eb63ca
Showing 1 changed file with 53 additions and 0 deletions.
diff --git a/...cs/forms/the-select-element/customizable-select/select-option-arrow-scroll.tentative.html b/...cs/forms/the-select-element/customizable-select/select-option-arrow-scroll.tentative.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:[email protected]">
+<link rel=help href="https://github.com/openui/open-ui/issues/1087#issuecomment-2381094286">
+<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>
+select, ::picker(select) {
+  appearance: base-select;
+}
+.spacer {
+  height: 10000px;
+}
+</style>
+
+<select id=topofdocument>
+  <option>one</option>
+  <option>two</option>
+</select>
+
+<div class=spacer></div>
+
+<select id=bottomofdocument>
+  <option>one</option>
+  <option>two</option>
+</select>
+
+<script>
+const ArrowUp = '\uE013';
+const ArrowDown = '\uE015';
+['topofdocument', 'bottomofdocument'].forEach(selectName => {
+  const select = document.getElementById(selectName);
+  promise_test(async () => {
+    select.scrollIntoView();
+    await test_driver.click(select);
+    assert_equals(document.activeElement, select.querySelector('option'),
+      'First option should be focused when opening the select.');
+
+    const scroll = window.scrollY;
+    await test_driver.send_keys(document.activeElement, ArrowUp);
+    await test_driver.send_keys(document.activeElement, ArrowUp);
+    assert_equals(window.scrollY, scroll,
+      'Document should not be scrolled when pressing ArrowUp on the first option.');
+
+    await test_driver.send_keys(document.activeElement, ArrowDown);
+    await test_driver.send_keys(document.activeElement, ArrowDown);
+    assert_equals(window.scrollY, scroll,
+      'Document should not be scrolled when pressing ArrowDown on the last option.');
+  }, `${selectName}: Arrow keys on options should not scroll the document.`);
+});
+</script>