pointerevent_boundary_events_in_capturing.html (4029B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Pointer Events boundary events in capturing tests</title> 5 <meta name="viewport" content="width=device-width"> 6 <meta name="variant" content="?mouse"> 7 <meta name="variant" content="?touch"> 8 <meta name="variant" content="?pen"> 9 <link rel="stylesheet" type="text/css" href="pointerevent_styles.css"> 10 <script src="/resources/testharness.js"></script> 11 <script src="/resources/testharnessreport.js"></script> 12 <script src="/resources/testdriver.js"></script> 13 <script src="/resources/testdriver-actions.js"></script> 14 <script src="/resources/testdriver-vendor.js"></script> 15 <script src="pointerevent_support.js"></script> 16 </head> 17 <body> 18 <h1>Pointer Events boundary events in capturing</h1> 19 <h2 id="pointerTypeDescription"></h2> 20 <h4 id="desc"> 21 This automated test checks the boundary events of pointer events while the capturing 22 changes. This test cannot be run manually. 23 </h4> 24 <div id="target0" class="touchActionNone"></div> 25 <div id="capturer">Do not hover over or touch this element.</div> 26 <div id="log"></div> 27 </body> 28 <script> 29 let input_source = location.search.substring(1); 30 31 let events_received = []; 32 let log_events = false; 33 34 // The events are handled as follows: 35 // - When "target0" receives a "pointerdown", the pointer is captured to "capturer" and event 36 // logging starts. 37 // - During event logging, all boundary events and "got/lostpointercapture" events to both 38 // "target0" and "capturer" are logged. 39 // - The first "pointermove" at "capturer" releases the pointer capture, so that subsequent 40 // "pointermove"/"pointerup" events go to "target0". 41 // - Event logging ends when "target0" receives a "pointerup". 42 43 function logEvent(event, element) { 44 if (log_events) 45 events_received.push(event.type + "@" + element.id); 46 } 47 48 let target0 = document.getElementById("target0"); 49 let capturer = document.getElementById("capturer"); 50 51 target0.addEventListener("pointerdown", event => { 52 capturer.setPointerCapture(event.pointerId); 53 }); 54 55 capturer.addEventListener("pointermove", event => { 56 if (capturer.hasPointerCapture(event.pointerId)) 57 capturer.releasePointerCapture(event.pointerId); 58 }); 59 60 let other_event_types = [ "pointercancel", 61 "pointerover", "pointerout", "pointerenter", "pointerleave", 62 "gotpointercapture", "lostpointercapture" ]; 63 other_event_types.forEach(event_name => { 64 [target0, capturer].forEach(target => { 65 target.addEventListener(event_name, event => logEvent(event, target)); 66 }); 67 }); 68 69 promise_test(async () => { 70 // Start logging events after the pointerdown in the drag. 71 getEvent("pointerdown", target0).then(() => { 72 log_events = true; 73 }); 74 75 let pointerup_promise = getEvent("pointerup", target0); 76 pointerup_promise.then(() => { 77 log_events = false; 78 }); 79 80 await pointerDragInTarget(input_source, target0, "right"); 81 82 // Wait for all events in the drag to have been dispatched. 83 await pointerup_promise; 84 85 const expected_events = [ 86 "pointerout@target0", "pointerleave@target0", 87 "pointerover@capturer", "pointerenter@capturer", 88 "gotpointercapture@capturer", 89 "lostpointercapture@capturer", 90 "pointerout@capturer", "pointerleave@capturer", 91 "pointerover@target0", "pointerenter@target0" 92 ]; 93 assert_array_equals(events_received, expected_events); 94 95 updateDescriptionComplete(); 96 }, "Boundary events around pointer capture and release"); 97 </script> 98 </html>