test_bug432698.html (8612B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=432698 5 --> 6 <head> 7 <title>Test for Bug 432698</title> 8 <script src="/tests/SimpleTest/SimpleTest.js"></script> 9 <script src="/tests/SimpleTest/EventUtils.js"></script> 10 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 11 </head> 12 <body> 13 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=432698">Mozilla Bug 432698</a> 14 <p id="display"></p> 15 <div id="content" style="display: none"> 16 17 </div> 18 <pre id="test"> 19 <script type="application/javascript"> 20 21 /** Test for Bug 432698 */ 22 SimpleTest.waitForExplicitFinish(); 23 SimpleTest.waitForFocus(runTests); 24 var outer; 25 var middle; 26 var inner; 27 var outside; 28 var container; 29 var file; 30 var iframe; 31 var checkRelatedTarget = false; 32 var expectedRelatedEnter = null; 33 var expectedRelatedLeave = null; 34 var mouseentercount = 0; 35 var mouseleavecount = 0; 36 var mouseovercount = 0; 37 var mouseoutcount = 0; 38 39 function sendMouseEvent(t, elem) { 40 var r = elem.getBoundingClientRect(); 41 synthesizeMouse(elem, r.width / 2, r.height / 2, {type: t}); 42 } 43 44 var expectedMouseEnterTargets = []; 45 var expectedMouseLeaveTargets = []; 46 47 function runTests() { 48 outer = document.getElementById("outertest"); 49 middle = document.getElementById("middletest"); 50 inner = document.getElementById("innertest"); 51 outside = document.getElementById("outside"); 52 container = document.getElementById("container"); 53 file = document.getElementById("file"); 54 iframe = document.getElementById("iframe"); 55 56 // Make sure ESM thinks mouse is outside the test elements. 57 sendMouseEvent("mousemove", outside); 58 59 mouseentercount = 0; 60 mouseleavecount = 0; 61 mouseovercount = 0; 62 mouseoutcount = 0; 63 checkRelatedTarget = true; 64 expectedRelatedEnter = outside; 65 expectedRelatedLeave = inner; 66 expectedMouseEnterTargets = ["outertest", "middletest", "innertest"]; 67 sendMouseEvent("mousemove", inner); 68 is(mouseentercount, 3, "Unexpected mouseenter event count!"); 69 is(mouseovercount, 1, "Unexpected mouseover event count!"); 70 is(mouseoutcount, 0, "Unexpected mouseout event count!"); 71 is(mouseleavecount, 0, "Unexpected mouseleave event count!"); 72 expectedRelatedEnter = inner; 73 expectedRelatedLeave = outside; 74 expectedMouseLeaveTargets = ["innertest", "middletest", "outertest"]; 75 sendMouseEvent("mousemove", outside); 76 is(mouseentercount, 3, "Unexpected mouseenter event count!"); 77 is(mouseovercount, 1, "Unexpected mouseover event count!"); 78 is(mouseoutcount, 1, "Unexpected mouseout event count!"); 79 is(mouseleavecount, 3, "Unexpected mouseleave event count!"); 80 81 // Event handling over native anonymous content. 82 var r = file.getBoundingClientRect(); 83 expectedRelatedEnter = outside; 84 expectedRelatedLeave = file; 85 synthesizeMouse(file, r.width / 6, r.height / 2, {type: "mousemove"}); 86 is(mouseentercount, 4, "Unexpected mouseenter event count!"); 87 is(mouseovercount, 2, "Unexpected mouseover event count!"); 88 is(mouseoutcount, 1, "Unexpected mouseout event count!"); 89 is(mouseleavecount, 3, "Unexpected mouseleave event count!"); 90 91 // Moving mouse over type="file" shouldn't cause mouseover/out/enter/leave events 92 synthesizeMouse(file, r.width - (r.width / 6), r.height / 2, {type: "mousemove"}); 93 is(mouseentercount, 4, "Unexpected mouseenter event count!"); 94 is(mouseovercount, 2, "Unexpected mouseover event count!"); 95 is(mouseoutcount, 1, "Unexpected mouseout event count!"); 96 is(mouseleavecount, 3, "Unexpected mouseleave event count!"); 97 98 expectedRelatedEnter = file; 99 expectedRelatedLeave = outside; 100 sendMouseEvent("mousemove", outside); 101 is(mouseentercount, 4, "Unexpected mouseenter event count!"); 102 is(mouseovercount, 2, "Unexpected mouseover event count!"); 103 is(mouseoutcount, 2, "Unexpected mouseout event count!"); 104 is(mouseleavecount, 4, "Unexpected mouseleave event count!"); 105 106 // Initialize iframe 107 iframe.contentDocument.documentElement.style.overflow = "hidden"; 108 iframe.contentDocument.body.style.margin = "0px"; 109 iframe.contentDocument.body.style.width = "100%"; 110 iframe.contentDocument.body.style.height = "100%"; 111 iframe.contentDocument.body.innerHTML = 112 "<div style='width: 100%; height: 50%; border: 1px solid black;'></div>" + 113 "<div style='width: 100%; height: 50%; border: 1px solid black;'></div>"; 114 iframe.contentDocument.body.offsetLeft; // flush 115 116 iframe.contentDocument.body.firstChild.onmouseenter = menter; 117 iframe.contentDocument.body.firstChild.onmouseleave = mleave; 118 iframe.contentDocument.body.lastChild.onmouseenter = menter; 119 iframe.contentDocument.body.lastChild.onmouseleave = mleave; 120 r = iframe.getBoundingClientRect(); 121 expectedRelatedEnter = outside; 122 expectedRelatedLeave = iframe; 123 // Move mouse inside the iframe. 124 synthesizeMouse(iframe.contentDocument.body, r.width / 2, r.height / 4, {type: "mousemove"}, 125 iframe.contentWindow); 126 synthesizeMouse(iframe.contentDocument.body, r.width / 2, r.height - (r.height / 4), {type: "mousemove"}, 127 iframe.contentWindow); 128 is(mouseentercount, 7, "Unexpected mouseenter event count!"); 129 expectedRelatedEnter = iframe; 130 expectedRelatedLeave = outside; 131 sendMouseEvent("mousemove", outside); 132 is(mouseleavecount, 7, "Unexpected mouseleave event count!"); 133 134 checkRelatedTarget = false; 135 136 iframe.contentDocument.body.firstChild.onmouseenter = null; 137 iframe.contentDocument.body.firstChild.onmouseleave = null; 138 iframe.contentDocument.body.lastChild.onmouseenter = null; 139 iframe.contentDocument.body.lastChild.onmouseleave = null; 140 141 container.onmouseenter = null; 142 container.onmouseleave = null; 143 container.onmouseout = null; 144 container.onmouseover = null; 145 146 var children = container.getElementsByTagName('*'); 147 for (var i=0;i<children.length;i++) { 148 children[i].onmouseenter = null; 149 children[i].onmouseleave = null; 150 children[i].onmouseout = null; 151 children[i].onmouseover = null; 152 } 153 154 SimpleTest.finish(); 155 } 156 157 function menter(evt) { 158 ++mouseentercount; 159 evt.stopPropagation(); 160 if (expectedMouseEnterTargets.length) { 161 var t = expectedMouseEnterTargets.shift(); 162 is(evt.target.id, t, "Wrong event target!"); 163 } 164 is(evt.bubbles, false, evt.type + " should not bubble!"); 165 is(evt.cancelable, false, evt.type + " is not cancelable!"); 166 is(evt.target, evt.currentTarget, "Wrong event target!"); 167 ok(!evt.relatedTarget || evt.target.ownerDocument == evt.relatedTarget.ownerDocument, 168 "Leaking nodes to another document?"); 169 if (checkRelatedTarget && evt.target.ownerDocument == document) { 170 is(evt.relatedTarget, expectedRelatedEnter, "Wrong related target (mouseenter)"); 171 } 172 } 173 174 function mleave(evt) { 175 ++mouseleavecount; 176 evt.stopPropagation(); 177 if (expectedMouseLeaveTargets.length) { 178 var t = expectedMouseLeaveTargets.shift(); 179 is(evt.target.id, t, "Wrong event target!"); 180 } 181 is(evt.bubbles, false, evt.type + " should not bubble!"); 182 is(evt.cancelable, false, evt.type + " is not cancelable!"); 183 is(evt.target, evt.currentTarget, "Wrong event target!"); 184 ok(!evt.relatedTarget || evt.target.ownerDocument == evt.relatedTarget.ownerDocument, 185 "Leaking nodes to another document?"); 186 if (checkRelatedTarget && evt.target.ownerDocument == document) { 187 is(evt.relatedTarget, expectedRelatedLeave, "Wrong related target (mouseleave)"); 188 } 189 } 190 191 function mover(evt) { 192 ++mouseovercount; 193 evt.stopPropagation(); 194 } 195 196 function mout(evt) { 197 ++mouseoutcount; 198 evt.stopPropagation(); 199 } 200 201 </script> 202 </pre> 203 <div id="container" onmouseenter="menter(event)" onmouseleave="mleave(event)" 204 onmouseout="mout(event)" onmouseover="mover(event)"> 205 <div id="outside" onmouseout="event.stopPropagation()" onmouseover="event.stopPropagation()">foo</div> 206 <div id="outertest" onmouseenter="menter(event)" onmouseleave="mleave(event)" 207 onmouseout="mout(event)" onmouseover="mover(event)"> 208 <div id="middletest" onmouseenter="menter(event)" onmouseleave="mleave(event)" 209 onmouseout="mout(event)" onmouseover="mover(event)"> 210 <div id="innertest" onmouseenter="menter(event)" onmouseleave="mleave(event)" 211 onmouseout="mout(event)" onmouseover="mover(event)">foo</div> 212 </div> 213 </div> 214 <input type="file" id="file" 215 onmouseenter="menter(event)" onmouseleave="mleave(event)" 216 onmouseout="mout(event)" onmouseover="mover(event)"> 217 <br> 218 <iframe id="iframe" width="50px" height="50px" 219 onmouseenter="menter(event)" onmouseleave="mleave(event)" 220 onmouseout="mout(event)" onmouseover="mover(event)"></iframe> 221 </div> 222 </body> 223 </html>