Skip to content

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

Open
@Loirooriol

Description

@Loirooriol

https://drafts.csswg.org/css-position-4/#paint-a-stacking-context

  1. 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:

  1. If root is not a table wrapper box:
    1. Paint root’s background to canvas if it is not the root element’s principal box.
    2. Paint root’s border to canvas.
  2. 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...

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions