Description
https://drafts.csswg.org/css-position-4/#paint-a-stacking-context
- For each of root’s in-flow, non-positioned, block-level descendants, in tree order, paint a block’s decorations given the descendant and canvas.
https://drafts.csswg.org/css-position-4/#paint-a-blocks-decorations
To paint a block’s decorations given a block box root and a canvas canvas:
- If root is not a table wrapper box:
- Paint root’s background to canvas if it is not the root element’s principal box.
- Paint root’s border to canvas.
- If root is a table wrapper box: [...]
7. Paint the borders of all of the table elements of root. If the borders are separated, do so in tree order; if connected, do so as specified in [css-tables-3].
<!DOCTYPE html>
<table style="border-collapse: collapse">
<td style="border: 20px solid rgba(0, 0, 255, 0.5)">
<div style="border: 15px solid magenta; margin: -10px"></div>
</td>
</table>All browsers agree that the collapsed table borders (blue) are painted in front of the div's borders (magenta), even though the table is an ancestor and thus comes first in tree order.
| Gecko, Servo | Blink, WebKit |
|---|---|
 |
 |
Note this is just if the table has collapsed borders, in the separated borders mode, magenta is painted in front.
In Servo I added an extra step between steps 6 and 7 of https://drafts.csswg.org/css-position-4/#paint-a-stacking-context to paint collapsed table borders. But I'm now realizing this approach isn't good either:
<!DOCTYPE html>
<table style="border-collapse: collapse">
<td style="border: 20px solid rgba(0, 0, 255, 0.5)"></td>
</table>
<div style="border: 15px solid magenta; width: 0px; margin-top: -15px"></div>| Gecko | Blink, WebKit | Servo |
|---|---|---|
 |
 |
 |
Testcase with nested collapsed table borders:
<!DOCTYPE html>
<table style="border-collapse: collapse">
<td style="border: 20px solid rgba(0, 0, 255, 0.5)">
<table style="border-collapse: collapse; margin: -10px">
<td style="border: 20px solid magenta"></td>
</table>
</td>
</table>| Gecko | Blink, WebKit | Servo |
|---|---|---|
 |
 |
 |
Even though the inner table comes later in tree order, it's painted behind...