visible rowspan cell inside collapsed row outline painting

by david

HTML

Original table
<table>
  <tr>
    <td class=red rowspan="2">Red spanner</td>
    <td class=blue>Blue top</td>
    <td class=green>Green top</td>
  </tr>
  <tr>
    <td class=blue>Blue bottom</td>
    <td class=green>Green bottom</td>
  </tr>
</table>
<br>
Collapse <i>top</i> row: visible row-spanning cell <i>starts</i> in a collapsed row
<br> -- Chrome paints the outline
<br> -- Edge does not paint the outline
<br> -- FF paints neither text nor outline
<table>
  <tr style="visibility:collapse">
    <td class=red style="visibility:visible" rowspan="2">Red spanner</td>
    <td class=blue>Blue top</td>
    <td class=green>Green top</td>
  </tr>
  <tr>
    <td class=blue>Blue bottom</td>
    <td class=green>Green bottom</td>
  </tr>
</table>
<br>
Collapse <i>bottom</i> row: visible row-spanning cell <i>ends</i> in a collapsed row
<br> -- Chrome behaves same as first case
<br> -- Edge behaves same as first case
<br> -- FF now paints the text (letting it overflow, known issue) and also the outline
<table>
  <tr>
    <td class=red style="visibility:visible" rowspan="2">Red spanner</td>
    <td class=blue>Blue top</td>
    <td class=green>Green top</td>
  </tr>
  <tr style="visibility:collapse">
    <td class=blue>Blue bottom</td>
    <td class=green>Green bottom</td>
  </tr>
</table>
<br>
Note to self: see http://jsfiddle.net/0ok0d8oa for Joy's original example that includes column collapsing
<br>Chrome 64.0.3255.3
<br>FF 58.0a1 (2017-11-01)
<br>Edge 16.16299

CSS

table {
  border: 5px solid black;
}

td.red { outline: 1px solid red; }
td.blue { background-color: lightblue; }
td.green { background-color: green; }