mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
274 lines
9.7 KiB
HTML
274 lines
9.7 KiB
HTML
|
<!DOCTYPE HTML>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Test for :hover</title>
|
||
|
|
<script type="application/javascript" src="/MochiKit/MochiKit.js"></script>
|
||
|
|
<script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
|
||
|
|
<script type="application/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
|
||
|
|
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
|
||
|
|
<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="about:blank"></iframe>
|
||
|
|
<div style="width: 5000px; height: 10px;"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<pre id="test">
|
||
|
|
<script type="application/javascript">
|
||
|
|
|
||
|
|
SimpleTest.waitForExplicitFinish();
|
||
|
|
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 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 **/
|
||
|
|
iframe.contentDocument.body.setAttribute("onresize", "parent.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)");
|
||
|
|
iframe.contentDocument.body.setAttribute("onresize", "parent.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");
|
||
|
|
iframe.contentDocument.body.setAttribute("onresize", "parent.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;
|
||
|
|
iframe.contentDocument.body.setAttribute("onresize", "parent.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");
|
||
|
|
iframe.contentDocument.body.setAttribute("onresize", "parent.step7()");
|
||
|
|
synthesizeMouse(divtwoparent, 2, 5, moveEvent, window);
|
||
|
|
}
|
||
|
|
|
||
|
|
var step7called = false;
|
||
|
|
function step7() {
|
||
|
|
is(step7called, false, "step7 called only once");
|
||
|
|
step7called = true;
|
||
|
|
if (getComputedStyle(iframe, "").width == "50px") {
|
||
|
|
// The two resize events may be coalesced into a single one.
|
||
|
|
step8();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
is(getComputedStyle(divtwo, "").backgroundColor, "rgb(0, 255, 0)",
|
||
|
|
":hover applies");
|
||
|
|
iframe.contentDocument.body.setAttribute("onresize", "parent.step8()");
|
||
|
|
/* expect to get a second resize from the oscillation */
|
||
|
|
}
|
||
|
|
|
||
|
|
var step8called = false;
|
||
|
|
function step8() {
|
||
|
|
is(step8called, false, "step8 called only once (more than two cycles of oscillation)");
|
||
|
|
if (step8called)
|
||
|
|
return;
|
||
|
|
step8called = true;
|
||
|
|
is(getComputedStyle(divtwo, "").backgroundColor, "transparent",
|
||
|
|
":hover does not apply");
|
||
|
|
setTimeout(step9, 500); // time to detect oscillations if they exist
|
||
|
|
}
|
||
|
|
|
||
|
|
/* test the same case with scrolltop */
|
||
|
|
|
||
|
|
var step9called = false;
|
||
|
|
function step9() {
|
||
|
|
is(step9called, false, "step9 called only once");
|
||
|
|
step9called = true;
|
||
|
|
iframe.contentDocument.body.removeAttribute("onresize");
|
||
|
|
/* move the mouse out of the way */
|
||
|
|
synthesizeMouse(divtwoparent, 200, 5, moveEvent, window);
|
||
|
|
divtwoparent.scrollLeft = 5;
|
||
|
|
iframe.contentDocument.body.setAttribute("onresize", "parent.step10()");
|
||
|
|
synthesizeMouse(divtwoparent, 2, 5, moveEvent, window);
|
||
|
|
/* mouse now over 7, 5 */
|
||
|
|
}
|
||
|
|
|
||
|
|
var step10called = false;
|
||
|
|
function step10() {
|
||
|
|
is(step10called, false, "step10 called only once");
|
||
|
|
step10called = true;
|
||
|
|
is(getComputedStyle(divtwo, "").backgroundColor, "rgb(0, 255, 0)",
|
||
|
|
":hover applies");
|
||
|
|
iframe.contentDocument.body.setAttribute("onresize", "parent.step11()");
|
||
|
|
divtwoparent.scrollLeft = 0; /* mouse now over 2,5 */
|
||
|
|
}
|
||
|
|
|
||
|
|
var step11called = false;
|
||
|
|
function step11() {
|
||
|
|
is(step11called, false, "step11 called only once");
|
||
|
|
step11called = true;
|
||
|
|
if (getComputedStyle(iframe, "").width == "100px") {
|
||
|
|
// The two resize events may be coalesced into a single one.
|
||
|
|
step12();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
is(getComputedStyle(divtwo, "").backgroundColor, "transparent",
|
||
|
|
":hover does not apply");
|
||
|
|
iframe.contentDocument.body.setAttribute("onresize", "parent.step12()");
|
||
|
|
/* expect to get a second resize from the oscillation */
|
||
|
|
}
|
||
|
|
|
||
|
|
var step12called = false;
|
||
|
|
function step12() {
|
||
|
|
is(step12called, false, "step12 called only once (more than two cycles of oscillation)");
|
||
|
|
if (step12called)
|
||
|
|
return;
|
||
|
|
step12called = true;
|
||
|
|
is(getComputedStyle(divtwo, "").backgroundColor, "rgb(0, 255, 0)",
|
||
|
|
":hover applies");
|
||
|
|
setTimeout(step13, 500); // time to detect oscillations if they exist
|
||
|
|
}
|
||
|
|
|
||
|
|
var step13called = false;
|
||
|
|
function step13() {
|
||
|
|
is(step13called, false, "step13 called only once");
|
||
|
|
step13called = true;
|
||
|
|
iframe.contentDocument.body.setAttribute("onresize", "parent.step14()");
|
||
|
|
divtwoparent.scrollLeft = 25; /* mouse now over 27,5 */
|
||
|
|
}
|
||
|
|
|
||
|
|
var step14called = false;
|
||
|
|
function step14() {
|
||
|
|
is(step14called, false, "step14 called only once");
|
||
|
|
step14called = true;
|
||
|
|
is(getComputedStyle(divtwo, "").backgroundColor, "transparent",
|
||
|
|
":hover does not apply");
|
||
|
|
iframe.contentDocument.body.setAttribute("onresize", "parent.step15()");
|
||
|
|
divtwoparent.scrollLeft = 0; /* mouse now over 2,5 */
|
||
|
|
}
|
||
|
|
|
||
|
|
var step15called = false;
|
||
|
|
function step15() {
|
||
|
|
is(step15called, false, "step15 called only once");
|
||
|
|
step15called = true;
|
||
|
|
if (getComputedStyle(iframe, "").width == "50px") {
|
||
|
|
// The two resize events may be coalesced into a single one.
|
||
|
|
step16();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
is(getComputedStyle(divtwo, "").backgroundColor, "rgb(0, 255, 0)",
|
||
|
|
":hover applies");
|
||
|
|
iframe.contentDocument.body.setAttribute("onresize", "parent.step16()");
|
||
|
|
/* expect to get a second resize from the oscillation */
|
||
|
|
}
|
||
|
|
|
||
|
|
var step16called = false;
|
||
|
|
function step16() {
|
||
|
|
is(step16called, false, "step16 called only once (more than two cycles of oscillation)");
|
||
|
|
if (step16called)
|
||
|
|
return;
|
||
|
|
step16called = 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";
|
||
|
|
SimpleTest.finish();
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</pre>
|
||
|
|
</body>
|
||
|
|
</html>
|