Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
Loirooriol opened this issue Jan 25, 2025 · 0 comments
Open

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

Loirooriol opened this issue Jan 25, 2025 · 0 comments
Labels
css-position-4 css-tables-3 Current Work

Comments

@Loirooriol
Copy link
Contributor

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...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css-position-4 css-tables-3 Current Work
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Loirooriol