test_pointercancel_target_at_dragstart.html (1342B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 6 <title>`pointercancel` target at drag start should be the draggable element</title> 7 <script src="/tests/SimpleTest/EventUtils.js"></script> 8 <script src="/tests/SimpleTest/SimpleTest.js"></script> 9 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 10 <style> 11 div[draggable=true] { 12 width: 64px; 13 height: 64px; 14 font-size: 64px; 15 padding: 0; 16 overflow: hidden; 17 } 18 </style> 19 <script> 20 "use strict"; 21 22 SimpleTest.waitForExplicitFinish(); 23 SimpleTest.waitForFocus(async () => { 24 const draggable = document.querySelector("div[draggable]"); 25 let pointerCancelTarget; 26 draggable.addEventListener("pointercancel", event => { 27 pointerCancelTarget = event.target; 28 }); 29 await synthesizePlainDragAndDrop({ 30 srcElement: draggable, 31 destElement: document.getElementById("dest"), 32 srcX: draggable.getBoundingClientRect().width / 2, 33 srcY: draggable.getBoundingClientRect().height / 2, 34 }); 35 is( 36 pointerCancelTarget, 37 draggable, 38 "`pointercancel` event target should be the draggable element" 39 ); 40 41 SimpleTest.finish(); 42 }); 43 </script> 44 </head> 45 <body> 46 <div draggable="true">DragMe!</div> 47 <div id="dest" style="width: 100px; height: 100px"></div> 48 </body> 49 </html>