Bug 1866572 [wpt PR 43344] - Lose pointer capture if capture target is removed by gotpointercapture., a=testonly

Automatic update from web-platform-tests Lose pointer capture if capture target is removed by gotpointercapture. Also check that capture target is still in DOM before getting pointer capture. Bug: 1502031 Change-Id: Id7791dbd01fc8b688a23120dc4bdeec8e6bf62f8 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5053186 Auto-Submit: Robert Flack <flackr@chromium.org> Reviewed-by: Mustaq Ahmed <mustaq@chromium.org> Commit-Queue: Robert Flack <flackr@chromium.org> Cr-Commit-Position: refs/heads/main@{#1239810} -- wpt-commits: a014594610d06c1f889fe25345639149a619dff5 wpt-pr: 43344
2023-12-22 08:37:31 +00:00 · 2023-12-22 08:37:31 +00:00 · 3333c0dcf6
--- a/testing/web-platform/tests/pointerevents/pointerevent_lostpointercapture_remove_setcapture_node.html
+++ b/testing/web-platform/tests/pointerevents/pointerevent_lostpointercapture_remove_setcapture_node.html
@ -0,0 +1,97 @@
+<!doctype html>
+<html>
+    <head>
+        <title>Lostpointercapture fires on document when target is removed</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>
+        <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>
+    </head>
+    <body>
+        <h1>Pointer Events - lostpointercapture removes new capture element</h1>
+        <input type="button" id="button" value="Set Capture"><br>
+        <div id="target0"></div>
+        <div id="target1"></div>
+        <script type='text/javascript'>
+          var target0 = document.getElementById('target0');
+          var target1 = document.getElementById('target1');
+          var captureButton = document.getElementById('button');
+          var targets = [target0, target1, captureButton];
+          const LOG_EVENT_TYPES = ['pointerover', 'pointerenter', 'pointerdown', 'pointermove', 'pointerup', 'pointercancel', 'pointerout', 'pointerleave', 'gotpointercapture', 'lostpointercapture'];
+          promise_test(async (test) => {
+            captureButton.focus();
+            var events = [];
+            var lastLogMessage = "";
+            let logEvent = (event) => {
+              let logMessage = `${event.type}@${event.target.id || event.target.tagName || 'document'}`;
+              // Only log a particular event once to avoid coalescing differences.
+              if (logMessage == lastLogMessage)
+                return;
+              lastLogMessage = logMessage;
+              events.push(logMessage);
+            };
+            document.addEventListener('lostpointercapture', logEvent);
+            for (const target of targets) {
+              for (const eventType of LOG_EVENT_TYPES) {
+                target.addEventListener(eventType, logEvent);
+              }
+            }
+            const nextSibling = target1.nextSibling;
+            test.add_cleanup(() => {
+              document.removeEventListener('lostpointercapture', logEvent);
+              for (const target of targets) {
+                for (const eventType of LOG_EVENT_TYPES) {
+                  target.removeEventListener(eventType, logEvent);
+                }
+              }
+              nextSibling.parentNode.insertBefore(target1, nextSibling);
+            });
+
+            let finishPromise = Promise.any([
+              getEvent('pointerup', document.body, test),
+              getEvent('pointerup', target1, test)]);
+
+            getEvent('pointerdown', captureButton, test).then((event) => {
+              target0.setPointerCapture(event.pointerId);
+            });
+            // On the first captured move, we'll set capture to target1.
+            getEvent('pointermove', target0, test).then((event) => {
+              target1.setPointerCapture(event.pointerId);
+            });
+            // But remove the new capture target when we lose capture.
+            getEvent('lostpointercapture', target0, test).then((event) => {
+              target1.remove();
+            });
+            getEvent('gotpointercapture', target1, test).then((event) => {
+              assert_unreached("target1 is removed and should never get pointer capture.");
+            });
+
+            // Inject mouse inputs.
+            const actions = new test_driver.Actions();
+            actions_promise = actions
+                .pointerMove(0, 0, {origin: captureButton})
+                .pointerDown()
+                .pointerMove(10, 0, {origin: captureButton})
+                .pointerUp()
+                .send();
+
+            await finishPromise;
+
+            assert_equals(events.join(", "), [
+                // Pointer down on button
+                "pointerover@button", "pointerenter@button", "pointermove@button", "pointerdown@button",
+                // Captured by target0
+                "pointerout@button", "pointerleave@button", "pointerover@target0", "pointerenter@target0", "gotpointercapture@target0", "pointermove@target0",
+                // Captured by target1, losing capture on target0 which removes target1.
+                "lostpointercapture@target0", "pointerout@target0", "pointerleave@target0",
+                // Uncaptured pointer re-enters button and is lifted.
+                "pointerover@button", "pointerenter@button", "pointermove@button", "pointerup@button"
+            ].join(", "));
+          }, "setPointerCapture target removed by lostpointercapture");
+        </script>
+    </body>
+</html>