Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 7 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-scroll-snap-2/scrollsnapchanging/scrollsnapchanging-on-user-scroll.tentative.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="/css/css-scroll-snap-2/resources/common.js"></script>
<script src="/css/css-scroll-snap-2/resources/user-scroll-common.js"></script>
<script src="/web-animations/testcommon.js"></script>
</head>
<body>
<style>
#scroller {
height: 400px;
width: 400px;
position: relative;
overflow: scroll;
scroll-snap-type: y mandatory;
border: solid 1px black;
}
.box {
position: absolute;
left: 150px;
height: 350px;
width: 100px;
border: solid 1px white;
}
.snap {
scroll-snap-align: start;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.yellow {
background-color: yellow;
}
#snap_area_1 {
top: 0px;
}
#snap_area_2 {
top: 352px;
}
#snap_area_3 {
top: 704px;
}
.large_space {
height: 400vh;
width: 400vw;
position: absolute;
}
</style>
<div id="scroller">
<div class="large_space"></div>
<div id="snap_area_1" class="blue snap box"></div>
<div id="snap_area_2" class="green snap box"></div>
<div id="snap_area_3" class="yellow snap box"></div>
</div>
<script>
const scroller = document.getElementById("scroller");
const snap_area_2 = document.getElementById("snap_area_2");
const snap_area_1 = document.getElementById("snap_area_1");
// Touch scroll test.
promise_test(async (t) => {
await waitForCompositorCommit();
const scroller_middle = Math.round(scroller.clientWidth / 2);
const test_data = {
scroller: scroller,
scrolling_function: async () => {
const start_pos = { x: scroller_middle, y: snap_area_2.offsetTop };
const end_pos = { x: scroller_middle, y: 0 };
await snap_event_touch_scroll_helper(start_pos, end_pos);
},
expected_snap_targets: { block: snap_area_2, inline: null },
expected_scroll_offsets: {
x: 0,
y: snap_area_2.offsetTop
}
};
await test_snap_event(t, test_data, "scrollsnapchanging");
}, "touch scrolling fires scrollsnapchanging.");
// Wheel scroll test.
promise_test(async (t) => {
await waitForCompositorCommit();
const test_data = {
scroller: scroller,
scrolling_function: async () => {
await new test_driver.Actions().scroll(0, 0, 0,
Math.round(snap_area_2.offsetTop / 2) + 1,
{ origin: scroller }).send();
},
expected_snap_targets: { block: snap_area_2, inline: null },
expected_scroll_offsets: {
x: 0,
y: snap_area_2.offsetTop
}
};
await test_snap_event(t, test_data, "scrollsnapchanging");
}, "mouse wheel scroll triggers scrollsnapchanging.");
// Scrollbar drag test.
promise_test(async (t) => {
await waitForCompositorCommit();
// Skip test on platforms that do not have a visible scrollbar (e.g.
// overlay scrollbar).
const scrollbar_width = scroller.offsetWidth - scroller.clientWidth;
if (scrollbar_width == 0)
return;
const test_data = {
scroller: scroller,
scrolling_function: async () => {
const scrollbar_to_scroller_ratio =
getScrollbarToScrollerRatio(scroller);
// Scroll by just over half of the top box's height.
const drag_amt = (snap_area_2.offsetTop / 2 + 1) *
scrollbar_to_scroller_ratio;
await snap_event_scrollbar_drag_helper(scroller, scrollbar_width, drag_amt);
},
expected_snap_targets: { block: snap_area_2, inline: null },
expected_scroll_offsets: {
x: 0,
y: snap_area_2.offsetTop
}
};
await test_snap_event(t, test_data, "scrollsnapchanging");
}, "scrollbar dragging fires scrollsnapchanging.");
// Keyboard test.
promise_test(async (t) => {
await waitForCompositorCommit();
const test_data = {
scroller: scroller,
scrolling_function: async () => {
scroller.focus();
window.test_driver.send_keys(scroller, '\ue015'/*ArrowDown*/);
},
expected_snap_targets: { block: snap_area_2, inline: null },
expected_scroll_offsets: {
x: 0,
y: snap_area_2.offsetTop
}
};
await test_snap_event(t, test_data, "scrollsnapchanging");
}, "keyboard scroll triggers scrollsnapchanging.");
// Touch scroll test: peek at snap_area_2 and then drag back to
// snap_area_1.
promise_test(async (t) => {
await waitForScrollReset(t, scroller);
await waitForCompositorCommit();
const pos_x = Math.round(scroller.clientWidth / 2);
const start_pos_y = Math.round(snap_area_2.offsetTop);
let evts_promise = waitForEventsUntil(scroller, "scrollsnapchanging",
waitForScrollendEventNoTimeout(scroller));
await new test_driver.Actions()
.addPointer("TestPointer", "touch")
.pointerMove(pos_x, start_pos_y)
.pointerDown()
.addTick()
.pause(200)
// Drag up to y=0, which should trigger a scrollsnapchanging event.
.pointerMove(pos_x, 0)
.addTick()
.pause(200)
// Drag down again to start position, which should trigger a
// scrollsnapchanging event.
.pointerMove(pos_x, start_pos_y)
.pointerUp()
.send();
let evts = await evts_promise;
assert_equals(evts.length, 2, "2 scrollsnapchanging events are seens");
assertSnapEvent(evts[0], { block: snap_area_2, inline: null });
assertSnapEvent(evts[1], { block: snap_area_1, inline: null });
}, "scrollsnapchanging fires as scroll moves through different snap targets.");
// Touch scroll test.
promise_test(async (t) => {
await waitForCompositorCommit();
const scroller_middle = Math.round(scroller.clientWidth / 2);
const test_data = {
scroller: scroller,
scrolling_function: async () => {
const start_pos = { x: scroller_middle, y: snap_area_2.offsetTop };
const end_pos = { x: scroller_middle, y: 0 };
await snap_event_touch_scroll_helper(start_pos, end_pos);
},
expected_snap_targets: { block: snap_area_2, inline: null },
expected_scroll_offsets: {
x: 0,
y: snap_area_2.offsetTop
}
};
await test_snap_event(t, test_data, "scrollsnapchanging",
/*use_onsnap_member*/true);
}, "touch scrolling fires Element.onscrollsnapchanging.");
// scrollsnapchanging doesn't fire test.
promise_test(async (t) => {
test_no_scrollsnapchanging(t, scroller, 10);
}, "scrollsnapchanging doesn't fire if scroll doesn't reach different snap " +
"targets.");
</script>
</body>
</html>