third_party/WebKit/LayoutTests/fast/scrolling/hover-during-scroll.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5 div {
   6     line-height: 50px;
   7 }
   8
   9 .hoverme {
  10     background-color: lightblue;
  11 }
  12
  13 </style>
  14 <script src="../../resources/js-test.js"></script>
  15 </head>
  16 <body onload="runtest()" style="margin:0">
  17
  18 <script type="text/javascript">
  19
  20 function centerOfDivAtIndex(n)
  21 {
  22     return elementHeight * n + elementHeight / 2;
  23 }
  24
  25 function scrolledWhileCursorNotVisible()
  26 {
  27     // The delay is necessary to guarantee that the fake mouse move
  28     // event timer has fired. We have to wait the full length of time
  29     // since the cursor is not visible and so we do not expect the
  30     // hover effect to be invoked.
  31     if (Date.now() - startTime < fakeMouseMoveTimerDelay) {
  32         window.setTimeout(scrolledWhileCursorNotVisible, 10);
  33         return;
  34     }
  35
  36     shouldBeEqualToString("array[0].innerHTML", textWhenWasHovered);
  37     shouldBeEqualToString("array[1].innerHTML", textWhenWasHovered);
  38     shouldBeEqualToString("array[2].innerHTML", textWhenHovered);
  39     shouldBeEqualToString("array[3].innerHTML", textWhenNotHovered);
  40     shouldBeEqualToString("array[4].innerHTML", textWhenNotHovered);
  41     shouldBe("document.scrollingElement.scrollTop", "100");
  42
  43     testRunner.notifyDone();
  44 }
  45
  46 function scrolledWhileCursorVisible()
  47 {
  48     // The delay is necessary to guarantee that the fake mouse move
  49     // event timer has fired. But since the cursor is visible, we
  50     // can stop waiting as soon as the hover effect has been invoked.
  51     var elementHovered = array[2].innerHTML == textWhenHovered;
  52     if (!elementHovered && Date.now() - startTime < fakeMouseMoveTimerDelay) {
  53         window.setTimeout(scrolledWhileCursorVisible, 10);
  54         return;
  55     }
  56
  57     shouldBeEqualToString("array[0].innerHTML", textWhenWasHovered);
  58     shouldBeEqualToString("array[1].innerHTML", textWhenWasHovered);
  59     shouldBeEqualToString("array[2].innerHTML", textWhenHovered);
  60     shouldBeEqualToString("array[3].innerHTML", textWhenNotHovered);
  61
  62     debug("Mouse is not visible, scrolling page so the mouse ends up on the fourth div.");
  63     shouldBe("document.scrollingElement.scrollTop", "50");
  64     internals.setIsCursorVisible(document, false);
  65     startTime = Date.now();
  66     eventSender.continuousMouseScrollBy(0, -elementHeight);
  67     scrolledWhileCursorNotVisible();
  68 }
  69
  70 var array;
  71 var numHoverElements = 30;
  72 var elementHeight = 50;
  73 var fakeMouseMoveTimerDelay = 150;
  74 var textWhenNotHovered = "hover over me";
  75 var textWhenHovered = "currently hovered";
  76 var textWhenWasHovered = "was hovered";
  77 var startTime;
  78
  79 function runtest()
  80 {
  81     buildPage();
  82
  83     array = document.getElementsByClassName('hoverme');
  84
  85     for (var i = 0; i < array.length; i++) {
  86         array[i].addEventListener('mouseover', function(e) {
  87              this.innerHTML = textWhenHovered;
  88              this.style.backgroundColor = "yellow";
  89         });
  90         array[i].addEventListener('mouseout', function(e) {
  91              this.innerHTML = textWhenWasHovered;
  92              this.style.backgroundColor = "green";
  93         });
  94     }
  95
  96     if (!window.testRunner || !window.eventSender)
  97         return;
  98
  99     if (!window.internals || !window.internals.setIsCursorVisible) {
 100         debug("window.internals.setIsCursorVisible is required to run this test.");
 101         return;
 102     }
 103
 104     testRunner.waitUntilDone();
 105
 106     debug("Mouse is visible, moving it over the first div.");
 107     internals.setIsCursorVisible(document, true);
 108     eventSender.mouseMoveTo(42, centerOfDivAtIndex(0));
 109     shouldBeEqualToString("array[0].innerHTML", textWhenHovered);
 110     shouldBeEqualToString("array[1].innerHTML", textWhenNotHovered);
 111
 112     debug("Mouse is visible, moving it over the second div.");
 113     eventSender.mouseMoveTo(53, centerOfDivAtIndex(1));
 114     shouldBeEqualToString("array[0].innerHTML", textWhenWasHovered);
 115     shouldBeEqualToString("array[1].innerHTML", textWhenHovered);
 116     shouldBeEqualToString("array[2].innerHTML", textWhenNotHovered);
 117
 118     debug("Mouse is visible, scrolling page so the mouse ends up on the third div.");
 119     shouldBe("document.scrollingElement.scrollTop", "0");
 120     startTime = Date.now();
 121     eventSender.continuousMouseScrollBy(0, -elementHeight);
 122     scrolledWhileCursorVisible();
 123 }
 124
 125 function buildPage()
 126 {
 127     var table = document.getElementById('table_to_fill');
 128     var i;
 129     for (i = 0; i < numHoverElements; i++) {
 130         var p = document.createElement('tr');
 131         p.innerHTML = '<tr><td><div class="hoverme">' + textWhenNotHovered + '</div></td></tr>';
 132         table.appendChild(p);
 133     }
 134 }
 135 </script>
 136
 137 <table id="table_to_fill" width="100%" cellpadding="0px" cellspacing="0px" border="0px">
 138 <tr><td><div class="hoverme">hover over me</div></td></tr>
 139 </table>
 140
 141 <p>Test for <a href="http://crbug.com/153784">http://crbug.com/153784</a>. New hover effects should not be invoked during scroll if the mouse cursor is not visible.</p>
 142
 143 <div id="console"></div>
 144 </body>
 145 </html>