forked from mirrors/gecko-dev
51ecc921db
Automatic update from web-platform-tests [css-scroll-snap-2] Rename snapchanging to scrollsnapchanging Per the CSS working group resolution[1], snapchanging should be renamed to scrollsnapchanging. This patch changes the relevant file names and directory names. Bug: 40286359, 338290502 Change-Id: I6ea9f887536390ec25ec8aa83908c3fd1bfa7ffd Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5538928 Commit-Queue: David Awogbemila <awogbemila@chromium.org> Reviewed-by: Kevin Ellis <kevers@chromium.org> Cr-Commit-Position: refs/heads/main@{#1305064} -- wpt-commits: 2d2b35adaa40362f7655abab7d8cbfc4c7b00bfe wpt-pr: 46457
212 lines
7.4 KiB
HTML
212 lines
7.4 KiB
HTML
<!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>
|