From ce93088a813cc88222f672391b3c9b61f5c10a0c Mon Sep 17 00:00:00 2001 From: Lukas Scheller Date: Tue, 4 Mar 2025 17:36:07 +0100 Subject: [PATCH] LibWeb: Respect margin boxes when center-aligning flex items --- .../LibWeb/Layout/FlexFormattingContext.cpp | 4 +++- .../expected/flex/align-center-margin.txt | 11 +++++++++++ .../Layout/input/flex/align-center-margin.html | 17 +++++++++++++++++ 3 files changed, 31 insertions(+), 1 deletion(-) create mode 100644 Tests/LibWeb/Layout/expected/flex/align-center-margin.txt create mode 100644 Tests/LibWeb/Layout/input/flex/align-center-margin.html diff --git a/Libraries/LibWeb/Layout/FlexFormattingContext.cpp b/Libraries/LibWeb/Layout/FlexFormattingContext.cpp index 99e1ec92d05..a18136f18d1 100644 --- a/Libraries/LibWeb/Layout/FlexFormattingContext.cpp +++ b/Libraries/LibWeb/Layout/FlexFormattingContext.cpp @@ -1476,7 +1476,9 @@ void FlexFormattingContext::align_all_flex_items_along_the_cross_axis() item.cross_offset = half_line_size - item.cross_size.value() - item.margins.cross_after - item.borders.cross_after - item.padding.cross_after; break; case CSS::AlignItems::Center: - item.cross_offset = -(item.cross_size.value() / 2); + // https://drafts.csswg.org/css-flexbox/#align-items-property + // The flex item’s margin box is centered in the cross axis within the line + item.cross_offset = (-item.cross_size.value() + item.margins.cross_before + item.borders.cross_before + item.padding.cross_before - item.margins.cross_after - item.borders.cross_after - item.padding.cross_after) / 2; break; default: break; diff --git a/Tests/LibWeb/Layout/expected/flex/align-center-margin.txt b/Tests/LibWeb/Layout/expected/flex/align-center-margin.txt new file mode 100644 index 00000000000..8c6aaf1bbd4 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/flex/align-center-margin.txt @@ -0,0 +1,11 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x216 [BFC] children: not-inline + Box at (8,8) content-size 784x200 flex-container(row) [FFC] children: not-inline + BlockContainer
at (8,58) content-size 100x100 flex-item [BFC] children: not-inline + BlockContainer at (108,108) content-size 100x100 flex-item [BFC] children: not-inline + +ViewportPaintable (Viewport<#document>) [0,0 800x600] + PaintableWithLines (BlockContainer) [0,0 800x216] + PaintableBox (Box) [8,8 784x200] + PaintableWithLines (BlockContainer
) [8,58 100x100] + PaintableWithLines (BlockContainer) [108,108 100x100] diff --git a/Tests/LibWeb/Layout/input/flex/align-center-margin.html b/Tests/LibWeb/Layout/input/flex/align-center-margin.html new file mode 100644 index 00000000000..6a3c27d372a --- /dev/null +++ b/Tests/LibWeb/Layout/input/flex/align-center-margin.html @@ -0,0 +1,17 @@ +
\ No newline at end of file