RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 17:17:45 +00:00
Code Issues Activity Actions

LibWeb: Support more kinds of indefinite widths on flex column items

Browse source 
This stuff is pretty hairy since the specifications don't give any
guidance on which widths to use when calculating the intrinsic height of
flex items in a column layout.

However, our old behavior of "treat anything indefinite as fit-content"
was definitely not good enough, so this patch improves the situation by
considering values like `min-content`, `max-content` and `fit-content`
separately from `auto`, and making the whole flex layout pipeline aware
of them (in the cross axis context).
This commit is contained in:
Andreas Kling 2023-08-05 09:11:57 +02:00
parent 17b363b596
commit 41e7c5766e
4 changed files with 144 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

19
Tests/LibWeb/Layout/input/flex/intrinsic-height-of-column-items-with-different-kinds-of-width.html Normal file
View file

@ -0,0 +1,19 @@
<!doctype html><style>
* { border: 1px solid black; }
body {
display: flex;
flex-direction: column;
}
.auto { width: auto; }
.px { width: 200px; }
.percentage { width: 50px; }
.max-content { width: max-content; }
.min-content { width: min-content; }
.fit-content { width: fit-content; }
.inner { display: flex; }
</style><body>
<div class="px"><div class="inner">px</div></div>
<div class="percentage"><div class="inner">percentage</div></div>
<div class="fit-content"><div class="inner">fit content</div></div>
<div class="max-content"><div class="inner">max content</div></div>
<div class="min-content"><div class="inner">min content</div></div>