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.
Created attachment 467688 [details] test case
Created attachment 467689 [details] test case 2
Created attachment 467690 [details] test case 3
<rdar://problem/115567857>
Pull request: https://github.com/WebKit/WebKit/pull/17822
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.
Created attachment 467768 [details] work-around
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.