[content-visibility] REGRESSION(267547@main): Blank panels on bing.co…

…m (content-visibility: auto) https://bugs.webkit.org/show_bug.cgi?id=264989 Reviewed by Simon Fraser. When content-visibility status changes from hidden/out of view to visible/in viewport we should use dirtyVisibleContentStatus since setHasVisibleContent has no effect on the subtree of the content-visibility root if the layer already has this flag set, causing the subtree to remain hidden. * LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-096-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-096.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-097-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-097.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-098-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-098.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-099-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-099.html: Added. * Source/WebCore/rendering/RenderElement.cpp: (WebCore::RenderElement::styleWillChange): Canonical link: https://commits.webkit.org/273399@main
WebKit · Jan 24, 2024 · 4241ce2 · 4241ce2
1 parent 3d9f010
commit 4241ce2
Show file tree

Hide file tree

Showing 9 changed files with 360 additions and 4 deletions.
diff --git a/...eb-platform-tests/css/css-contain/content-visibility/content-visibility-096-expected.html b/...eb-platform-tests/css/css-contain/content-visibility/content-visibility-096-expected.html
@@ -0,0 +1,36 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>Content Visibility: auto, scroll away and back (Reference)</title>
+<link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.spacer {
+  height: 10000px;
+}
+#child {
+  width: 100px;
+  height: 100px;
+  background: green;
+  position: relative
+}
+#target {
+  width: 10px;
+  height: 10px;
+}
+
+</style>
+
+<div>
+  <div id=child></div>
+</div>
+<div class=spacer></div>
+<div id=target></div>
+
+<script>
+  requestAnimationFrame(takeScreenshot);
+</script>
+
+</html>
diff --git a/...ted/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-096.html b/...ted/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-096.html
@@ -0,0 +1,56 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>Content Visibility: auto, scroll away and back</title>
+<link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="content-visibility-096-ref.html">
+<meta name="assert" content="scolling away from c-v: auto container and back renders as expected">
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.spacer {
+  height: 10000px;
+}
+#child {
+  width: 100px;
+  height: 100px;
+  background: green;
+  position: relative
+}
+#target {
+  width: 10px;
+  height: 10px;
+}
+.auto { content-visibility: auto; }
+
+</style>
+
+<div class="auto">
+  <div id=child></div>
+</div>
+<div class=spacer></div>
+<div id=target></div>
+
+<script>
+
+function runTest() {
+  document.getElementById("target").scrollIntoView(true /* alignToTop */);
+  requestAnimationFrame(finishTest);
+}
+
+function finishTest() {
+  scrollTo(0, 0);
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = requestAnimationFrame(() => {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      runTest();
+    });
+  });
+});
+
+</script>
+</html>
diff --git a/...eb-platform-tests/css/css-contain/content-visibility/content-visibility-097-expected.html b/...eb-platform-tests/css/css-contain/content-visibility/content-visibility-097-expected.html
@@ -0,0 +1,36 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>Content Visibility: auto, scroll away and back (Reference)</title>
+<link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.spacer {
+  height: 10000px;
+}
+#child {
+  width: 100px;
+  height: 100px;
+  background: green;
+  position: relative
+}
+#target {
+  width: 10px;
+  height: 10px;
+}
+
+</style>
+
+<div>
+  <div id=child></div>
+</div>
+<div class=spacer></div>
+<div id=target></div>
+
+<script>
+  requestAnimationFrame(takeScreenshot);
+</script>
+
+</html>
diff --git a/...ted/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-097.html b/...ted/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-097.html
@@ -0,0 +1,60 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>Content Visibility: auto, scroll away and back while toggling visibility</title>
+<link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="content-visibility-097-ref.html">
+<meta name="assert" content="scolling away from c-v: auto container and back while toggling visibility renders as expected">
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.spacer {
+  height: 10000px;
+}
+#child {
+  width: 100px;
+  height: 100px;
+  background: green;
+  position: relative
+}
+#target {
+  width: 10px;
+  height: 10px;
+}
+</style>
+
+<div id="container" style="content-visibility: auto">
+  <div id=child></div>
+</div>
+<div class=spacer></div>
+<div id=target></div>
+
+<script>
+
+function step1() {
+  document.getElementById("target").scrollIntoView(true /* alignToTop */);
+  requestAnimationFrame(step2);
+}
+
+function step2() {
+  container.style.visibility = "hidden";
+  requestAnimationFrame(finishTest);
+}
+
+function finishTest() {
+  container.setAttribute("style", "content-visibility: visible; visibility: visible");
+  window.scrollTo(0, 0);
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = requestAnimationFrame(() => {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      step1();
+    });
+  });
+});
+
+</script>
+</html>
diff --git a/...eb-platform-tests/css/css-contain/content-visibility/content-visibility-098-expected.html b/...eb-platform-tests/css/css-contain/content-visibility/content-visibility-098-expected.html
@@ -0,0 +1,17 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>CSS Content Visibility: container (reference)</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+
+<style>
+#container {
+  width: 150px;
+  height: 150px;
+  background: lightblue;
+}
+</style>
+
+<div id=container></div>
+
diff --git a/...ted/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-098.html b/...ted/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-098.html
@@ -0,0 +1,52 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>Content Visibility: auto subtree becomes hidden in the viewport</title>
+<link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="container-ref.html">
+<meta name="assert" content="content-visibility:auto subtree becomes hidden (through both c-v and visibility properties) and so stops painting">
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+#container {
+  width: 150px;
+  height: 150px;
+  background: lightblue;
+}
+#child {
+  width: 50px;
+  height: 50px;
+  background: red;
+}
+#autocontainer { content-visibility: auto; }
+
+</style>
+
+<div id=container>
+  <div id="autocontainer">
+    Test fails if you see this text or a red box.
+    <div id=child></div>
+  </div>
+</div>
+
+<script>
+
+function runTest() {
+  document.getElementById("autocontainer").classList.remove("auto");
+  document.getElementById("autocontainer").classList.add("hidden");
+  document.getElementById("autocontainer").style.visibility = "hidden";
+
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = requestAnimationFrame(() => {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      runTest();
+    });
+  });
+});
+
+</script>
+</html>
diff --git a/...eb-platform-tests/css/css-contain/content-visibility/content-visibility-099-expected.html b/...eb-platform-tests/css/css-contain/content-visibility/content-visibility-099-expected.html
@@ -0,0 +1,37 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>Content Visibility: auto, make unskipped, then skipped while also toggling visibility (Reference)</title>
+<link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.spacer {
+  height: 10000px;
+}
+#child {
+  width: 100px;
+  height: 0px;
+  background: green;
+  position: relative
+}
+#target {
+  width: 10px;
+  height: 10px;
+}
+
+</style>
+
+<div>
+  <div id=child></div>
+</div>
+<div class=spacer></div>
+<div id=target></div>
+
+<script>
+  document.getElementById("target").scrollIntoView(true /* alignToTop */);
+  requestAnimationFrame(takeScreenshot);
+</script>
+
+</html>
diff --git a/...ted/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-099.html b/...ted/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-099.html
@@ -0,0 +1,59 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>Content Visibility: auto, make unskipped, then skipped while also toggling visibility</title>
+<link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="content-visibility-099-ref.html">
+<meta name="assert" content="making c-v: auto container unskipped and then skipped while toggling visibility renders as expected">
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.spacer {
+  height: 10000px;
+}
+#child {
+  width: 100px;
+  height: 100px;
+  background: green;
+  position: relative
+}
+#target {
+  width: 10px;
+  height: 10px;
+}
+</style>
+
+<div id="container" style="content-visibility: auto">
+  <div id=child></div>
+</div>
+<div class=spacer></div>
+<div id=target></div>
+
+<script>
+
+function step1() {
+  target.focus();
+  requestAnimationFrame(step2);
+}
+
+function step2() {
+  document.getElementById("target").scrollIntoView(true /* alignToTop */);
+  requestAnimationFrame(finishTest);
+}
+
+function finishTest() {
+  container.setAttribute("style", "content-visibility: hidden; visibility: hidden");
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = requestAnimationFrame(() => {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      step1();
+    });
+  });
+});
+
+</script>
+</html>
diff --git a/Source/WebCore/rendering/RenderElement.cpp b/Source/WebCore/rendering/RenderElement.cpp
@@ -850,14 +850,17 @@ void RenderElement::styleWillChange(StyleDifference diff, const RenderStyle& new
                 cache->childrenChanged(checkedParent().get(), this);
         }
 
-        // Keep layer hierarchy visibility bits up to date if visibility changes.
+        // Keep layer hierarchy visibility bits up to date if visibility or skipped content state changes.
         bool wasVisible = m_style.visibility() == Visibility::Visible && !m_style.hasSkippedContent();
         bool willBeVisible = newStyle.visibility() == Visibility::Visible && !newStyle.hasSkippedContent();
         if (wasVisible != willBeVisible) {
             if (CheckedPtr layer = enclosingLayer()) {
-                if (willBeVisible)
-                    layer->setHasVisibleContent();
-                else if (layer->hasVisibleContent() && (this == &layer->renderer() || layer->renderer().style().visibility() != Visibility::Visible))
+                if (willBeVisible) {
+                    if (m_style.hasSkippedContent() && isSkippedContentRoot())
+                        layer->dirtyVisibleContentStatus();
+                    else
+                        layer->setHasVisibleContent();
+                } else if (layer->hasVisibleContent() && (this == &layer->renderer() || layer->renderer().style().visibility() != Visibility::Visible))
                     layer->dirtyVisibleContentStatus();
             }
         }