From aa245f9f180e2f7f473027cf8655debb2acfa9b0 Mon Sep 17 00:00:00 2001 From: Andreas Kling Date: Mon, 8 Jan 2024 11:29:53 +0100 Subject: [PATCH] LibWeb: Fix reverse flex layout with `justify-content: normal` Before this change, we used the wrong insertion point for flex items in reverse layouts with `justify-content: normal`. This caused flex items to overflow the flex containers "backwards" from the start edge. --- .../reverse-with-justify-content-normal.txt | 15 ++++++++++++ .../reverse-with-justify-content-normal.html | 23 +++++++++++++++++++ .../LibWeb/Layout/FlexFormattingContext.cpp | 8 +++---- 3 files changed, 42 insertions(+), 4 deletions(-) create mode 100644 Tests/LibWeb/Layout/expected/flex/reverse-with-justify-content-normal.txt create mode 100644 Tests/LibWeb/Layout/input/flex/reverse-with-justify-content-normal.html diff --git a/Tests/LibWeb/Layout/expected/flex/reverse-with-justify-content-normal.txt b/Tests/LibWeb/Layout/expected/flex/reverse-with-justify-content-normal.txt new file mode 100644 index 0000000000..987259ef84 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/flex/reverse-with-justify-content-normal.txt @@ -0,0 +1,15 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x416 [BFC] children: not-inline + BlockContainer at (8,8) content-size 784x400 children: not-inline + Box at (8,8) content-size 200x200 flex-container(row-reverse) [FFC] children: not-inline + BlockContainer at (108,8) content-size 100x100 flex-item [BFC] children: not-inline + Box at (8,208) content-size 200x200 flex-container(column-reverse) [FFC] children: not-inline + BlockContainer at (8,308) content-size 100x100 flex-item [BFC] children: not-inline + +ViewportPaintable (Viewport<#document>) [0,0 800x600] + PaintableWithLines (BlockContainer) [0,0 800x416] + PaintableWithLines (BlockContainer) [8,8 784x400] + PaintableBox (Box
.flex.row) [8,8 200x200] + PaintableWithLines (BlockContainer
.item) [108,8 100x100] + PaintableBox (Box
.flex.column) [8,208 200x200] + PaintableWithLines (BlockContainer
.item) [8,308 100x100] diff --git a/Tests/LibWeb/Layout/input/flex/reverse-with-justify-content-normal.html b/Tests/LibWeb/Layout/input/flex/reverse-with-justify-content-normal.html new file mode 100644 index 0000000000..d025e8f233 --- /dev/null +++ b/Tests/LibWeb/Layout/input/flex/reverse-with-justify-content-normal.html @@ -0,0 +1,23 @@ +
\ No newline at end of file diff --git a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp index ec822096b9..7da85a1426 100644 --- a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp @@ -1319,10 +1319,10 @@ void FlexFormattingContext::distribute_any_remaining_free_space() if (auto_margins == 0 && number_of_items > 0) { switch (flex_container().computed_values().justify_content()) { case CSS::JustifyContent::Start: - case CSS::JustifyContent::Stretch: - case CSS::JustifyContent::Normal: initial_offset = 0; break; + case CSS::JustifyContent::Stretch: + case CSS::JustifyContent::Normal: case CSS::JustifyContent::FlexStart: if (is_direction_reverse()) { initial_offset = inner_main_size(flex_container()); @@ -2225,10 +2225,10 @@ CSSPixelPoint FlexFormattingContext::calculate_static_position(Box const& box) c CSSPixels main_offset = 0; switch (flex_container().computed_values().justify_content()) { case CSS::JustifyContent::Start: - case CSS::JustifyContent::Stretch: - case CSS::JustifyContent::Normal: pack_from_end = false; break; + case CSS::JustifyContent::Stretch: + case CSS::JustifyContent::Normal: case CSS::JustifyContent::FlexStart: case CSS::JustifyContent::SpaceBetween: pack_from_end = is_direction_reverse();