nested-layers-with-hover.html | Explore in Territory

<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;
                document.body.offsetTop; // Force layout.
                var targetElem = document.getElementById('table-row');
                eventSender.mouseMoveTo(50, 17);
                window.setTimeout(testHoverState, 100);
            }
        </script>
</head>

<body onload="runTest()">
    <div style="overflow:hidden">
        <div id="table-row" 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>
chromium/third_party/blink/web_tests/fast/css/nested-layers-with-hover.html
