pointerevent_pointerrawupdate_flush_pointercapture.https.html (2600B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale:1"> 6 <title>Pointer capture state should be updated before `pointerrawupdate`</title> 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> 13 "use strict"; 14 15 /** 16 * "fire a pointer event" defines: 17 * > If the event is not a gotpointercapture, lostpointercapture, click, 18 * > auxclick or contextmenu event, run the process pending pointer capture 19 * > steps for this PointerEvent. 20 * 21 * This test checks whether `pointerrawupdate` event dispatcher processes 22 * the pending pointer capture state. 23 */ 24 25 addEventListener("DOMContentLoaded", () => { 26 promise_test(async () => { 27 let events = []; 28 function logEvent(event) { 29 events.push(`${event.type}@${event.target.id ? event.target.id : event.target.nodeName}`); 30 } 31 const initialDiv = document.getElementById("init"); 32 await new test_driver.Actions() 33 .pointerMove(0, 0, {origin: initialDiv}) 34 .send(); 35 const target = document.getElementById("target"); 36 const dest = document.getElementById("dest"); 37 for (const type of ["pointerdown", "pointerup", "pointermove", 38 "pointerrawupdate", 39 "gotpointercapture", "lostpointercapture"]) { 40 target.addEventListener(type, logEvent); 41 dest.addEventListener(type, logEvent); 42 } 43 dest.addEventListener("pointerover", logEvent); 44 target.addEventListener("pointerdown", event => { 45 event.target.setPointerCapture(event.pointerId); 46 }); 47 await new test_driver.Actions() 48 .pointerMove(0, 0, {origin: target}) 49 .pointerDown() 50 .pointerMove(0, 0, {origin: dest}) 51 .pointerUp() 52 .send(); 53 assert_equals( 54 events.join(", "), 55 [ 56 "pointerrawupdate@target", "pointermove@target", "pointerdown@target", 57 // "gotpointercapture" should be fired before "pointerrawupdate" 58 "gotpointercapture@target", "pointerrawupdate@target", "pointermove@target", 59 "pointerup@target", "lostpointercapture@target", 60 // Finally, "pointerover" should be fired on the destination 61 "pointerover@dest", 62 ].join(", ") 63 ); 64 }); 65 }, {once: true}); 66 </script> 67 <style> 68 div { 69 min-height: 64px; 70 } 71 </style> 72 </head> 73 <body> 74 <div id="init"></div> 75 <div id="target"></div> 76 <div id="dest"></div> 77 </body> 78 </html>