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

<style>
  a {display: block;}
  img {margin-top: 120%; margin-bottom: 120%; width: 200px; height: 200px;}
</style>

<a id="top" href="">top</a>
<map name="map" title="map">
  <area shape="rect" coords="20,20,70,70" href="#" id="1">
  <area shape="rect" coords="130,20,180,70" href="#" id="2">
  <area shape="rect" coords="20,130,70,180" href="#" id="3">
  <area shape="rect" coords="130,130,180,180" href="#" id="4">
</map>
<img src="resources/green.png" usemap="#map">
<a id="bottom" href="">bottom</a>

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

  document.getElementById("3").focus({preventScroll: true});

  test(() => {
    eventSender.keyDown('ArrowDown');
    console.log(document.activeElement)
    assert_equals(document.activeElement, document.getElementById("top"));
  }, "Spatnav picks the visual viewport's topmost element when focus is off screen.");

  document.getElementById("3").focus({preventScroll: true});
  window.scrollTo(0, document.body.scrollHeight);

  test(() => {
    assert_equals(document.activeElement, document.getElementById("3"));
    eventSender.keyDown('ArrowUp');
    console.log(document.activeElement)
    assert_equals(document.activeElement, document.getElementById("bottom"));
  }, "Spatnav picks the visual viewport's bottommost element when focus is off screen.");
</script>