snav-applies-hover.html | Explore in Territory

<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.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>
  // This test checks whether hover state is correctly applied and removed from
  // elements as the become and lose interest. Includes an iframe to get at
  // least basic exercise of cross-frame cases.
  snav.assertSnavEnabledAndTestable();

  const t = async_test("Test hover application during spatial navigation.");

  onload = t.step_func(() => {
    const iframe = document.querySelector("iframe");
    const first = document.getElementById("first");
    const second = iframe.contentDocument.getElementById("second");
    const third = document.getElementById("third");

    // Moves interest to |first| element.
    snav.triggerMove("Down");

    assert_equals(document.activeElement,
                  first, "|first| element gets interest.");
    assert_true(first.matches(":hover"),
                "|first| should be hovered when interested.");

    // First down will interest iframe. Down again to interest |second|.
    snav.triggerMove("Down");
    snav.triggerMove("Down");

    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.");
    assert_false(first.matches(":hover"),
                "|first| should no longer be hovered.");

    // 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.");

    t.done();
  });
</script>
chromium/third_party/blink/web_tests/fast/spatial-navigation/snav-applies-hover.html
