| <html> |
| <head> |
| <style> |
| #table-row:hover { |
| background-color:blue; |
| } |
| </style> |
| <script> |
| 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."); |
| } |
| |
| function runTest() { |
| if (!window.layoutTestController) |
| 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> |
