REGRESSION (296827@main): Opacity/filter render incorrectly.

mattwoodrow · mattwoodrow · commit f06618676171 · 2025-09-25T21:06:20.000-07:00
https://bugs.webkit.org/show_bug.cgi?id=299270 <rdar://problem/161130683> Reviewed by Said Abou-Hallawa. The canPaintTransparencyWithSetOpacity optimization only works if we have a single bitmap paint that the opacity can be passed to. When combined with a filter effect that pushes a transparency layer, it no longer has any effect. Test: css3/filters/filter-and-opacity-on-bitmap.html * LayoutTests/css3/filters/filter-and-opacity-on-bitmap-expected.html: Added. * LayoutTests/css3/filters/filter-and-opacity-on-bitmap.html: Added. * LayoutTests/css3/filters/filter-and-opacity-on-bitmap-2-expected.html: Added. * LayoutTests/css3/filters/filter-and-opacity-on-bitmap-2.html: Added. * Source/WebCore/rendering/RenderLayerInlines.h: (WebCore::RenderLayer::canPaintTransparencyWithSetOpacity const): Canonical link: https://commits.webkit.org/300549@main
diff --git a/LayoutTests/css3/filters/filter-and-opacity-on-bitmap-2-expected.html b/LayoutTests/css3/filters/filter-and-opacity-on-bitmap-2-expected.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <style>
+    .box { 
+      display: block;
+      margin: 10px;
+      width: 200px;
+      height: 200px; 
+    } 
+    .control { 
+      filter: url(#erode); 
+    }
+    .container {
+      opacity: 0.5;
+    }
+</style>
+</head>
+<body>
+    <svg width="0" height="0">
+        <filter id="erode" filterUnits="userSpaceOnUse">
+            <feMorphology operator="erode" radius="2" />
+        </filter>
+    </svg>
+    <div class="container">
+        <img class="control box" src="resources/reference.png">
+    </div>
+</body>
+</html>
diff --git a/LayoutTests/css3/filters/filter-and-opacity-on-bitmap-2.html b/LayoutTests/css3/filters/filter-and-opacity-on-bitmap-2.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <style>
+    .box { 
+      display: block;
+      margin: 10px;
+      width: 200px;
+      height: 200px; 
+    } 
+    .test { 
+      filter: url(#erode); 
+      opacity: 0.5;
+    }
+  </style>
+</head>
+<body>
+    <svg width="0" height="0">
+        <filter id="erode" filterUnits="userSpaceOnUse">
+            <feMorphology operator="erode" radius="2" />
+        </filter>
+    </svg>
+    <img class="test box" src="resources/reference.png">
+</body>
+</html>
diff --git a/LayoutTests/css3/filters/filter-and-opacity-on-bitmap-expected.html b/LayoutTests/css3/filters/filter-and-opacity-on-bitmap-expected.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <style>
+    .box { 
+      display: block;
+      margin: 10px;
+      width: 200px;
+      height: 200px; 
+    } 
+    .control { 
+      filter: saturate(0); 
+    }
+    .container {
+      opacity: 0.5;
+    }
+</style>
+</head>
+<body>
+    <div class="container">
+        <img class="control box" src="resources/reference.png">
+    </div>
+</body>
+</html>
diff --git a/LayoutTests/css3/filters/filter-and-opacity-on-bitmap.html b/LayoutTests/css3/filters/filter-and-opacity-on-bitmap.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <style>
+    .box { 
+      display: block;
+      margin: 10px;
+      width: 200px;
+      height: 200px; 
+    } 
+    .test { 
+      filter: saturate(0); 
+      opacity: 0.5;
+    }
+  </style>
+</head>
+<body>
+    <img class="test box" src="resources/reference.png">
+</body>
+</html>
diff --git a/Source/WebCore/rendering/RenderLayerInlines.h b/Source/WebCore/rendering/RenderLayerInlines.h
@@ -29,7 +29,7 @@
 
 namespace WebCore {
 
-inline bool RenderLayer::canPaintTransparencyWithSetOpacity() const { return isBitmapOnly() && !hasNonOpacityTransparency(); }
+inline bool RenderLayer::canPaintTransparencyWithSetOpacity() const { return isBitmapOnly() && !hasNonOpacityTransparency() && !hasFilter(); }
 inline bool RenderLayer::hasBackdropFilter() const { return renderer().hasBackdropFilter(); }
 inline bool RenderLayer::hasFilter() const { return renderer().hasFilter(); }
 inline bool RenderLayer::hasPerspective() const { return renderer().style().hasPerspective(); }
