LibWeb: Parse grid-column-start and related CSS properties

Parse grid-column-start, end, and the equivalent for rows.

Userland/Libraries/LibWeb/CSS/ComputedValues.h

@@ -62,6 +62,10 @@ public:
     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> {}; }
+    static CSS::GridTrackPlacement grid_column_end() { return CSS::GridTrackPlacement::make_auto(); }
+    static CSS::GridTrackPlacement grid_column_start() { return CSS::GridTrackPlacement::make_auto(); }
+    static CSS::GridTrackPlacement grid_row_end() { return CSS::GridTrackPlacement::make_auto(); }
+    static CSS::GridTrackPlacement grid_row_start() { return CSS::GridTrackPlacement::make_auto(); }
 };
 
 struct BackgroundLayerData {
@@ -174,6 +178,10 @@ public:
     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::GridTrackPlacement const& grid_column_end() const { return m_noninherited.grid_column_end; }
+    CSS::GridTrackPlacement const& grid_column_start() const { return m_noninherited.grid_column_start; }
+    CSS::GridTrackPlacement const& grid_row_end() const { return m_noninherited.grid_row_end; }
+    CSS::GridTrackPlacement const& grid_row_start() const { return m_noninherited.grid_row_start; }
 
     CSS::LengthBox const& inset() const { return m_noninherited.inset; }
     const CSS::LengthBox& margin() const { return m_noninherited.margin; }
@@ -290,6 +298,10 @@ protected:
         Variant<CSS::VerticalAlign, CSS::LengthPercentage> vertical_align { InitialValues::vertical_align() };
         Vector<CSS::GridTrackSize> grid_template_columns;
         Vector<CSS::GridTrackSize> grid_template_rows;
+        CSS::GridTrackPlacement grid_column_end { InitialValues::grid_column_end() };
+        CSS::GridTrackPlacement grid_column_start { InitialValues::grid_column_start() };
+        CSS::GridTrackPlacement grid_row_end { InitialValues::grid_row_end() };
+        CSS::GridTrackPlacement grid_row_start { InitialValues::grid_row_start() };
     } m_noninherited;
 };
 
@@ -362,6 +374,10 @@ public:
     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_grid_column_end(CSS::GridTrackPlacement value) { m_noninherited.grid_column_end = value; }
+    void set_grid_column_start(CSS::GridTrackPlacement value) { m_noninherited.grid_column_start = value; }
+    void set_grid_row_end(CSS::GridTrackPlacement value) { m_noninherited.grid_row_end = value; }
+    void set_grid_row_start(CSS::GridTrackPlacement value) { m_noninherited.grid_row_start = 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

@@ -5325,6 +5325,33 @@ RefPtr<StyleValue> Parser::parse_grid_track_sizes(Vector<ComponentValue> const&
     return GridTrackSizeStyleValue::create(params);
 }
 
+RefPtr<StyleValue> Parser::parse_grid_track_placement(Vector<ComponentValue> const& component_values)
+{
+    auto tokens = TokenStream { component_values };
+    auto current_token = tokens.next_token().token();
+
+    if (!tokens.has_next_token()) {
+        if (current_token.to_string() == "auto"sv)
+            return GridTrackPlacementStyleValue::create(CSS::GridTrackPlacement());
+        if (current_token.is(Token::Type::Number) && current_token.number().is_integer())
+            return GridTrackPlacementStyleValue::create(CSS::GridTrackPlacement(static_cast<int>(current_token.number_value())));
+        return {};
+    }
+
+    auto first_grid_track_placement = CSS::GridTrackPlacement();
+    if (current_token.to_string() == "span"sv) {
+        first_grid_track_placement.set_has_span(true);
+        tokens.skip_whitespace();
+        current_token = tokens.next_token().token();
+    }
+    if (current_token.is(Token::Type::Number) && current_token.number().is_integer())
+        first_grid_track_placement.set_position(static_cast<int>(current_token.number_value()));
+
+    if (!tokens.has_next_token())
+        return GridTrackPlacementStyleValue::create(first_grid_track_placement);
+    return {};
+}
+
 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 {
@@ -5455,6 +5482,22 @@ 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::GridColumnEnd:
+        if (auto parsed_value = parse_grid_track_placement(component_values))
+            return parsed_value.release_nonnull();
+        return ParseError::SyntaxError;
+    case PropertyID::GridColumnStart:
+        if (auto parsed_value = parse_grid_track_placement(component_values))
+            return parsed_value.release_nonnull();
+        return ParseError::SyntaxError;
+    case PropertyID::GridRowEnd:
+        if (auto parsed_value = parse_grid_track_placement(component_values))
+            return parsed_value.release_nonnull();
+        return ParseError::SyntaxError;
+    case PropertyID::GridRowStart:
+        if (auto parsed_value = parse_grid_track_placement(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();

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

@@ -360,6 +360,7 @@ private:
     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&);
+    RefPtr<StyleValue> parse_grid_track_placement(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,46 @@
       "normal"
     ]
   },
+  "grid-column-end": {
+    "inherited": false,
+    "initial": "auto",
+    "valid-identifiers": [
+      "auto"
+    ],
+    "valid-types": [
+      "string"
+    ]
+  },
+  "grid-column-start": {
+    "inherited": false,
+    "initial": "auto",
+    "valid-identifiers": [
+      "auto"
+    ],
+    "valid-types": [
+      "string"
+    ]
+  },
+  "grid-row-end": {
+    "inherited": false,
+    "initial": "auto",
+    "valid-identifiers": [
+      "auto"
+    ],
+    "valid-types": [
+      "string"
+    ]
+  },
+  "grid-row-start": {
+    "inherited": false,
+    "initial": "auto",
+    "valid-identifiers": [
+      "auto"
+    ],
+    "valid-types": [
+      "string"
+    ]
+  },
   "grid-template-columns": {
     "inherited": false,
     "initial": "auto",

Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp

@@ -295,6 +295,14 @@ 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::GridColumnEnd:
+        return GridTrackPlacementStyleValue::create(layout_node.computed_values().grid_column_end());
+    case CSS::PropertyID::GridColumnStart:
+        return GridTrackPlacementStyleValue::create(layout_node.computed_values().grid_column_start());
+    case CSS::PropertyID::GridRowEnd:
+        return GridTrackPlacementStyleValue::create(layout_node.computed_values().grid_row_end());
+    case CSS::PropertyID::GridRowStart:
+        return GridTrackPlacementStyleValue::create(layout_node.computed_values().grid_row_start());
     case CSS::PropertyID::GridTemplateColumns:
         return GridTrackSizeStyleValue::create(layout_node.computed_values().grid_template_columns());
     case CSS::PropertyID::GridTemplateRows:

Userland/Libraries/LibWeb/CSS/StyleProperties.cpp

@@ -667,4 +667,28 @@ Vector<CSS::GridTrackSize> StyleProperties::grid_template_rows() const
     return value->as_grid_track_size().grid_track_size();
 }
 
+CSS::GridTrackPlacement StyleProperties::grid_column_end() const
+{
+    auto value = property(CSS::PropertyID::GridColumnEnd);
+    return value->as_grid_track_placement().grid_track_placement();
+}
+
+CSS::GridTrackPlacement StyleProperties::grid_column_start() const
+{
+    auto value = property(CSS::PropertyID::GridColumnStart);
+    return value->as_grid_track_placement().grid_track_placement();
+}
+
+CSS::GridTrackPlacement StyleProperties::grid_row_end() const
+{
+    auto value = property(CSS::PropertyID::GridRowEnd);
+    return value->as_grid_track_placement().grid_track_placement();
+}
+
+CSS::GridTrackPlacement StyleProperties::grid_row_start() const
+{
+    auto value = property(CSS::PropertyID::GridRowStart);
+    return value->as_grid_track_placement().grid_track_placement();
+}
+
 }

Userland/Libraries/LibWeb/CSS/StyleProperties.h

@@ -83,6 +83,10 @@ public:
     Optional<CSS::FontVariant> font_variant() const;
     Vector<CSS::GridTrackSize> grid_template_columns() const;
     Vector<CSS::GridTrackSize> grid_template_rows() const;
+    CSS::GridTrackPlacement grid_column_end() const;
+    CSS::GridTrackPlacement grid_column_start() const;
+    CSS::GridTrackPlacement grid_row_end() const;
+    CSS::GridTrackPlacement grid_row_start() const;
 
     Vector<CSS::Transformation> transformations() const;
     CSS::TransformOrigin transform_origin() const;

Userland/Libraries/LibWeb/Layout/Node.cpp

@@ -527,6 +527,10 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
     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());
+    computed_values.set_grid_column_end(computed_style.grid_column_end());
+    computed_values.set_grid_column_start(computed_style.grid_column_start());
+    computed_values.set_grid_row_end(computed_style.grid_row_end());
+    computed_values.set_grid_row_start(computed_style.grid_row_start());
 
     if (auto fill = computed_style.property(CSS::PropertyID::Fill); fill->has_color())
         computed_values.set_fill(fill->to_color(*this));