Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /dom/events/scrolling/scrollend-with-snap-on-fractional-offset.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="scroll_support.js"></script>
<body>
<style>
.scroller {
scroll-snap-type: x mandatory;
overflow-x: auto;
overflow-y: hidden;
position: relative;
height: 500px;
width: 500px;
}
.box {
scroll-snap-align: start;
width: 400px;
position: absolute;
top: 200px;
}
#box1 {
background-color: red;
height: 500px;
}
#box2 {
background-color: yellow;
height: 300px;
left: 700.5px;
}
#box3 {
background-color: blue;
height: 100px;
left: 1400px;
}
</style>
<div id="scroller" class="scroller">
<div class="box" id="box1">1</div>
<div class="box" id="box2">2</div>
<div class="box" id="box3">3</div>
</div>
<script>
let scrollendCount = 0;
scroller.addEventListener('scrollend', () => {
scroller.style.maxHeight = null;
scroller.style.maxHeight = `${box2.clientHeight}px`;
scrollendCount += 1;
});
promise_test(async (test) => {
// This test aims to verify that scrollend fires correctly (i.e. once)
// when the target snap position is not a whole number. In this case, we
// expect to snap to the left edge of box2 which is at a fractional
// offset from the scroller's origin (left: 700.5px).
// The scroll offset resulting from the snap may not be fractional
// (e.g. if the browser does not support fractional scroll offsets) so
// we verify the scroll offset with assert_approx_equals.
assert_equals(scroller.scrollLeft, 0,
"test precondition: scroller is not scrolled.");
const expected_scroll_left = box2.offsetLeft;
const target_offset = box2.offsetLeft + box2.clientWidth / 2;
let scrollend_promise = waitForScrollendEvent(test, scroller);
scroller.scrollTo( { left: target_offset });
await scrollend_promise;
// Instead of a time-based wait for errant scrollends, we wait a frame
// and then scroll back to 0.
await waitForCompositorCommit();
assert_approx_equals(scroller.scrollLeft, expected_scroll_left, 1,
"scroller snaps to the left edge of box 2");
scrollend_promise = waitForScrollendEvent(test, scroller);
scroller.scrollTo({ left: 0 });
await scrollend_promise;
assert_equals(scroller.scrollLeft, 0,
"scroller should be scrolled back to 0.");
assert_equals(scrollendCount, 2, "exactly 2 scrollends should be seen");
}, "snap to fractional offset fires scrollend exactly once.");
</script>
</body>
</html>