Vladimir Levin
63437f5c38
Automatic update from web-platform-tests Scroll snap: Avoid cancelling a scroll animation targeting same snap. If we target the same snap point as before while perform snapping then we can end up cancelling the previous animation but not starting a new one. Instead of cancelling, we should instead continue the same animation curve. R=flackr@chromium.org Bug: 481758093 Change-Id: I9fa9332437dd3752a77f38d7affbf76e8691d7e8 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7821862 Reviewed-by: Robert Flack <flackr@chromium.org> Commit-Queue: Vladimir Levin <vmpstr@chromium.org> Cr-Commit-Position: refs/heads/main@{#1626557} -- wpt-commits: 148737d234f3b789cb4f51e149842edd8c3bc728 wpt-pr: 59702
68 lines
2.2 KiB
HTML
68 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-type" />
|
|
<title>Keyboard scroll snap interruption</title>
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="/resources/testdriver.js"></script>
|
|
<script src="/resources/testdriver-vendor.js"></script>
|
|
<script src="/resources/testdriver-actions.js"></script>
|
|
<script src="/dom/events/scrolling/scroll_support.js"></script>
|
|
<script src="../support/common.js"></script>
|
|
|
|
<style>
|
|
#scroller {
|
|
width: 600px;
|
|
height: 300px;
|
|
overflow-x: scroll;
|
|
scroll-behavior: smooth;
|
|
scroll-snap-type: x mandatory;
|
|
display: flex;
|
|
border: 1px solid black;
|
|
}
|
|
.snap {
|
|
width: 600px;
|
|
height: 100%;
|
|
flex-shrink: 0;
|
|
scroll-snap-align: start;
|
|
}
|
|
#snap-left {
|
|
background-color: red;
|
|
}
|
|
#snap-right {
|
|
background-color: blue;
|
|
}
|
|
</style>
|
|
|
|
<div id="scroller" tabindex="0">
|
|
<div class="snap" id="snap-left"></div>
|
|
<div class="snap" id="snap-right"></div>
|
|
</div>
|
|
|
|
<script>
|
|
const scroller = document.getElementById("scroller");
|
|
|
|
promise_test(async t => {
|
|
scroller.focus();
|
|
assert_equals(scroller.scrollLeft, 0, "verify test pre-condition");
|
|
|
|
const scrollEndPromise = waitForScrollEndFallbackToDelayWithoutScrollEvent(scroller);
|
|
|
|
// Send first key press to start smooth snap animation to 600.
|
|
await keyPress(scroller, "ArrowRight");
|
|
|
|
// Wait for animation to start progressing.
|
|
await waitFor(() => scroller.scrollLeft > 0, "Timeout waiting for scroll to start");
|
|
assert_less_than(scroller.scrollLeft, 600, "Scroll should not have finished yet");
|
|
|
|
// Send second key press to interrupt the ongoing snap animation.
|
|
await keyPress(scroller, "ArrowRight");
|
|
|
|
// Wait for the scroll to fully settle.
|
|
await scrollEndPromise;
|
|
|
|
// Assert that it successfully reached the mandatory snap target.
|
|
assert_equals(scroller.scrollLeft, 600, "Should successfully snap to the target despite interruption");
|
|
}, "Interrupting a snap animation with another key press targeting the same node preserves snapping destination");
|
|
</script>
|