diff --git a/Tests/LibWeb/Layout/expected/flex/flex-column-item-with-natural-aspect-ratio-and-automatic-cross-size.txt b/Tests/LibWeb/Layout/expected/flex/flex-column-item-with-natural-aspect-ratio-and-automatic-cross-size.txt new file mode 100644 index 0000000000..ea7b6c26b9 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/flex/flex-column-item-with-natural-aspect-ratio-and-automatic-cross-size.txt @@ -0,0 +1,5 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x100 [BFC] children: not-inline + Box at (0,0) content-size 800x100 flex-container(column) [FFC] children: not-inline + SVGSVGBox at (0,0) content-size 200x100 flex-item [SVG] children: not-inline + SVGGeometryBox at (0,0) content-size 200x100 children: not-inline diff --git a/Tests/LibWeb/Layout/input/flex/flex-column-item-with-natural-aspect-ratio-and-automatic-cross-size.html b/Tests/LibWeb/Layout/input/flex/flex-column-item-with-natural-aspect-ratio-and-automatic-cross-size.html new file mode 100644 index 0000000000..3677bcb188 --- /dev/null +++ b/Tests/LibWeb/Layout/input/flex/flex-column-item-with-natural-aspect-ratio-and-automatic-cross-size.html @@ -0,0 +1,14 @@ + \ No newline at end of file diff --git a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp index 1cfba61179..89a717b9b7 100644 --- a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp @@ -563,6 +563,13 @@ CSSPixels FlexFormattingContext::calculate_main_size_from_cross_size_and_aspect_ return cross_size / aspect_ratio; } +CSSPixels FlexFormattingContext::calculate_cross_size_from_main_size_and_aspect_ratio(CSSPixels main_size, double aspect_ratio) const +{ + if (is_row_layout()) + return main_size / aspect_ratio; + return main_size * aspect_ratio; +} + // This function takes a size in the main axis and adjusts it according to the aspect ratio of the box // if the min/max constraints in the cross axis forces us to come up with a new main axis size. 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 @@ -1150,6 +1157,11 @@ void FlexFormattingContext::determine_hypothetical_cross_size_of_item(FlexItem& if (should_treat_cross_size_as_auto(item.box)) { // Item has automatic cross size, layout with "fit-content" + if (item.box->has_preferred_aspect_ratio() && item.main_size.has_value()) { + item.hypothetical_cross_size = calculate_cross_size_from_main_size_and_aspect_ratio(item.main_size.value(), item.box->preferred_aspect_ratio().value()); + return; + } + CSSPixels fit_content_cross_size = 0; if (is_row_layout()) { auto available_width = item.main_size.has_value() ? AvailableSize::make_definite(item.main_size.value()) : AvailableSize::make_indefinite(); diff --git a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.h b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.h index 5335efb980..5a887b8c58 100644 --- a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.h +++ b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.h @@ -36,6 +36,7 @@ private: [[nodiscard]] CSSPixels adjust_main_size_through_aspect_ratio_for_cross_size_min_max_constraints(Box const&, CSSPixels main_size, CSS::Size const& min_cross_size, CSS::Size const& max_cross_size) const; [[nodiscard]] CSSPixels calculate_main_size_from_cross_size_and_aspect_ratio(CSSPixels cross_size, double aspect_ratio) const; + [[nodiscard]] CSSPixels calculate_cross_size_from_main_size_and_aspect_ratio(CSSPixels main_size, double aspect_ratio) const; void dump_items() const;