mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-08-28 13:18:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb: Don't treat non-replaced sizes as 0 for min-content contrib

Browse source 
This behavior is part of the cyclic percentage contribution logic from
CSS-SIZING-3 which explicitly only applies to non-replaced boxes.

This fixes an issue on Discord where buttons in the settings UI were
cropped to a narrower width than intended.

Fixes #3572
This commit is contained in:
Andreas Kling 2025-07-23 18:08:31 +02:00 • committed by Andreas Kling
commit 8d02f28cc2
Notes: github-actions[bot] 2025-07-23 17:54:06 +00:00
8 changed files with 117 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

6
Libraries/LibWeb/Layout/FlexFormattingContext.cpp
View file

@ -632,8 +632,10 @@ void FlexFormattingContext::determine_flex_base_size(FlexItem& item)
}
// 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()
// non-replaced flex items resolve percentages in the main axis to 0.
// https://drafts.csswg.org/css-sizing-3/#cyclic-percentage-contribution
if (item.box->is_replaced_box()
&& m_available_space_for_items->main.is_min_content()
&& computed_main_size(item.box).contains_percentage()) {
return CSSPixels(0);
}

7
Libraries/LibWeb/Layout/FormattingContext.cpp
View file

@ -1695,7 +1695,11 @@ bool FormattingContext::should_treat_width_as_auto(Box const& box, AvailableSpac
auto const& computed_width = box.computed_values().width();
if (computed_width.is_auto())
return true;
// https://drafts.csswg.org/css-sizing-3/#cyclic-percentage-contribution
if (computed_width.contains_percentage()) {
if (!box.is_replaced_box() && available_space.width.is_min_content())
return true;
if (available_space.width.is_max_content())
return true;
if (available_space.width.is_indefinite())
@ -1724,7 +1728,10 @@ bool FormattingContext::should_treat_height_as_auto(Box const& box, AvailableSpa
return true;
}
// https://drafts.csswg.org/css-sizing-3/#cyclic-percentage-contribution
if (computed_height.contains_percentage()) {
if (!box.is_replaced_box() && available_space.height.is_min_content())
return true;
if (available_space.height.is_max_content())
return true;
if (available_space.height.is_indefinite())

19
Tests/LibWeb/Layout/expected/block-and-inline/treat-percentage-width-as-auto-in-non-replaced-min-content-sizing.txt Normal file
View file

@ -0,0 +1,19 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x66 [BFC] children: inline
frag 0 from BlockContainer start: 0, length: 0, rect: [8,8 38.1875x50] baseline: 21.796875
BlockContainer <body> at (8,8) content-size 38.1875x50 inline-block [BFC] children: not-inline
BlockContainer <div> at (8,8) content-size 38.1875x20 children: inline
frag 0 from TextNode start: 0, length: 4, rect: [8,8 31.140625x18] baseline: 13.796875
"Edit"
frag 1 from TextNode start: 5, length: 4, rect: [8,26 38.1875x18] baseline: 13.796875
"User"
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x66]
PaintableWithLines (BlockContainer<BODY>) [8,8 38.1875x50]
PaintableWithLines (BlockContainer<DIV>) [8,8 38.1875x20] overflow: [8,8 38.1875x36]
TextPaintable (TextNode<#text>)
SC for Viewport<#document> [0,0 800x600] [children: 1] (z-index: auto)
SC for BlockContainer<HTML> [0,0 800x66] [children: 0] (z-index: auto)

27
Tests/LibWeb/Layout/expected/flex/flex-item-with-percentage-width-in-flex-container-with-definite-max-width.txt Normal file
View file

@ -0,0 +1,27 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x38 [BFC] children: not-inline
Box <body> at (8,8) content-size 50x22 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (8,8) content-size 285.546875x22 flex-item [BFC] children: inline
frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 275.546875x18] baseline: 15.796875
TextNode <#text>
BlockContainer <button> at (13,10) content-size 275.546875x18 inline-block [BFC] children: not-inline
BlockContainer <(anonymous)> at (13,10) content-size 275.546875x18 flex-container(column) [FFC] children: not-inline
BlockContainer <(anonymous)> at (13,10) content-size 275.546875x18 flex-item [BFC] children: inline
frag 0 from TextNode start: 1, length: 24, rect: [13,10 275.546875x18] baseline: 13.796875
"LOOOOOOOOOOOOOOOOOOOOONG"
TextNode <#text>
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x38]
PaintableBox (Box<BODY>) [8,8 50x22] overflow: [8,8 285.546875x22]
PaintableWithLines (BlockContainer<DIV>) [8,8 285.546875x22]
PaintableWithLines (BlockContainer<BUTTON>) [8,8 285.546875x22]
PaintableWithLines (BlockContainer(anonymous)) [13,10 275.546875x18]
PaintableWithLines (BlockContainer(anonymous)) [13,10 275.546875x18]
TextPaintable (TextNode<#text>)
SC for Viewport<#document> [0,0 800x600] [children: 1] (z-index: auto)
SC for BlockContainer<HTML> [0,0 800x38] [children: 0] (z-index: auto)

18
Tests/LibWeb/Layout/expected/flex/percent-width-contribution-to-min-content-size.txt Normal file
View file

@ -0,0 +1,18 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x46 [BFC] children: not-inline
Box <body> at (8,8) content-size 140x30 flex-container(row) [FFC] children: not-inline
BlockContainer <div.wrapper> at (8,8) content-size 140x30 flex-item [BFC] children: not-inline
BlockContainer <div.children> at (8,8) content-size 140x18 children: inline
frag 0 from TextNode start: 0, length: 17, rect: [8,8 140x18] baseline: 13.796875
"Edit User Profile"
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x46]
PaintableBox (Box<BODY>) [8,8 140x30]
PaintableWithLines (BlockContainer<DIV>.wrapper) [8,8 140x30]
PaintableWithLines (BlockContainer<DIV>.children) [8,8 140x18]
TextPaintable (TextNode<#text>)
SC for Viewport<#document> [0,0 800x600] [children: 1] (z-index: auto)
SC for BlockContainer<HTML> [0,0 800x46] [children: 0] (z-index: auto)

12
Tests/LibWeb/Layout/input/block-and-inline/treat-percentage-width-as-auto-in-non-replaced-min-content-sizing.html Normal file
View file

@ -0,0 +1,12 @@
<!doctype html><style>
* { outline: 1px solid black; }
body {
display: inline-block;
width: min-content;
height: 50px;
}
div {
width: 100%;
height: 20px;
}
</style><body><div>Edit User

15
Tests/LibWeb/Layout/input/flex/flex-item-with-percentage-width-in-flex-container-with-definite-max-width.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<style>
body {
display: flex;
max-width: 50px;
}
button {
width: 100%;
}
</style>
<div>
<button>
LOOOOOOOOOOOOOOOOOOOOONG
</button>
</div>

15
Tests/LibWeb/Layout/input/flex/percent-width-contribution-to-min-content-size.html Normal file
View file

@ -0,0 +1,15 @@
<!doctype html><style>
* { outline: 1px solid black !important; }
body {
display: flex;
width: min-content;
height: 30px;
}
.wrapper {
min-width: 60px;
width: 100%;
}
.children {
white-space: nowrap;
}
</style><body><div class="wrapper"><div class="children">Edit User Profile