hover-after-dom-delete-child-invisible-cursor.html

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

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

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

<script type="text/javascript">
var redDiv;
var blueText;
var redText;
var hoveredText = '\"Hovered.\"';
function runtest()
{
    if (!window.testRunner || !window.eventSender)
        return;

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

    testRunner.waitUntilDone();

    redDiv = document.getElementById('red');

    document.addEventListener('keydown', function(e) {
        redDiv.parentNode.removeChild(redDiv);
    });

    debug("Mouse is visible, moving it over the red div.");
    internals.setIsCursorVisible(document, true);
    eventSender.mouseMoveTo(175, 175);
    blueText = window.getComputedStyle(document.querySelector('#blue'), ':after').content;
    redText = window.getComputedStyle(document.querySelector('#red'), ':after').content;
    shouldBeEqualToString("blueText", hoveredText);
    shouldBeEqualToString("redText", hoveredText);

    debug("Setting mouse cursor to be invisible.");
    internals.setIsCursorVisible(document, false);
    blueText = window.getComputedStyle(document.querySelector('#blue'), ':after').content;
    redText = window.getComputedStyle(document.querySelector('#red'), ':after').content;
    shouldBeEqualToString("blueText", hoveredText);
    shouldBeEqualToString("redText", hoveredText);

    debug("Deleting red div.");
    eventSender.keyDown("a");
    window.setTimeout(testAfterDelete, 0);
}

function testAfterDelete()
{
    blueText = window.getComputedStyle(document.querySelector('#blue'), ':after').content;
    shouldBeEqualToString("blueText", hoveredText);
    testRunner.notifyDone();
}

</script>

<div id="blue">
  <div id="red"></div>
</div>

<p>Test for <a href="http://crbug.com/240722">http://crbug.com/240722</a>. If the mouse cursor is not visible, existing hover effects on a parent should be preserved if the child is the currently hovered element and is removed from the DOM. Press any key to delete the red div.</p>

<div id="console"></div>
</body>
</html>
chromium/third_party/blink/web_tests/fast/dom/hover-after-dom-delete-child-invisible-cursor.html
