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

[css-sizing] stretch size for tables with caption #11489

Open
Loirooriol opened this issue Jan 13, 2025 · 2 comments
Open

[css-sizing] stretch size for tables with caption #11489

Loirooriol opened this issue Jan 13, 2025 · 2 comments
Labels
css-align-3 Current Work css-grid-1 css-grid-2 Subgrid; Current Work css-sizing-4 css-tables-3 Current Work

Comments

@Loirooriol
Copy link
Contributor 

<!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.
@bfgeek
Copy link

bfgeek commented 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
Copy link
Contributor Author

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.

@Loirooriol Loirooriol added css-align-3 Current Work css-grid-1 css-grid-2 Subgrid; Current Work css-tables-3 Current Work labels Jan 14, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css-align-3 Current Work css-grid-1 css-grid-2 Subgrid; Current Work css-sizing-4 css-tables-3 Current Work
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@bfgeek @Loirooriol