mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-11 13:48:23 +02:00
7d97d10fbb
Automatic update from web-platform-tests [css-scroll-snap] Allow style changes to invalidate snap data All snap container data was only updated and re-snapped after layout changes. However, this invalidation needs to sometimes happen after style changes too (such as changing 'scroll-snap-align'). Now, PaintLayerScrollableArea has flags for indicating that it needs to update its snap container data, which are set during certain style changes and layout changes. Then all snap container data that has the flag set will be updated, and attempt to re-snap if any data changes. This also prevents us from updating snap containers that haven't changed. The follow-up for this is to invalidate snap containers when changing the transform property of their content. Bug: 984794,1028316 Change-Id: I432500df98fdbe63e3b7eed3ba43e05465f9d873 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1962567 Commit-Queue: Yi Gu <yigu@chromium.org> Reviewed-by: Majid Valipour <majidvp@chromium.org> Reviewed-by: Yi Gu <yigu@chromium.org> Reviewed-by: David Bokan <bokan@chromium.org> Cr-Commit-Position: refs/heads/master@{#729345} -- wpt-commits: 09a5ffbe707cfae350728188527f6fe8cabc884d wpt-pr: 20751
121 lines
3.3 KiB
HTML
121 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<title>
|
|
Updating the snap alignment of a snap container's content should make the snap
|
|
container resnap accordingly.
|
|
</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#re-snap" />
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<style>
|
|
div {
|
|
position: absolute;
|
|
margin: 0;
|
|
}
|
|
|
|
#scroller {
|
|
height: 200px;
|
|
width: 200px;
|
|
overflow: hidden;
|
|
scroll-snap-type: both mandatory;
|
|
}
|
|
|
|
#initial-target {
|
|
width: 300px;
|
|
height: 300px;
|
|
top: 100px;
|
|
left: 100px;
|
|
background-color: green;
|
|
scroll-snap-align: start;
|
|
}
|
|
|
|
#other-target {
|
|
width: 300px;
|
|
height: 300px;
|
|
top: 300px;
|
|
left: 300px;
|
|
background-color: red;
|
|
scroll-snap-align: start;
|
|
}
|
|
|
|
.area {
|
|
width: 2000px;
|
|
height: 2000px;
|
|
}
|
|
|
|
.snap-area {
|
|
scroll-snap-align: start !important;
|
|
}
|
|
</style>
|
|
|
|
<div id="scroller">
|
|
<div class="area"></div>
|
|
<div id="initial-target"></div>
|
|
<div id="other-target"></div>
|
|
</div>
|
|
|
|
<script>
|
|
const initial_target = document.getElementById("initial-target");
|
|
const other_target = document.getElementById("other-target");
|
|
const scroller = document.getElementById("scroller");
|
|
|
|
function cleanup() {
|
|
initial_target.style.setProperty("scroll-snap-align", "start");
|
|
other_target.style.setProperty("scroll-snap-align", "start");
|
|
initial_target.removeAttribute("class");
|
|
}
|
|
|
|
test(t => {
|
|
t.add_cleanup(cleanup);
|
|
scroller.scrollTo(0,0);
|
|
assert_equals(scroller.scrollTop, 100);
|
|
assert_equals(scroller.scrollLeft, 100);
|
|
|
|
initial_target.style.setProperty("scroll-snap-align", "end");
|
|
// target.top + target.height - scroller.height
|
|
assert_equals(scroller.scrollTop, 200);
|
|
assert_equals(scroller.scrollLeft, 200);
|
|
}, "Changing the current target's snap alignment should make the scroller"
|
|
+ " resnap to it even if another snap position is closer to the current offset");
|
|
|
|
test(t => {
|
|
t.add_cleanup(cleanup);
|
|
scroller.scrollTo(0,0);
|
|
assert_equals(scroller.scrollTop, 100);
|
|
assert_equals(scroller.scrollLeft, 100);
|
|
|
|
initial_target.style.setProperty("scroll-snap-align", "none");
|
|
assert_equals(scroller.scrollTop, 300);
|
|
assert_equals(scroller.scrollLeft, 300);
|
|
}, "Removing the current target's snap alignment should make the scroller"
|
|
+ " resnap to a new snap area.");
|
|
|
|
test(t => {
|
|
t.add_cleanup(cleanup);
|
|
initial_target.style.setProperty("scroll-snap-align", "none");
|
|
other_target.style.setProperty("scroll-snap-align", "none");
|
|
|
|
scroller.scrollTo(0,0);
|
|
assert_equals(scroller.scrollTop, 0);
|
|
assert_equals(scroller.scrollLeft, 0);
|
|
|
|
initial_target.style.setProperty("scroll-snap-align", "start");
|
|
assert_equals(scroller.scrollTop, 100);
|
|
assert_equals(scroller.scrollLeft, 100);
|
|
}, "Changing an element snap alignment from none to start should make the"
|
|
+ "scroller resnap.");
|
|
|
|
test(t => {
|
|
t.add_cleanup(cleanup);
|
|
initial_target.style.setProperty("scroll-snap-align", "none");
|
|
other_target.style.setProperty("scroll-snap-align", "none");
|
|
|
|
scroller.scrollTo(0,0);
|
|
assert_equals(scroller.scrollTop, 0);
|
|
assert_equals(scroller.scrollLeft, 0);
|
|
|
|
initial_target.classList.add("snap-area");
|
|
assert_equals(scroller.scrollTop, 100);
|
|
assert_equals(scroller.scrollLeft, 100);
|
|
}, "Changing an element snap alignment from none to start by adding a class"
|
|
+ " should make the scroller resnap.");
|
|
</script>
|