LibWeb: Implement more values of flexbox align-content

Implement the values 'space-between' and 'space-around'
of the 'align-content' flexbox property.

The following WPT tests now pass:
- http://wpt.live/css/css-flexbox/align-content-004.htm
- http://wpt.live/css/css-flexbox/align-content-005.htm

1 files changed, 24 insertions, 5 deletions

diff --git a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
index eae3aa6634..86c212fc10 100644
--- a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
+++ b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
@@ -1451,6 +1451,7 @@ void FlexFormattingContext::align_all_flex_lines()
             sum_of_flex_line_cross_sizes += line.cross_size;
 
         float start_of_current_line = 0;
+        float gap_size = 0;
         switch (flex_container().computed_values().align_content()) {
         case CSS::AlignContent::FlexStart:
             start_of_current_line = 0;
@@ -1461,12 +1462,30 @@ void FlexFormattingContext::align_all_flex_lines()
         case CSS::AlignContent::Center:
             start_of_current_line = (cross_size_of_flex_container / 2) - (sum_of_flex_line_cross_sizes / 2);
             break;
-        case CSS::AlignContent::SpaceBetween:
-            dbgln("FIXME: align-content: space-between");
+        case CSS::AlignContent::SpaceBetween: {
+            start_of_current_line = 0;
+
+            float leftover_free_space = cross_size_of_flex_container - sum_of_flex_line_cross_sizes;
+            if (leftover_free_space >= 0) {
+                int gap_count = m_flex_lines.size() - 1;
+                gap_size = leftover_free_space / gap_count;
+            }
             break;
-        case CSS::AlignContent::SpaceAround:
-            dbgln("FIXME: align-content: space-around");
+        }
+        case CSS::AlignContent::SpaceAround: {
+            float leftover_free_space = cross_size_of_flex_container - sum_of_flex_line_cross_sizes;
+            if (leftover_free_space < 0) {
+                // If the leftover free-space is negative this value is identical to center.
+                start_of_current_line = (cross_size_of_flex_container / 2) - (sum_of_flex_line_cross_sizes / 2);
+                break;
+            }
+
+            gap_size = leftover_free_space / m_flex_lines.size();
+
+            // The spacing between the first/last lines and the flex container edges is half the size of the spacing between flex lines.
+            start_of_current_line = gap_size / 2;
             break;
+        }
         case CSS::AlignContent::Stretch:
             start_of_current_line = 0;
             break;
@@ -1477,7 +1496,7 @@ void FlexFormattingContext::align_all_flex_lines()
             for (auto* flex_item : flex_line.items) {
                 flex_item->cross_offset += center_of_current_line;
             }
-            start_of_current_line += flex_line.cross_size;
+            start_of_current_line += flex_line.cross_size + gap_size;
         }
     }
 }