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

LibWeb: Treat flex item's cyclic percentage cross size as auto

Browse source 
This fixes an issue where e.g `height: 100%` on a flex item whose
container has indefinite height was being resolved to 0. It now
correctly behaves the same as auto.
This commit is contained in:
Andreas Kling 2023-03-18 00:24:51 +01:00
parent 062b8e5957
commit 1dc074fc18
3 changed files with 25 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

10
Tests/LibWeb/Layout/expected/flex-item-with-cyclic-percentage-height.txt Normal file
View file

@ -0,0 +1,10 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x39.46875 children: not-inline
BlockContainer <body> at (10,10) content-size 780x21.46875 children: not-inline
Box <div.flexrow> at (11,11) content-size 778x19.46875 flex-container(row) children: not-inline
Box <div.project> at (12,12) content-size 44.03125x17.46875 flex-container(column) flex-item children: not-inline
BlockContainer <(anonymous)> at (12,12) content-size 44.03125x17.46875 flex-item children: inline
line 0 width: 44.03125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 6, rect: [12,12 44.03125x17.46875]
"pillow"
TextNode <#text>

14
Tests/LibWeb/Layout/input/flex-item-with-cyclic-percentage-height.html Normal file
View file

@ -0,0 +1,14 @@
<!DOCTYPE html><html><head><style>
* {
border: 1px solid black;
font: 16px 'SerenitySans';
}
.project {
display: flex;
flex-direction: column;
height: 100%;
}
.flexrow {
display: flex;
}
</style></head><body><div class="flexrow"><div class="project">pillow

2
Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
View file

@ -1103,7 +1103,7 @@ void FlexFormattingContext::determine_hypothetical_cross_size_of_item(FlexItem&
return; return;
} }
if (computed_cross_size(item.box).is_auto()) { if (should_treat_cross_size_as_auto(item.box)) {
// Item has automatic cross size, layout with "fit-content" // Item has automatic cross size, layout with "fit-content"
CSSPixels fit_content_cross_size = 0; CSSPixels fit_content_cross_size = 0;