pointerevent_predicted_coalesced_targets-manual.html (1793B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Manual test for the target of predicted and coalesced events</title> 5 <script> 6 7 let counter = 0; 8 let host; 9 let shadowDiv; 10 11 function end(succeeded, txt) { 12 host.removeEventListener("pointermove", moveListener); 13 shadowDiv.removeEventListener("pointermove", moveListener); 14 host.firstChild.textContent = txt; 15 if (succeeded) { 16 host.style.backgroundColor = "green"; 17 } else { 18 host.style.backgroundColor = "red"; 19 } 20 } 21 22 function moveListener(event) { 23 if (++counter > 50) { 24 host.removeEventListener("pointermove", moveListener); 25 shadowDiv.removeEventListener("pointermove", moveListener); 26 host.firstChild.textContent = "done"; 27 end(true, "succeeded"); 28 } 29 30 let cEvents = event.getCoalescedEvents(); 31 for (e of cEvents) { 32 if (e.target != event.target) { 33 end(false, "Coalesced events should have the same target as the parent event! " + e.target.id + "!=" + event.target.id); 34 return; 35 } 36 } 37 38 let pEvents = event.getPredictedEvents(); 39 for (e of pEvents) { 40 if (e.target != event.target) { 41 end(false, "Predicted events should have the same target as the parent event! " + e.target.id + "!=" + event.target.id); 42 return; 43 } 44 } 45 } 46 47 function init() { 48 host = document.getElementsByTagName("div")[0]; 49 let sr = host.attachShadow({mode: "open"}); 50 sr.innerHTML = '<div id="shadowDiv" style="border: 2px solid green; width: 200px; height: 200px;""><slot></slot></div>'; 51 shadowDiv = sr.firstChild; 52 host.addEventListener("pointermove", moveListener); 53 shadowDiv.addEventListener("pointermove", moveListener); 54 } 55 56 </script> 57 </head> 58 <body onload="init()"> 59 <div id="host" style="border: 2px solid blue; width: 204px; height: 204px;"> 60 Move the pointer fast over this area. 61 </div> 62 </body> 63 </html>