Bug 1943455 [wpt PR 50252] - Prevent :active/:hover on select when in…

…teracting with picker, a=testonly Automatic update from web-platform-tests Prevent :active/:hover on select when interacting with picker This patch implements a fix while we wait for a resolution here: w3c/csswg-drafts#11185 Bug: 389830175 Change-Id: Ie0fd5d655cc5ac83f68fb0da0cfd2c7e5de49214 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6019064 Commit-Queue: Joey Arhar <[email protected]> Reviewed-by: David Baron <[email protected]> Cr-Commit-Position: refs/heads/main@{#1410952} -- wpt-commits: a6e8cec5902f5ec7d1e2f38ee0ffc5af345f2c17 wpt-pr: 50252
mozilla · Jan 28, 2025 · 4b3e155 · 4b3e155
1 parent 23894d6
commit 4b3e155
Showing 1 changed file with 113 additions and 0 deletions.
diff --git a/...s/the-select-element/customizable-select/select-picker-hover-active-pseudo.tentative.html b/...s/the-select-element/customizable-select/select-picker-hover-active-pseudo.tentative.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<link rel=help href="https://github.com/w3c/csswg-drafts/issues/11185">
+<link rel=author href="mailto:[email protected]">
+<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>
+<script src="/resources/testdriver-actions.js"></script>
+
+<select id=defaultbutton>
+  <option>option</option>
+</select>
+
+<select id=custombutton>
+  <button>button</button>
+  <option>option</option>
+</select>
+
+<style>
+select, ::picker(select) {
+  appearance: base-select;
+}
+</style>
+
+<script>
+
+['defaultbutton', 'custombutton'].forEach(id => {
+  const select = document.getElementById(id);
+  const option = select.querySelector('option');
+  function assertSupport() {
+    const style = getComputedStyle(document.querySelector('select'));
+    assert_equals(style.appearance, 'base-select',
+      'appearance:base-select must be supported in order to run this test.');
+  }
+
+  promise_test(async () => {
+    assertSupport();
+    await (new test_driver.Actions()
+      .pointerMove(1, 1, {origin: select}))
+      .send();
+    await new Promise(requestAnimationFrame);
+    assert_true(select.matches(':hover'),
+      'select should match :hover.');
+    assert_true(document.body.matches(':hover'),
+      'document.body should match :hover.');
+
+    // sending a test_driver.Actions() which only has a pointerDown() will
+    // automatically add a pointerUp(), so we have to perform an entire click
+    // and check :active inside the mousedown listener instead.
+    let selectMatchedActive = false;
+    let bodyMatchedActive = false;
+    select.addEventListener('mousedown', () => {
+      selectMatchedActive = select.matches(':active');
+      bodyMatchedActive = document.body.matches(':active');
+    });
+    await test_driver.click(select);
+    assert_true(selectMatchedActive,
+      'select should match :active.');
+    assert_true(bodyMatchedActive,
+      'document.body should match :active.');
+
+    await test_driver.click(select);
+    assert_false(select.matches(':open'),
+      'select should be closed at the end of the test.');
+  }, `${id}: select should match :hover and :active when interacting with button.`);
+
+  promise_test(async () => {
+    assertSupport();
+    assert_false(select.matches(':open'),
+      'select should be closed at the start of the test.');
+    await test_driver.click(select);
+    await new Promise(requestAnimationFrame);
+    assert_true(select.matches(':open'),
+      'select should be open after clicking it.');
+
+    await (new test_driver.Actions()
+      .pointerMove(1, 1, {origin: option}))
+      .send();
+    await new Promise(requestAnimationFrame);
+    assert_true(option.matches(':hover'),
+      'option should match :hover.');
+    assert_false(select.matches(':hover'),
+      'select should not match :hover.');
+    assert_false(document.body.matches(':hover'),
+      'document.body should not match :hover.');
+
+    // sending a test_driver.Actions() which only has a pointerDown() will
+    // automatically add a pointerUp(), so we have to perform an entire click
+    // and check :active inside the mousedown listener instead.
+    let optionMatchedActive = false;
+    let selectMatchedActive = false;
+    let bodyMatchedActive = false;
+    option.addEventListener('mousedown', () => {
+      optionMatchedActive = option.matches(':active');
+      selectMatchedActive = select.matches(':active');
+      bodyMatchedActive = document.body.matches(':active');
+    });
+    await (new test_driver.Actions()
+      .pointerMove(1, 1, {origin: option})
+      .pointerDown()
+      .pointerUp())
+      .send();
+    assert_true(optionMatchedActive,
+      'option should match :active.');
+    assert_false(selectMatchedActive,
+      'select should not match :active.');
+    assert_false(bodyMatchedActive,
+      'document.body should not match :active.');
+    assert_false(select.matches(':open'),
+      'select should be closed at the end of the test.');
+  }, `${id}: select should not match :hover or :active when interacting with elements in the picker.`);
+});
+</script>