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

LibWeb: Resolve flex item percentages against used flex container sizes

Browse source 
Once we've resolved the used flex item width & height, we should allow
percentage flex item sizes to resolve against them instead of forcing
flex items to always treat percentages as auto while doing intrinsic
sizing layout.

Regressed in 8dd489da61.
This commit is contained in:
Andreas Kling 2023-07-17 21:19:33 +02:00
parent edd7de3c77
commit ac124fbaae
6 changed files with 126 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

11
Tests/LibWeb/Layout/expected/flex/flex-column-item-with-percentage-max-width.txt Normal file
View file

@ -0,0 +1,11 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x120 [BFC] children: not-inline
BlockContainer <body> at (10,10) content-size 54x102 children: not-inline
Box <div.flex> at (11,11) content-size 52x100 flex-container(column) [FFC] children: not-inline
BlockContainer <div.hmm> at (12,12) content-size 50x17.46875 flex-item [BFC] children: inline
line 0 width: 39.78125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 5, rect: [12,12 39.78125x17.46875]
"Hello"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>

24
Tests/LibWeb/Layout/input/flex/flex-column-item-with-percentage-max-width.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<style>
* {
border: 1px solid black;
background: none;
color: black;
}
.flex {
display: flex;
flex-direction: column;
background: pink;
height: 100px;
}
.hmm {
max-width: 100%;
width: 50px;
background: orange;
}
body {
width: max-content;
background: white;
}
</style>
<body><div class="flex"><div class="hmm">Hello</div>