Combining backface-visibility:hidden and backdrop-filter stops the ba…

…ckface from being hidden. https://bugs.webkit.org/show_bug.cgi?id=249952 <rdar://103940530> Reviewed by Simon Fraser. Structural layers created for backdrop-filter should still have the double sided property set. * LayoutTests/css3/filters/backdrop/backdrop-filter-with-backface-visibility-expected.html: Added. * LayoutTests/css3/filters/backdrop/backdrop-filter-with-backface-visibility.html: Added. * Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp: (WebCore::GraphicsLayerCA::updateBackfaceVisibility): Canonical link: https://commits.webkit.org/268427@main
WebKit · Sep 26, 2023 · 93bef58 · 93bef58
1 parent ad35360
commit 93bef58
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 1 deletion.
diff --git a/LayoutTests/css3/filters/backdrop/backdrop-filter-with-backface-visibility-expected.html b/LayoutTests/css3/filters/backdrop/backdrop-filter-with-backface-visibility-expected.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>This tests that an element with backface-visibility hidden does not show its backdrop filter.</title>
+<style>
+div {
+  width: 200px;
+  height: 200px;
+  position: absolute;
+}
+
+#behind {
+  background: green;
+}
+</style>
+</head>
+<body>
+<div id="behind"></div>
+</body>
+</html>
diff --git a/LayoutTests/css3/filters/backdrop/backdrop-filter-with-backface-visibility.html b/LayoutTests/css3/filters/backdrop/backdrop-filter-with-backface-visibility.html
@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>This tests that an element with backface-visibility hidden does not show its backdrop filter.</title>
+<style>
+div {
+  width: 200px;
+  height: 200px;
+  position: absolute;
+}
+
+#behind {
+  background: green;
+}
+
+#outer {
+  transform-style: preserve-3d;
+  transform: rotateX(180deg);
+}
+
+#inner {
+  transform: rotateX(0deg);
+  background: red;
+  backface-visibility: hidden;
+  -webkit-backdrop-filter: blur(1px);
+}
+</style>
+</head>
+<body>
+<div id="behind"></div>
+<div id="outer">
+  <div id="inner">
+  </div>
+</div>
+</body>
+</html>
diff --git a/Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp b/Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp
@@ -2435,7 +2435,8 @@ void GraphicsLayerCA::updateContentsOpaque(float pageScaleFactor)
 
 void GraphicsLayerCA::updateBackfaceVisibility()
 {
-    if (m_structuralLayer && structuralLayerPurpose() == StructuralLayerForReplicaFlattening) {
+    if (m_structuralLayer && (structuralLayerPurpose() == StructuralLayerForReplicaFlattening || structuralLayerPurpose() == StructuralLayerForBackdrop)) {
+
         m_structuralLayer->setDoubleSided(m_backfaceVisibility);
 
         if (m_layerClones) {