<!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(iframe.contentDocument.activeElement,
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(document.activeElement,
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>