visible rowspan cell inside collapsed row cell bg 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 top of the text, clips the bottom, and paints the bg color
<br> -- Edge behaves as chrome
<br> -- FF paints neither text nor bg color
<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 above
<br> -- Edge behaves same as above
<br> -- FF now paints the text (letting it overflow, known issue) and also now paints the bg color 
<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 { background-color: red; }
td.blue { background-color: lightblue; }
td.green { background-color: green; }