LibWeb: Improve hypothetical flex item "auto" cross sizes

Take the used main size of the item into account (as available size)
when doing inner or intrinsic layout to determine the cross size.

1 files changed, 19 insertions, 8 deletions

diff --git a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
index 9456a444dc..a21dbb7461 100644
--- a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
+++ b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
@@ -1086,31 +1086,42 @@ void FlexFormattingContext::determine_hypothetical_cross_size_of_item(FlexItem&
 
     if (computed_cross_size(item.box).is_auto()) {
         // Item has automatic cross size, layout with "fit-content"
-        item.hypothetical_cross_size = css_clamp(calculate_fit_content_cross_size(item), clamp_min, clamp_max);
+
+        CSSPixels fit_content_cross_size = 0;
+        if (is_row_layout()) {
+            auto available_width = AvailableSize::make_definite(item.main_size);
+            auto available_height = AvailableSize::make_indefinite();
+            fit_content_cross_size = calculate_fit_content_height(item.box, AvailableSpace(available_width, available_height));
+        } else {
+            fit_content_cross_size = calculate_fit_content_width(item.box, m_available_space_for_items->space);
+        }
+
+        item.hypothetical_cross_size = css_clamp(fit_content_cross_size, clamp_min, clamp_max);
         return;
     }
 
     // For indefinite cross sizes, we perform a throwaway layout and then measure it.
     LayoutState throwaway_state(&m_state);
 
-    auto& containing_block_state = throwaway_state.get_mutable(flex_container());
+    auto& box_state = throwaway_state.get_mutable(item.box);
     if (is_row_layout()) {
-        containing_block_state.set_content_width(item.main_size);
+        box_state.set_content_width(item.main_size);
     } else {
-        containing_block_state.set_content_height(item.main_size);
+        box_state.set_content_height(item.main_size);
     }
 
-    auto& box_state = throwaway_state.get_mutable(item.box);
-
     // Item has definite main size, layout with that as the used main size.
     auto independent_formatting_context = create_independent_formatting_context_if_needed(throwaway_state, item.box);
     // NOTE: Flex items should always create an independent formatting context!
     VERIFY(independent_formatting_context);
 
-    independent_formatting_context->run(item.box, LayoutMode::Normal, m_available_space_for_items->space);
+    auto available_width = is_row_layout() ? AvailableSize::make_definite(item.main_size) : AvailableSize::make_indefinite();
+    auto available_height = is_row_layout() ? AvailableSize::make_indefinite() : AvailableSize::make_definite(item.main_size);
+
+    independent_formatting_context->run(item.box, LayoutMode::Normal, AvailableSpace(available_width, available_height));
 
     auto automatic_cross_size = is_row_layout() ? independent_formatting_context->automatic_content_height()
-                                                : box_state.content_width();
+                                                : independent_formatting_context->automatic_content_width();
 
     item.hypothetical_cross_size = css_clamp(automatic_cross_size, clamp_min, clamp_max);
 }