mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-10 21:28:04 +02:00
d671f49328
Automatic update from web-platform-tests Correctly invalidate snap container data when relevant css props change Previously we would only recompute snap data when only the first time the snap area or container was processed and again when a handful of css properties [1] changed. This means style changes that contained other relevant properties [2] did not take affect. This problem was mostly masked because our existing tests never updates these properties beyond the first instance. Changes in this patch: - Update invalidation logic to take all relevant props into account. - Simplify invalidation logic by separating add/remove case from style changed case. - Minor improvement in invalidation documentation in viewport case. [1] snap-scroll-type, snap-scroll-align [2] scroll-padding, scroll-margin, scroll-snap-stop TODO: This CL adds a new test specifically for scroll-snap-stop property changing. We need additional test to check invalidation logic for other properties. Test: external/wpt/css/css-scroll-snap/scroll-snap-stop-change.html => ensuring changing scroll-snap-stop takes effect Bug: 957995 Change-Id: I494bb259bb213dec44b19449d9b79b1446a67be2 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1597536 Commit-Queue: Majid Valipour <majidvp@chromium.org> Reviewed-by: David Bokan <bokan@chromium.org> Cr-Commit-Position: refs/heads/master@{#658583} -- wpt-commits: fc7250d42bd45fcec07082646f20fb1d1f2232da wpt-pr: 16717 --HG-- rename : testing/web-platform/tests/css/css-scroll-snap/scroll-snap-stop-always.html => testing/web-platform/tests/css/css-scroll-snap/scroll-snap-stop.html
96 lines
2.4 KiB
HTML
96 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#scroll-snap-stop" />
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<style>
|
|
div {
|
|
position: absolute;
|
|
}
|
|
#scroller {
|
|
width: 400px;
|
|
height: 400px;
|
|
overflow: scroll;
|
|
scroll-snap-type: both mandatory;
|
|
}
|
|
#space {
|
|
left: 0px;
|
|
top: 0px;
|
|
width: 2100px;
|
|
height: 2100px;
|
|
}
|
|
.target {
|
|
width: 50px;
|
|
height: 50px;
|
|
scroll-snap-align: start;
|
|
}
|
|
.origin {
|
|
left: 0px;
|
|
top: 0px;
|
|
}
|
|
.always-stop {
|
|
left: 100px;
|
|
top: 0px;
|
|
scroll-snap-stop: always;
|
|
}
|
|
.closer {
|
|
left: 200px;
|
|
top: 0px;
|
|
}
|
|
</style>
|
|
|
|
<div id="scroller">
|
|
<div id="space"></div>
|
|
<div class="target origin"></div>
|
|
<div class="target always-stop"></div>
|
|
<div class="target closer"></div>
|
|
</div>
|
|
|
|
<script>
|
|
var scroller = document.getElementById("scroller");
|
|
test(() => {
|
|
scroller.scrollTo(0, 0);
|
|
assert_equals(scroller.scrollLeft, 0);
|
|
assert_equals(scroller.scrollTop, 0);
|
|
|
|
scroller.scrollBy(300, 0);
|
|
assert_equals(scroller.scrollLeft, 100);
|
|
assert_equals(scroller.scrollTop, 0);
|
|
}, "A scroll with intended direction and end position should not pass a snap " +
|
|
"area with scroll-snap-stop: always.")
|
|
|
|
test(() => {
|
|
scroller.scrollTo(0, 0);
|
|
assert_equals(scroller.scrollLeft, 0);
|
|
assert_equals(scroller.scrollTop, 0);
|
|
|
|
scroller.scrollTo(300, 0);
|
|
assert_equals(scroller.scrollLeft, 200);
|
|
assert_equals(scroller.scrollTop, 0);
|
|
}, "A scroll with intended end position should always choose the closest snap " +
|
|
"position regardless of the scroll-snap-stop value.")
|
|
|
|
// Tests for programmatic scrolls beyond the scroller bounds.
|
|
|
|
test(() => {
|
|
scroller.scrollTo(0, 0);
|
|
assert_equals(scroller.scrollLeft, 0);
|
|
assert_equals(scroller.scrollTop, 0);
|
|
|
|
scroller.scrollBy(100000, 0);
|
|
assert_equals(scroller.scrollLeft, 100);
|
|
assert_equals(scroller.scrollTop, 0);
|
|
}, "A scroll outside bounds in the snapping axis with intended direction and " +
|
|
"end position should not pass a snap area with scroll-snap-stop: always.")
|
|
|
|
test(() => {
|
|
scroller.scrollTo(0, 0);
|
|
assert_equals(scroller.scrollLeft, 0);
|
|
assert_equals(scroller.scrollTop, 0);
|
|
|
|
scroller.scrollBy(300, -10);
|
|
assert_equals(scroller.scrollLeft, 100);
|
|
assert_equals(scroller.scrollTop, 0);
|
|
}, "A scroll outside bounds in the non-snapping axis with intended direction " +
|
|
"and end position should not pass a snap area with scroll-snap-stop: always.")
|
|
|
|
</script>
|