forked from mirrors/gecko-dev
752a2c164a
Automatic update from web-platform-tests Choose closest covering position for large snap areas This patch modifies the logic to find snap positions so that when a scroller is scrolled to a position which only partially covers a snap area larger than itself, if it snaps to this large snap area, it snaps to the nearest boundary of that snap area where the snap area covers the snap port, rather than doing a jump to honor the specified scroll-snap-align. Below are a few notes about changes made to tests: snap-area-overflow-boundary.html is corrected so that both test cases correctly verify the scroll offset when snapped to the lower element. The scroll amount in the second test case is also adjusted to ensure it is enough to snap to the lower div. The expectations at the end of scroll-on-large-element-not-covering-snapport.tentative.html are updated to account for choosing a snap position different from the scroll-snap-align-specified position for snap areas larger than their snapports. scroll-snap-type-on-root-element.html is updated to account for scrollbar width since snapping to the right edge of the target is valid. This patch picks new programmatic scroll offsets for snap-to-visible-areas-margin-both.html so that the top-left of intersection of the right-top and left-bottom targets' scroll-margins is closer than the bottom-right of the intersection. scrollend-with-snap-on-fractional-offset.html and scroll-start-with-scroll-snap-tentative.html are adjusted to use snap area sizes that don't cover the snap port. Bug: 1420762 Change-Id: I72d18b8ca44ea5aef015e59b67e4de34a66d8a1e Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4806971 Reviewed-by: Robert Flack <flackr@chromium.org> Commit-Queue: David Awogbemila <awogbemila@chromium.org> Cr-Commit-Position: refs/heads/main@{#1193634} -- wpt-commits: 9afcb0cc36b9134bbf04120bb802f2bdb68ae71a wpt-pr: 41639
70 lines
1.9 KiB
HTML
70 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title> CSS Scroll Snap 2 Test: scroll-start interaction with scroll-snap</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-start">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
</head>
|
|
|
|
|
|
<body>
|
|
<style>
|
|
body {
|
|
margin: 0px;
|
|
}
|
|
|
|
.spacer {
|
|
height: 200px;
|
|
width: 100px;
|
|
}
|
|
|
|
.scroller {
|
|
height: 220px;
|
|
width: 100px;
|
|
overflow: scroll;
|
|
scroll-snap-type: both mandatory;
|
|
}
|
|
|
|
#single_snap_scroller {
|
|
scroll-start: 100%;
|
|
}
|
|
#multi_snap_scroller {
|
|
scroll-start: 350px;
|
|
}
|
|
|
|
.snap_point {
|
|
width: 100px;
|
|
height: 200px;
|
|
scroll-snap-align: start;
|
|
}
|
|
</style>
|
|
<div id="single_snap_scroller" class="scroller">
|
|
<div id="top_spacer" class="spacer"></div>
|
|
<div id="lone_snap_point" class="snap_point"></div>
|
|
<div id="bottom_spacer" class="spacer"></div>
|
|
</div>
|
|
<div id="multi_snap_scroller" class="scroller">
|
|
<div id="snap_point_1" class="snap_point"></div>
|
|
<div id="snap_point_2" class="snap_point"></div>
|
|
<div id="snap_point_3" class="snap_point"></div>
|
|
</div>
|
|
<script>
|
|
test((t) => {
|
|
assert_equals(single_snap_scroller.scrollTop,
|
|
top_spacer.getBoundingClientRect().height,
|
|
"scroller snaps to top of snap point");
|
|
}, "snap overrides scroll-start position");
|
|
|
|
test((t) => {
|
|
// scroll-start sets the initial scroll offset to 350px which is closer to
|
|
// the third snap point than the second, so the scroller should snap to
|
|
// the third snap_point.
|
|
assert_equals(multi_snap_scroller.scrollTop,
|
|
multi_snap_scroller.scrollHeight - multi_snap_scroller.clientHeight,
|
|
"scroller snaps to snap point closer to start position.");
|
|
}, "scroller snaps based on scroll-start position");
|
|
</script>
|
|
</body>
|