| <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') == "0px") |
| log("PASSED: Calculated style of inner element is correct"); |
| else |
| log("FAILED: Calculated style of inner element is wrong, should be 'left: 0px'"); |
| } |
| |
| 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> |
