LayoutTests/fast/css/hover-affects-child.html

   1 <html>
   2     <head>
   3         <style>
   4             div {
   5                 width: 200px;
   6                 height: 200px;
   7                 background-color: red;
   8             }
   9
  10             div div {
  11                 position: absolute;
  12                 left: -1000px;
  13                 background-color: green;
  14             }
  15
  16             div:hover div {
  17                 left: auto;
  18             }
  19         </style>
  20         <script>
  21             function log(msg) {
  22                 var console = document.getElementById('console');
  23                 var newNode = document.createElement('li');
  24                 newNode.innerText = msg;
  25                 console.appendChild(newNode);
  26             }
  27             var testedHoverState = false;
  28             function testHoverState() {
  29                 if (testedHoverState)
  30                     return;
  31                 testedHoverState = true;
  32                 var innerElem = document.getElementById('innerElem');
  33                 var calculatedStyle = window.getComputedStyle(innerElem);
  34
  35                 if (calculatedStyle.getPropertyValue('left') == "auto")
  36                     log("PASSED: Calculated style of inner element is correct");
  37                 else
  38                     log("FAILED: Calculated style of inner element is wrong, should be 'left: auto'");
  39             }
  40
  41             function runTest() {
  42                 if (!window.layoutTestController)
  43                     return;
  44                 layoutTestController.dumpAsText();
  45                 var targetElem = document.getElementById('targetElem');
  46                 eventSender.mouseMoveTo(targetElem.offsetLeft + targetElem.offsetWidth / 2,
  47                                         targetElem.offsetTop + targetElem.offsetHeight / 2);
  48             }
  49         </script>
  50     </head>
  51     <body onload="runTest()">
  52         This tests that a style that affects child elements when hovering
  53         over a parent element correctly recalculates the child style.  To
  54         test manually move the mouse over the red square, it should become
  55         green.
  56         <div id="targetElem" onmousemove="testHoverState()"><div id="innerElem"></div></div>
  57         <ul id="console"></ul>
  58     <body>
  59 </html>