Robert Flack
d6d0ca9a73
Automatic update from web-platform-tests Consider scroll-margin when determining if scroll into view is needed When determining whether we need to scroll something into view, we should consider whether we need to scroll to avoid the scroll margin area. Bug: 40855557 Change-Id: I58f2d5b13c97efe28a3d19d57d27ea5860c6bdd6 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7534275 Commit-Queue: Robert Flack <flackr@chromium.org> Reviewed-by: David Awogbemila <awogbemila@chromium.org> Cr-Commit-Position: refs/heads/main@{#1577223} -- wpt-commits: b8c505da452a311750af6d9c33691ef13d998301 wpt-pr: 57443
55 lines
1.3 KiB
HTML
55 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-margin" />
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<style>
|
|
.scroller {
|
|
height: 200px;
|
|
width: 400px;
|
|
border: 1px solid black;
|
|
overflow: auto;
|
|
}
|
|
.header {
|
|
height: 100px;
|
|
position: sticky;
|
|
top: 0;
|
|
background: rgb(255, 0, 0, 0.3);
|
|
}
|
|
.header + * {
|
|
scroll-margin-top: 100px;
|
|
}
|
|
.spacer {
|
|
height: 130px;
|
|
}
|
|
</style>
|
|
<div class="scroller">
|
|
<div class="header">
|
|
This header may obscure content below it.
|
|
</div>
|
|
<button>Focus this button</button>
|
|
<div class="spacer"></div>
|
|
<button>Start on this button</button>
|
|
</div>
|
|
<script>
|
|
test(() => {
|
|
const scroller = document.querySelector('.scroller');
|
|
let buttons = document.querySelectorAll('button');
|
|
assert_greater_than(scroller.scrollHeight, scroller.clientHeight,
|
|
'scroller should have scrolling content');
|
|
|
|
// Focusing the second button should scroll down.
|
|
buttons[1].focus();
|
|
assert_equals(scroller.scrollTop, scroller.scrollHeight - scroller.clientHeight,
|
|
'scrolls to bottom of scroller');
|
|
|
|
// Focusing the first button should scroll up.
|
|
buttons[0].focus();
|
|
assert_equals(scroller.scrollTop, 0,
|
|
'scrolls to top of scroller');
|
|
|
|
}, "Focus should scroll button outside of scroll margin");
|
|
</script>
|
|
|
|
</html>
|