LibWeb/CSS: Do not check integer type in grid placement parser

The token may not be of integer type, yet it can still qualify as a valid grid line number because: "Additionally, math functions that resolve to <number> can be used in any place that only accepts <integer>; the value is rounded to the nearest integer as it resolves." From w3.org/TR/css-values-4/#calc-type-checking Fixes SerenityOS#22802
kalenikaliaksandr · Jan 18, 2024 · 206d90f · 206d90f
1 parent d186582
commit 206d90f
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 1 deletion.
diff --git a/Tests/LibWeb/Layout/expected/grid/css-calc-in-grid-position-2.txt b/Tests/LibWeb/Layout/expected/grid/css-calc-in-grid-position-2.txt
@@ -0,0 +1,63 @@
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x50 [BFC] children: not-inline
+    Box <body> at (8,8) content-size 600x34 [GFC] children: not-inline
+      BlockContainer <(anonymous)> (not painted) [BFC] children: inline
+        TextNode <#text>
+        TextNode <#text>
+      BlockContainer <div.title> at (458.25,8) content-size 48.0625x17 [BFC] children: inline
+        frag 0 from TextNode start: 0, length: 7, rect: [458.25,8 45.578125x17] baseline: 13.296875
+            "title 1"
+        TextNode <#text>
+      BlockContainer <(anonymous)> (not painted) [BFC] children: inline
+        TextNode <#text>
+      BlockContainer <div.text> at (8,25) content-size 48.96875x17 [BFC] children: inline
+        frag 0 from TextNode start: 0, length: 6, rect: [8,25 46.484375x17] baseline: 13.296875
+            "text 1"
+        TextNode <#text>
+      BlockContainer <(anonymous)> (not painted) [BFC] children: inline
+        TextNode <#text>
+        TextNode <#text>
+        TextNode <#text>
+      BlockContainer <div.title> at (506.3125,8) content-size 50.53125x17 [BFC] children: inline
+        frag 0 from TextNode start: 0, length: 7, rect: [506.3125,8 48.046875x17] baseline: 13.296875
+            "title 2"
+        TextNode <#text>
+      BlockContainer <(anonymous)> (not painted) [BFC] children: inline
+        TextNode <#text>
+      BlockContainer <div.text> at (56.96875,25) content-size 51.4375x17 [BFC] children: inline
+        frag 0 from TextNode start: 0, length: 6, rect: [56.96875,25 48.953125x17] baseline: 13.296875
+            "text 2"
+        TextNode <#text>
+      BlockContainer <(anonymous)> (not painted) [BFC] children: inline
+        TextNode <#text>
+        TextNode <#text>
+        TextNode <#text>
+      BlockContainer <div.title> at (556.84375,8) content-size 50.8125x17 [BFC] children: inline
+        frag 0 from TextNode start: 0, length: 7, rect: [556.84375,8 48.328125x17] baseline: 13.296875
+            "title 3"
+        TextNode <#text>
+      BlockContainer <(anonymous)> (not painted) [BFC] children: inline
+        TextNode <#text>
+      BlockContainer <div.text> at (108.40625,25) content-size 51.71875x17 [BFC] children: inline
+        frag 0 from TextNode start: 0, length: 6, rect: [108.40625,25 49.234375x17] baseline: 13.296875
+            "text 3"
+        TextNode <#text>
+      BlockContainer <(anonymous)> (not painted) [BFC] children: inline
+        TextNode <#text>
+        TextNode <#text>
+
+ViewportPaintable (Viewport<#document>) [0,0 800x600]
+  PaintableWithLines (BlockContainer<HTML>) [0,0 800x50]
+    PaintableBox (Box<BODY>) [8,8 600x34]
+      PaintableWithLines (BlockContainer<DIV>.title) [458.25,8 48.0625x17]
+        TextPaintable (TextNode<#text>)
+      PaintableWithLines (BlockContainer<DIV>.text) [8,25 48.96875x17]
+        TextPaintable (TextNode<#text>)
+      PaintableWithLines (BlockContainer<DIV>.title) [506.3125,8 50.53125x17]
+        TextPaintable (TextNode<#text>)
+      PaintableWithLines (BlockContainer<DIV>.text) [56.96875,25 51.4375x17]
+        TextPaintable (TextNode<#text>)
+      PaintableWithLines (BlockContainer<DIV>.title) [556.84375,8 50.8125x17]
+        TextPaintable (TextNode<#text>)
+      PaintableWithLines (BlockContainer<DIV>.text) [108.40625,25 51.71875x17]
+        TextPaintable (TextNode<#text>)
diff --git a/Tests/LibWeb/Layout/input/grid/css-calc-in-grid-position-2.html b/Tests/LibWeb/Layout/input/grid/css-calc-in-grid-position-2.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html><style>
+    * {
+        outline: 1px solid black;
+    }
+    body {
+        display: grid;
+        width: 600px;
+    }
+    .column {
+        display: contents;
+    }
+    .title {
+        grid-column: calc(var(--column-index) + 123.5);
+        grid-row: calc(3);
+    }
+    .text {
+        grid-column: calc(var(--column-index));
+        grid-row: calc(4);
+    }
+    </style>
+    <body>
+    <div class="column" style="--column-index: 1">
+        <div class="title">title 1</div>
+        <div class="text">text 1</div>
+    </div>
+    <div class="column" style="--column-index: 2">
+        <div class="title">title 2</div>
+        <div class="text">text 2</div>
+    </div>
+    <div class="column" style="--column-index: 3">
+        <div class="title">title 3</div>
+        <div class="text">text 3</div>
+    </div>
+    </body>
diff --git a/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp b/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp
@@ -5675,7 +5675,7 @@ RefPtr<StyleValue> Parser::parse_grid_track_placement(TokenStream<ComponentValue
     //     [ span && [ <integer> || <custom-ident> ] ]
     auto is_valid_integer = [](auto& token) -> bool {
         // An <integer> value of zero makes the declaration invalid.
-        if (token.is(Token::Type::Number) && token.token().number().is_integer() && token.token().number_value() != 0)
+        if (token.is(Token::Type::Number) && token.token().number_value() != 0)
             return true;
         return false;
     };