LibWeb: Parse grid-column and grid-row CSS values

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

@@ -5352,6 +5352,46 @@ RefPtr<StyleValue> Parser::parse_grid_track_placement(Vector<ComponentValue> con
     return {};
 }
 
+RefPtr<StyleValue> Parser::parse_grid_track_placement_shorthand_value(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 GridTrackPlacementShorthandStyleValue::create(CSS::GridTrackPlacement::make_auto());
+        if (current_token.is(Token::Type::Number) && current_token.number().is_integer())
+            return GridTrackPlacementShorthandStyleValue::create(CSS::GridTrackPlacement(current_token.number_value()));
+        return {};
+    }
+
+    auto calculate_grid_track_placement = [](auto& current_token, auto& tokens) -> CSS::GridTrackPlacement {
+        auto grid_track_placement = CSS::GridTrackPlacement();
+        if (current_token.to_string() == "span"sv) {
+            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())
+            grid_track_placement.set_position(static_cast<int>(current_token.number_value()));
+        return grid_track_placement;
+    };
+
+    auto first_grid_track_placement = calculate_grid_track_placement(current_token, tokens);
+    if (!tokens.has_next_token())
+        return GridTrackPlacementShorthandStyleValue::create(CSS::GridTrackPlacement(first_grid_track_placement));
+
+    tokens.skip_whitespace();
+    current_token = tokens.next_token().token();
+    tokens.skip_whitespace();
+    current_token = tokens.next_token().token();
+
+    auto second_grid_track_placement = calculate_grid_track_placement(current_token, tokens);
+    if (!tokens.has_next_token())
+        return GridTrackPlacementShorthandStyleValue::create(GridTrackPlacementStyleValue::create(first_grid_track_placement), GridTrackPlacementStyleValue::create(second_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 {
@@ -5482,6 +5522,10 @@ 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::GridColumn:
+        if (auto parsed_value = parse_grid_track_placement_shorthand_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();
@@ -5490,6 +5534,10 @@ Parser::ParseErrorOr<NonnullRefPtr<StyleValue>> Parser::parse_css_value(Property
         if (auto parsed_value = parse_grid_track_placement(component_values))
             return parsed_value.release_nonnull();
         return ParseError::SyntaxError;
+    case PropertyID::GridRow:
+        if (auto parsed_value = parse_grid_track_placement_shorthand_value(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();

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

@@ -361,6 +361,7 @@ private:
     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&);
+    RefPtr<StyleValue> parse_grid_track_placement_shorthand_value(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,20 @@
       "normal"
     ]
   },
+  "grid-column": {
+    "inherited": false,
+    "initial": "auto",
+    "valid-identifiers": [
+      "auto"
+    ],
+    "valid-types": [
+      "string"
+    ],
+    "longhands": [
+      "grid-column-end",
+      "grid-column-start"
+    ]
+  },
   "grid-column-end": {
     "inherited": false,
     "initial": "auto",
@@ -714,6 +728,20 @@
       "string"
     ]
   },
+  "grid-row": {
+    "inherited": false,
+    "initial": "auto",
+    "valid-identifiers": [
+      "auto"
+    ],
+    "valid-types": [
+      "string"
+    ],
+    "longhands": [
+      "grid-row-end",
+      "grid-row-start"
+    ]
+  },
   "grid-row-end": {
     "inherited": false,
     "initial": "auto",

Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp

@@ -295,10 +295,38 @@ 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::GridColumn: {
+        auto maybe_grid_column_end = property(CSS::PropertyID::GridColumnEnd);
+        auto maybe_grid_column_start = property(CSS::PropertyID::GridColumnStart);
+        RefPtr<GridTrackPlacementStyleValue> grid_column_start, grid_column_end;
+        if (maybe_grid_column_end.has_value()) {
+            VERIFY(maybe_grid_column_end.value().value->is_grid_track_placement());
+            grid_column_end = maybe_grid_column_end.value().value->as_grid_track_placement();
+        }
+        if (maybe_grid_column_start.has_value()) {
+            VERIFY(maybe_grid_column_start.value().value->is_grid_track_placement());
+            grid_column_start = maybe_grid_column_start.value().value->as_grid_track_placement();
+        }
+        return GridTrackPlacementShorthandStyleValue::create(grid_column_end.release_nonnull(), grid_column_start.release_nonnull());
+    }
     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::GridRow: {
+        auto maybe_grid_row_end = property(CSS::PropertyID::GridRowEnd);
+        auto maybe_grid_row_start = property(CSS::PropertyID::GridRowStart);
+        RefPtr<GridTrackPlacementStyleValue> grid_row_start, grid_row_end;
+        if (maybe_grid_row_end.has_value()) {
+            VERIFY(maybe_grid_row_end.value().value->is_grid_track_placement());
+            grid_row_end = maybe_grid_row_end.value().value->as_grid_track_placement();
+        }
+        if (maybe_grid_row_start.has_value()) {
+            VERIFY(maybe_grid_row_start.value().value->is_grid_track_placement());
+            grid_row_start = maybe_grid_row_start.value().value->as_grid_track_placement();
+        }
+        return GridTrackPlacementShorthandStyleValue::create(grid_row_end.release_nonnull(), grid_row_start.release_nonnull());
+    }
     case CSS::PropertyID::GridRowEnd:
         return GridTrackPlacementStyleValue::create(layout_node.computed_values().grid_row_end());
     case CSS::PropertyID::GridRowStart:

Userland/Libraries/LibWeb/CSS/StyleComputer.cpp

@@ -517,6 +517,32 @@ static void set_property_expanding_shorthands(StyleProperties& style, CSS::Prope
         return;
     }
 
+    if (property_id == CSS::PropertyID::GridColumn) {
+        if (value.is_grid_track_placement_shorthand()) {
+            auto const& shorthand = value.as_grid_track_placement_shorthand();
+            style.set_property(CSS::PropertyID::GridColumnStart, shorthand.start());
+            style.set_property(CSS::PropertyID::GridColumnEnd, shorthand.end());
+            return;
+        }
+
+        style.set_property(CSS::PropertyID::GridColumnStart, value);
+        style.set_property(CSS::PropertyID::GridColumnEnd, value);
+        return;
+    }
+
+    if (property_id == CSS::PropertyID::GridRow) {
+        if (value.is_grid_track_placement_shorthand()) {
+            auto const& shorthand = value.as_grid_track_placement_shorthand();
+            style.set_property(CSS::PropertyID::GridRowStart, shorthand.start());
+            style.set_property(CSS::PropertyID::GridRowEnd, shorthand.end());
+            return;
+        }
+
+        style.set_property(CSS::PropertyID::GridRowStart, value);
+        style.set_property(CSS::PropertyID::GridRowEnd, value);
+        return;
+    }
+
     style.set_property(property_id, value);
 }