From b98252728efaece9cdf8fb939cc98aa4c7ea59cf Mon Sep 17 00:00:00 2001 From: Andreas Kling Date: Wed, 10 May 2023 17:15:19 +0200 Subject: [PATCH] LibWeb: Fix percentage min/max sizes on flex items with intrinsic ratio We were resolving percentage values against the containing block size in the wrong axis. --- ...rinsic-aspect-ratio-and-percentage-max-width.txt | 4 ++++ ...insic-aspect-ratio-and-percentage-max-width.html | 13 +++++++++++++ .../LibWeb/Layout/FlexFormattingContext.cpp | 4 ++-- 3 files changed, 19 insertions(+), 2 deletions(-) create mode 100644 Tests/LibWeb/Layout/expected/flex/flex-column-item-with-intrinsic-aspect-ratio-and-percentage-max-width.txt create mode 100644 Tests/LibWeb/Layout/input/flex/flex-column-item-with-intrinsic-aspect-ratio-and-percentage-max-width.html diff --git a/Tests/LibWeb/Layout/expected/flex/flex-column-item-with-intrinsic-aspect-ratio-and-percentage-max-width.txt b/Tests/LibWeb/Layout/expected/flex/flex-column-item-with-intrinsic-aspect-ratio-and-percentage-max-width.txt new file mode 100644 index 0000000000..b735888dc2 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/flex/flex-column-item-with-intrinsic-aspect-ratio-and-percentage-max-width.txt @@ -0,0 +1,4 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (1,1) content-size 798x120 [BFC] children: not-inline + Box at (10,10) content-size 780x102 flex-container(column) [FFC] children: not-inline + ImageBox at (11,11) content-size 100x100 flex-item children: not-inline diff --git a/Tests/LibWeb/Layout/input/flex/flex-column-item-with-intrinsic-aspect-ratio-and-percentage-max-width.html b/Tests/LibWeb/Layout/input/flex/flex-column-item-with-intrinsic-aspect-ratio-and-percentage-max-width.html new file mode 100644 index 0000000000..e546f292be --- /dev/null +++ b/Tests/LibWeb/Layout/input/flex/flex-column-item-with-intrinsic-aspect-ratio-and-percentage-max-width.html @@ -0,0 +1,13 @@ + \ No newline at end of file diff --git a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp index 655b177caa..b42cf2c56d 100644 --- a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp @@ -585,12 +585,12 @@ CSSPixels FlexFormattingContext::calculate_main_size_from_cross_size_and_aspect_ CSSPixels FlexFormattingContext::adjust_main_size_through_aspect_ratio_for_cross_size_min_max_constraints(Box const& box, CSSPixels main_size, CSS::Size const& min_cross_size, CSS::Size const& max_cross_size) const { if (!max_cross_size.is_none()) { - auto max_cross_size_px = max_cross_size.to_px(box, is_row_layout() ? m_flex_container_state.content_width() : m_flex_container_state.content_height()); + auto max_cross_size_px = max_cross_size.to_px(box, !is_row_layout() ? m_flex_container_state.content_width() : m_flex_container_state.content_height()); main_size = min(main_size, calculate_main_size_from_cross_size_and_aspect_ratio(max_cross_size_px, box.intrinsic_aspect_ratio().value())); } if (!min_cross_size.is_auto()) { - auto min_cross_size_px = min_cross_size.to_px(box, is_row_layout() ? m_flex_container_state.content_width() : m_flex_container_state.content_height()); + auto min_cross_size_px = min_cross_size.to_px(box, !is_row_layout() ? m_flex_container_state.content_width() : m_flex_container_state.content_height()); main_size = max(main_size, calculate_main_size_from_cross_size_and_aspect_ratio(min_cross_size_px, box.intrinsic_aspect_ratio().value())); }