From b9b6037d2ba312d5e31a7c10f0e9874a96d67936 Mon Sep 17 00:00:00 2001 From: Andreas Kling Date: Sun, 16 Apr 2023 19:31:55 +0200 Subject: [PATCH] LibWeb: Honor gap between flex lines when using align-content: stretch We have to take the cross gap into account when calculating the "sum of flex line cross sizes" in "Handle 'align-content: stretch'". --- .../flex/stretch-alignment-with-cross-gap.txt | 10 ++++++++++ .../flex/stretch-alignment-with-cross-gap.html | 17 +++++++++++++++++ .../LibWeb/Layout/FlexFormattingContext.cpp | 3 +++ 3 files changed, 30 insertions(+) create mode 100644 Tests/LibWeb/Layout/expected/flex/stretch-alignment-with-cross-gap.txt create mode 100644 Tests/LibWeb/Layout/input/flex/stretch-alignment-with-cross-gap.html diff --git a/Tests/LibWeb/Layout/expected/flex/stretch-alignment-with-cross-gap.txt b/Tests/LibWeb/Layout/expected/flex/stretch-alignment-with-cross-gap.txt new file mode 100644 index 0000000000..3e244f8c6c --- /dev/null +++ b/Tests/LibWeb/Layout/expected/flex/stretch-alignment-with-cross-gap.txt @@ -0,0 +1,10 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (1,1) content-size 798x220 children: not-inline + BlockContainer at (10,10) content-size 780x202 children: not-inline + Box at (11,11) content-size 300x200 flex-container(row) children: not-inline + BlockContainer
at (12,12) content-size 100x20 flex-item children: not-inline + BlockContainer
at (114,12) content-size 100x20 flex-item children: not-inline + BlockContainer
at (12,95.333328) content-size 100x20 flex-item children: not-inline + BlockContainer
at (114,95.333328) content-size 100x20 flex-item children: not-inline + BlockContainer
at (12,178.666656) content-size 100x20 flex-item children: not-inline + BlockContainer
at (114,178.666656) content-size 100x20 flex-item children: not-inline diff --git a/Tests/LibWeb/Layout/input/flex/stretch-alignment-with-cross-gap.html b/Tests/LibWeb/Layout/input/flex/stretch-alignment-with-cross-gap.html new file mode 100644 index 0000000000..bb064ff4bb --- /dev/null +++ b/Tests/LibWeb/Layout/input/flex/stretch-alignment-with-cross-gap.html @@ -0,0 +1,17 @@ +
\ No newline at end of file diff --git a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp index 999e8185b3..c18e2f781f 100644 --- a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp @@ -2022,6 +2022,9 @@ void FlexFormattingContext::handle_align_content_stretch() for (auto& line : m_flex_lines) sum_of_flex_line_cross_sizes += line.cross_size; + // CSS-FLEXBOX-2: Account for gap between flex lines. + sum_of_flex_line_cross_sizes += cross_gap() * (m_flex_lines.size() - 1); + if (sum_of_flex_line_cross_sizes >= inner_cross_size(flex_container())) return;