<!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");
function scrollLeft() {
return scroller.scrollLeft;
}
function scrollTop() {
return scroller.scrollTop;
}
function keyPress(key) {
return new Promise((resolve, reject) => {
if (window.eventSender) {
eventSender.keyDown(key);
resolve();
}
else {
reject('This test requires window.eventSender');
}
})
}
promise_test (async () => {
await mouseClickOn(10, 10);
scroller.scrollTo(0, 0);
await keyPress("ArrowDown");
await waitForScrollEnd(scroller, scrollTop, 400);
}, "Snaps to bottom-left after pressing ArrowDown");
promise_test (async () => {
await mouseClickOn(10, 10);
scroller.scrollTo(0, 400);
await keyPress("ArrowUp");
await waitForScrollEnd(scroller, scrollTop, 0);
}, "Snaps to top-left after pressing ArrowUp");
promise_test (async () => {
await mouseClickOn(10, 10);
scroller.scrollTo(0, 0);
await keyPress("ArrowRight");
await waitForScrollEnd(scroller, scrollLeft, 400);
}, "Snaps to top-right after pressing ArrowRight");
promise_test (async () => {
await mouseClickOn(10, 10);
scroller.scrollTo(400, 0);
await keyPress("ArrowLeft");
await waitForScrollEnd(scroller, scrollLeft, 0);
}, "Snaps to top-left after pressing ArrowLeft");
</script>