Skip to content

[css-sizing] Clarify contain-intrinsic-size:none vs 0 #7518

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.

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

Open
Loirooriol opened this issue Jul 20, 2022 · 2 comments
Open

[css-sizing] Clarify contain-intrinsic-size:none vs 0 #7518

Loirooriol opened this issue Jul 20, 2022 · 2 comments

Comments

@Loirooriol
Copy link
Contributor

From https://drafts.csswg.org/css-contain-2/#containment-size

The intrinsic sizes of the size containment box are determined as if the element had no content, following the same logic as when sizing as if empty.

From https://drafts.csswg.org/css-sizing-4/#explicit-intrinsic-inner-size

If an element has an explicit intrinsic inner size in an axis, then after laying out the element as normal for size containment, the size of the contents in that axis are instead treated as being the explicit intrinsic inner size instead of what was calculated in layout, and layout is performed again if necessary.

I don't really get the difference between sizing as there was no content, vs sizing as if the contents had a size of 0.

This case shows a difference in Blink:

<img src="image" style="border: solid; contain: inline-size; contain-intrinsic-width: none">
<img src="image" style="border: solid; contain: inline-size; contain-intrinsic-width: 0">

The 1st image has its natural width, the 2nd one is 0px wide. Not sure if this is correct.

@Loirooriol Loirooriol added the css-sizing-3 Current Work label Jul 20, 2022
@Loirooriol
Copy link
Contributor Author

I guess contain-intrinsic-size: none may produce contents with a size greater than 0 due to gap, grid-template, ... but contain-intrinsic-size: 0 disregards all of that and 0 is the final content size? See #7520

@Loirooriol Loirooriol added css-sizing-4 and removed css-sizing-3 Current Work labels Jul 20, 2022
@Loirooriol
Copy link
Contributor Author

In #7520 (comment) Tab confirmed that the difference is that none may result in an intrinsic size greater than 0 due to other properties, while 0 disregards that. I think the spec should have a note or example.

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

No branches or pull requests

1 participant