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