From dc13ced1a7bbada5ac301d86b0df38ae89b87da2 Mon Sep 17 00:00:00 2001 From: Andreas Kling Date: Tue, 12 Jul 2022 15:54:11 +0200 Subject: [PATCH] LibWeb: Express flex item cross axis alignment as offsets-from-center This allows us to perform cross axis alignment without knowing the final cross size of the flex container. --- .../LibWeb/Layout/FlexFormattingContext.cpp | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp index 4d6b36c1be..41056abeba 100644 --- a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp @@ -1240,20 +1240,20 @@ void FlexFormattingContext::align_all_flex_items_along_the_cross_axis() float line_cross_offset = 0; for (auto& flex_line : m_flex_lines) { for (auto* flex_item : flex_line.items) { + float half_line_size = flex_line.cross_size / 2.0f; switch (alignment_for_item(*flex_item)) { case CSS::AlignItems::Baseline: // FIXME: Implement this // Fallthrough case CSS::AlignItems::FlexStart: case CSS::AlignItems::Stretch: - flex_item->cross_offset = line_cross_offset + flex_item->margins.cross_before + flex_item->borders.cross_before + flex_item->padding.cross_before; + flex_item->cross_offset = 0 - half_line_size + flex_item->margins.cross_before + flex_item->borders.cross_before + flex_item->padding.cross_before; break; case CSS::AlignItems::FlexEnd: - flex_item->cross_offset = line_cross_offset + flex_line.cross_size - flex_item->cross_size; + flex_item->cross_offset = half_line_size - flex_item->cross_size - flex_item->margins.cross_after - flex_item->borders.cross_after - flex_item->padding.cross_after; break; case CSS::AlignItems::Center: - flex_item->cross_offset = line_cross_offset + (flex_line.cross_size / 2.0f) - (flex_item->cross_size / 2.0f); - break; + flex_item->cross_offset = 0 - (flex_item->cross_size / 2.0f); default: break; } @@ -1300,8 +1300,10 @@ void FlexFormattingContext::align_all_flex_lines() // 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); + float center_of_line = cross_size_of_flex_container / 2.0f; + for (auto* flex_item : flex_line.items) { + flex_item->cross_offset += center_of_line; + } } else { // FIXME: Support align-content }