<style>
a {
position: absolute;
height: 50px;
width: 100px;
border: 1px solid black;
}
#e1 {
left: 50px;
top: 250px;
}
#e2 {
left: 200px;
top: 300px;
height: 100px;
}
#e3 {
left: 350px;
top: 300px;
}
#e4 {
left: 500px;
top: 200px;
height: 100px;
}
#e5 {
left: 650px;
top: 250px;
}
</style>
<a id="e1" href="#e1">E1</a>
<a id="e2" href="#e2">E2</a>
<a id="e3" href="#e3">E3</a>
<a id="e4" href="#e4">E4</a>
<a id="e5" href="#e5">E5</a>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="resources/snav-testharness.js"></script>
<script>
var resultMap = [
["Right", "e4"],
["Right", "e5"],
["Left", "e4"],
["Left", "e1"],
["Down", "e2"],
["Right", "e3"],
["Right", "e4"],
];
// Start at a known place.
document.getElementById("e1").focus();
snav.assertFocusMoves(resultMap);
</script>