<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="resources/snav-testharness.js"></script>
<style>
div {
width: 100px;
height: 100px;
margin: 5px;
margin-top: 400px;
border: 1px solid black;
}
span {
position: absolute;
left: 300px;
overflow: hidden;
width: 1px;
height: 1px;
clip: rect(1px 1px 1px 1px);
}
</style>
<div id="first" tabindex="0"></div>
<a id="link" href="https://example.com">
<!-- Because this span comes first in DOM order, but is positioned to the
right of the text node below, some bounding box calculations return an empty
rect. Make spatial-navigation behaves correctly in this case. -->
<span>
Invisible Text
</span>
Visible Text
</a>
<div id="offscreen" tabindex="0"></div>
<script>
test(function(t) {
assert_true(internals.runtimeFlags.keyboardFocusableScrollersEnabled);
}, "Make sure KeyboardFocusableScrollers is set.");
// This test checks that spatial navigation allows entering focus into an
// element with the enter key and exiting it with the escape key.
const first = document.getElementById("first");
const link = document.getElementById("link");
snav.assertSnavEnabledAndTestable();
test(() => {
assert_equals(window.scrollY, 0, "Start at 0 scroll offset.")
// Move interest onto the link.
snav.triggerMove('Down');
snav.triggerMove('Down');
assert_equals(document.activeElement,
link,
"link should start off interested.");
// Move interest down from the link. Since the bottom div is offscreen, we
// should scroll down rather than moving interest. In particular, make sure
// interest doesn't move back to the upper box.
snav.triggerMove('Down');
assert_greater_than(window.scrollY, 0, "Start at 0 scroll offset.")
assert_not_equals(document.activeElement,
first,
"Interest must not move up.");
}, "Clipped anchor doesn't caused looped-navigation bug.");
</script>
Codebase Browser
chromium