| <!DOCTYPE html> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="../../resources/gesture-util.js"></script> |
| <script src="resources/snav-testharness.js"></script> |
| |
| <style> |
| div { |
| width: 100px; |
| height: 100px; |
| margin: 5px; |
| border: 1px solid black; |
| } |
| div:hover { |
| background-color: dodgerblue; |
| } |
| iframe { |
| width: 200px; |
| height: 200px; |
| } |
| </style> |
| |
| <div id="first" tabindex="0">First</div> |
| <iframe srcdoc=" |
| <!DOCTYPE html> |
| <style> |
| div:hover { |
| background-color: dodgerblue; |
| } |
| div { |
| width: 100px; |
| height: 100px; |
| margin: 5px; |
| border: 1px solid black; |
| } |
| </style> |
| <div id='second' tabindex='0'>Second</div>"></iframe> |
| <div id="third" tabindex="0">Third</div> |
| |
| <script> |
| window.onload = async () => { |
| // This test checks whether hover state is correctly applied and removed from |
| // elements as the become and lose interest but includes a mouse move to |
| // ensure it doesn't interfere with hover transitions. |
| const iframe = document.querySelector("iframe"); |
| const first = document.getElementById("first"); |
| const second = iframe.contentDocument.getElementById("second"); |
| const third = document.getElementById("third"); |
| |
| promise_test(async () => { |
| snav.assertSnavEnabledAndTestable(); |
| |
| // Move interest to |second|. |
| snav.triggerMove("Down"); // |first| |
| snav.triggerMove("Down"); // |iframe| |
| snav.triggerMove("Down"); // |second| |
| |
| assert_equals(window.internals.interestedElement, |
| second, "|second| element gets interest."); |
| assert_true(second.matches(":hover"), |
| "|second| should be hovered when interested."); |
| assert_true(iframe.matches(":hover"), |
| "|iframe| should be hovered as element inside is hovered."); |
| |
| // Arbitrary mouse move on the main frame. This will un-hover the iframe, |
| // ensure further spatial navigations remove and replace hover correctly. |
| await mouseMoveTo(300, 300); |
| assert_false(iframe.matches(":hover"), |
| "Mouse move should unhover |iframe|."); |
| |
| // Down again to interest |third|. |
| snav.triggerMove("Down"); |
| assert_equals(window.internals.interestedElement, |
| third, "|third| element gets interest."); |
| assert_true(third.matches(":hover"), |
| "|third| should be hovered when interested."); |
| assert_false(second.matches(":hover"), |
| "|second| should no longer be hovered."); |
| assert_false(iframe.matches(":hover"), |
| "|iframe| should no longer be hovered."); |
| |
| }, "Test hover application with mouse moves during spatial navigation."); |
| } |
| </script> |
