From 59ed823724331d6457e81f8674aef392ca4dc174 Mon Sep 17 00:00:00 2001 From: Andreas Kling Date: Sun, 6 Oct 2024 15:22:20 +0200 Subject: [PATCH] LibWeb: Resolve flex item % main size to 0 during min-content sizing 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. :^) --- ...ge-main-size-during-min-content-sizing.txt | 11 +++++++++++ ...e-main-size-during-min-content-sizing.html | 19 +++++++++++++++++++ .../LibWeb/Layout/FlexFormattingContext.cpp | 7 +++++++ 3 files changed, 37 insertions(+) create mode 100644 Tests/LibWeb/Layout/expected/flex/flex-item-percentage-main-size-during-min-content-sizing.txt create mode 100644 Tests/LibWeb/Layout/input/flex/flex-item-percentage-main-size-during-min-content-sizing.html diff --git a/Tests/LibWeb/Layout/expected/flex/flex-item-percentage-main-size-during-min-content-sizing.txt b/Tests/LibWeb/Layout/expected/flex/flex-item-percentage-main-size-during-min-content-sizing.txt new file mode 100644 index 00000000000..4839038df49 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/flex/flex-item-percentage-main-size-during-min-content-sizing.txt @@ -0,0 +1,11 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + Box at (0,0) content-size 60x50 flex-container(row) [FFC] children: not-inline + Box at (8,3) content-size 44x44 flex-container(row) flex-item [FFC] children: not-inline + ImageBox 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) [0,0 60x50] + PaintableBox (Box) [8,3 44x44] + ImagePaintable (ImageBox) [8,3 44x44] diff --git a/Tests/LibWeb/Layout/input/flex/flex-item-percentage-main-size-during-min-content-sizing.html b/Tests/LibWeb/Layout/input/flex/flex-item-percentage-main-size-during-min-content-sizing.html new file mode 100644 index 00000000000..144c04435e1 --- /dev/null +++ b/Tests/LibWeb/Layout/input/flex/flex-item-percentage-main-size-during-min-content-sizing.html @@ -0,0 +1,19 @@ + + + diff --git a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp index 7a15ae20116..a98d3d088b0 100644 --- a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp @@ -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