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

   1 <html>
   2 <head>
   3 <style>
   4     #table-row:hover {
   5         background-color:blue;
   6     }
   7 </style>
   8         <script>
   9             function log(msg) {
  10                 var console = document.getElementById('console');
  11                 console.innerText = msg;
  12             }
  13             var testedHoverState = false;
  14             function testHoverState() {
  15                 if (testedHoverState)
  16                     return;
  17                 testedHoverState = true;
  18                 var tableRow = document.getElementById('table-row');
  19                 var calculatedStyle = window.getComputedStyle(tableRow);
  20
  21                 if (calculatedStyle.getPropertyValue('background-color') == "rgb(0, 0, 255)")
  22                     log("PASSED: The hover effect works!");
  23                 else
  24                     log("FAILED: The hover effect did not correctly propagate down the layer chain.");
  25             }
  26
  27             function runTest() {
  28                 if (!window.layoutTestController)
  29                     return;
  30                 var targetElem = document.getElementById('table-row');
  31                 eventSender.mouseMoveTo(targetElem.offsetLeft + targetElem.offsetWidth / 2,
  32                                         targetElem.offsetTop + targetElem.offsetHeight / 2);
  33             }
  34         </script>
  35 </head>
  36
  37 <body onload="runTest()">
  38     <div style="overflow:hidden">
  39         <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>
  40     </div>
  41     <div id="console"></div>
  42
  43 </body>
  44 </html>