fast/css/hover-affects-child.html

<html>
    <head>
        <style>
            div {
                width: 200px;
                height: 200px;
                background-color: red;
            }

            div div {
                position: absolute;
                left: -1000px;
                background-color: green;
            }

            div:hover div {
                left: auto;
            }
        </style>
        <script>
            function log(msg) {
                var console = document.getElementById('console');
                var newNode = document.createElement('li');
                newNode.innerText = msg;
                console.appendChild(newNode);
            }
            var testedHoverState = false;
            function testHoverState() {
                if (testedHoverState)
                    return;
                testedHoverState = true;
                var innerElem = document.getElementById('innerElem');
                var calculatedStyle = window.getComputedStyle(innerElem);
    
                if (calculatedStyle.getPropertyValue('left') == "auto")
                    log("PASSED: Calculated style of inner element is correct");
                else
                    log("FAILED: Calculated style of inner element is wrong, should be 'left: auto'");
            }
        
            function runTest() {
                if (!window.testRunner) 
                    return;
                testRunner.dumpAsText();
                var targetElem = document.getElementById('targetElem');
                eventSender.mouseMoveTo(targetElem.offsetLeft + targetElem.offsetWidth / 2, 
                                        targetElem.offsetTop + targetElem.offsetHeight / 2);
            }
        </script>
    </head>
    <body onload="runTest()">
        This tests that a style that affects child elements when hovering 
        over a parent element correctly recalculates the child style.  To 
        test manually move the mouse over the red square, it should become 
        green.
        <div id="targetElem" onmousemove="testHoverState()"><div id="innerElem"></div></div>
        <ul id="console"></ul>
    <body>
</html>