Fix for pixel-moving CSS filters with clipping

Fix for pixel-moving CSS filters with clipping https://bugs.webkit.org/show_bug.cgi?id=247961 Reviewed by Simon Fraser. Merge - https://src.chromium.org/viewvc/blink?view=revision&revision=180361 When using a "pixel-moving" filter (ie., drop-shadow or blur), we disable the normal clip operation, since we want to want to render the full results of the element pre-clip for filtering. Clipping is then applied just before drawing the filtered result. However, we shouldn't disable *all* clipping recursively, since we want children which clip themselves to still continue to be clipped. The fix is to pass the original (unmodified) paintingInfo to paintChildren(). NOTE - The test case has been slightly modified to apply blur to reflect the issue. * Source/WebCore/rendering/RenderLayer.cpp: (RenderLayer::paintLayerContents): Update to take "original" paintingInfo * LayoutTests/css3/filters/effect-drop-shadow-clip-abpos.html: Added Test Case * LayoutTests/css3/filters/effect-drop-shadow-clip-abpos-expected.html: Added Test Case Expectations Canonical link: https://commits.webkit.org/256825@main
WebKit · Nov 18, 2022 · 3894c75f5f9ffe16ec91de57edc2d93b2e2051c2 · 3894c75
1 parent f7c3064
commit 3894c75f5f9ffe16ec91de57edc2d93b2e2051c2
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 2 deletions.
diff --git a/LayoutTests/css3/filters/effect-drop-shadow-clip-abspos-expected.html b/LayoutTests/css3/filters/effect-drop-shadow-clip-abspos-expected.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<style>
+.container {
+    filter: drop-shadow(5px 5px 5px black);
+}
+.circle-mask {
+    border-radius: 80px;
+    overflow: hidden;
+    width: 100px;
+    height: 100px;
+    filter: blur(20px);
+}
+.green-box {
+    width: 100px;
+    height: 100px;
+    background-color: green;
+}
+</style>
+<div class="container">
+    <div class="circle-mask">
+    <div class="green-box"></div>
+</div>
+</div>
diff --git a/LayoutTests/css3/filters/effect-drop-shadow-clip-abspos.html b/LayoutTests/css3/filters/effect-drop-shadow-clip-abspos.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<style>
+.container {
+    filter: drop-shadow(5px 5px 5px black);
+}
+.circle-mask {
+    border-radius: 80px;
+    overflow: hidden;
+    width: 100px;
+    height: 100px;
+    position: absolute;
+    filter: blur(20px);
+}
+.green-box {
+    width: 100px;
+    height: 100px;
+    background-color: green;
+}
+</style>
+<div class="container">
+    <div class="circle-mask">
+    <div class="green-box"></div>
+</div>
+</div>
diff --git a/Source/WebCore/rendering/RenderLayer.cpp b/Source/WebCore/rendering/RenderLayer.cpp
@@ -3269,7 +3269,7 @@ void RenderLayer::paintLayerContents(GraphicsContext& context, const LayerPainti
 
         // Now walk the sorted list of children with negative z-indices.
         if ((isPaintingScrollingContent && isPaintingOverflowContents) || (!isPaintingScrollingContent && isPaintingCompositedBackground))
-            paintList(negativeZOrderLayers(), currentContext, localPaintingInfo, localPaintFlags);
+            paintList(negativeZOrderLayers(), currentContext, paintingInfo, localPaintFlags);
 
         if (isPaintingCompositedForeground) {
             if (shouldPaintContent) {
@@ -3286,7 +3286,7 @@ void RenderLayer::paintLayerContents(GraphicsContext& context, const LayerPainti
 
         if (isPaintingCompositedForeground) {
             // Paint any child layers that have overflow.
-            paintList(normalFlowLayers(), currentContext, localPaintingInfo, localPaintFlags);
+            paintList(normalFlowLayers(), currentContext, paintingInfo, localPaintFlags);
 
             // Now walk the sorted list of children with positive z-indices.
             paintList(positiveZOrderLayers(), currentContext, localPaintingInfo, localPaintFlags);