commit a6dfed51ef428ae4ac7cc9195d4d90dad3ef551a
parent 3eec6cad90349f5749dc3441c28fb9dfc30689b2
Author: Peng Zhou <zhoupeng.1996@bytedance.com>
Date: Wed, 7 Jan 2026 09:19:03 +0000
Bug 2008483 [wpt PR 56979] - Automate pointerevent-drag-interaction WPT test, a=testonly
Automatic update from web-platform-tests
Automate pointerevent-drag-interaction WPT test
This CL converts the manual pointerevent-drag-interaction test to an
automated test using test_driver.
This CL has no behavior changes.
Bug: 40727316
Change-Id: I520aa36cff55b28930616256a3cc4223671ae55b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7292485
Reviewed-by: Kent Tamura <tkent@chromium.org>
Commit-Queue: Mustaq Ahmed <mustaq@chromium.org>
Reviewed-by: Mustaq Ahmed <mustaq@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1564358}
--
wpt-commits: 8d423fc1ba37f56aadf9f04f7deddfb28ae421ca
wpt-pr: 56979
Diffstat:
2 files changed, 123 insertions(+), 103 deletions(-)
diff --git a/testing/web-platform/tests/pointerevents/html/pointerevent_drag_interaction-manual.html b/testing/web-platform/tests/pointerevents/html/pointerevent_drag_interaction-manual.html
@@ -1,103 +0,0 @@
-<html>
- <head>
- <title>Pointer Events interaction with drag and drop</title>
- <meta name="viewport" content="width=device-width">
- <link rel="stylesheet" type="text/css" href="../pointerevent_styles.css">
- <script src="/resources/testharness.js"></script>
- <script src="/resources/testharnessreport.js"></script>
- <!-- Additional helper script for common checks across event types -->
- <script type="text/javascript" src="../pointerevent_support.js"></script>
- <script>
- var eventList = ['pointerdown', 'pointerup', 'pointercancel', 'gotpointercapture', 'lostpointercapture', 'dragstart', 'mousedown'];
-
- PhaseEnum = {
- DndWithoutCapture: 0,
- DndWithCapture: 1,
- DndWithCaptureMouse: 2,
- DndPrevented: 3,
- Done: 4,
- };
- var phase = PhaseEnum.DndWithoutCapture;
- var received_events = [];
- var pointerId = -1;
-
- function resetTestState() {
- phase = PhaseEnum.DndWithoutCapture;
- }
-
- function run() {
- var test_pointerEvent = setup_pointerevent_test("pointer events vs drag and drop", ['mouse']);
-
- var target0 = document.querySelector('#target0');
- var target1 = document.querySelector('#target1');
-
- function handleEvent(e) {
- if (e.type == 'pointerdown') {
- received_events = [];
- if (phase == PhaseEnum.DndWithCapture) {
- target0.setPointerCapture(e.pointerId);
- } else if (phase == PhaseEnum.DndWithCaptureMouse) {
- pointerId = e.pointerId;
- }
- }
- if (e.type == 'mousedown') {
- if (phase == PhaseEnum.DndWithCaptureMouse) {
- target0.setPointerCapture(pointerId);
- }
- }
- received_events.push(e.type + "@" + e.target.id);
- if (e.type == 'dragstart') {
- e.dataTransfer.setData('text/plain', 'dragstart test');
- if (phase == PhaseEnum.DndPrevented)
- e.preventDefault();
- }
- if (phase == PhaseEnum.DndWithoutCapture && e.type == 'pointercancel') {
- phase++;
- test(() => {
- assert_equals(received_events.join(', '), "pointerdown@target0, mousedown@target0, dragstart@target0, pointercancel@target0", "Pointercancel should be fired with the expected order when drag operation starts.");
- }, "Pointercancel when drag operation starts");
- } else if (phase == PhaseEnum.DndWithCapture && e.type == 'lostpointercapture') {
- test(() => {
- assert_equals(received_events.join(', '), "pointerdown@target0, mousedown@target0, gotpointercapture@target0, dragstart@target0, pointercancel@target0, lostpointercapture@target0", "Pointercancel and lostpointercapture should be fired with the expected order when drag operation starts.");
- }, "Pointercancel while capturing when drag operation starts");
- phase++;
- } else if (phase == PhaseEnum.DndWithCaptureMouse && e.type == 'lostpointercapture') {
- test(() => {
- assert_equals(received_events.join(', '), "pointerdown@target0, mousedown@target0, gotpointercapture@target0, dragstart@target0, pointercancel@target0, lostpointercapture@target0", "Pointercancel and lostpointercapture should be fired with the expected order when drag operation starts.");
- }, "Pointercancel while capturing on mousedown when drag operation starts");
- phase++;
- } else if (phase == PhaseEnum.DndPrevented && e.type == 'pointerup') {
- test(() => {
- assert_equals(received_events.join(', '), "pointerdown@target0, mousedown@target0, dragstart@target0, pointerup@target1", "Pointerevent stream shouldn't get interrupted when drag is prevented.");
- }, "Pointerevent stream when drag is prevented.");
- phase++;
- test_pointerEvent.done();
- }
- }
- eventList.forEach(function(eventName) {
- on_event(target0, eventName, handleEvent);
- on_event(target1, eventName, handleEvent);
- });
- }
- </script>
- </head>
- <body onload="run()">
- <h1>Pointer Events interaction with drag and drop</h1>
- <h2 id="pointerTypeDescription"></h2>
- <h4>
- Test Description: This test checks that the pointercancel (and if needed lostpointercapture) is dispatched when drag starts.
- <ol>
- <li>Press down on the black square.</li>
- <li>Move your pointer to purple square and release.</li>
- <li>Repeat the first two steps.</li>
- <li>Repeat the first two steps once again.</li>
- <li>Repeat the first two steps once again.</li>
- </ol>
- Test passes if the proper behavior of the events is observed.
- </h4>
- <div id="testContainer">
- <div draggable="true" id="target0"></div>
- <div id="target1"></div>
- </div>
- </body>
-</html>
diff --git a/testing/web-platform/tests/pointerevents/pointerevent-drag-interaction.html b/testing/web-platform/tests/pointerevents/pointerevent-drag-interaction.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width">
+<meta name="timeout" content="long">
+<title>Pointer Events interaction with drag and drop</title>
+<link rel="author" href="mailto:zhoupeng.1996@bytedance.com">
+<link rel="help" href="https://w3c.github.io/pointerevents/">
+<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
+<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>
+<script src="pointerevent_support.js"></script>
+
+<div id="testContainer">
+ <div draggable="true" id="target0"></div>
+ <div id="target1"></div>
+</div>
+
+<script>
+let received_events = [];
+
+function reset() {
+ received_events = [];
+ // Use ESC to cancel drag session.
+ const Escape = '\uE00C';
+ return new test_driver.Actions()
+ .keyDown(Escape)
+ .keyUp(Escape)
+ .send();
+}
+
+function performDrag() {
+ return new test_driver.Actions()
+ .addPointer('pointer-drag', 'mouse')
+ .pointerMove(0, 0, { origin: target0 })
+ .pointerDown()
+ .pointerMove(10, 10, { origin: target0 })
+ .pointerMove(0, 0, { origin: target1 })
+ .pause(100)
+ .pointerUp()
+ .send();
+}
+
+function on(t, target, eventName, handler) {
+ target.addEventListener(eventName, handler);
+ t.add_cleanup(() => target.removeEventListener(eventName, handler));
+}
+
+function trackEvents(t, target, eventNames) {
+ eventNames.forEach(name => {
+ on(t, target, name, e => received_events.push(e.type + '@' + target.id));
+ });
+}
+
+promise_test(async t => {
+ t.add_cleanup(reset);
+
+ trackEvents(t, target0, ['pointerdown', 'mousedown', 'dragstart', 'pointercancel']);
+ const pointerCancelPromise = new Promise(resolve => {
+ on(t, target0, 'pointercancel', resolve);
+ });
+
+ await performDrag();
+ await pointerCancelPromise;
+
+ assert_equals(received_events.join(', '),
+ 'pointerdown@target0, mousedown@target0, dragstart@target0, pointercancel@target0');
+}, 'Pointercancel should be fired with the expected order when drag operation starts');
+
+promise_test(async t => {
+ t.add_cleanup(reset);
+
+ trackEvents(t, target0, ['pointerdown', 'mousedown', 'gotpointercapture', 'dragstart', 'pointercancel', 'lostpointercapture']);
+ on(t, target0, 'pointerdown', e => target0.setPointerCapture(e.pointerId));
+ const lostCapturePromise = new Promise(resolve => {
+ on(t, target0, 'lostpointercapture', resolve);
+ });
+
+ await performDrag();
+ await lostCapturePromise;
+
+ assert_equals(
+ received_events.join(', '),
+ 'pointerdown@target0, mousedown@target0, gotpointercapture@target0, dragstart@target0, pointercancel@target0, lostpointercapture@target0');
+}, 'Pointercancel and lostpointercapture should be fired with the expected order when drag operation starts (capture on pointerdown)');
+
+promise_test(async t => {
+ t.add_cleanup(reset);
+ let pointerId = -1;
+
+ trackEvents(t, target0, ['pointerdown', 'mousedown', 'gotpointercapture', 'dragstart', 'pointercancel', 'lostpointercapture']);
+ on(t, target0, 'pointerdown', e => { pointerId = e.pointerId; });
+ on(t, target0, 'mousedown', e => { target0.setPointerCapture(pointerId); });
+ const lostCapturePromise = new Promise(resolve => {
+ on(t, target0, 'lostpointercapture', resolve);
+ });
+
+ await performDrag();
+ await lostCapturePromise;
+
+ assert_equals(received_events.join(', '),
+ 'pointerdown@target0, mousedown@target0, gotpointercapture@target0, dragstart@target0, pointercancel@target0, lostpointercapture@target0');
+}, 'Pointercancel and lostpointercapture should be fired with the expected order when drag operation starts (capture on mousedown)');
+
+promise_test(async t => {
+ t.add_cleanup(reset);
+
+ trackEvents(t, target0, ['pointerdown', 'mousedown', 'dragstart']);
+ trackEvents(t, target1, ['pointerup']);
+ on(t, target0, 'dragstart', e => e.preventDefault());
+ const pointerUpPromise = new Promise(resolve => {
+ on(t, target1, 'pointerup', resolve);
+ });
+
+ await performDrag();
+ await pointerUpPromise;
+
+ assert_equals(received_events.join(', '),
+ 'pointerdown@target0, mousedown@target0, dragstart@target0, pointerup@target1');
+}, 'Pointerevent stream should not get interrupted when drag is prevented.');
+</script>
