search

w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.5k stars 661 forks source link

[css2][css-tables] Does `overflow` apply to table-wrapper or table-grid? css-tables contradicts CSSWG resolution #10881

Open Loirooriol opened 1 month ago

Loirooriol commented 1 month ago

The CSSWG resolved (https://lists.w3.org/Archives/Public/www-style/2012Aug/0298.html)

RES0LVED: Errata CSS2.1 to say that 'overflow' on a table element applies to the table box (not table wrapper box); and that values other than 'hidden' are treated as 'visible'.

Only the 2nd part did actually go into the errata (as noticed in #2778), but presumably the 1st part still holds?

However, css-tables says the opposite! https://github.com/w3c/csswg-drafts/blob/c269215694fbefc1d26bfc5a94f40aeef4fe8ae7/css-tables-3/Overview.bs#L921-L924

This was added in 03639670c4e22b49dcf566471b01235eba742e65, and I don't see any reference to some CSSWG resolution overriding the one from 2012.

Browsers do not agree: Firefox applies overflow to the table grid, while Blink and WebKit apply it to the table wrapper.

Due to the way the we implement table wrappers in Servo, it was easier for us to align with Firefox.

There are tests that assert it applies to the table grid: https://wpt.fyi/results/css/CSS2/css21-errata?q=s-11-1-1b

Agenda+ to either ratify the previous resolution, or ratify what css-tables says.

Loirooriol commented 1 month ago

I guess css-overflow should also clarify this. Currently https://www.w3.org/TR/css-overflow-3/#overflow-control says

Applies to: block containers [CSS2], flex containers [CSS3-FLEXBOX], grid containers [CSS3-GRID-LAYOUT]

I guess "block containers" might include table wrapper boxes, but it's not much clear. Table grid boxes seem excluded.

fantasai commented 1 month ago

The useful thing to do here is definitely to apply it to the table grid box, so I think we should stand by that resolution.

Loirooriol commented 1 month ago

The useful thing to do here is definitely to apply it to the table grid box

I think there may be valid arguments for both options, applying it to the wrapper could be useful to clip an overflowing caption:

<!DOCTYPE html>
<table style="border: solid magenta; width: 100px; overflow: hidden">
  <caption style="border: solid cyan; width: 200%">caption</caption>
  <td>cell</td>
</table>

On Blink it looks like: