[css-sizing][css-tables] How does aspect-ratio apply to table boxes? #11419
Description
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-contentminimum?<!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 addingmin-width: min-contentmanually, then it looks as I'd expect.