<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>

<style>
  a {font-size: 200px;}
</style>

<a href="#" id="a">a</a><br>
<a href="#" id="b">b</a><br>
<a href="#" id="c">c</a><br>
<a href="#" id="d">d</a><br>
<a href="#" id="e">e</a><br>
<a href="#" id="f">f</a>

<script>
  if (window.testRunner) {
    testRunner.overridePreference('WebKitTabToLinksPreferenceKey', 1);
    testRunner.overridePreference('WebKitSpatialNavigationEnabled', 1);
    testRunner.waitUntilDone();
  }

  test(() => {
    assert_equals(document.activeElement, document.body);
    eventSender.keyDown('ArrowDown');
    assert_equals(document.activeElement, a);
  }, "Spatnav picks the visual viewport's topmost element (a).");

  test(() => {
    c.scrollIntoView(true);
    eventSender.keyDown('ArrowDown');
    assert_equals(document.activeElement, c);
  }, "Spatnav picks the visual viewport's topmost element (c).");

  test(() => {
    f.scrollIntoView(false);
    eventSender.keyDown('ArrowUp');
    assert_equals(document.activeElement, f);
  }, "Spatnav picks the visual viewport's bottommost element (f).");
</script>