From 9cded6e1b531cfdaed1b3458b571d5dee9b1599f Mon Sep 17 00:00:00 2001 From: Andreas Kling Date: Sat, 1 Apr 2023 15:19:21 +0200 Subject: [PATCH] LibWeb: Fix application of intrinsic aspect ratio to flex column items The intrinsic aspect ratio of a box is a width:height ratio, so if we have the width and need the height, we should divide, not multiply. :^) --- .../flex-item-with-intrinsic-aspect-ratio.txt | 4 ++++ .../input/flex-item-with-intrinsic-aspect-ratio.html | 11 +++++++++++ .../Libraries/LibWeb/Layout/FlexFormattingContext.cpp | 8 ++++++-- 3 files changed, 21 insertions(+), 2 deletions(-) create mode 100644 Tests/LibWeb/Layout/expected/flex-item-with-intrinsic-aspect-ratio.txt create mode 100644 Tests/LibWeb/Layout/input/flex-item-with-intrinsic-aspect-ratio.html diff --git a/Tests/LibWeb/Layout/expected/flex-item-with-intrinsic-aspect-ratio.txt b/Tests/LibWeb/Layout/expected/flex-item-with-intrinsic-aspect-ratio.txt new file mode 100644 index 0000000000..ffac888f15 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/flex-item-with-intrinsic-aspect-ratio.txt @@ -0,0 +1,4 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x200 children: not-inline + Box at (0,0) content-size 400x200 flex-container(column) children: not-inline + ImageBox at (0,0) content-size 400x200 flex-item children: not-inline diff --git a/Tests/LibWeb/Layout/input/flex-item-with-intrinsic-aspect-ratio.html b/Tests/LibWeb/Layout/input/flex-item-with-intrinsic-aspect-ratio.html new file mode 100644 index 0000000000..5b5077f46e --- /dev/null +++ b/Tests/LibWeb/Layout/input/flex-item-with-intrinsic-aspect-ratio.html @@ -0,0 +1,11 @@ + \ No newline at end of file diff --git a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp index 4fd235ee53..f2636de719 100644 --- a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp @@ -614,7 +614,9 @@ void FlexFormattingContext::determine_flex_base_size_and_hypothetical_main_size( && item.used_flex_basis.type == CSS::FlexBasis::Content && has_definite_cross_size(item.box)) { // flex_base_size is calculated from definite cross size and intrinsic aspect ratio - return resolved_definite_cross_size(item) * item.box->intrinsic_aspect_ratio().value(); + if (is_row_layout()) + return inner_cross_size(item.box) * item.box->intrinsic_aspect_ratio().value(); + return inner_cross_size(item.box) / item.box->intrinsic_aspect_ratio().value(); } // C. If the used flex basis is content or depends on its available space, @@ -724,7 +726,9 @@ Optional FlexFormattingContext::transferred_size_suggestion(FlexItem if (item.box->has_intrinsic_aspect_ratio() && has_definite_cross_size(item.box)) { auto aspect_ratio = item.box->intrinsic_aspect_ratio().value(); // FIXME: Clamp cross size to min/max cross size before this conversion. - return resolved_definite_cross_size(item) * aspect_ratio; + if (is_row_layout()) + return resolved_definite_cross_size(item) * aspect_ratio; + return resolved_definite_cross_size(item) / aspect_ratio; } // It is otherwise undefined.