Why does box-shadow look different than filter: drop-shadow

Question

I've always been using CSS box-shadows since, but now I have an image with rounded corners and wanted to give it a rounded shadow. So I tried using filter: drop-shadow, but unfortunately it looks different from box-shadow. In my opinion, they should look the same, am I doing something wrong?

td {
  padding: .5em 3em;
}
.box-shadow img {
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
}
.drop-shadow img {
   filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.7));
}

<table>
  <tr>
    <th>box shadow</th><th>drop shadow</th>
  </tr>
  <tr>
    <td class="box-shadow">
      <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=150&h=150" alt="" />
    </td>
    <td class="drop-shadow">
      <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=150&h=150" alt="" />
    </td>
  </tr>
</table>

Is the appearance of these shadows defined in any spec, or do browsers just what they think they should do? Why do those look different?

Chrome/OS X:

Firefox/OS X:

Answer 1

I believe this is a bug. The W3C specification for CSS filters states that "values are interpreted as for box-shadow [CSS3BG]." Therefore, similar results should be expected from the two properties.

I achieved a similar issue, as seen here:

#box1, #box2 {
  position: absolute;
  top: 10px;
  width: 100px;
  height: 100px;
  background: red;
}

#box1 { /* Using drop shadow, should appear identical to box shadow */
  left: 10px;
  filter: drop-shadow(0 5px 10px black)
}

#box2 {
  left: 120px;
  box-shadow: 0 5px 10px black;
}

<div id="box1"></div>
<div id="box2"></div>

This will display incorrectly in Chrome and Firefox like this:

However, it will display correctly in Safari like this:

If I decrease the shadow blur radius in Chrome by a factor of two, I get the expected result:

I have filed a bug report for Chromium and Firefox.

UPDATE: January 12, 2017

It turns out it wasn't a bug, but an issue with the specification.

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. - Robert Longson

A specification issue has been raised here.