131 lines
5.3 KiB
HTML
131 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1" />
|
|
<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="support/common.js"></script>
|
|
</head>
|
|
<body>
|
|
<style>
|
|
.scroller {
|
|
border: solid 1px black;
|
|
overflow-y: scroll;
|
|
height: 200px;
|
|
width: 200px;
|
|
display: inline-block;
|
|
background-color: yellow;
|
|
position: relative;
|
|
}
|
|
.snapcontainer {
|
|
scroll-snap-type: y mandatory;
|
|
}
|
|
.snaparea {
|
|
scroll-snap-align: start;
|
|
margin-bottom: 120%;
|
|
height: 40px;
|
|
width: 50px;
|
|
background-color: green;
|
|
}
|
|
.space {
|
|
height: 500vh;
|
|
width: 500vw;
|
|
position: absolute;
|
|
}
|
|
</style>
|
|
<div>
|
|
<div id="plaincontainer" class="scroller">
|
|
<div class="snaparea"></div>
|
|
<div class="snaparea"></div>
|
|
<div class="snaparea"></div>
|
|
<div class="snaparea"></div>
|
|
<div class="snaparea"></div>
|
|
</div>
|
|
<div id="snapcontainer1" class="scroller snapcontainer">
|
|
<div class="snaparea"></div>
|
|
<div class="snaparea"></div>
|
|
<div class="snaparea"></div>
|
|
<div class="snaparea"></div>
|
|
<div class="snaparea"></div>
|
|
</div>
|
|
<div id="snapcontainer2" class="scroller snapcontainer">
|
|
<div class="snaparea"></div>
|
|
<div class="snaparea"></div>
|
|
<div class="snaparea"></div>
|
|
<div class="snaparea"></div>
|
|
<div class="snaparea"></div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
const plaincontainer = document.getElementById("plaincontainer");
|
|
const snapcontainer1 = document.getElementById("snapcontainer1");
|
|
const snapcontainer2 = document.getElementById("snapcontainer2");
|
|
|
|
async function test_unrelated_gesture_during_snap(t,
|
|
snapcontainer,
|
|
other_container,
|
|
inputs,
|
|
expectations) {
|
|
await waitForScrollReset(t, snapcontainer);
|
|
await waitForScrollReset(t, other_container);
|
|
await waitForCompositorCommit();
|
|
|
|
assert_equals(snapcontainer.scrollTop, 0, "snapcontainer is reset.");
|
|
assert_equals(other_container.scrollTop, 0, `${other_container.id} is ` +
|
|
`reset.`);
|
|
const scrollend_promises = [
|
|
waitForScrollendEventNoTimeout(snapcontainer),
|
|
waitForScrollendEventNoTimeout(other_container)
|
|
];
|
|
let last_scroll_top = snapcontainer.scrollTop;
|
|
async function scroll_listener() {
|
|
// If we are scrolling back to 0, we are snapping.
|
|
if (snapcontainer.scrollTop < last_scroll_top) {
|
|
snapcontainer.removeEventListener("scroll", scroll_listener);
|
|
await new test_driver.Actions().scroll(0, 0, 0, inputs.scroll_amt,
|
|
{ origin: other_container }).send();
|
|
}
|
|
last_scroll_top = snapcontainer.scrollTop;
|
|
}
|
|
snapcontainer.addEventListener("scroll", scroll_listener);
|
|
|
|
// The snap areas are separated by margin-bottom: 120%. Scrolling to
|
|
// almost halfway should snap back to 0.
|
|
const snap_scroll_amt = snapcontainer.clientHeight / 2;
|
|
await new test_driver.Actions().scroll(0, 0, 0, snap_scroll_amt,
|
|
{ origin: snapcontainer })
|
|
.send();
|
|
|
|
await Promise.all(scrollend_promises);
|
|
assert_equals(snapcontainer.scrollTop, 0,
|
|
"snapcontainer snaps back to 0");
|
|
assert_equals(other_container.scrollTop, expectations.expectedScrollTop,
|
|
`${other_container.id} is at expected scroll offset.`);
|
|
}
|
|
|
|
promise_test(async (t) => {
|
|
await test_unrelated_gesture_during_snap(t, snapcontainer1,
|
|
plaincontainer,
|
|
{ scroll_amt: 100 },
|
|
{ expectedScrollTop: 100 });
|
|
}, "gesture on separate scroll container works while another container "+
|
|
"snaps");
|
|
|
|
promise_test(async (t) => {
|
|
// scrolling the full clientHeight of snapcontainer2 should result in
|
|
// snapping to its second snap area.
|
|
const scroll_amt = snapcontainer2.clientHeight;
|
|
const expectedScrollTop = snapcontainer2.querySelectorAll(".snaparea")[1].offsetTop;
|
|
await test_unrelated_gesture_during_snap(t, snapcontainer1,
|
|
snapcontainer2,
|
|
{ scroll_amt: scroll_amt },
|
|
{ expectedScrollTop: expectedScrollTop});
|
|
}, "gesture on separate snap container works while another container "+
|
|
"snaps");
|
|
</script>
|
|
</body>
|
|
</html>
|