third_party/WebKit/LayoutTests/fast/css/hover-update.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   2         "http://www.w3.org/TR/html4/strict.dtd">
   3 <html lang="en">
   4 <head>
   5 <style>
   6     div { width: 60px; text-align: center;
   7             position: relative; }
   8     div#a { background: green; }
   9     div#b { background: yellow; }
  10     div#a:hover { background: red; }
  11     div#b:hover { background: green; }
  12     span#c:hover { color: red; }
  13 </style>
  14 <script src="../../resources/js-test.js"></script>
  15 </head>
  16 <body onload="runtest()">
  17 <p><b>BUG ID:</b> <a href="http://bugs.webkit.org/show_bug.cgi?id=6821">Bugzilla bug 6821</a> Fix for 5983 will not always update hover correctly.</p>
  18
  19 <p>To run manually, move your mouse over the black box.  You should see a green box.  If you see any other color, the test fails.</p>
  20
  21 <script type="text/javascript">
  22 function finish()
  23 {
  24     var expectedBackgroundColor = "rgb(0, 128, 0)";
  25     // This test was failing on slower machines, so we give it more time to try to apply the hover state.
  26     var timeSinceStartedCheckingMs = Date.now() - window.startCheckingForHoverMs;
  27     if (timeSinceStartedCheckingMs < 200 && getComputedStyle(document.getElementById('b')).backgroundColor != expectedBackgroundColor) {
  28         setTimeout(finish, 10);
  29         return;
  30     }
  31     shouldBeEqualToString("window.getComputedStyle(document.getElementById('b'), null).backgroundColor", expectedBackgroundColor);
  32     shouldBeEqualToString("window.getComputedStyle(document.getElementById('a'), null).backgroundColor", expectedBackgroundColor);
  33
  34     if (window.testRunner)
  35         testRunner.notifyDone();
  36 }
  37
  38 function hideC()
  39 {
  40     c.style.display = 'none';
  41     document.body.offsetLeft;
  42     window.startCheckingForHoverMs = Date.now();
  43     window.setTimeout(finish, 0);
  44 }
  45
  46 function hoveredC()
  47 {
  48     window.setTimeout(hideC, 0);
  49 }
  50
  51 function runtest()
  52 {
  53     if (!window.testRunner)
  54         return;
  55
  56     debug('Hover color before test: ' + getComputedStyle(document.getElementById("b")).backgroundColor);
  57
  58     testRunner.waitUntilDone();
  59     var target = document.getElementById('target');
  60     var x = target.offsetParent.offsetLeft + target.offsetLeft + target.offsetWidth / 2;
  61     var y = target.offsetParent.offsetTop + target.offsetTop + target.offsetHeight / 2;
  62     eventSender.mouseMoveTo(x, y);
  63 }
  64
  65 </script>
  66
  67 <div id="a">
  68 <div style="height: 20px;"></div>
  69 <span id="c" onmouseover="hoveredC()">Hover here<br><span id="target" style="background: black;">&nbsp;Wait&nbsp;</span></span>
  70 </div>
  71 <div id="b">
  72 Only green now
  73 </div>
  74 <div id="console"></div>
  75 </body>
  76 </html>