| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset=utf-8> |
| <style> |
| |
| .target { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100px; |
| height: 100px; |
| } |
| |
| </style> |
| </head> |
| <body> |
| <div class="target" id="second"></div> |
| <div class="target" id="first"></div> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="../utils.js"></script> |
| <script> |
| |
| 'use strict'; |
| |
| promise_test(async () => { |
| let numberOfPointerDownEvents = 0; |
| document.body.addEventListener("pointerdown", event => { |
| numberOfPointerDownEvents++; |
| if (numberOfPointerDownEvents == 1) { |
| event.target.setPointerCapture(event.pointerId); |
| assert_equals(event.target.id, "first"); |
| } else if (numberOfPointerDownEvents == 2) |
| assert_equals(event.target.id, "second"); |
| else |
| assert_unreached("There were more than two pointerdown events dispatched."); |
| }); |
| |
| document.body.addEventListener("pointerup", event => event.target.remove(), { once: true }); |
| |
| // Move the mouse pointer over both of the stacked targets. |
| await eventSender.asyncMouseMoveTo(50, 50); |
| |
| // Click once, this will set pointer capture on "first" and then remove it when the pointer is released. |
| await eventSender.asyncMouseDown(); |
| await eventSender.asyncMouseUp(); |
| |
| // Click a second time, this should target "second". |
| await eventSender.asyncMouseDown(); |
| await eventSender.asyncMouseUp(); |
| |
| assert_equals(numberOfPointerDownEvents, 2, "There were two pointerdown events dispatched."); |
| }, `Testing that removing the capture element from the DOM doesn't prevent future pointer events to be dispatched.`); |
| |
| </script> |
| </body> |
| </html> |
