LibWeb: Render flex line items RTL (reversed items) for FlexEnd

This is a basic attempt at trying to handle parent container case
justify-content: flex-end.

Test-scenario:
Head to https://ryanwatkins.me and note that now the header nav is on
the right as opposed to the left in-line with how Chrome/Firefox would
respectively handle it also, i.e. 'flex-end'

Implementation:
Move cursor to the end and render in reverse backwards shifting the
cursor leftwards.

1 files changed, 26 insertions, 11 deletions

diff --git a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
index 6ba615ad54..8fb51518c0 100644
--- a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
+++ b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
@@ -1179,28 +1179,40 @@ void FlexFormattingContext::distribute_any_remaining_free_space()
 
         // 12.2.
         float space_between_items = 0;
-        float space_before_first_item = 0;
+        float initial_offset = 0;
         auto number_of_items = flex_line.items.size();
 
+        enum class FlexRegionRenderCursor {
+            Left,
+            Right
+        };
+
+        auto flex_region_render_cursor = FlexRegionRenderCursor::Left;
+
         switch (flex_container().computed_values().justify_content()) {
         case CSS::JustifyContent::FlexStart:
+            initial_offset = 0;
+            break;
         case CSS::JustifyContent::FlexEnd:
-            space_before_first_item = 0;
+            flex_region_render_cursor = FlexRegionRenderCursor::Right;
+            initial_offset = m_available_space->main.value_or(NumericLimits<float>::max());
             break;
         case CSS::JustifyContent::Center:
-            space_before_first_item = (m_available_space->main.value_or(NumericLimits<float>::max()) - used_main_space) / 2.0f;
+            initial_offset = (m_available_space->main.value_or(NumericLimits<float>::max()) - used_main_space) / 2.0f;
             break;
         case CSS::JustifyContent::SpaceBetween:
             space_between_items = flex_line.remaining_free_space / (number_of_items - 1);
             break;
         case CSS::JustifyContent::SpaceAround:
             space_between_items = flex_line.remaining_free_space / number_of_items;
-            space_before_first_item = space_between_items / 2.0f;
+            initial_offset = space_between_items / 2.0f;
             break;
         }
 
-        // FIXME: Support reverse
-        float main_offset = space_before_first_item;
+        // For reverse, we use FlexRegionRenderCursor::Right
+        // to indicate the cursor offset is the end and render backwards
+        // Otherwise the cursor offset is the 'start' of the region or initial offset
+        float cursor_offset = initial_offset;
 
         auto place_item = [&](FlexItem& item) {
             auto amount_of_main_size_used = item.main_size
@@ -1213,15 +1225,18 @@ void FlexFormattingContext::distribute_any_remaining_free_space()
                 + space_between_items;
 
             if (is_direction_reverse()) {
-                item.main_offset = main_offset - item.main_size - item.margins.main_after - item.borders.main_after - item.padding.main_after;
-                main_offset -= amount_of_main_size_used;
+                item.main_offset = cursor_offset - item.main_size - item.margins.main_after - item.borders.main_after - item.padding.main_after;
+                cursor_offset -= amount_of_main_size_used;
+            } else if (flex_region_render_cursor == FlexRegionRenderCursor::Right) {
+                cursor_offset -= amount_of_main_size_used;
+                item.main_offset = cursor_offset + item.margins.main_before + item.borders.main_before + item.padding.main_before;
             } else {
-                item.main_offset = main_offset + item.margins.main_before + item.borders.main_before + item.padding.main_before;
-                main_offset += amount_of_main_size_used;
+                item.main_offset = cursor_offset + item.margins.main_before + item.borders.main_before + item.padding.main_before;
+                cursor_offset += amount_of_main_size_used;
             }
         };
 
-        if (is_direction_reverse()) {
+        if (is_direction_reverse() || flex_region_render_cursor == FlexRegionRenderCursor::Right) {
             for (auto& item : flex_line.items.in_reverse()) {
                 place_item(*item);
             }