Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 2 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-scroll-snap/unrelated-gesture-scroll-during-snap.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html>
<head>
<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>