serenity
serenity copied to clipboard
SerenityOS
LibWeb: Use LayoutMode::IntrinsicSizing for sizing of grid children
We used LayoutMode::Normal for sizing grid children which resulted in outer block level elements have zero height although their children were sized correctly. By using LayoutMode::IntrinsicSizing this is fixed and the footer of our GitHub page is now at its place.
Hello!
One or more of the commit messages in this PR do not match the SerenityOS code submission policy, please check the lint_commits CI job for more details on which commits were flagged and why.
Please do not close this PR and open another, instead modify your commit message(s) with git commit --amend and force push those changes to update this PR.
The purpose of LayoutMode::IntrinsicSizing (which is our implementation of the intrinsic sizing concept from CSS-SIZING) is to determine one of the four intrinsic sizes (min-content width, max-content width, min-content height or max-content height) for a given box.
It's not correct to use LayoutMode::IntrinsicSizing like this. To get the intrinsic sizes of a box, use the APIs on FormattingContext:
-
calculate_min_content_width() -
calculate_max_content_width() -
calculate_min_content_height() -
calculate_max_content_height()
They will set up the appropriate constraints before performing layout with LayoutMode::IntrinsicSizing. See for example FlexFormattingContext which uses these concepts extensively.
@awesomekling Thanks a lot for this insight! I'm sorry I have not given the PR enough thought. My amendment now uses calculate_min_content_height() to determine the minimum contribution. This still looks only less wrong to me as the whole layout_inner() section feels a little ad-hoc. If this is too hacky to get merged it may at least serve someone with a better understanding of the grid algo (@martinfalisse) for an idea for a quick fix :^) For what it's worth it also makes the grid boxes at https://linus.dev look a little nicer:
Yeah this is obviously ad-hoc, but since it produces a much better layout than before, let's do it until we have something better :)