1326570 - `drop-shadow` filter blur radius is 2x too large

Status: VERIFIED INVALID

(Firefox :: Untriaged, defect)

Description

[developer]

Attachment: Demonstration of blur radius differences

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/602.4.2 (KHTML, like Gecko) Version/10.0.3 Safari/602.4.2

Steps to reproduce:

(1) Add two square elements side by side.
(2) Add the CSS property `filter: drop-shadow(0 5px 10px black)` to the first element and the CSS property `box-shadow: 0 5px 10px black` to the second one.

(This was tested on a MacBook Pro with Retina display, so the increased pixel density may cause an issue. However, when I changed the screen to a native resolution, the issue still occurred.)


Actual results:

The element with the CSS drop shadow filter has a blur radius that is 2x as large as the box shadow element, even though the shadow declarations are identical. If I decrease the shadow radius of the drop shadow by a factor of two, I get the expected result.


Expected results:

The shadows should look almost identical aside from some minor rendering differences.
The [W3C specification for CSS filters](https://www.w3.org/TR/filter-effects/#funcdef-drop-shadow) states that "values are interpreted as for box-shadow [CSS3BG]." Therefore, similar results should be expected from the two properties.

Comment 1

[Robert Longson [:longsonr]]

For a box shadow the blur value is 

generated by applying to the shadow a Gaussian blur with a standard deviation equal to half the blur radius

per https://www.w3.org/TR/css3-background/#shadow-blur

whereas with a drop-shadow the value **is** the standard deviation per https://www.w3.org/TR/filter-effects/#elementdef-fegaussianblur

Comment 2

[herrernst]

Seems to be a discrepancy in the spec, as mentioned in the Chromium bug: https://bugs.chromium.org/p/chromium/issues/detail?id=677689

A spec issue was raised: https://github.com/w3c/fxtf-drafts/issues/102