| <!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="../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, 0); |
| }, "tabIndex reflects reality (the scroller can be focused)."); |
| |
| 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> |
