reach-and-scroll-overflow-div-without-mouse.html

<!doctype html>
<style>
  div#testcontent  {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
  }
  div#scroller {
    height: 200px;
    width: 200px;
    overflow: scroll;
    background-color: #82E0D9;
  }
</style>

<div id="testcontent">
  <button id="b1">b1</button>
  <div id="scroller">
    <p style="margin-top: 100%">clipped text</p>
  </div>
  <button id="b2">b2</button>
</div>

<p>By using the keyboard, a user can, without a mouse, read the div's clipped text.</p>

<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<script src="../resources/run-after-layout-and-paint.js"></script>
<script src="../fast/spatial-navigation/resources/snav-testharness.js"></script>
<script>
  test(function(t) {
      assert_true(internals.runtimeFlags.keyboardFocusableScrollersEnabled);
  }, "Make sure KeyboardFocusableScrollers is set.");

  let scroller = document.getElementById('scroller')
  test(() => {
    assert_equals(scroller.scrollTop, 0);
  }, "Scroller starts at its top.");

  test(() => {
    assert_equals(scroller.tabIndex, -1);
  }, "tabIndex doesn't reflect focusability.");

  runAfterLayoutAndPaint(() => {
    async_test(t => {
      scroller.addEventListener("scroll", t.step_func_done(function() {
        assert_greater_than(scroller.scrollTop, 0);
      }));
    }, "Down-key scrolled the focused div.");  // assertFocusMoves triggers a scroll.

    document.getElementById("b1").focus();  // Start outside the scroller.
    snav.assertFocusMoves([
      ["Forward", "scroller"],   // Focus the scroller using sequential navigation (forward).
      ["Forward", "b2"],         // Blur the scroller using sequential navigation.
      ["Backward", "scroller"],  // Focus the scroller using sequential navigation (backward).
      ["Down", "scroller"],      // Verify arrow-key-scrolling.
    ], false);
  });
</script>
chromium/third_party/blink/web_tests/accessibility/reach-and-scroll-overflow-div-without-mouse.html
