Skip to content
Permalink
Browse files
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
  • Loading branch information
Ahmad-S792 authored and Ahmad Saleem committed Nov 18, 2022
1 parent f7c3064 commit 3894c75f5f9ffe16ec91de57edc2d93b2e2051c2
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 2 deletions.
@@ -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>
@@ -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>
@@ -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);

0 comments on commit 3894c75

Please sign in to comment.