mirror of
https://github.com/nodejs/node.git
synced 2025-08-15 13:48:44 +02:00
b470e2fcb2
PR-URL: https://github.com/nodejs/node/pull/54642 Reviewed-By: Yagiz Nizipli <yagiz@nizipli.com> Reviewed-By: Matteo Collina <matteo.collina@gmail.com> Reviewed-By: Mattias Buelens <mattias@buelens.com> Reviewed-By: Benjamin Gruenbaum <benjamingr@gmail.com> Reviewed-By: Ethan Arrowood <ethan@arrowood.dev> Reviewed-By: Chemi Atlow <chemi@atlow.co.il> Reviewed-By: James M Snell <jasnell@gmail.com>
85 lines
No EOL
2.8 KiB
HTML
85 lines
No EOL
2.8 KiB
HTML
<!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> |