Repository navigation
[css-sizing] stretch size for tables with caption #11489
Description
<!DOCTYPE HTML>
<style>
table {
width: -moz-available; width: -webkit-fill-available; width: stretch;
height: -moz-available; height: -webkit-fill-available; height: stretch;
}
</style>
<div style="height: 150px; width: 150px; border: 5px solid">
<table style="border: 5px solid cyan; padding: 5px">
<caption style="border: 5px solid magenta; padding: 5px">caption</caption>
<td style="height: 50px; border: 5px solid orange; padding: 5px">cell</td>
</table>
</div>| Blink | WebKit, Gecko, Servo |
|---|---|
https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing
in formatting contexts and axes in which the relevant self-alignment property does not apply (such as the block axis in Block Layout, or the main axis in Flex Layout), in cases where a percentage size in that axis would resolve to a definite value, a stretch-fit size causes the box to attempt to fill its containing block—behaving as 100% but applying the resulting size to its margin box instead of the box indicated by box-sizing.
This implies that WebKit&Gecko&Servo are correct, but arguably Blink looks better. I suspect this may need something a la https://drafts.csswg.org/css-flexbox-1/#flex-items
the flex item’s final size is calculated by performing layout as if the distance between the table wrapper box’s edges and the table box’s content edges were all part of the table box’s border+padding area
That seems more annoying to implement, though.
Activity
bfgeek commentedon Jan 14, 2025
This also occurs within flexbox in the cross-axis & other scenarios
Flex: https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=13390
Grid: https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=13391
Where all browsers behave the same as Blink's behaviour above (modulo WebKits small bug).
Loirooriol commentedon Jan 14, 2025
Ah, yeah, the grid spec doesn't seem to have any especial behavior for table items either.
There is also the abspos case, but then only Blink supports setting the align properties to stretch: https://www.software.hixie.ch/utilities/js/live-dom-viewer/saved/13393
In Servo we always overflow, I need to think how to obey the flex spec, but once I have it for flex, hopefully it can be reused for the other cases.
[css-sizing-4] Clarify that we're stretching the principal box #11489
fantasai commentedon Mar 28, 2025
Clarified that we're trying to match the outer edges of the principal box to the CB (which in the case of tables, is the wrapper box). See 8cb894a . Lmk if that works, or if we need additional clarification!
Loirooriol commentedon Mar 28, 2025
csswg-drafts/css-sizing-4/Overview.bs
Lines 852 to 854 in 8cb894a
This may also need to be clarified, because
100%applies to the table grid box, not to the principal table wrapper box.