blob: e52080314501a4d3d4d22d180d5836ba383b7f66 [file] [log] [blame]
<!doctype html>
div#testcontent {
display: flex;
justify-content: space-between;
flex-direction: row;
div#scroller {
height: 200px;
width: 200px;
overflow: scroll;
background-color: #82E0D9;
<div id="testcontent">
<button id="b1">b1</button>
<div id="scroller">
<p style="margin-top: 100%">clipped text</p>
<button id="b2">b2</button>
<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>
test(function(t) {
}, "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).");
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.
["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);