<style>
div.overflow1 {overflow:auto; height:100px; width:200px;}
div.overflow2 {overflow:hidden; height:80px; width:150px; border: 1px solid cyan;}
img {display: block}
</style>
<div class="overflow1">
<a href="#" id="start"><img src="resources/green.png" width=40px; height=40px;></a>
<a href="#" id="f2"><img src="resources/green.png" width=50px; height=40px;></a>
<a href="#" id="f3"><img src="resources/green.png" width=40px; height=40px;></a>
<br>
<a href="#" id="f4"><img src="resources/green.png" width=50px; height=40px;></a>
<div class="overflow2">
<a href="#" id="f5"><img src="resources/green.png" width=40px; height=40px;></a>
<a href="#" id="f6"><img src="resources/green.png" width=50px; height=40px;></a>
<br>
<a href="#" id="f7"><img src="resources/green.png" width=40px; height=40px;></a>
<a href="#" id="f8"><img src="resources/green.png" width=50px; height=40px;></a>
</div><br>
<a href="#" id="f9"><img src="resources/green.png" width=40px; height=40px;></a>
</div>
<p>Focusables that are clipped by `overflow: hidden` are not navigable.</p>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="resources/snav-testharness.js"></script>
<script>
var resultMap = [
["Down", "f2"],
["Down", "f3"],
["Down", "f3"],
["Down", "f4"],
["Down", "f4"],
["Down", "f5"],
["Down", "f5"],
["Down", "f6"],
["Down", "f6"],
["Down", "f9"],
];
// Start at a known place.
document.getElementById("start").focus();
snav.assertFocusMoves(resultMap);
</script>