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
133 lines
3.8 KiB
HTML
133 lines
3.8 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/programmatic-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");
|
|
|
|
promise_test(async (t) => {
|
|
await waitForCompositorCommit();
|
|
const test_data = {
|
|
scroller: scroller,
|
|
scrolling_function: async () => {
|
|
scroller.scrollTo(0, snap_area_2.offsetTop);
|
|
},
|
|
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");
|
|
}, "scrollsnapchanging fires on programmatic scrolls that changes a scroller's" +
|
|
" snap targets.");
|
|
|
|
promise_test(async (t) => {
|
|
await waitForCompositorCommit();
|
|
const test_data = {
|
|
scroller: scroller,
|
|
scrolling_function: async () => {
|
|
scroller.scrollTo(0, snap_area_2.offsetTop);
|
|
},
|
|
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);
|
|
}, "Element.onscrollsnapchanging fires on programmatic scrolls that changes a " +
|
|
"scroller's snap targets.");
|
|
|
|
promise_test(async (t) => {
|
|
checkSnapEventSupport("scrollsnapchanging");
|
|
await waitForScrollReset(t, scroller);
|
|
await waitForCompositorCommit();
|
|
let snap_event_promise = waitForSnapEvent(scroller, "scrollsnapchanging", false);
|
|
// The snap areas are far apart enough that 10px is not enough to trigger
|
|
// a change in snap targets.
|
|
const small_scroll_offset = 10;
|
|
// Set the scroll destination to just a little off (0, 0) top so we snap
|
|
// back to the top box.
|
|
scroller.scrollTo(0, small_scroll_offset);
|
|
let evt = await snap_event_promise;
|
|
assert_equals(evt, null, "no snap event since scroller is back to top");
|
|
assert_equals(scroller.scrollTop, 0, "scroller snaps back to the top");
|
|
assert_equals(scroller.scrollLeft, 0, "scroller snaps back to the left");
|
|
}, "scrollsnapchanging should not fire since the snap target doesn't change.");
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|