<!DOCTYPE html>
<html>
<head>
<style>
#red {
    background-color: red;
    position: absolute;
    left: 50px;
    top: 50px;
    height: 100px;
    width: 100px;
}

#blue {
    background-color: blue;
    position: absolute;
    left: 50px;
    top: 200px;
    height: 100px;
    width: 100px;
}
#blue:hover::after {
    content: "Hovered.";
}

</style>
<script src="../js/resources/js-test-pre.js"></script>
</head>
<body onload="runtest()" style="margin:0">

<script type="text/javascript">
var redDiv;
var blueDiv;
var containerDiv;
var blueText;
var redTextWhenHovered = "Red hovered.";
var blueTextWhenNotHovered = "";
var blueTextWhenHovered = "'Hovered.'";
function runtest()
{
    if (!window.testRunner || !window.eventSender)
        return;

    if (!window.internals || !window.internals.setIsCursorVisible) {
        debug("window.internals.setIsCursorVisible is required to run this test.");
        return;
    }

    testRunner.waitUntilDone();

    containerDiv = document.getElementById('container');

    redDiv = document.createElement("div");
    redDiv.id = "red";
    blueDiv = document.createElement("div");
    blueDiv.id = "blue";
    insertDivs();

    document.addEventListener('keydown', function(e) {
        blueDiv.style.top = "50px";
        redDiv.parentNode.removeChild(redDiv);
    });

    initialHoverOverRedDiv();

    debug("Mouse is visible, deleting the red div.");
    eventSender.keyDown("a");
    window.setTimeout(testAfterDeleteCursorVisible, 0);
}

function testAfterDeleteCursorVisible()
{
    checkBlueHoverText(blueTextWhenHovered);
    window.setTimeout(testWithInvisibleCursor, 0);
}

function testWithInvisibleCursor()
{
    blueDiv.parentNode.removeChild(blueDiv);
    insertDivs();

    initialHoverOverRedDiv();

    debug("Setting the mouse cursor to be invisible.");
    internals.setIsCursorVisible(document, false);
    shouldBeEqualToString("redDiv.innerHTML", redTextWhenHovered);
    shouldBeEqualToString("blueDiv.innerHTML", blueTextWhenNotHovered);

    debug("Mouse is invisible, deleting the red div.");
    eventSender.keyDown("a");
    window.setTimeout(testAfterDeleteCursorInvisible, 0);
}

function testAfterDeleteCursorInvisible()
{
    checkBlueHoverText(blueTextWhenNotHovered);
    testRunner.notifyDone();
}


// Helper functions

function checkBlueHoverText(expectedText)
{
    shouldBe("blueDiv.offsetTop", "50");
    blueText = window.getComputedStyle(document.querySelector('#blue'), ':after').content;
    shouldBeEqualToString("blueText", expectedText);
}

function insertDivs()
{
    debug("Adding the red and blue divs.");
    blueDiv.style.top = "200px";
    containerDiv.appendChild(redDiv);
    containerDiv.appendChild(blueDiv);
    redDiv.addEventListener('mouseover', function(e) {
        this.innerHTML = redTextWhenHovered;
    });
    shouldBe("blueDiv.offsetTop", "200");
    shouldBe("redDiv.offsetTop", "50");
}

function initialHoverOverRedDiv()
{
    debug("Mouse is visible, moving it over the red div.");
    internals.setIsCursorVisible(document, true);
    eventSender.mouseMoveTo(100, 100);
    shouldBeEqualToString("redDiv.innerHTML", redTextWhenHovered);
    shouldBeEqualToString("blueDiv.innerHTML", blueTextWhenNotHovered);
}
</script>

<div id="container">
</div>

<p>Test for <a href="http://crbug.com/240722">http://crbug.com/240722</a>. If the mouse cursor is not visible, no new hover effects should be invoked when the currently hovered node is removed from the DOM. Press any key to delete the red div.</p>

<div id="console"></div>
</body>
</html>