LibWeb: Parse grid-template-columns and grid-template-rows

Add functionality to begin parsing grid-template-columns and
grid-template-rows. There are still things to be added, like parsing
functions, but I would say a couple of the major points are already
adressed like length, percentage, and flexible-length.

Userland/Libraries/LibWeb/CSS/ComputedValues.h

@@ -60,6 +60,8 @@ public:
     static CSS::Length height() { return CSS::Length::make_auto(); }
     static CSS::Length min_height() { return CSS::Length::make_auto(); }
     static CSS::Length max_height() { return CSS::Length::make_auto(); }
+    static Vector<CSS::GridTrackSize> grid_template_columns() { return Vector<CSS::GridTrackSize> {}; }
+    static Vector<CSS::GridTrackSize> grid_template_rows() { return Vector<CSS::GridTrackSize> {}; }
 };
 
 struct BackgroundLayerData {
@@ -170,6 +172,8 @@ public:
     CSS::LengthPercentage const& min_height() const { return m_noninherited.min_height; }
     CSS::LengthPercentage const& max_height() const { return m_noninherited.max_height; }
     Variant<CSS::VerticalAlign, CSS::LengthPercentage> const& vertical_align() const { return m_noninherited.vertical_align; }
+    Vector<CSS::GridTrackSize> const& grid_template_columns() const { return m_noninherited.grid_template_columns; }
+    Vector<CSS::GridTrackSize> const& grid_template_rows() const { return m_noninherited.grid_template_rows; }
 
     CSS::LengthBox const& inset() const { return m_noninherited.inset; }
     const CSS::LengthBox& margin() const { return m_noninherited.margin; }
@@ -284,6 +288,8 @@ protected:
         CSS::BoxSizing box_sizing { InitialValues::box_sizing() };
         CSS::ContentData content;
         Variant<CSS::VerticalAlign, CSS::LengthPercentage> vertical_align { InitialValues::vertical_align() };
+        Vector<CSS::GridTrackSize> grid_template_columns;
+        Vector<CSS::GridTrackSize> grid_template_rows;
     } m_noninherited;
 };
 
@@ -354,6 +360,8 @@ public:
     void set_box_sizing(CSS::BoxSizing value) { m_noninherited.box_sizing = value; }
     void set_vertical_align(Variant<CSS::VerticalAlign, CSS::LengthPercentage> value) { m_noninherited.vertical_align = value; }
     void set_visibility(CSS::Visibility value) { m_inherited.visibility = value; }
+    void set_grid_template_columns(Vector<CSS::GridTrackSize> value) { m_noninherited.grid_template_columns = value; }
+    void set_grid_template_rows(Vector<CSS::GridTrackSize> value) { m_noninherited.grid_template_rows = value; }
 
     void set_fill(Color value) { m_inherited.fill = value; }
     void set_stroke(Color value) { m_inherited.stroke = value; }

Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp

@@ -5301,6 +5301,30 @@ RefPtr<StyleValue> Parser::parse_as_css_value(PropertyID property_id)
     return parsed_value.release_value();
 }
 
+RefPtr<StyleValue> Parser::parse_grid_track_sizes(Vector<ComponentValue> const& component_values)
+{
+    Vector<CSS::GridTrackSize> params;
+    for (auto& component_value : component_values) {
+        // FIXME: Incomplete as a GridTrackSize can be a function like minmax(min, max), etc.
+        if (component_value.is_function())
+            return {};
+        if (component_value.is(Token::Type::Ident) && component_value.token().ident().equals_ignoring_case("auto"sv)) {
+            params.append(Length::make_auto());
+            continue;
+        }
+        auto dimension = parse_dimension(component_value);
+        if (!dimension.has_value())
+            return {};
+        if (dimension->is_length())
+            params.append(dimension->length());
+        if (dimension->is_percentage())
+            params.append(dimension->percentage());
+    }
+    if (params.size() == 0)
+        return {};
+    return GridTrackSizeStyleValue::create(params);
+}
+
 Parser::ParseErrorOr<NonnullRefPtr<StyleValue>> Parser::parse_css_value(PropertyID property_id, TokenStream<ComponentValue>& tokens)
 {
     auto function_contains_var_or_attr = [](Function const& function, auto&& recurse) -> bool {
@@ -5431,6 +5455,14 @@ Parser::ParseErrorOr<NonnullRefPtr<StyleValue>> Parser::parse_css_value(Property
         if (auto parsed_value = parse_font_family_value(component_values))
             return parsed_value.release_nonnull();
         return ParseError::SyntaxError;
+    case PropertyID::GridTemplateColumns:
+        if (auto parsed_value = parse_grid_track_sizes(component_values))
+            return parsed_value.release_nonnull();
+        return ParseError::SyntaxError;
+    case PropertyID::GridTemplateRows:
+        if (auto parsed_value = parse_grid_track_sizes(component_values))
+            return parsed_value.release_nonnull();
+        return ParseError::SyntaxError;
     case PropertyID::ListStyle:
         if (auto parsed_value = parse_list_style_value(component_values))
             return parsed_value.release_nonnull();

Userland/Libraries/LibWeb/CSS/Parser/Parser.h

@@ -359,6 +359,7 @@ private:
     RefPtr<StyleValue> parse_text_decoration_line_value(TokenStream<ComponentValue>&);
     RefPtr<StyleValue> parse_transform_value(Vector<ComponentValue> const&);
     RefPtr<StyleValue> parse_transform_origin_value(Vector<ComponentValue> const&);
+    RefPtr<StyleValue> parse_grid_track_sizes(Vector<ComponentValue> const&);
 
     // calc() parsing, according to https://www.w3.org/TR/css-values-3/#calc-syntax
     OwnPtr<CalculatedStyleValue::CalcSum> parse_calc_sum(TokenStream<ComponentValue>&);

Userland/Libraries/LibWeb/CSS/Properties.json

@@ -694,6 +694,32 @@
       "normal"
     ]
   },
+  "grid-template-columns": {
+    "inherited": false,
+    "initial": "auto",
+    "max-values": 4,
+    "valid-identifiers": [
+      "auto"
+    ],
+    "valid-types": [
+      "length",
+      "percentage",
+      "string"
+    ]
+  },
+  "grid-template-rows": {
+    "inherited": false,
+    "initial": "auto",
+    "max-values": 4,
+    "valid-identifiers": [
+      "auto"
+    ],
+    "valid-types": [
+      "length",
+      "percentage",
+      "string"
+    ]
+  },
   "height": {
     "inherited": false,
     "initial": "auto",

Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp

@@ -295,6 +295,10 @@ RefPtr<StyleValue> ResolvedCSSStyleDeclaration::style_value_for_property(Layout:
         return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().flex_wrap()));
     case CSS::PropertyID::Float:
         return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().float_()));
+    case CSS::PropertyID::GridTemplateColumns:
+        return GridTrackSizeStyleValue::create(layout_node.computed_values().grid_template_columns());
+    case CSS::PropertyID::GridTemplateRows:
+        return GridTrackSizeStyleValue::create(layout_node.computed_values().grid_template_rows());
     case CSS::PropertyID::Height:
         return style_value_for_length_percentage(layout_node.computed_values().height());
     case CSS::PropertyID::ImageRendering:

Userland/Libraries/LibWeb/CSS/StyleProperties.cpp

@@ -655,4 +655,16 @@ Optional<CSS::FontVariant> StyleProperties::font_variant() const
     return value_id_to_font_variant(value->to_identifier());
 }
 
+Vector<CSS::GridTrackSize> StyleProperties::grid_template_columns() const
+{
+    auto value = property(CSS::PropertyID::GridTemplateColumns);
+    return value->as_grid_track_size().grid_track_size();
+}
+
+Vector<CSS::GridTrackSize> StyleProperties::grid_template_rows() const
+{
+    auto value = property(CSS::PropertyID::GridTemplateRows);
+    return value->as_grid_track_size().grid_track_size();
+}
+
 }

Userland/Libraries/LibWeb/CSS/StyleProperties.h

@@ -81,6 +81,8 @@ public:
     Optional<CSS::PointerEvents> pointer_events() const;
     Variant<CSS::VerticalAlign, CSS::LengthPercentage> vertical_align() const;
     Optional<CSS::FontVariant> font_variant() const;
+    Vector<CSS::GridTrackSize> grid_template_columns() const;
+    Vector<CSS::GridTrackSize> grid_template_rows() const;
 
     Vector<CSS::Transformation> transformations() const;
     CSS::TransformOrigin transform_origin() const;

Userland/Libraries/LibWeb/Layout/Node.cpp

@@ -525,6 +525,8 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
     do_border_style(computed_values.border_bottom(), CSS::PropertyID::BorderBottomWidth, CSS::PropertyID::BorderBottomColor, CSS::PropertyID::BorderBottomStyle);
 
     computed_values.set_content(computed_style.content());
+    computed_values.set_grid_template_columns(computed_style.grid_template_columns());
+    computed_values.set_grid_template_rows(computed_style.grid_template_rows());
 
     if (auto fill = computed_style.property(CSS::PropertyID::Fill); fill->has_color())
         computed_values.set_fill(fill->to_color(*this));