From a3a10b2379de74fa8810dd1626c914c3fa0fd505 Mon Sep 17 00:00:00 2001
From: Andreas Kling <kling@serenityos.org>
Date: Sun, 27 Feb 2022 23:58:54 +0100
Subject: [PATCH] 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();