| <!doctype html> |
| <html> |
| <head> |
| <title>Pointer Events boundary events in capturing tests</title> |
| <meta name="viewport" content="width=device-width"> |
| <meta name="variant" content="?mouse"> |
| <meta name="variant" content="?touch"> |
| <meta name="variant" content="?pen"> |
| <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 boundary events in capturing</h1> |
| <h2 id="pointerTypeDescription"></h2> |
| <h4 id="desc"> |
| This automated test checks the boundary events of pointer events while the capturing |
| changes. This test cannot be run manually. |
| </h4> |
| <div id="target0" class="touchActionNone"></div> |
| <div id="capturer">Do not hover over or touch this element.</div> |
| <div id="log"></div> |
| </body> |
| <script> |
| let input_source = location.search.substring(1); |
| |
| let events_received = []; |
| let log_events = false; |
| |
| // The events are handled as follows: |
| // - When "target0" receives a "pointerdown", the pointer is captured to "capturer" and event |
| // logging starts. |
| // - During event logging, all boundary events and "got/lostpointercapture" events to both |
| // "target0" and "capturer" are logged. |
| // - The first "pointermove" at "capturer" releases the pointer capture, so that subsequent |
| // "pointermove"/"pointerup" events go to "target0". |
| // - Event logging ends when "target0" receives a "pointerup". |
| |
| function logEvent(event, element) { |
| if (log_events) |
| events_received.push(event.type + "@" + element.id); |
| } |
| |
| let target0 = document.getElementById("target0"); |
| let capturer = document.getElementById("capturer"); |
| |
| target0.addEventListener("pointerdown", event => { |
| capturer.setPointerCapture(event.pointerId); |
| }); |
| |
| capturer.addEventListener("pointermove", event => { |
| if (capturer.hasPointerCapture(event.pointerId)) |
| capturer.releasePointerCapture(event.pointerId); |
| }); |
| |
| let other_event_types = [ "pointercancel", |
| "pointerover", "pointerout", "pointerenter", "pointerleave", |
| "gotpointercapture", "lostpointercapture" ]; |
| other_event_types.forEach(event_name => { |
| [target0, capturer].forEach(target => { |
| target.addEventListener(event_name, event => logEvent(event, target)); |
| }); |
| }); |
| |
| promise_test(async () => { |
| // Start logging events after the pointerdown in the drag. |
| getEvent("pointerdown", target0).then(() => { |
| log_events = true; |
| }); |
| |
| let pointerup_promise = getEvent("pointerup", target0); |
| pointerup_promise.then(() => { |
| log_events = false; |
| }); |
| |
| await pointerDragInTarget(input_source, target0, "right"); |
| |
| // Wait for all events in the drag to have been dispatched. |
| await pointerup_promise; |
| |
| const expected_events = [ |
| "pointerout@target0", "pointerleave@target0", |
| "pointerover@capturer", "pointerenter@capturer", |
| "gotpointercapture@capturer", |
| "lostpointercapture@capturer", |
| "pointerout@capturer", "pointerleave@capturer", |
| "pointerover@target0", "pointerenter@target0" |
| ]; |
| assert_array_equals(events_received, expected_events); |
| |
| updateDescriptionComplete(); |
| }, "Boundary events around pointer capture and release"); |
| </script> |
| </html> |