<!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>