CV/CIS: content-visibility: auto forces contain-intrinsic-size: auto

This patch implements a resolution on w3c/csswg-drafts#8407 (comment) With a follow-up resolution that this should happen at computed value time (same issue). I2P&S is here: https://groups.google.com/a/chromium.org/g/blink-dev/c/aYpmS8hP2UQ/m/CO4wGRiYCQAJ Note that the current implementation sets this behind an experimental flag, pending I2S approval. R=andruud@chromium.org Bug: 1418453 Change-Id: I06ad14460c1e620b3f35937d09a3317c563905e0
web-platform-tests · Jul 14, 2023 · 9996915 · 9996915
1 parent e0fb8cb
commit 9996915
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 27 deletions.
diff --git a/css/css-contain/content-visibility/content-visibility-075-ref.html b/css/css-contain/content-visibility/content-visibility-075-ref.html
@@ -9,10 +9,10 @@
 
 <style>
 .small_child {
-  height: 1000px;
+  height: 10000px;
 }
 .large_child {
-  height: 20000px;
+  height: 40000px;
   position: relative;
 }
 #target {
@@ -21,11 +21,11 @@
 }
 </style>
 
-<div class=auto><div class=small_child></div></div>
-<div class=auto><div class=small_child></div></div>
-<div class=auto><div class=large_child><div id=target>PASS</div></div></div>
-<div class=auto><div class=large_child></div></div>
-<div class=auto><div class=small_child></div></div>
+<div id=e1 class=auto><div class=large_child></div></div>
+<div id=e2 class=auto><div class=large_child></div></div>
+<div id=e3 class=auto><div class=large_child><div id=target>PASS</div></div></div>
+<div id=e4 class=auto><div class=large_child></div></div>
+<div id=e5 class=auto><div class=small_child></div></div>
 
 <script>
 function runReference() {

diff --git a/css/css-contain/content-visibility/content-visibility-075.html b/css/css-contain/content-visibility/content-visibility-075.html
@@ -12,23 +12,26 @@
 <style>
 .auto {
   content-visibility: auto;
-  contain-intrinsic-size: 1px 1000px;
+  contain-intrinsic-size: 1px 10000px;
 }
 .child {
-  height: 20000px;
+  height: 40000px;
   position: relative;
 }
 #target {
   position: absolute;
   bottom: 0;
 }
+.before_target {
+  height: 40000px;
+}
 </style>
 
-<div class=auto><div class=child></div></div>
-<div class=auto><div class=child></div></div>
-<div class=auto><div class=child><div id=target>PASS</div></div></div>
-<div class=auto><div class=child></div></div>
-<div class=auto><div class=child></div></div>
+<div id=e1 class="auto before_target"></div>
+<div id=e2 class="auto before_target"></div>
+<div id=e3 class=auto><div class=child><div id=target>PASS</div></div></div>
+<div id=e4 class=auto><div class=child></div></div>
+<div id=e5 class=auto><div class=child></div></div>
 
 <script>
 function runTest() {

diff --git a/css/css-contain/content-visibility/content-visibility-076.html b/css/css-contain/content-visibility/content-visibility-076.html
@@ -12,20 +12,23 @@
 <style>
 .auto {
   content-visibility: auto;
-  contain-intrinsic-size: 1px 1000px;
+  contain-intrinsic-size: 1px 10000px;
 }
 .child {
-  height: 20000px;
+  height: 40000px;
   position: relative;
 }
 #target {
   position: absolute;
   bottom: 0;
 }
+.before_target {
+  height: 40000px;
+}
 </style>
 
-<div class=auto><div class=child></div></div>
-<div class=auto><div class=child></div></div>
+<div class="auto before_target"></div>
+<div class="auto before_target"></div>
 <div class=auto><div class=child><div id=target>PASS</div></div></div>
 <div class=auto><div class=child></div></div>
 <div class=auto><div class=child></div></div>

diff --git a/css/css-toggle/toggle-visibility.tentative.html b/css/css-toggle/toggle-visibility.tentative.html
@@ -214,23 +214,26 @@
   assert_equals(vis.clientHeight, kVisibleHeight, "with toggle active and onscreen");
   toggle.value = 0;
   await wait_for_content_visibility_auto();
-  assert_equals(vis.clientHeight, kHiddenHeight, "with toggle inactive and onscreen");
+  // Note that because content-visibility: auto implies contain-intrinsic-size: auto,
+  // the rest of the expected heights are kVisibleHeight since that will be the last
+  // remembered size.
+  assert_equals(vis.clientHeight, kVisibleHeight, "with toggle inactive and onscreen");
   toggle.value = 1;
   await wait_for_content_visibility_auto();
   assert_equals(vis.clientHeight, kVisibleHeight, "with toggle active and onscreen (2)");
   toggle.value = 0;
   t.before(spacer);
   await wait_for_content_visibility_auto();
-  assert_equals(vis.clientHeight, kHiddenHeight, "with toggle inactive and offscreen (2)");
+  assert_equals(vis.clientHeight, kVisibleHeight, "with toggle inactive and offscreen (2)");
   spacer.remove();
   await wait_for_content_visibility_auto();
-  assert_equals(vis.clientHeight, kHiddenHeight, "with toggle inactive and onscreen (2)");
+  assert_equals(vis.clientHeight, kVisibleHeight, "with toggle inactive and onscreen (2)");
   toggle.value = 1;
   await wait_for_content_visibility_auto();
   assert_equals(vis.clientHeight, kVisibleHeight, "with toggle active and onscreen (3)");
   t.before(spacer);
   await wait_for_content_visibility_auto();
-  assert_equals(vis.clientHeight, kHiddenHeight, "with toggle active and offscreen (2)");
+  assert_equals(vis.clientHeight, kVisibleHeight, "with toggle active and offscreen (2)");
 }, "interaction of toggle-visibility and content-visibility: auto");
 
 promise_test(async function() {

diff --git a/layout-instability/content-visibility-auto-offscreen.html b/layout-instability/content-visibility-auto-offscreen.html
@@ -22,14 +22,14 @@
   target.style.top = '100100px';
 
   await watcher.promise;
-  const expectedScore = computeExpectedScore(100 * 100, 100);
-  assert_equals(watcher.score, expectedScore);
+  const expectedScore = computeExpectedScore(100 * 100, 1);
+  assert_approx_equals(watcher.score, expectedScore, 1e-8, "before scroll to top");
 
-  // No new layout shift should be reported when target is scrolled out of screeen.
+  // No new layout shift should be reported when target is scrolled out of screen.
   window.scrollTo(0, 0);
   await waitForAnimationFrames(2);
 
-  assert_equals(watcher.score, expectedScore);
+  assert_approx_equals(watcher.score, expectedScore, 1e-8, "after scroll to top");
 }, 'off-screen content-visibility:auto');
 </script>
 <style>
@@ -44,4 +44,4 @@
 </div>
 <div id="target" class=auto style="position: relative; top: 100000px">
   <div style="width: 100px; height: 100px; background: blue"></div>
-</div>
+</div>