<!DOCTYPE HTML> <html> <head> <title>Test for :hover</title> <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script> <style type="text/css"> div#one { height: 10px; width: 10px; } div#one:hover { background: #00f; } div#one > div { height: 5px; width: 20px; } div#one > div:hover { background: #f00; } div#twoparent { overflow: hidden; height: 20px; } div#two { width: 10px; height: 10px; } div#two:hover { margin-left: 5px; background: #0f0; } div#two + iframe { width: 50px; height: 10px; } div#two:hover + iframe { width: 100px; } </style> </head> <!-- need a set timeout because we need things to start after painting suppression ends --> <body onload="setTimeout(step1, 0)"> <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">Mozilla Bug </a> <div id="display" style="position: absolute; top: 0; left: 0; width: 300px; height: 300px"> <div id="one"><div></div></div> <div id="twoparent"> <div id="two"></div> <iframe id="twoi" src="hover_empty.html"></iframe> <div style="width: 5000px; height: 10px;"></div> </div> </div> <pre id="test"> <script type="application/javascript"> var imports = [ "SimpleTest", "is", "isnot", "ok" ]; for (var name of imports) { window[name] = window.opener.wrappedJSObject[name]; } var div = document.getElementById("display"); var divtwo = document.getElementById("two"); var iframe = document.getElementById("twoi"); var divtwoparent = document.getElementById("twoparent"); iframe.contentDocument.open(); iframe.contentDocument.write("<style type='text/css'>html, body { margin: 0; padding: 0; }<\/style><body>"); iframe.contentDocument.close(); var moveEvent = { type: "mousemove", clickCount: "0" }; function setResize(str) { var handler = function() { iframe.contentWindow.removeEventListener("resize", arguments.callee, false); setTimeout(str, 100); }; iframe.contentWindow.addEventListener("resize", handler, false); } function step1() { /** test basic hover **/ var divone = document.getElementById("one"); synthesizeMouse(divone, 5, 7, moveEvent, window); is(getComputedStyle(divone, "").backgroundColor, "rgb(0, 0, 255)", ":hover applies"); is(getComputedStyle(divone.firstChild, "").backgroundColor, "transparent", ":hover does not apply"); synthesizeMouse(divone, 5, 2, moveEvent, window); is(getComputedStyle(divone, "").backgroundColor, "rgb(0, 0, 255)", ":hover applies hierarchically"); is(getComputedStyle(divone.firstChild, "").backgroundColor, "rgb(255, 0, 0)", ":hover applies"); synthesizeMouse(divone, 15, 7, moveEvent, window); is(getComputedStyle(divone, "").backgroundColor, "transparent", ":hover does not apply"); is(getComputedStyle(divone.firstChild, "").backgroundColor, "transparent", ":hover does not apply"); synthesizeMouse(divone, 15, 2, moveEvent, window); is(getComputedStyle(divone, "").backgroundColor, "rgb(0, 0, 255)", ":hover applies hierarchically"); is(getComputedStyle(divone.firstChild, "").backgroundColor, "rgb(255, 0, 0)", ":hover applies"); /** Test for Bug 302561 **/ setResize("step2();"); is(iframe.contentDocument.body.offsetWidth, 50, ":hover does not apply (iframe body width)"); synthesizeMouse(divtwoparent, 7, 5, moveEvent, window); is(iframe.contentDocument.body.offsetWidth, 100, ":hover applies (iframe body width)"); } var step2called = false; function step2() { is(step2called, false, "step2 called only once"); step2called = true; is(getComputedStyle(divtwo, "").backgroundColor, "rgb(0, 255, 0)", ":hover applies"); is(iframe.contentDocument.body.offsetWidth, 100, ":hover applies (iframe body width)"); setResize("step3()"); synthesizeMouse(divtwoparent, 2, 5, moveEvent, window); is(iframe.contentDocument.body.offsetWidth, 50, ":hover does not apply (iframe body width)"); } var step3called = false; function step3() { is(step3called, false, "step3 called only once"); step3called = true; if (getComputedStyle(iframe, "").width == "100px") { // The two resize events may be coalesced into a single one. step4(); return; } is(getComputedStyle(divtwo, "").backgroundColor, "transparent", ":hover does not apply"); setResize("step4()"); /* expect to get a second resize from the oscillation */ } var step4called = false; function step4() { is(step4called, false, "step4 called only once (more than two cycles of oscillation)"); if (step4called) return; step4called = true; is(getComputedStyle(divtwo, "").backgroundColor, "rgb(0, 255, 0)", ":hover applies"); setTimeout(step5, 500); // time to detect oscillations if they exist } var step5called = false; function step5() { is(step5called, false, "step5 called only once"); step5called = true; setResize("step6()"); synthesizeMouse(divtwoparent, 25, 5, moveEvent, window); } var step6called = false; function step6() { is(step6called, false, "step6 called only once"); step6called = true; is(getComputedStyle(divtwo, "").backgroundColor, "transparent", ":hover does not apply"); synthesizeMouse(divtwoparent, 2, 5, moveEvent, window); setTimeout(step7, 500); // time to detect oscillations if they exist } var step7called = false; function step7() { is(step7called, false, "step7 called only once (more than two cycles of oscillation)"); if (step7called) return; step7called = true; is(getComputedStyle(divtwo, "").backgroundColor, "transparent", ":hover does not apply"); setTimeout(step8, 500); // time to detect oscillations if they exist } /* test the same case with scrolltop */ var step8called = false; function step8() { is(step8called, false, "step8 called only once"); step8called = true; iframe.contentDocument.body.removeAttribute("onresize"); /* move the mouse out of the way */ synthesizeMouse(divtwoparent, 200, 5, moveEvent, window); divtwoparent.scrollLeft = 5; setResize("step9()"); synthesizeMouse(divtwoparent, 2, 5, moveEvent, window); /* mouse now over 7, 5 */ } var step9called = false; function step9() { is(step9called, false, "step9 called only once"); step9called = true; is(getComputedStyle(divtwo, "").backgroundColor, "rgb(0, 255, 0)", ":hover applies"); setResize("step10()"); divtwoparent.scrollLeft = 0; /* mouse now over 2,5 */ } var step10called = false; function step10() { is(step10called, false, "step10 called only once"); step10called = true; if (getComputedStyle(iframe, "").width == "100px") { // The two resize events may be coalesced into a single one. step11(); return; } is(getComputedStyle(divtwo, "").backgroundColor, "transparent", ":hover does not apply"); setResize("step11()"); /* expect to get a second resize from the oscillation */ } var step11called = false; function step11() { is(step11called, false, "step11 called only once (more than two cycles of oscillation)"); if (step11called) return; step11called = true; is(getComputedStyle(divtwo, "").backgroundColor, "rgb(0, 255, 0)", ":hover applies"); setTimeout(step12, 500); // time to detect oscillations if they exist } var step12called = false; function step12() { is(step12called, false, "step12 called only once"); step12called = true; setResize("step13()"); divtwoparent.scrollLeft = 25; /* mouse now over 27,5 */ } var step13called = false; function step13() { is(step13called, false, "step13 called only once"); step13called = true; is(getComputedStyle(divtwo, "").backgroundColor, "transparent", ":hover does not apply"); setResize("step14()"); divtwoparent.scrollLeft = 0; /* mouse now over 2,5 */ } var step14called = false; function step14() { is(step14called, false, "step14 called only once"); step14called = true; if (getComputedStyle(iframe, "").width == "50px") { // The two resize events may be coalesced into a single one. step15(); return; } is(getComputedStyle(divtwo, "").backgroundColor, "rgb(0, 255, 0)", ":hover applies"); setResize("step15()"); /* expect to get a second resize from the oscillation */ } var step15called = false; function step15() { is(step15called, false, "step15 called only once (more than two cycles of oscillation)"); if (step15called) return; step15called = true; is(getComputedStyle(divtwo, "").backgroundColor, "transparent", ":hover does not apply"); setTimeout(finish, 500); // time to detect oscillations if they exist } function finish() { document.getElementById("display").style.display = "none"; var tester = window.SimpleTest; window.close(); tester.finish(); } </script> </pre> </body> </html>