chromium/src/third_party/blink/web_tests/fast/spatial-navigation/snav-div-overflow-scroll-hidden.html

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