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

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

Open
Loirooriol opened this issue Sep 12, 2024 · 4 comments
Open

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

Loirooriol opened this issue Sep 12, 2024 · 4 comments
Labels
Agenda+ CSS2 css-overflow-3 Current Work css-tables-3 Current Work

Comments

@Loirooriol
Copy link
Contributor

Loirooriol commented Sep 12, 2024 •
edited
Loading

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!

csswg-drafts/css-tables-3/Overview.bs

Lines 921 to 924 in c269215

<li>The computed values of properties 'position', 'float', 'margin'-*, 'top', 'right', 'bottom', and 'left' on the table
are used on the table-wrapper box and not the table grid box;
the same holds true for the properties whose use could force the used value of 'transform-style' to <code>flat</code></a> (see [[css-transforms-2#grouping-property-values|list]]) and their shorthands/longhands relatives:
this list currently includes 'overflow', 'opacity', 'filter', 'clip', 'clip-path', 'isolation', 'mask'-*, 'mix-blend-mode', 'transform'-* and 'perspective'.

This was added in 0363967, 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 Loirooriol changed the title [css2][css-tables] overflowapplies to table-wrapper of table-grid? css-tables contradicts CSSWG resolution [css2][css-tables] Does overflow apply to table-wrapper or table-grid? css-tables contradicts CSSWG resolution Sep 12, 2024
@Loirooriol Loirooriol added the css-overflow-3 Current Work label Sep 12, 2024
@Loirooriol
Copy link
Contributor Author

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.

@astearns astearns moved this to TPAC/FTF agenda items in CSSWG Agenda TPAC 2024 Sep 13, 2024
@astearns astearns moved this from TPAC/FTF agenda items to Regular agenda items in CSSWG Agenda TPAC 2024 Sep 13, 2024
@fantasai
Copy link
Collaborator

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 Loirooriol mentioned this issue Sep 17, 2024
Open
@Loirooriol
Copy link
Contributor Author

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:

@fantasai
Copy link
Collaborator

If you want to clip the overflowing caption... just clip the caption?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Agenda+ CSS2 css-overflow-3 Current Work css-tables-3 Current Work
Projects
CSSWG Agenda TPAC 2024
Status: Regular agenda items
Milestone
No milestone
Development

No branches or pull requests
2 participants
@fantasai @Loirooriol