Bug 261615

Summary: [Filters] Referenced SVG filters with outsets get clipped
Product: WebKit Reporter: Said Abou-Hallawa <sabouhallawa>
Component: Layout and RenderingAssignee: Said Abou-Hallawa <sabouhallawa>
Status: RESOLVED INVALID    
Severity: Normal CC: bfulgham, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: WebKit Nightly Build   
Hardware: Unspecified   
OS: Unspecified   
Attachments:
Description Flags
test case
none
test case 2
none
test case 3
none
work-around none

Description Said Abou-Hallawa 2023-09-15 12:01:50 PDT 
1. Open the attached test case.
2. The green box has a css drop-shadow filter applied to it.
3. The red box has a css with a referenced SVG <feDropShadow> filter applied to it.
4. Notice the difference in drawing the referenced SVG <feDropShadow> filter.

Result: The referenced SVG <feDropShadow> filter seems clipped.
Expected: The display of the two filters in the test case should be identical.
Comment 1 Said Abou-Hallawa 2023-09-15 12:02:10 PDT 
Created attachment 467688 [details]
test case
Comment 2 Said Abou-Hallawa 2023-09-15 12:07:45 PDT 
Created attachment 467689 [details]
test case 2
Comment 3 Said Abou-Hallawa 2023-09-15 12:14:11 PDT 
Created attachment 467690 [details]
test case 3
Comment 4 Radar WebKit Bug Importer 2023-09-15 12:34:00 PDT 
<rdar://problem/115567857>
Comment 5 Said Abou-Hallawa 2023-09-15 12:36:59 PDT 
Pull request: https://github.com/WebKit/WebKit/pull/17822
Comment 6 Said Abou-Hallawa 2023-09-19 17:11:13 PDT 
A workaround for this clipping is to set the geometry of the filter element to take into account the outsets of its effects. For example changing the <filter> tag in the above test case from 

<filter id="svgDropShadow">

to 

<filter id="svgDropShadow" x="-50%" y="-50%" width="200%" height="200%">

fixes the clipping. But it is sometimes hard to predict the exact outsets of the filter effects. For example the outsets of this effect is { 30, 30, 30, 30 }

<feDropShadow dx="30" dy="30" stdDeviation="0"/>

While the outsets of this effect is about { 50, 50, 50, 50 }

<feDropShadow dx="30" dy="30" stdDeviation="10"/>

Finding these values can be done by trial and error or by looking at the code and understanding how the outsets are calculated.
Comment 7 Said Abou-Hallawa 2023-09-19 17:11:43 PDT 
Created attachment 467768 [details]
work-around
Comment 8 Said Abou-Hallawa 2023-09-19 17:13:34 PDT 
I am going to resolve this bug as "Invalid" since all browsers respect the geometry of the referenced SVG filter in drawing the CSS filter.