Bug 1679895 [wpt PR 26680] - [CLS] Don't let content-visibility:auto affect CLS, a=testonly

marco-c · marco-c · commit be7a9aaf6b41 · 2020-12-14T12:01:09.000Z
Automatic update from web-platform-tests [CLS] Don't let content-visibility:auto affect CLS A previous CL (*) already did this up to the first observation. Now we enforce it for all times content skips and unskips. The rationale for this change is that content-visibility is a UA-controlled best practice, and it is mostly up to the UA to avoid layout shifts when using this feature. Note that there will still be layout shifts reported for elements adjacent to (but not descendants of) content-visibility:auto elements if the content-visibility:auto element resizes and causes a shift. The change in this CL applies only to the content-visibility:auto element itself. Bug: 1151526 Change-Id: Ie3aed71b2f2500ea799c7bf77dbdd28e60a9175a Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2566270 Reviewed-by: vmpstr <vmpstrchromium.org> Commit-Queue: Chris Harrelson <chrishtrchromium.org> Cr-Commit-Position: refs/heads/master{#832142} -- wpt-commits: 1d50fc221b0cdcc57df77b5011d05763c9c213f5 wpt-pr: 26680 UltraBlame original commit: 3f7a732467199f4ad28f640b267540ffdc5f206a
diff --git a/testing/web-platform/tests/layout-instability/content-visibility-auto-offscreen.html b/testing/web-platform/tests/layout-instability/content-visibility-auto-offscreen.html
@@ -2,13 +2,16 @@
 <title>Layout Instability: off-screen content-visibility:auto content</title>
 <link rel="help" href="https://wicg.github.io/layout-instability/" />
 <style>
-  #target {
+  #auto {
     content-visibility: auto;
     contain-intrinsic-size: 1px;
     width: 100px;
   }
 </style>
-<div id=target style="position: relative; top: 100000px">
+<div class=auto>
+  <div style="width: 100px; height: 100px"></div>
+</div>
+<div class=auto style="position: relative; top: 100000px">
   <div style="width: 100px; height: 100px"></div>
 </div>
 <script src="/resources/testharness.js"></script>
@@ -21,7 +24,12 @@
   // Wait for the initial render to complete.
   await waitForAnimationFrames(2);
 
-  window.scrollTo(0, 100000);
+  window.scrollTo(0, 100000 + 100);
+  await waitForAnimationFrames(2);
+
+  assert_equals(watcher.score, 0);
+
+  window.scrollTo(0, 0);
   await waitForAnimationFrames(2);
 
   assert_equals(watcher.score, 0);
diff --git a/testing/web-platform/tests/layout-instability/content-visibility-auto-resize.html b/testing/web-platform/tests/layout-instability/content-visibility-auto-resize.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Layout Instability: resizing content-visibility:auto content</title>
+<link rel="help" href="https://wicg.github.io/layout-instability/" />
+<style>
+      .auto {
+        content-visibility: auto;
+        contain-intrinsic-size: 10px 3000px;
+        width: 100px;
+      }
+      .contained {
+        height: 100px;
+      }
+    </style>
+    <div class=a><div class=contained></div></div>
+    <div class=a ><div class=contained></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);
+
+  assert_equals(watcher.score, 0);
+}, 'off-screen content-visibility:auto');
+
+</script>
