test_mouse_over_at_removing_down_target.html (2347B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Check whether `mouseup` events are fired after pending boundary events</title> 6 <script src="/tests/SimpleTest/SimpleTest.js"></script> 7 <script src="/tests/SimpleTest/EventUtils.js"></script> 8 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"> 9 <style> 10 div#parent { 11 width: 100%; 12 height: 50px; 13 background-color: gray; 14 } 15 div#child { 16 width: 100%; 17 height: 40px; 18 background-color: lime; 19 } 20 </style> 21 <script> 22 "use strict"; 23 24 SimpleTest.waitForExplicitFinish(); 25 SimpleTest.waitForFocus(async () => { 26 const winUtils = SpecialPowers.wrap(window).windowUtils; 27 try { 28 winUtils.disableNonTestMouseEvents(true); 29 const parent = document.querySelector("div"); 30 const child = parent.querySelector("div"); 31 synthesizeMouseAtCenter(child, { type: "mousemove" }); 32 await new Promise(resolve => requestAnimationFrame( 33 () => requestAnimationFrame(resolve) 34 )); 35 36 const mouseEvents = []; 37 child.addEventListener("mousedown", event => { 38 event.target.remove(); 39 mouseEvents.push("mousedown@div#child"); 40 }); 41 document.addEventListener("mouseover", event => { 42 mouseEvents.push(`mouseover@${event.target.localName}${event.target.id ? `#${event.target.id}` : ""}`); 43 }, {capture: true}); 44 document.addEventListener("mouseup", event => { 45 mouseEvents.push(`mouseup@${event.target.localName}${event.target.id ? `#${event.target.id}` : ""}`); 46 }, {capture: true}); 47 winUtils.advanceTimeAndRefresh(100); 48 // Click in the child, then, the child will be removed by the "mousedown" 49 // event listener and that should cause "mouseover" on the parent and that 50 // must be fired before "mouseup". 51 synthesizeMouseAtCenter(child, {}); 52 winUtils.restoreNormalRefresh(); 53 await new Promise(resolve => requestAnimationFrame( 54 () => requestAnimationFrame(resolve) 55 )); 56 is( 57 mouseEvents.toString(), 58 "mousedown@div#child,mouseover@div#parent,mouseup@div#parent", 59 "mouseover should be fired before mouseup on the ex-parent of the removed child" 60 ); 61 } finally { 62 winUtils.disableNonTestMouseEvents(false); 63 document.querySelector("style").remove(); 64 } 65 SimpleTest.finish(); 66 }); 67 </script> 68 </head> 69 <body> 70 <div id="parent"> 71 <div id="child"></div> 72 </div> 73 </body> 74 </html>