test_synthmousemove_after_dnd.html (2093B)
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>Test synthesized mouse move after drag and drop</title> 7 <link rel="stylesheet" href="/tests/SimpleTest/test.css"> 8 <script src="/tests/SimpleTest/SimpleTest.js"></script> 9 <script src="/tests/SimpleTest/EventUtils.js"></script> 10 <script> 11 "use strict"; 12 13 SimpleTest.waitForExplicitFinish(); 14 SimpleTest.waitForFocus(async () => { 15 const source = document.getElementById("source"); 16 const target = document.getElementById("target"); 17 18 for (const type of ["dragover", "dragenter"]) { 19 target.addEventListener(type, event => { 20 event.dataTransfer.dropEffect = "copy"; 21 event.preventDefault(); 22 }); 23 } 24 25 await (async function test_basic() { 26 const promiseDrop = new Promise(resolve => { 27 target.addEventListener("drop", event => { 28 event.preventDefault(); 29 isnot( 30 document.querySelector("span:hover"), 31 target, 32 "The target should not have hover state during the drop event propagation" 33 ); 34 info("Waiting for mouseover event after drop event..."); 35 target.addEventListener("mouseover", () => { 36 info("Got mouseover event"); 37 resolve(); 38 }, {once: true}); 39 }, { once: true }); 40 }); 41 info("Dragging selection is the source element and drop it to the target..."); 42 getSelection().selectAllChildren(source); 43 synthesizePlainDragAndDrop({ 44 srcSelection: getSelection(), 45 destElement: target, 46 }); 47 await promiseDrop; 48 await new Promise(resolve => 49 requestAnimationFrame(() => requestAnimationFrame(resolve)) 50 ); 51 is( 52 document.querySelector("span:hover"), 53 target, 54 "test_basic: The drop target should have hover state" 55 ); 56 })(); 57 58 document.querySelector("style").remove(); 59 SimpleTest.finish(); 60 }); 61 </script> 62 <style> 63 * { 64 font-size: 48px; 65 } 66 </style> 67 </head> 68 <body> 69 <div> 70 <span id="source">Drag me!</span> 71 </div> 72 <div> 73 <span id="target">Drop here!</span> 74 </div> 75 </body> 76 </html>