<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="resources/snav-testharness.js"></script>
<style>
  div {
    height: 100px;
    width: 100px;
    overflow: scroll;
  }
  div p {
    margin-top: 300px;  /* Outside div's scrollport. */
  }
</style>

<button id="a">a</button><br>
<div id="scroller">
  <button id='b'>b</button>
  <p>some text</p>
</div>
<button id="c">c</button>

<p>Scrolling downwards puts #b off screen. When #b is
off screen, #c is reachable once the div is fully scrolled.</p>

<script>
  let resultMap = [
    ['Down', 'a'],
    ['Down', 'scroller'],
    ['Down', 'b'],
    ['Down', 'b'],
    ['Down', 'b'],
    ['Down', 'b'],
    ['Down', 'b'],
    ['Down', 'b'],
    ['Down', 'b'],
    ['Down', 'b'],
    ['Down', 'c'],
  ];
  snav.assertFocusMoves(resultMap);
</script>