forked from mirrors/gecko-dev
454f392920
Automatic update from web-platform-tests
[CLS] Allow for shifts in root-relative coordinates for scroll anchoring
Currently, layout adjustments plus scroll anchoring may result in all
three of the following happening in the same rendering update:
* Layout changes that moves a tracked element relative to its
layout shift root (e.g. via content-visibility changing skip state, but
it could also be any layout change offscreen)
* Natural scroll via a user gesture that visually moves the element
visually on-screen
* Scroll anchoring to counter the layout change, but not the natural
scroll
We currently do not handle that case. We only handle the case of
a layout change that is directly counter-balanced by a scroll, or
a pure scroll.
This CL serves the above use case by plumbing the value of the scroll
anchor scroll to LayoutShiftTracker, and early-outing if the root-
relative position of the before and after rects are equal, once
scroll anchoring is taken into account.
Bug: 1215368
Change-Id: I8a5240603cebf3a78dfc4fa82b4839cf1af68800
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2946459
Reviewed-by: Xianzhu Wang <wangxianzhu@chromium.org>
Commit-Queue: Chris Harrelson <chrishtr@chromium.org>
Cr-Commit-Position: refs/heads/master@{#891250}
--
wpt-commits: 7f913d9d12a54858ffc04ac18b262d775e19184a
wpt-pr: 29292
65 lines
1.5 KiB
HTML
65 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<title>Layout Instability: shift offscreen with scroll anchoring and natural scroll</title>
|
|
<link rel="help" href="https://wicg.github.io/layout-instability/" />
|
|
<style>
|
|
#scroller {
|
|
overflow: scroll;
|
|
left: 20px;
|
|
top: 20px;
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
#spacer {
|
|
height: 3000px;
|
|
}
|
|
#ch {
|
|
position: relative;
|
|
background: yellow;
|
|
left: 10px;
|
|
top: 100px;
|
|
width: 150px;
|
|
height: 150px;
|
|
}
|
|
#offscreenElement {
|
|
width: 300px;
|
|
height: 300px;
|
|
background: lightblue;
|
|
}
|
|
#onscreenElement {
|
|
width: 300px;
|
|
height: 300px;
|
|
background: lightgreen;
|
|
}
|
|
</style>
|
|
<div id="scroller">
|
|
<div id="offscreenElement"></div>
|
|
<div id="spacer"></div>
|
|
<div id="onscreenElement"></div>
|
|
</div>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="resources/util.js"></script>
|
|
<script>
|
|
|
|
promise_test(async () => {
|
|
const watcher = new ScoreWatcher;
|
|
|
|
// Wait for the initial render to complete.
|
|
await waitForAnimationFrames(2);
|
|
|
|
// Scroll to show #onscreenElement.
|
|
scroller.scrollTop = 3250;
|
|
await waitForAnimationFrames(1);
|
|
|
|
// Resize #offscreernElement and scroll a bit.
|
|
// Visually, #onscreenElement will move by 20px.
|
|
offscreenElement.style.height = '250px';
|
|
scroller.scrollBy(0, 20);
|
|
|
|
await waitForAnimationFrames(3);
|
|
// There should be no reported layout shift, because to the user it looks
|
|
// like a natural scroll by 20px.
|
|
assert_equals(watcher.score, 0);
|
|
}, "Offscreen shift with scroll annchoring and natural scroll not counted.");
|
|
|
|
</script>
|