From dbbc75f8fdc465e836b848f86f75f75a39d6acff Mon Sep 17 00:00:00 2001 From: Andreas Kling Date: Sat, 7 Jan 2023 18:08:31 +0100 Subject: 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. --- .../LibWeb/Layout/FlexFormattingContext.cpp | 27 +++++++++++++++------- 1 file changed, 19 insertions(+), 8 deletions(-) (limited to 'Userland') 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); } -- cgit v1.2.3