test_pointercancel_target_at_dragstart_with_restyle.html (1531B)
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 which is restyled by a `dragstart` listener 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 draggable.addEventListener("dragstart", () => { 26 draggable.style.width = "128px"; 27 draggable.style.height = "128px"; 28 }, {once: true}); 29 let pointerCancelTarget; 30 draggable.addEventListener("pointercancel", event => { 31 pointerCancelTarget = event.target; 32 }); 33 await synthesizePlainDragAndDrop({ 34 srcElement: draggable, 35 destElement: document.getElementById("dest"), 36 srcX: draggable.getBoundingClientRect().width / 2, 37 srcY: draggable.getBoundingClientRect().height / 2, 38 }); 39 is( 40 pointerCancelTarget, 41 draggable, 42 "`pointercancel` event target should be the draggable element" 43 ); 44 45 SimpleTest.finish(); 46 }); 47 </script> 48 </head> 49 <body> 50 <div draggable="true">DragMe!</div> 51 <div id="dest" style="width: 100px; height: 100px"></div> 52 </body> 53 </html>