Why does the box-shadow property not apply to a <tr> but directly to <td> elements in Edge?

Question

When adding box-shadow to a <tr>, Firefox and Chrome both show it around the entire row, while Edge directly applies it to each <td> which ends up looking like grid rather than a continuous row.

Here is a demo of the behaviour:

table tr {
  box-shadow: 0 0 0 1px red inset;
}

<table>
  <tr>
    <td>hello</td>
    <td>world</td>
  </tr>
</table>

And here are screenshots:

1. How it looks in Firefox

2. How it looks in Chrome

3. How it looks in Edge

So it seems like Edge is directly applying the given style to the <td> elements under the <tr> as if I've set the following:

table td {
  box-shadow: 0 0 0 1px red inset;
}

<table>
  <tr>
    <td>hello</td>
    <td>world</td>
  </tr>
</table>

By experimenting, it also seems like display: block appears to fix this and it makes all browsers display the shadow (almost) equally

table tr {
  box-shadow: 0 0 0 1px red inset;
  display: block;
}

<table>
  <tr>
    <td>hello</td>
    <td>world</td>
  </tr>
</table>

1. How display: block looks in Firefox

2. How display: block looks in Chrome

3. How display: block looks in Edge

Edge does display the box-shadow on the <tr> and Firefox and Chrome have a similar white-space on the left and right.

According to the box-shadow draft specifications it's supposed to be applicable to all elements. I am interested in why Edge does what it does: why does it skip the <tr> and apply the CSS directly to <td> elements? It seems completely unintuitive - other properties like border don't behave this way - if you apply that to a parent, the children don't all get border, too.

Answer 1

Limited CSS properties applying to <tr> elements (and other elements with "display:table-row") has been the way things are since CSS first became available. More CSS3 properties are listed in the specs as applying to "all elements," but apparently Edge is making that apply to the cells instead of the row itself.