Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 3 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-overscroll-behavior/overscroll-behavior-single-axis.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>Overscroll Behavior: single-axis scrollers ignore overscroll-behavior on their cross axis</title>
<!--
#scroller-x can only be manually scrolled along the x-axis and #scroller-y
only along the y-axis. overscroll-behavior set on the other (cross) axis must
be ignored: it neither produces a local overscroll effect nor blocks scroll
chaining on that axis.
-->
<style>
#parent {
width: 200px;
height: 200px;
overflow: scroll;
}
#parent > .content {
width: 400px;
height: 400px;
display: flex;
}
.scroller {
width: 100px;
height: 100px;
flex-shrink: 0;
}
.content {
width: 200px; /* Forces scrollable overflow on the scroll axis. */
height: 200px;
}
#scroller-x {
overflow-x: scroll;
overflow-y: clip;
overscroll-behavior-y: contain;
}
#scroller-y {
overflow-x: clip;
overflow-y: scroll;
overscroll-behavior-x: contain;
}
#scroller-y-control {
overflow-x: clip;
overflow-y: scroll;
overscroll-behavior-y: contain;
}
</style>
<div id="parent">
<div class="content">
<div id="scroller-x" class="scroller"><div class="content"></div></div>
<div id="scroller-y" class="scroller"><div class="content"></div></div>
<div id="scroller-y-control" class="scroller"><div class="content"></div></div>
</div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="/dom/events/scrolling/scroll_support.js"></script>
<script src="/css/css-scroll-snap/support/common.js"></script>
<script>
const parent = document.getElementById('parent');
async function wheel(el, dx, dy) {
await new test_driver.Actions()
.scroll(0, 0, dx, dy, {origin: el})
.send();
}
promise_test(async () => {
await waitForCompositorCommit();
assert_equals(parent.scrollTop, 0);
const scrolled = waitForScrollEvent(parent);
await wheel(document.getElementById('scroller-x'), 0, 50);
await scrolled;
assert_greater_than(parent.scrollTop, 0, "vertical delta chains to parent");
}, "overscroll-behavior-y:contain on an x-only scroller does not block vertical chaining");
promise_test(async () => {
await waitForCompositorCommit();
assert_equals(parent.scrollLeft, 0);
const scrolled = waitForScrollEvent(parent);
await wheel(document.getElementById('scroller-y'), 50, 0);
await scrolled;
assert_greater_than(parent.scrollLeft, 0, "horizontal delta chains to parent");
}, "overscroll-behavior-x:contain on a y-only scroller does not block horizontal chaining");
promise_test(async (t) => {
const s = document.getElementById('scroller-y-control');
s.scrollTop = s.scrollHeight; // at the end; no remaining range to consume.
await waitForCompositorCommit();
await wheel(s, 0, 50);
await verifyScrollStopped(t, parent);
}, "overscroll-behavior-y:contain on a y-scroller still blocks vertical chaining (control)");
</script>