Free Debreuil
4f645c99ee
Automatic update from web-platform-tests Make scroll chaining support single-axis scroll containers When scroll chaining, use the nearest ancestor scroll container for an axis in the scroll's axis, and apply overscroll-behavior only for axes that are scroll containers. Bug: 522360235 Change-Id: Id4c0a52df49b80ce8732e4d9cde78a6ff60742f9 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7930187 Reviewed-by: Robert Flack <flackr@chromium.org> Commit-Queue: Free Debreuil <freedebreuil@google.com> Cr-Commit-Position: refs/heads/main@{#1649152} -- wpt-commits: 43910858e4192e8682661ca5c14afe57ed6c95bd wpt-pr: 60722
97 lines
3.2 KiB
HTML
97 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<title>Overscroll Behavior: single-axis scrollers ignore overscroll-behavior on their cross axis</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-overscroll-behavior/">
|
|
<!--
|
|
#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>
|