fast/css/nested-layers-with-hover.html

<html>
<head>
<style>
    #table-row:hover {
        background-color:blue;
    }
</style>
        <script>
            if (window.testRunner) {
                testRunner.waitUntilDone();
                testRunner.dumpAsText();
            }
            function log(msg) {
                var console = document.getElementById('console');
                console.innerText = msg;
            }
            var testedHoverState = false;
            function testHoverState() {
                if (testedHoverState)
                    return;
                testedHoverState = true;
                var tableRow = document.getElementById('table-row');
                var calculatedStyle = window.getComputedStyle(tableRow);
    
                if (calculatedStyle.getPropertyValue('background-color') == "rgb(0, 0, 255)")
                    log("PASSED: The hover effect works!");
                else
                    log("FAILED: The hover effect did not correctly propagate down the layer chain.");
                if (window.testRunner)
                    testRunner.notifyDone();
            }
        
            function runTest() {
                if (!window.testRunner) 
                    return;
                var targetElem = document.getElementById('table-row');
                eventSender.mouseMoveTo(targetElem.offsetLeft + targetElem.offsetWidth / 2, 
                                        targetElem.offsetTop + targetElem.offsetHeight / 2);
            }
        </script>
</head>

<body onload="runTest()">
    <div style="overflow:hidden">
        <div id="table-row" onmousemove="testHoverState()" style="overflow:hidden; display:table-row">To test this manually, first make sure you can see this text at all, and then hover over it and make sure the background turns blue.</div>
    </div>
    <div id="console"></div>

</body>
</html>