test_slotted_mouse_event.html (2874B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>Bug 1481500: mouse enter / leave events in slotted content</title> 4 <script src="/tests/SimpleTest/SimpleTest.js"></script> 5 <script src="/tests/SimpleTest/EventUtils.js"></script> 6 <link rel="stylesheet" href="/tests/SimpleTest/test.css"> 7 <script> 8 // We move the mouse from the #host to #target, then to #child-target. 9 // 10 // By the time we get to #child-target, we shouldn't have fired any mouseleave. 11 function runTests() { 12 let iframe = document.createElement('iframe'); 13 iframe.style.width = "600px"; 14 iframe.style.height = "600px"; 15 document.body.appendChild(iframe); 16 iframe.onload = () => frameLoaded(iframe); 17 iframe.srcdoc = ` 18 <style> 19 body { 20 padding: 20px; 21 } 22 #child-target { 23 width: 80px; 24 height: 80px; 25 background: yellow; 26 } 27 </style> 28 <div id="host"><div id="target"><div id="child-target"></div></div></div> 29 `; 30 } 31 32 function frameLoaded(iframe) { 33 let host = iframe.contentDocument.getElementById('host'); 34 let target = iframe.contentDocument.getElementById('target'); 35 let childTarget = iframe.contentDocument.getElementById('child-target'); 36 let sawHost = false; 37 let sawTarget = false; 38 let finished = false; 39 40 host.attachShadow({ mode: 'open' }).innerHTML = ` 41 <style> 42 :host { 43 width: 500px; 44 height: 500px; 45 background: purple; 46 } 47 ::slotted(div) { 48 width: 200px; 49 height: 200px; 50 background: green; 51 } 52 </style> 53 <slot></slot> 54 `; 55 56 synthesizeMouse(document.body, 10, 10, { type: "mousemove" }); 57 58 host.addEventListener("mouseenter", e => { 59 if (finished) 60 return; 61 sawHost = true; 62 ok(true, "Should fire mouseenter on the host."); 63 }); 64 65 host.addEventListener("mouseleave", e => { 66 if (finished) 67 return; 68 ok(false, "Should not fire mouseleave when moving the cursor to the slotted target"); 69 }); 70 71 target.addEventListener("mouseenter", () => { 72 if (finished) 73 return; 74 ok(sawHost, "Should've seen the hostmouseenter already"); 75 sawTarget = true; 76 ok(true, "Moving the mouse into the target should trigger a mouseenter there"); 77 }); 78 79 target.addEventListener("mouseleave", () => { 80 if (finished) 81 return; 82 ok(false, "Should not fire mouseleave when moving the cursor to the slotted target's child"); 83 }); 84 85 childTarget.addEventListener("mouseenter", () => { 86 if (finished) 87 return; 88 ok(sawTarget, "Should've seen the target mouseenter already"); 89 finished = true; 90 SimpleTest.finish(); 91 }); 92 93 synthesizeMouseAtCenter(host, { type: "mousemove" }); 94 synthesizeMouseAtCenter(target, { type: "mousemove" }); 95 synthesizeMouseAtCenter(childTarget, { type: "mousemove" }); 96 } 97 98 SimpleTest.waitForExplicitFinish(); 99 window.onload = () => { 100 SimpleTest.waitForFocus(runTests); 101 }; 102 </script>