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

Said Abou-Hallawa
Reported 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.
Attachments
test case (697 bytes, text/html)
2023-09-15 12:02 PDT, Said Abou-Hallawa 		no flags
Details
test case 2 (968 bytes, text/html)
2023-09-15 12:07 PDT, Said Abou-Hallawa 		no flags
Details
test case 3 (968 bytes, text/html)
2023-09-15 12:14 PDT, Said Abou-Hallawa 		no flags
Details
work-around (1013 bytes, text/html)
2023-09-19 17:11 PDT, Said Abou-Hallawa 		no flags
Details
Show Obsolete (2) View All Add attachment proposed patch, testcase, etc.
Said Abou-Hallawa
Comment 1 2023-09-15 12:02:10 PDT
Created attachment 467688 [details] test case
Said Abou-Hallawa
Comment 2 2023-09-15 12:07:45 PDT
Created attachment 467689 [details] test case 2
Said Abou-Hallawa
Comment 3 2023-09-15 12:14:11 PDT
Created attachment 467690 [details] test case 3
Radar WebKit Bug Importer
Comment 4 2023-09-15 12:34:00 PDT
<rdar://problem/115567857>
Said Abou-Hallawa
Comment 5 2023-09-15 12:36:59 PDT
Pull request: https://github.com/WebKit/WebKit/pull/17822
Said Abou-Hallawa
Comment 6 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.
Said Abou-Hallawa
Comment 7 2023-09-19 17:11:43 PDT
Created attachment 467768 [details] work-around
Said Abou-Hallawa
Comment 8 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.
Note You need to log in before you can comment on or make changes to this bug.