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-sizing][css-tables] How does `aspect-ratio` apply to table boxes? #11419

Open

Loirooriol opened this issue Dec 30, 2024 · 0 comments

Labels

css-sizing-4 css-tables-3

Contributor

Loirooriol commented Dec 30, 2024 •

edited

Loading

https://drafts.csswg.org/css-sizing-4/#aspect-ratio

Applies to: all elements except inline boxes and internal ruby or table boxes

This is not very clear, but my understanding is that it means

Applies to: all elements except: inline boxes, internal ruby boxes and internal table boxes.

So it should apply to table boxes. But how so?

Does it actually apply to the table wrapper box, or to the table grid box?
```
<!DOCTYPE html>
<table style="width: 100px; aspect-ratio: 1; border: 10px solid">
  <caption style="background: cyan; height: 50px"></caption>
</table>
```
✅ Gecko ⚠️ Blink ❌ WebKit

I think Gecko is right: table grid makes more sense, to be consistent with other sizing properties.
Blink seems to attempt to apply the ratio to the table grid, but is buggy and gets confused by the border.
WebKit applies the ratio to the table wrapper, transferring from the inline size of the grid (which in WebKit matches the inline size of the wrapper) to the block size of the wrapper, but not from the block size of the grid (which doesn't match the block size of the wrapper) to the inline size of the wrapper.
Does it transfer the magical min-content minimum?
```
<!DOCTYPE html>
<table style="width: 50px; aspect-ratio: 1; border: 10px solid">
  <td style="min-width: 100px"></td>
</table>
```
❌ Gecko ⚠️ Blink ⚠️ WebKit ✅ Proposed

I think it should be transferred, like Blink&WebKit attempt to do (but they are buggy).
Gecko doesn't transfer it, but when adding min-width: min-content manually, then it looks as I'd expect.

The text was updated successfully, but these errors were encountered:

Loirooriol added css-tables-3 css-sizing-4 labels

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment