From 3aeb7a41c0e84c3b4c1efd8017e006609e6b97a7 Mon Sep 17 00:00:00 2001 From: Max Stevens Date: Wed, 14 Dec 2022 21:30:59 +0100 Subject: [PATCH] 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 --- .../LibWeb/Layout/FlexFormattingContext.cpp | 29 +++++++++++++++---- 1 file 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; } } }