third_party/WebKit/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             if (window.testRunner) {
  10                 testRunner.waitUntilDone();
  11                 testRunner.dumpAsText();
  12             }
  13             function log(msg) {
  14                 var console = document.getElementById('console');
  15                 console.innerText = msg;
  16             }
  17             var testedHoverState = false;
  18             function testHoverState() {
  19                 if (testedHoverState)
  20                     return;
  21                 testedHoverState = true;
  22                 var tableRow = document.getElementById('table-row');
  23                 var calculatedStyle = window.getComputedStyle(tableRow);
  24
  25                 if (calculatedStyle.getPropertyValue('background-color') == "rgb(0, 0, 255)")
  26                     log("PASSED: The hover effect works!");
  27                 else
  28                     log("FAILED: The hover effect did not correctly propagate down the layer chain.");
  29                 if (window.testRunner)
  30                     testRunner.notifyDone();
  31             }
  32
  33             function runTest() {
  34                 if (!window.testRunner)
  35                     return;
  36                 document.body.offsetTop; // Force layout.
  37                 var targetElem = document.getElementById('table-row');
  38                 eventSender.mouseMoveTo(50, 17);
  39                 window.setTimeout(testHoverState, 100);
  40             }
  41         </script>
  42 </head>
  43
  44 <body onload="runTest()">
  45     <div style="overflow:hidden">
  46         <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>
  47     </div>
  48     <div id="console"></div>
  49
  50 </body>
  51 </html>