<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1" />
<link rel="stylesheet" href="resources/simple-snap.css">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/gesture-util.js"></script>
<div id='scroller'>
<div id="space"></div>
<div class="snap left top" id="top-left"></div>
<div class="snap right top" id="top-right"></div>
<div class="snap left bottom" id="bottom-left"></div>
</div>
<script>
var scroller = document.getElementById("scroller");
var topLeft = document.getElementById("top-left");
var topRight = document.getElementById("top-right");
promise_test (async t => {
// Make the snap area covers the snapport.
topLeft.style.width = "800px";
// Make the distance between the previous and the next snap position larger
// than snapport.
topRight.style.left = "500px";
t.add_cleanup(() => {
topLeft.style.width = "";
topRight.style.left = "400px";
});
await mouseClickOn(10, 10);
await waitForScrollReset(scroller);
await keyboardScroll("ArrowRight", scroller);
assert_between_exclusive(scroller.scrollLeft, 0, 500);
}, "If the originally intended offset is valid in making a snap area cover " +
"the snapport, and there's no other snap offset in between, use the " +
"originally intended offset");
promise_test (async t => {
// Make the snap area covers the snapport.
topLeft.style.width = "800px";
// Make the next snap offset closer than the original intended offset.
topRight.style.left = "20px";
t.add_cleanup(() => {
topLeft.style.width = "";
topRight.style.left = "400px";
});
await mouseClickOn(10, 10);
await waitForScrollReset(scroller);
await keyboardScroll("ArrowRight", scroller);
assert_equals(scroller.scrollLeft, 20);
}, "If the originally intended offset is valid in making a snap area cover " +
"the snapport, but there's a defined snap offset in between, use the " +
"defined snap offset.");
promise_test (async () => {
await mouseClickOn(10, 10);
await waitForScrollReset(scroller, 400, 0);
await keyPress("ArrowRight");
await conditionHolds(() => { return scroller.scrollLeft == 400; });
assert_equals(scroller.scrollLeft, 400);
}, "If there is no valid snap offset in the arrow key's direction other than " +
"the current offset, and the scroll-snap-type is mandatory, stay at the " +
"current offset.");
promise_test (async t => {
scroller.style.scrollSnapType = "both proximity";
t.add_cleanup(() => {
scroller.style.scrollSnapType = "both mandatory";
});
await mouseClickOn(10, 10);
await waitForScrollReset(scroller, 400, 0);
await keyboardScroll("ArrowRight", scroller);
assert_greater_than(scroller.scrollLeft, 400);
}, "If there is no valid snap offset in the arrow key's direction other than " +
"the current offset, and the scroll-snap-type is proximity, go to the " +
"original intended offset");
</script>
Codebase Browser
chromium