[css-tables-3] How table borders should be painted at the corner? (border-collapse: collapse)

[karlcow]

Currently the painting at the corner of collapse borders differs in between Chrome/Safari and Firefox.

This is easily visible with larger borders.

As you can see, chrome and Safari adds the opacity on top of each other, while Firefox doesn't have this rendering because the corners are painted in diagonal (like a real wood painting frame assemblage)

But which is correct?
I didn't find anything in the specification explaining how it should be done.
https://drafts.csswg.org/css-tables-3/#conflict-resolution-for-collapsed-borders

https://codepen.io/webcompat/pen/XJKVezR

<style>
  td {
    width: 50px;
    height: 50px
  }

  table {
    border-collapse: collapse;
    margin: 10px
  }
</style>
<table>
  <tbody>
    <tr>
      <td style="
           border-left: 20px solid rgba(0, 127, 0, 0.5); 
           border-bottom: 20px solid rgba(0, 127, 0, 0.5);"></td>
    </tr>
  </tbody>
</table>

<table>
  <tbody>
    <tr>
      <td style="
           border-left: 20px solid rgba(0, 127, 0, 0.5); 
           border-bottom: 20px solid rgba(127, 0, 0, 0.5);"></td>
    </tr>
  </tbody>
</table>

[karlcow]

If painting on top of each other, there will be also the issue of the painting order which will matter. Which border will win over the other side.

[keithamus]

Right. I'm inclined to say Firefox's "clean mitres" is right here because this matches how borders generally work in non-table painting.

(FWIW Firefox's draw code for borders, Chrome's code for collapsed borders, Webkit's code for collapsed borders).

Of note WebKit has a comment:

We never paint diagonals at the joins. We simply let the border with the highest precedence paint on top of borders with lower precedence.

I don't know the history here, but I'd wager Chrome's lineage to WebKit is why the two behave the same.

[karlcow]

This is really old code, very old.
https://searchfox.org/wubkat/rev/9e89c25c83c75dd49f1310ba218714f878b0e0fb/WebCore/khtml/rendering/render_table.cpp#2181-2183
It was added in October 2003 by Dave Hyatt.
https://searchfox.org/wubkat/commit/9e89c25c83c75dd49f1310ba218714f878b0e0fb

[Loirooriol]

Servo matches Firefox in this case (but in general it's a bit broken)

https://github.com/servo/servo/blob/2c770c162cc866c3a6b819e137bd8b5ffd582c78/components/layout/display_list/mod.rs#L1421