test_drag_coords.html (1829B)
1 <!doctype html> 2 <title>Test for drag event coordinates</title> 3 <script src="/tests/SimpleTest/SimpleTest.js"></script> 4 <script src="/tests/SimpleTest/EventUtils.js"></script> 5 <link rel="stylesheet" href="/tests/SimpleTest/test.css"/> 6 <style> 7 #draggable { 8 display: inline-block; 9 border: 1px solid; 10 } 11 </style> 12 <div draggable="true" id="draggable">Drag me</div> 13 <script> 14 add_task(async function test_drag_coords() { 15 await SpecialPowers.contentTransformsReceived(window); 16 17 let target = document.getElementById("draggable"); 18 let coords = {}; 19 let promises = []; 20 for (let type of ["dragstart", "dragend"]) { 21 promises.push(new Promise(function(resolve) { 22 target.addEventListener(type, function(e) { 23 info("Got " + e.type); 24 coords[e.type] = { 25 screen: { 26 x: e.screenX, 27 y: e.screenY, 28 }, 29 client: { 30 x: e.clientX, 31 y: e.clientY, 32 }, 33 }; 34 resolve(); 35 }); 36 })); 37 } 38 synthesizePlainDragAndDrop({ 39 srcElement: target, 40 srcX: 2, 41 srcY: 2, 42 stepX: 10, 43 stepY: 10, 44 }); 45 await Promise.all(promises); 46 info(JSON.stringify(coords)); 47 for (let coordType of ["screen", "client"]) { 48 // Let (tx,ty) = (target.x, target.y). Then synthesizePlainDragAndDrop 49 // sends mousedown/dragstart at (tx + srcX, ty + srcY), or (tx + 2, ty + 2). 50 // It later sends dragend at (tx + srcX + 2*stepX, ty + srcY + 2*stepY), 51 // or (tx + 22, ty + 22). In other words, the position at dragend should 52 // be the position at dragstart, but offset by (20, 20). 53 is(coords.dragend[coordType].x, coords.dragstart[coordType].x + 20, `x ${coordType} is correct`); 54 is(coords.dragend[coordType].y, coords.dragstart[coordType].y + 20, `y ${coordType} is correct`); 55 } 56 }); 57 </script>