beenull/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-11-22 15:40:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

LibWeb: Resolve flex item % main size to 0 during min-content sizing

Browse source 
When the flex container is sized under a min-content constraint in the
main axis, any flex items with a percentage main size should collapse
to zero width, not take up their own intrinsic min-content size.

This is not in the spec, but matches how other browsers behave.

Fixes an issue where the cartoons on https://basecamp.com/ were way
too large. :^)
This commit is contained in:
Andreas Kling 2024-10-06 15:22:20 +02:00 committed by Andreas Kling
parent 1a78edb8c9
commit 59ed823724
Notes: github-actions[bot] 2024-10-06 14:04:52 +00:00 
Author: https://github.com/awesomekling
Commit: https://github.com/LadybirdBrowser/ladybird/commit/59ed8237243
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/1650
3 changed files with 37 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
Tests/LibWeb/Layout/expected/flex/flex-item-percentage-main-size-during-min-content-sizing.txt Normal file
View file

@ -0,0 +1,11 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
Box <html> at (0,0) content-size 60x50 flex-container(row) [FFC] children: not-inline
Box <body> at (8,3) content-size 44x44 flex-container(row) flex-item [FFC] children: not-inline
ImageBox <img> at (8,3) content-size 44x44 flex-item children: not-inline
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableBox (Box<HTML>) [0,0 60x50]
PaintableBox (Box<BODY>) [8,3 44x44]
ImagePaintable (ImageBox<IMG>) [8,3 44x44]

19
Tests/LibWeb/Layout/input/flex/flex-item-percentage-main-size-during-min-content-sizing.html Normal file
View file

@ -0,0 +1,19 @@
<!doctype html>
<style type="text/css">
* {
outline: 1px solid black;
}
html {
display: flex;
align-items: center;
width: 60px;
height: 50px;
}
body {
display: flex;
}
img {
width: 100%;
}
</style>
<body><img src="../120.png">

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

@ -587,6 +587,13 @@ void FlexFormattingContext::determine_flex_base_size_and_hypothetical_main_size(
return get_pixel_height(child_box, size);
}
// AD-HOC: If we're sizing the flex container under a min-content constraint in the main axis,
// flex items resolve percentages in the main axis to 0.
if (m_available_space_for_items->main.is_min_content()
&& computed_main_size(item.box).contains_percentage()) {
return CSSPixels(0);
}
// B. If the flex item has ...
// - an intrinsic aspect ratio,
// - a used flex basis of content, and