Skip to content

Commit 92d9bd4

Browse files
chrishtrchromium-wpt-export-bot
chrishtr
authored and
chromium-wpt-export-bot
committed
[CLS] Don't count layout shifts due to content-visibility:auto unskipping
content-visibility:auto elements have different sizing behavior when near the viewport vs not. This sizing behavior is an intentional part of the platform, and should not be considered a layout shift for the the first time the elements' subtrees become unskipped (*). There are two cases of "first time": * The very first paint when a content-visiblity:auto element is in the DOM, and in which the element is found in that frame to be near the viewport. * The first paint *after* a content-visiblity:auto element has been found to be near the viewport, but was was found for at least one frame previously not to be near it. These two cases are handled in somewhat different ways in Blink - the former is a synchronous relayout, whereas the second is async. In both cases, CLS should not be impacted. In the future, we could consider in the future whether layout shifts for subsequent unskips should also not count for CLS. Bug: 1151526 (*) https://drafts.csswg.org/css-contain-2/#skips-its-contents Change-Id: I9421452430dd572ed87bb20b0bd20e9a7e3501a8 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2556211 Commit-Queue: Chris Harrelson <[email protected]> Reviewed-by: Annie Sullivan <[email protected]> Reviewed-by: Xianzhu Wang <[email protected]> Cr-Commit-Position: refs/heads/master@{#830774}
1 parent c52e4b0 commit 92d9bd4

File tree

3 files changed

+82
-0
lines changed

3 files changed

+82
-0
lines changed

‎layout-instability/content-visibility-auto-offscreen.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<title>Layout Instability: off-screen content-visibility:auto content</title>
3+
<link rel="help" href="https://wicg.github.io/layout-instability/" />
4+
<style>
5+
#target {
6+
content-visibility: auto;
7+
contain-intrinsic-size: 1px;
8+
width: 100px;
9+
}
10+
</style>
11+
<div id=target style="position: relative; top: 100000px">
12+
<div style="width: 100px; height: 100px"></div>
13+
</div>
14+
<script src="/resources/testharness.js"></script>
15+
<script src="/resources/testharnessreport.js"></script>
16+
<script src="resources/util.js"></script>
17+
<script>
18+
promise_test(async () => {
19+
const watcher = new ScoreWatcher;
20+
21+
// Wait for the initial render to complete.
22+
await waitForAnimationFrames(2);
23+
24+
window.scrollTo(0, 100000);
25+
await waitForAnimationFrames(2);
26+
27+
assert_equals(watcher.score, 0);
28+
}, 'off-screen content-visibility:auto');
29+
30+
</script>

‎layout-instability/content-visibility-auto-onscreen.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<title>Layout Instability: on-screen content-visibility:auto content</title>
3+
<link rel="help" href="https://wicg.github.io/layout-instability/" />
4+
<style>
5+
#target {
6+
content-visibility: auto;
7+
contain-intrinsic-size: 1px;
8+
width: 100px;
9+
}
10+
</style>
11+
<div id=target>
12+
<div style="width: 100px; height: 100px"></div>
13+
</div>
14+
<script src="/resources/testharness.js"></script>
15+
<script src="/resources/testharnessreport.js"></script>
16+
<script src="resources/util.js"></script>
17+
<script>
18+
promise_test(async () => {
19+
const watcher = new ScoreWatcher;
20+
21+
// Wait for the initial render to complete.
22+
await waitForAnimationFrames(2);
23+
assert_equals(watcher.score, 0);
24+
}, 'on-screen content-visibility:auto');
25+
26+
</script>

‎layout-instability/content-visibility-hidden.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<title>Layout Instability: content-visibility:hidden content</title>
3+
<link rel="help" href="https://wicg.github.io/layout-instability/" />
4+
<style>
5+
#target {
6+
content-visibility: hidden;
7+
contain-intrinsic-size: 1px;
8+
width: 100px;
9+
}
10+
</style>
11+
<div id=target>
12+
<div style="width: 100px; height: 100px"></div>
13+
</div>
14+
<script src="/resources/testharness.js"></script>
15+
<script src="/resources/testharnessreport.js"></script>
16+
<script src="resources/util.js"></script>
17+
<script>
18+
promise_test(async () => {
19+
const watcher = new ScoreWatcher;
20+
21+
// Wait for the initial render to complete.
22+
await waitForAnimationFrames(2);
23+
assert_equals(watcher.score, 0);
24+
}, 'on-screen content-visibility:auto');
25+
26+
</script>

0 commit comments

Comments
 (0)