[csswg-drafts] [css-position][css-tables] Algorithm for painting collapsed table borders doesn't match reality (#11570)

Loirooriol has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-position][css-tables] Algorithm for painting collapsed table borders doesn't match reality ==
https://drafts.csswg.org/css-position-4/#paint-a-stacking-context

> 6. For each of root’s in-flow, non-positioned, block-level descendants, in [tree order](https://dom.spec.whatwg.org/#concept-tree-order), [paint a block’s decorations](https://drafts.csswg.org/css-position-4/#paint-a-blocks-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:
> 1.  If root is not a [table wrapper box](https://drafts.csswg.org/css-tables-3/#table-wrapper-box):
>      1. Paint root’s background to canvas if it is not the [root element’s](https://drafts.csswg.org/css-display-4/#root-element) [principal box](https://drafts.csswg.org/css-display-4/#principal-box).
>      2. Paint root’s border to canvas.
> 2. If root is a [table wrapper box](https://drafts.csswg.org/css-tables-3/#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](https://dom.spec.whatwg.org/#concept-tree-order); if connected, do so as specified in [[css-tables-3]](https://drafts.csswg.org/css-position-4/#biblio-css-tables-3).

```html
<!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 |
| - | - |
| ![](https://github.com/user-attachments/assets/1e4bd311-ba62-4733-8f78-09579283198c) |![](https://github.com/user-attachments/assets/30c7bff9-51c1-4a62-86fe-ad3bae862716) |

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:

```html
<!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 |
| - | - | - |
| ![](https://github.com/user-attachments/assets/7375d441-1223-4410-983b-b1cf7c76b3eb) | ![](https://github.com/user-attachments/assets/f79ea1f8-64d0-4d04-bd9a-9679c24a4599) | ![](https://github.com/user-attachments/assets/fd90b1d4-fa14-4350-b287-de56a690872b) |

Testcase with nested collapsed table borders:

```html
<!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 |
| - | - | - |
| ![](https://github.com/user-attachments/assets/0b07ce1a-ab1e-4711-a938-212c2c69c6a7) | ![](https://github.com/user-attachments/assets/c2fcc75d-7c10-4951-9889-eb0aa1f0ad97) | ![](https://github.com/user-attachments/assets/5e8646d4-d9d4-4b7d-8242-5e32e61b9752) |

Even though the inner table comes later in tree order, it's painted behind...


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11570 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 25 January 2025 22:27:41 UTC