snav-only-clipped-overflow-content.html

<!DOCTYPE html>
<style>
  div#scroller {
    height: 200px;
    width: 300px;
    overflow: auto;
    border: 1px solid #666;
    background-color: #ccc;
    padding: 8px;
  }
</style>

<p>That is is a normal <a id="start" href="a">link</a>.</p>
<div id="scroller" tabindex="0">
  <a style="display: block; margin-top: 200px;" id="a1" href="a">A clipped link.</a>
</div>
<p>And this is another normal <a id="a2" href="a">link</a>.</p>

<p>Scroll until the scroller is fully scrolĺed. Focus revealed links on the way down.</p>

<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="resources/snav-testharness.js"></script>
<script>
  var resultMap = [
    ["Down", "start"],
    ["Down", "scroller"],
    ["Down", "a1"],
    ["Down", "a1"],  // The div has padding so it can be scrolled a little further.
    ["Down", "a2"],
  ];
  snav.assertFocusMoves(resultMap);
</script>

chromium/third_party/blink/web_tests/fast/spatial-navigation/snav-only-clipped-overflow-content.html