<!doctype html>
<style>
p {font-size: 30px; font-family: Ahem; width: 420px; margin-bottom: 200vh; margin-top: 0px;}
a:focus {outline: 5px solid orange;}
a#A {color: teal;}
</style>
The long link spans over several lines. The first line has another link. There are no focusables below the two links.
<p><a href="#" id="a">aaa</a> xx <a href="#" id="b">bbbbb bbbbbbbbbbbbbb bbbb</a></p>
Some other content down here. This content must be reachable through spatial navigation.
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="resources/snav-testharness.js"></script>
<script>
var resultMap = [
["Down", "a"], // Scroll.
["Down", "a"], // Scroll.
["Down", "b"], // Move focus and scroll.
["Down", "b"], // Scroll.
["Down", "b"], // Scroll.
["Down", "b"], // Scroll.
];
document.getElementById("a").focus();
snav.assertFocusMoves(resultMap);
</script>