From a3a10b2379de74fa8810dd1626c914c3fa0fd505 Mon Sep 17 00:00:00 2001 From: Andreas Kling Date: Sun, 27 Feb 2022 23:58:54 +0100 Subject: LibWeb: Fix flex line alignment in single-line flex containers For single-line flex containers, center the only flex line along the cross axis. Alignment of multi-line flex containers are left as a FIXME. This patch also moves out the assignment of final metrics to the FormattingState from align_all_flex_lines() to a separate function. --- .../LibWeb/Layout/FlexFormattingContext.cpp | 28 +++++++++++++++------- .../LibWeb/Layout/FlexFormattingContext.h | 1 + 2 files changed, 20 insertions(+), 9 deletions(-) diff --git a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp index b545861d5b..db05ad4cf2 100644 --- a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp @@ -148,16 +148,17 @@ void FlexFormattingContext::run(Box const& run_box, LayoutMode) align_all_flex_lines(); // AD-HOC: Layout the inside of all flex items. + copy_dimensions_from_flex_items_to_boxes(); for (auto& flex_item : m_flex_items) { auto independent_formatting_context = layout_inside(flex_item.box, LayoutMode::Default); independent_formatting_context->parent_context_did_dimension_child_root_box(); } - // FIXME: We run the "align all flex lines" step *again* here, in order to override any sizes + // FIXME: We run the "copy dimensions" step *again* here, in order to override any sizes // assigned to the flex item by the "layout inside" step above. This is definitely not // part of the spec, and simply covering up the fact that our inside layout currently // mutates the height of BFC roots. - align_all_flex_lines(); + copy_dimensions_from_flex_items_to_boxes(); } void FlexFormattingContext::populate_specified_margins(FlexItem& item, CSS::FlexDirection flex_direction) const @@ -1004,15 +1005,24 @@ void FlexFormattingContext::determine_flex_container_used_cross_size(float const // https://www.w3.org/TR/css-flexbox-1/#algo-line-align void FlexFormattingContext::align_all_flex_lines() { - // FIXME: Support align-content // FIXME: Support reverse - for (auto& flex_line : m_flex_lines) { - for (auto* flex_item : flex_line.items) { - set_main_size(flex_item->box, flex_item->main_size); - set_cross_size(flex_item->box, flex_item->cross_size); - set_offset(flex_item->box, flex_item->main_offset, flex_item->cross_offset); - } + if (is_single_line()) { + // For single-line flex containers, we only need to center the line along the cross axis. + auto& flex_line = m_flex_lines[0]; + float cross_size_of_flex_container = specified_cross_size(flex_container()); + for (auto* flex_item : flex_line.items) + flex_item->cross_offset += (cross_size_of_flex_container / 2.0f) - (flex_line.cross_size / 2.0f); + } else { + // FIXME: Support align-content } } +void FlexFormattingContext::copy_dimensions_from_flex_items_to_boxes() +{ + for (auto& flex_item : m_flex_items) { + set_main_size(flex_item.box, flex_item.main_size); + set_cross_size(flex_item.box, flex_item.cross_size); + set_offset(flex_item.box, flex_item.main_offset, flex_item.cross_offset); + } +} } diff --git a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.h b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.h index 12acfe4fc3..0cab0c0b08 100644 --- a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.h +++ b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.h @@ -81,6 +81,7 @@ private: void set_main_axis_second_margin(Box const&, float margin); void setup_initial_width_and_height(); + void copy_dimensions_from_flex_items_to_boxes(); void generate_anonymous_flex_items(); -- cgit v1.2.3