Bug 1829016 - The size of content-visibility auto does not refresh wh…

…en its content changes, r=emilio Differential Revision: https://phabricator.services.mozilla.com/D183414
dothq · Jul 25, 2023 · 2183329 · 2183329
1 parent 9311915
commit 2183329
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 16 deletions.
diff --git a/layout/generic/nsIFrame.cpp b/layout/generic/nsIFrame.cpp
@@ -695,18 +695,6 @@ void nsIFrame::Init(nsIContent* aContent, nsContainerFrame* aParent,
     AddStateBits(NS_FRAME_MAY_BE_TRANSFORMED);
   }
 
-  if (disp->IsContainLayout() && GetContainSizeAxes().IsBoth()) {
-    // In general, frames that have contain:layout+size can be reflow roots.
-    // (One exception: table-wrapper frames don't work well as reflow roots,
-    // because their inner-table ReflowInput init path tries to reuse & deref
-    // the wrapper's containing block's reflow input, which may be null if we
-    // initiate reflow from the table-wrapper itself.)
-    //
-    // Changes to `contain` force frame reconstructions, so this bit can be set
-    // for the whole lifetime of this frame.
-    AddStateBits(NS_FRAME_REFLOW_ROOT);
-  }
-
   if (nsLayoutUtils::FontSizeInflationEnabled(PresContext()) ||
       !GetParent()
 #ifdef DEBUG
@@ -2429,10 +2417,6 @@ static inline bool IsIntrinsicKeyword(const SizeOrMaxSize& aSize) {
 }
 
 bool nsIFrame::CanBeDynamicReflowRoot() const {
-  if (!StaticPrefs::layout_dynamic_reflow_roots_enabled()) {
-    return false;
-  }
-
   auto& display = *StyleDisplay();
   if (IsFrameOfType(nsIFrame::eLineParticipant) ||
       nsStyleDisplay::IsRubyDisplayType(display.mDisplay) ||
@@ -2445,6 +2429,29 @@ bool nsIFrame::CanBeDynamicReflowRoot() const {
     return false;
   }
 
+  // In general, frames that have contain:layout+size can be reflow roots.
+  // (One exception: table-wrapper frames don't work well as reflow roots,
+  // because their inner-table ReflowInput init path tries to reuse & deref
+  // the wrapper's containing block's reflow input, which may be null if we
+  // initiate reflow from the table-wrapper itself.)
+  //
+  // Changes to `contain` force frame reconstructions, so we used to use
+  // NS_FRAME_REFLOW_ROOT, this bit could be set for the whole lifetime of
+  // this frame. But after the support of `content-visibility: auto` which
+  // is with contain layout + size when it's not relevant to user, and only
+  // with contain layout when it is relevant. The frame does not reconstruct
+  // when the relevancy changes. So we use NS_FRAME_DYNAMIC_REFLOW_ROOT instead.
+  //
+  // We place it above the pref check on purpose, to make sure it works for
+  // containment even with the pref disabled.
+  if (display.IsContainLayout() && GetContainSizeAxes().IsBoth()) {
+    return true;
+  }
+
+  if (!StaticPrefs::layout_dynamic_reflow_roots_enabled()) {
+    return false;
+  }
+
   // We can't serve as a dynamic reflow root if our used 'width' and 'height'
   // might be influenced by content.
   //

diff --git a/...ing/web-platform/tests/css/css-contain/content-visibility/content-visibility-085-ref.html b/...ing/web-platform/tests/css/css-contain/content-visibility/content-visibility-085-ref.html
@@ -0,0 +1,8 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>CSS Content Visibility: auto with content changes</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+
+<p>Test passes if you see the word “PASS” below.
+<div>PASS</div>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-085.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-085.html
@@ -0,0 +1,33 @@
+<!doctype HTML>
+<meta charset="utf8">
+<title>CSS Content Visibility: auto with content changes</title>
+<link rel="author" title="Cathie Chen" href="mailto:[email protected]">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="content-visibility-079-ref.html">
+<meta name="assert" content="content-visibility auto element should be resized when content changes">
+
+<style>
+.auto {
+  content-visibility: auto;
+  width: fit-content;
+}
+.hidden { height: 0; }
+</style>
+
+<p>Test passes if you see the word “PASS” below.
+<div class="auto">
+  <div id ="target" class="hidden">PASS</div>
+</div>
+
+<script>
+function changeContent() {
+  requestAnimationFrame(() => {
+    target.classList.toggle("hidden");
+  });
+}
+function runTest() {
+  requestAnimationFrame(changeContent);
+}
+
+window.onload = () => { requestAnimationFrame(runTest); };
+</script>