no-hover-during-smooth-keyboard-scroll.html

<!DOCTYPE html>
<script src='../../resources/testharness.js'></script>
<script src='../../resources/testharnessreport.js'></script>
<script src='../../resources/gesture-util.js'></script>
<script src="../../resources/scrollbar-util.js"></script>
<script src="resources/hover-on-scroll-checker.js"></script>
<script src="../../resources/testdriver.js"></script>
<script src="../../resources/testdriver-actions.js"></script>
<script src="../../resources/testdriver-vendor.js"></script>
<style>
  body, html {
    margin: 0;
    height: 500vh;
  }
  div {
    height: 50px;
    width: 100%;
  }

  div.hoverme {
    background-color: rgb(0, 0, 255);
    color:  white;
    height:  40vh;
  }

  div.hoverme:hover {
    background-color: rgb(255, 255, 0);
    color:  black;
  }

  .message {
    width: 100%;
    text-align: left;
  }
</style>

<div class="message">
  First move your mouse cursor to the page, you will see the color under the mouse cursor changed from blue to yellow. <br>
  Do a keyboard scroll, you will see the hover update on a text under the mouse cursor when the scrolling finishes.
</div>
<div class="hoverme">hover over me</div>
<div class="hoverme">hover over me</div>
<div class="hoverme">hover over me</div>
<div class="hoverme">hover over me</div>
<div class="hoverme">hover over me</div>

<script>
  window.onload = async () => {
    promise_test(async () => {
      const scrollCallback = () => {
        const scrollPromise = waitForScrollendEvent(document);
        const actionPromise = eventSender.keyDown('PageDown');
        return Promise.all([ actionPromise, scrollPromise ]);
      };
      const postScrollTrgetIndex = 2;
      return runHoverStateOnScrollTest(scrollCallback, postScrollTrgetIndex);
    }, 'Keyboard smooth scroll on the page, no hover update during ' +
       'scrolling, but updating hover at the end of scroll.');
  }

</script>
chromium/third_party/blink/web_tests/fast/scrolling/no-hover-during-smooth-keyboard-scroll.html
