commit d279498c24fbdda0662e5fff9105de4b725c0264 parent 5305ca4266184da7bbbeb9a2cfb2e9cb88ee024d Author: Joey Arhar <jarhar@chromium.org> Date: Thu, 11 Dec 2025 09:28:12 +0000 Bug 2005035 [wpt PR 56612] - Reapply "Make light dismiss use click instead of pointerdown/up", a=testonly Automatic update from web-platform-tests Reapply "Make light dismiss use click instead of pointerdown/up" This reverts commit df686d944283cfbb801057be0c8134c3e0c3f674. The previous attempt had a flaky test which has been removed this time around. Bug: 425579196, 408010435 Change-Id: I6f0563e0c04197a792b2cee6efe1535de432cc17 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7235545 Reviewed-by: Robert Flack <flackr@chromium.org> Commit-Queue: Joey Arhar <jarhar@chromium.org> Reviewed-by: Joey Arhar <jarhar@chromium.org> Cr-Commit-Position: refs/heads/main@{#1556246} -- wpt-commits: 5076a8ff63443384259f01ec0d0f041e64e18999 wpt-pr: 56612 Diffstat:
8 files changed, 377 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-click-picker-light-dismiss.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/select-click-picker-light-dismiss.tentative.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<link rel=author href="mailto:jarhar@chromium.org"> +<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> + +<style> +select, ::picker(select) { + appearance: base-select; +} +::picker(select) { + width: 600px; + height: 600px; + top: 0; + left: 0; + position-area: none; + position-try-fallbacks: none; +} +</style> + +<select></select> + +<script> +promise_test(async () => { + const select = document.querySelector('select'); + await (new test_driver.Actions() + .pointerMove(0, 0, {origin: select}) + .pointerDown() + .pointerUp()) + .send(); + await new Promise(requestAnimationFrame); + assert_true(select.matches(':open'), + 'Select should be open after clicking it.'); + + let selectClicked = false; + select.addEventListener('click', () => { + selectClicked = true; + }); + + await (new test_driver.Actions() + .pointerMove(300, 300) + .pointerDown() + .pointerUp()) + .send(); + + assert_true(selectClicked, + 'Clicking ::picker(select) should fire a click event on the select element.'); + assert_true(select.matches(':open'), + 'Select should not close when clicking its picker.'); +}, 'Clicking directly on ::picker(select) should not trigger light dismiss.'); +</script> diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-light-dismiss-drag.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-light-dismiss-drag.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://issues.chromium.org/issues/425579196"> +<link rel=help href="https://github.com/w3c/pointerevents/issues/542"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="/resources/testdriver-vendor.js"></script> + +<button id=outside>outside dialog</button> +<dialog closedby=any>dialog</dialog> + +<script> +const dialog = document.querySelector('dialog'); +const outside = document.getElementById('outside'); + +promise_test(async () => { + dialog.showModal(); + assert_true(dialog.open, 'dialog should be open after showModal().'); + await (new test_driver.Actions() + .pointerMove(0, 0, {origin: dialog}) + .pointerDown() + .pointerMove(0, 0, {origin: outside}) + .pointerUp()) + .send(); + assert_true(dialog.open, 'dialog should still be open after clicking and dragging.'); +}, 'Dialog should not light dismiss when clicking inside the dialog and dragging outside of it.'); +</script> diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-light-dismiss-pointer-capture.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-light-dismiss-pointer-capture.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://github.com/w3c/pointerevents/issues/542"> +<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> + +<dialog id=dialog closedby=any> + dialog + <button>pointer capturing button</button> +</dialog> + +<script> +const dialog = document.getElementById('dialog'); + +function click() { + return (new test_driver.Actions() + .pointerMove(1, 1) + .pointerDown() + .pointerUp()) + .send(); +} + +function touch() { + return (new test_driver.Actions() + .addPointer('finger', 'touch') + .pointerMove(1, 1) + .pointerDown() + .pointerUp()) + .send(); +} + +[true, false].forEach(useTouch => { + promise_test(async t => { + let usePointerCapture = true; + t.add_cleanup(() => { + usePointerCapture = false; + dialog.close(); + }); + + const button = dialog.querySelector('button'); + document.body.addEventListener('pointerdown', event => { + if (usePointerCapture) { + button.setPointerCapture(event.pointerId); + } + }); + + dialog.showModal(); + assert_true(dialog.open, 'dialog should be open at the start of the test.'); + + if (useTouch) { + await touch(); + } else { + await click(); + } + assert_true(dialog.open, 'dialog should not light dismiss when pointer capture is being used.'); + + usePointerCapture = false; + if (useTouch) { + await touch(); + } else { + await click(); + } + assert_false(dialog.open, 'dialog should light dismiss when pointer capture is not being used.'); + }, `Light dismiss on dialog with ${useTouch ? 'touch' : 'mouse'} input with pointer capture.`); +}); +</script> diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-light-dismiss-touch.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-light-dismiss-touch.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://issues.chromium.org/issues/425579196"> +<link rel=help href="https://github.com/w3c/pointerevents/issues/542"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="/resources/testdriver-vendor.js"></script> + +<div id=fullscreen></div> +<dialog closedby=any> + dialog +</dialog> + +<style> +#fullscreen { + position: absolute; + inset: 0; + z-index: 1; +} +</style> + +<script> +promise_test(async () => { + const fullscreen = document.getElementById('fullscreen'); + const dialog = document.querySelector('dialog'); + + let fullscreenClicked = false; + fullscreen.addEventListener('click', () => { + fullscreenClicked = true; + }); + dialog.showModal(); + + await (new test_driver.Actions() + .addPointer('finger', 'touch') + .pointerMove(1, 1) + .pointerDown() + .pointerUp()) + .send(); + + assert_false(dialog.open, 'Dialog should be closed by light dismiss.'); + assert_false(fullscreenClicked, 'Elements outside of the dialog should not receive a click.'); +}, 'Dialog light dismiss should work with touch and not trigger a click event.'); +</script> diff --git a/testing/web-platform/tests/html/semantics/popovers/light-dismiss-event-ordering.tentative.html b/testing/web-platform/tests/html/semantics/popovers/light-dismiss-event-ordering.tentative.html @@ -0,0 +1,82 @@ +<!DOCTYPE html> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://chromium-review.googlesource.com/c/chromium/src/+/4023021"> +<link rel=help href="https://github.com/whatwg/html/pull/8221#discussion_r1041135388"> +<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> +<script src="resources/popover-utils.js"></script> + +<button id=target>target</button> +<div id=popover popover=auto>popover</div> + +<script> +for (const capture of [true, false]) { + for (const eventName of ['pointerdown', 'pointerup', 'mousedown', 'mouseup', 'click']) { + promise_test(async t => { + t.add_cleanup(() => { + try { + popover.hidePopover(); + } catch {} + }); + + popover.showPopover(); + document.addEventListener(eventName, event => { + event.preventDefault(); + }, {capture, once: true}); + // Click away from the popover to activate light dismiss. + await clickOn(target); + assert_equals(document.querySelectorAll(':popover-open').length, 0, + 'The popover should be closed via light dismiss even when preventDefault is called.'); + + popover.showPopover(); + document.addEventListener(eventName, event => { + event.stopPropagation(); + }, {capture, once: true}); + // Click away from the popover to activate light dismiss. + await clickOn(target); + assert_equals(document.querySelectorAll(':popover-open').length, 0, + 'The popover should be closed via light dismiss even when stopPropagation is called.'); + + }, `Tests the interactions between popover light dismiss and pointer/mouse events. eventName: ${eventName}, capture: ${capture}`); + } +} + +promise_test(async t => { + t.add_cleanup(() => { + try { + popover.hidePopover(); + } catch {} + }); + popover.showPopover(); + + const expectedEvents = [ + 'pointerdown', + 'mousedown', + 'pointerup', + 'mouseup', + 'beforetoggle newState: closed', + 'click' + ]; + const events = []; + + for (const eventName of ['pointerdown', 'pointerup', 'mousedown', 'mouseup', 'click']) { + document.addEventListener(eventName, () => events.push(eventName)); + } + popover.addEventListener('beforetoggle', event => { + events.push('beforetoggle newState: ' + event.newState); + }); + + // Click away from the popover to activate light dismiss. + await clickOn(target); + + assert_array_equals(events, expectedEvents, + 'pointer and popover events should be fired in the correct order.'); + + assert_equals(document.querySelectorAll(':popover-open').length, 0, + 'The popover should be closed via light dismiss.'); + +}, 'Tests the order of pointer/mouse events during popover light dismiss.'); +</script> diff --git a/testing/web-platform/tests/html/semantics/popovers/light-dismiss-remove-target.html b/testing/web-platform/tests/html/semantics/popovers/light-dismiss-remove-target.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<link rel=author href="mailto:jarhar@chromium.org"> +<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> + +<div id=target>light dismiss target</div> +<div id=popover popover>popover</div> + +<script> +const target = document.getElementById('target'); +const popover = document.getElementById('popover'); + +promise_test(async () => { + popover.showPopover(); + assert_true(popover.matches(':popover-open'), + 'popover should be open at the start of the test.'); + + target.addEventListener('pointerdown', () => { + target.remove(); + }); + + await (new test_driver.Actions() + .pointerMove(0, 0, {origin: target}) + .pointerDown() + .pointerUp()) + .send(); + + assert_true(popover.matches(':popover-open'), + 'popover should not be light dismissed after removing the target during pointerdown.'); +}, 'Light dismiss should still happen if the clicked element is removed during pointerdown.'); +</script> diff --git a/testing/web-platform/tests/html/semantics/popovers/popover-light-dismiss-contextmenu.html b/testing/web-platform/tests/html/semantics/popovers/popover-light-dismiss-contextmenu.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://github.com/whatwg/html/issues/10905"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="/resources/testdriver-vendor.js"></script> + +<div id=target>target</div> +<div id=popover popover=auto>popover</div> + +<script> +const target = document.getElementById('target'); +const popover = document.getElementById('popover'); + +promise_test(async () => { + let contextmenuFired = false; + target.addEventListener('contextmenu', event => { + event.preventDefault(); + popover.showPopover(); + contextmenuFired = true; + }); + + const actions = new test_driver.Actions(); + await actions.pointerMove(0, 0, {origin: target}) + .pointerDown({button: actions.ButtonType.RIGHT}) + .pointerUp({button: actions.ButtonType.RIGHT}) + .send(); + + assert_true(contextmenuFired, 'right clicking should fire a contextmenu event.'); + assert_true(popover.matches(':popover-open'), 'popover should be open.'); +}, 'Popovers should not be light dismissed during contextmenu event.'); +</script> diff --git a/testing/web-platform/tests/html/semantics/popovers/popover-light-dismiss-touch-scroll.html b/testing/web-platform/tests/html/semantics/popovers/popover-light-dismiss-touch-scroll.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://issues.chromium.org/issues/408010435"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="/resources/testdriver-vendor.js"></script> + +<div id=popover popover=auto>popover</div> +<div style="height:99999px"></div> + +<script> +promise_test(async () => { + const popover = document.getElementById('popover'); + popover.showPopover(); + + await (new test_driver.Actions() + .addPointer('finger', 'touch') + .pointerMove(1, 100) + .pointerDown() + .pointerMove(1, 1) + .pointerUp()) + .send(); + + assert_not_equals(window.scrollY, 0, + 'The page should have been scrolled by touching and dragging.'); + assert_true(popover.matches(':popover-open'), + 'The popover should still be open.'); +}, 'Popovers should not be light dismissed when scrolling via touch.'); +</script>