<!
DOCTYPE HTML>
<
html>
<
head>
<
title>Test for :hover</
title>
<
script 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);
setTimeout(str, 100);
};
iframe.contentWindow.addEventListener(
"resize", handler);
}
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,
"rgba(0, 0, 0, 0)",
":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,
"rgba(0, 0, 0, 0)",
":hover does not apply");
is(getComputedStyle(divone.firstChild,
"").backgroundColor,
"rgba(0, 0, 0, 0)",
":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,
"rgba(0, 0, 0, 0)",
":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,
"rgba(0, 0, 0, 0)",
":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,
"rgba(0, 0, 0, 0)",
":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,
"rgba(0, 0, 0, 0)",
":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,
"rgba(0, 0, 0, 0)",
":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,
"rgba(0, 0, 0, 0)",
":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>