blob: 2d8adb0ef3e9b1c6c3dc6cfe93755349b6b873ee [file] [log] [blame]
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div { width: 60px; text-align: center;
position: relative; }
div#a { background: green; }
div#b { background: yellow; }
div#a:hover { background: red; }
div#b:hover { background: green; }
span#c:hover { color: red; }
</style>
<script src="../../resources/js-test.js"></script>
</head>
<body onload="runtest()">
<p><b>BUG ID:</b> <a href="http://bugs.webkit.org/show_bug.cgi?id=6821">Bugzilla bug 6821</a> Fix for 5983 will not always update hover correctly.</p>
<p>To run manually, move your mouse over the black box. You should see a green box. If you see any other color, the test fails.</p>
<script type="text/javascript">
window.jsTestIsAsync = true;
function finish()
{
var expectedBackgroundColor = "rgb(0, 128, 0)";
// This test was failing on slower machines, so we give it more time to try to apply the hover state.
var timeSinceStartedCheckingMs = Date.now() - window.startCheckingForHoverMs;
if (timeSinceStartedCheckingMs < 10000 && getComputedStyle(document.getElementById('b')).backgroundColor != expectedBackgroundColor) {
setTimeout(finish, 10);
return;
}
shouldBeEqualToString("window.getComputedStyle(document.getElementById('b'), null).backgroundColor", expectedBackgroundColor);
shouldBeEqualToString("window.getComputedStyle(document.getElementById('a'), null).backgroundColor", expectedBackgroundColor);
finishJSTest();
}
function hideC()
{
c.style.display = 'none';
document.body.offsetLeft;
window.startCheckingForHoverMs = Date.now();
window.setTimeout(finish, 0);
}
function hoveredC()
{
window.setTimeout(hideC, 0);
}
function runtest()
{
if (!window.testRunner)
return;
debug('Hover color before test: ' + getComputedStyle(document.getElementById("b")).backgroundColor);
var target = document.getElementById('target');
var x = target.offsetParent.offsetLeft + target.offsetLeft + target.offsetWidth / 2;
var y = target.offsetParent.offsetTop + target.offsetTop + target.offsetHeight / 2;
eventSender.mouseMoveTo(x, y);
}
</script>
<div id="a">
<div style="height: 20px;"></div>
<span id="c" onmouseover="hoveredC()">Hover here<br><span id="target" style="background: black;">&nbsp;Wait&nbsp;</span></span>
</div>
<div id="b">
Only green now
</div>
<div id="console"></div>
</body>
</html>