<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>