| <!DOCTYPE html> |
| <script src='../../resources/testharness.js'></script> |
| <script src='../../resources/testharnessreport.js'></script> |
| <script src='../../resources/gesture-util.js'></script> |
| |
| <style> |
| body, html { |
| margin: 0; |
| height: 500vh; |
| } |
| div { |
| height: 50px; |
| width: 100%; |
| } |
| |
| .hoverme { |
| background-color: rgb(0, 0, 255); |
| } |
| |
| .hoverme:hover { |
| background-color: rgb(255, 255, 0); |
| } |
| |
| .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 JS 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> |
| const elementHeight = 50; |
| |
| window.onload = async () => { |
| await waitForCompositorCommit(); |
| array = document.getElementsByClassName('hoverme'); |
| |
| promise_test(async () => { |
| let x = array[0].offsetLeft + 10; |
| let y = array[0].offsetTop + 25; |
| // Move cursor to 1st element. |
| await mouseMoveTo(x, y); |
| await waitFor( () => { return array[0].matches(":hover");}, 'wait for move to 1st element'); |
| assert_true(array[0].matches(":hover")); |
| assert_false(array[1].matches(":hover")); |
| |
| // Scroll end up at 4th element. Hover state does not update during scrolling, |
| // only the 4th element has a hover effect. |
| assert_equals(document.scrollingElement.scrollTop, 0); |
| window.scrollTo({top: 150, left: 0}); |
| // Wait enough time to see if we fire a fake mouse move event to update the hover state. |
| await waitForAnimationEnd(() => { return document.scrollingElement.scrollTop; }, 300, 60); |
| assert_approx_equals(document.scrollingElement.scrollTop, 3 * elementHeight, 25); |
| assert_false(array[0].matches(":hover")); |
| assert_false(array[1].matches(":hover")); |
| assert_false(array[2].matches(":hover")); |
| assert_true(array[3].matches(":hover")); |
| assert_false(array[4].matches(":hover")); |
| }, 'JS scroll on the page, no hover update during scrolling, but updating hover at the end of scroll.'); |
| } |
| |
| </script> |
