diff --git a/Tests/LibWeb/Layout/expected/grid/repeat-auto-fit-fill-cannot-have-auto.txt b/Tests/LibWeb/Layout/expected/grid/repeat-auto-fit-fill-cannot-have-auto.txt new file mode 100644 index 0000000000..3579277468 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/grid/repeat-auto-fit-fill-cannot-have-auto.txt @@ -0,0 +1,62 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x50 [BFC] children: not-inline + BlockContainer at (8,8) content-size 784x34 children: not-inline + BlockContainer
at (8,8) content-size 784x34 children: not-inline + BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline + TextNode <#text> + Box at (8,8) content-size 784x34 [GFC] children: not-inline + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + BlockContainer
at (8,8) content-size 196x17 [BFC] children: inline + frag 0 from TextNode start: 0, length: 1, rect: [8,8 14.265625x17] baseline: 13.296875 + "A" + TextNode <#text> + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + BlockContainer
at (204,8) content-size 196x17 [BFC] children: inline + frag 0 from TextNode start: 0, length: 1, rect: [204,8 9.34375x17] baseline: 13.296875 + "B" + TextNode <#text> + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + BlockContainer
at (400,8) content-size 196x17 [BFC] children: inline + frag 0 from TextNode start: 0, length: 1, rect: [400,8 10.3125x17] baseline: 13.296875 + "C" + TextNode <#text> + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + BlockContainer
at (596,8) content-size 196x17 [BFC] children: inline + frag 0 from TextNode start: 0, length: 1, rect: [596,8 11.140625x17] baseline: 13.296875 + "D" + TextNode <#text> + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + BlockContainer
at (8,25) content-size 196x17 [BFC] children: inline + frag 0 from TextNode start: 0, length: 1, rect: [8,25 11.859375x17] baseline: 13.296875 + "E" + TextNode <#text> + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + BlockContainer <(anonymous)> at (8,42) content-size 784x0 children: inline + TextNode <#text> + BlockContainer <(anonymous)> at (8,42) content-size 784x0 children: inline + TextNode <#text> + +ViewportPaintable (Viewport<#document>) [0,0 800x600] + PaintableWithLines (BlockContainer) [0,0 800x50] + PaintableWithLines (BlockContainer) [8,8 784x34] + PaintableWithLines (BlockContainer
) [8,8 784x34] + PaintableWithLines (BlockContainer(anonymous)) [8,8 784x0] + PaintableBox (Box
.four) [8,8 784x34] + PaintableWithLines (BlockContainer
) [8,8 196x17] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer
) [204,8 196x17] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer
) [400,8 196x17] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer
) [596,8 196x17] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer
) [8,25 196x17] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer(anonymous)) [8,42 784x0] + PaintableWithLines (BlockContainer(anonymous)) [8,42 784x0] diff --git a/Tests/LibWeb/Layout/input/grid/repeat-auto-fit-fill-cannot-have-auto.html b/Tests/LibWeb/Layout/input/grid/repeat-auto-fit-fill-cannot-have-auto.html new file mode 100644 index 0000000000..8c3026f89f --- /dev/null +++ b/Tests/LibWeb/Layout/input/grid/repeat-auto-fit-fill-cannot-have-auto.html @@ -0,0 +1,17 @@ + + +
+
+
A
+
B
+
C
+
D
+
E
+
+
diff --git a/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp b/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp index 264803ae3d..f38249cb95 100644 --- a/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp +++ b/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp @@ -5,6 +5,7 @@ * Copyright (c) 2021, Tobias Christiansen * Copyright (c) 2022, MacDue * Copyright (c) 2024, Shannon Booth + * Copyright (c) 2024, Tommy van der Vorst * * SPDX-License-Identifier: BSD-2-Clause */ @@ -5469,9 +5470,18 @@ Optional Parser::parse_repeat(Vector const& com // The repeat() notation can’t be nested. if (track_sizing_function.value().is_repeat()) return {}; + // Automatic repetitions (auto-fill or auto-fit) cannot be combined with intrinsic or flexible sizes. - if (track_sizing_function.value().is_default() && track_sizing_function.value().grid_size().is_flexible_length() && (is_auto_fill || is_auto_fit)) + // Note that 'auto' is also an intrinsic size (and thus not permitted) but we can't use + // track_sizing_function.is_auto(..) to check for it, as it requires AvailableSize, which is why there is + // a separate check for it below. + // https://www.w3.org/TR/css-grid-2/#repeat-syntax + // https://www.w3.org/TR/css-grid-2/#intrinsic-sizing-function + if (track_sizing_function.value().is_default() + && (track_sizing_function.value().grid_size().is_flexible_length() || token.is_ident("auto"sv)) + && (is_auto_fill || is_auto_fit)) return {}; + repeat_params.append(track_sizing_function.value()); part_two_tokens.skip_whitespace(); }