pointerevent_lostpointercapture_for_disconnected_node.html (5636B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Lostpointercapture fires on document when target is removed</title> 5 <meta name="viewport" content="width=device-width"> 6 <link rel="stylesheet" type="text/css" href="pointerevent_styles.css"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/resources/testdriver.js"></script> 10 <script src="/resources/testdriver-actions.js"></script> 11 <script src="/resources/testdriver-vendor.js"></script> 12 <script src="pointerevent_support.js"></script> 13 </head> 14 <body> 15 <h1>Pointer Events - lostpointercapture when capturing element is removed</h1> 16 <div id="target0"></div> 17 <br> 18 <input type="button" id="btnCapture" value="Set Capture"> 19 <script type='text/javascript'> 20 var isDisconnected = false; 21 var lostPointerCapture = false; 22 var count = 0; 23 var event_log = []; 24 var recieved_before_lostcapture = []; 25 26 var detected_pointertypes = {}; 27 add_completion_callback(end_of_test); 28 function end_of_test() { 29 showLoggedEvents(); 30 showPointerTypes(); 31 } 32 33 var target0 = document.getElementById('target0'); 34 var captureButton = document.getElementById('btnCapture'); 35 36 var test_lostpointercapture = async_test("lostpointercapture event received"); 37 38 window.onload = function() { 39 var actions_promise; 40 41 const POINTER_EVENT_TYPES = ['pointerover', 'pointerenter', 'pointerdown', 'pointermove', 'pointerup', 'pointercancel', 'pointerout', 'pointerleave']; 42 // Add listeners to target0 explicitly as it is removed from the DOM. 43 for (let target of [document.body, target0]) { 44 for (let eventType of POINTER_EVENT_TYPES) { 45 target.addEventListener(eventType, (evt) => { 46 // Prevent double-reporting events dispatched to target0. 47 if (target == document.body && evt.target == target0) { 48 return; 49 } 50 const ident = evt.target.id || evt.target.tagName; 51 event_log.push(`${evt.type}@${ident}`); 52 if (isDisconnected && !lostPointerCapture) { 53 recieved_before_lostcapture.push(`${evt.type}@${ident}`); 54 } 55 }); 56 } 57 } 58 59 on_event(captureButton, 'pointerdown', function(event) { 60 detected_pointertypes[event.pointerType] = true; 61 target0.setPointerCapture(event.pointerId); 62 }); 63 64 on_event(target0, 'gotpointercapture', function(e) { 65 lostPointerCapture = false; 66 event_log.push('gotpointercapture@target0'); 67 isDisconnected = true; 68 received_events = []; 69 target0.parentNode.removeChild(target0); 70 test(function() { 71 assert_true(!lostPointerCapture, "lostpointercapture must not be fired synchronously with DOM removal"); 72 }); 73 }); 74 75 76 77 on_event(target0, 'lostpointercapture', function(e) { 78 event_log.push('lostpointercapture@target0'); 79 lostPointerCapture = true; 80 test(function() { 81 // TA: 11.3 82 assert_unreached("lostpointercapture must be fired on the document, not the capturing element"); 83 }, "lostpointercapture must not be dispatched on the disconnected node"); 84 }); 85 86 on_event(document, 'lostpointercapture', function(e) { 87 lostPointerCapture = true; 88 test(function() { 89 assert_equals(recieved_before_lostcapture.join(", "), "", "No pointerevents should be received before lost capture is resolved"); 90 }, "lostpointercapture must be received before the next pointerevent after the node is disconnected"); 91 event_log.push('lostpointercapture@document'); 92 test(function() { 93 // TA: 11.3 94 assert_true(isDisconnected, "lostpointercapture must be fired on the document"); 95 }, "lostpointercapture is dispatched on the document"); 96 97 actions_promise.then( () => { 98 test_lostpointercapture.done(); 99 }); 100 }); 101 102 // Inject mouse inputs. 103 actions_promise = new test_driver.Actions() 104 .pointerMove(0, 0, {origin: captureButton}) 105 .pointerDown() 106 .pointerMove(2, 0, {origin: captureButton}) 107 .pointerMove(5, 0, {origin: captureButton}) 108 .pointerMove(8, 0, {origin: captureButton}) 109 .pointerMove(10, 0, {origin: captureButton}) 110 .send(); 111 } 112 </script> 113 <h1>Pointer Events Capture Test</h1> 114 <div id="complete-notice"> 115 <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> 116 <p>The following events were logged: <span id="event-log"></span>.</p> 117 </div> 118 <div id="log"></div> 119 </body> 120 </html>