LibWeb: Parse grid-area CSS property

Author: https://github.com/martinfalisse
Commit: https://github.com/SerenityOS/serenity/commit/9bc001f410
Pull-request: https://github.com/SerenityOS/serenity/pull/17057
Reviewed-by: https://github.com/trflynn89

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

@@ -6292,6 +6292,82 @@ RefPtr<StyleValue> Parser::parse_grid_track_placement_shorthand_value(Vector<Com
     return {};
 }
 
+RefPtr<StyleValue> Parser::parse_grid_area_shorthand_value(Vector<ComponentValue> const& component_values)
+{
+    auto tokens = TokenStream { component_values };
+    Token current_token;
+
+    auto parse_placement_tokens = [&](Vector<ComponentValue>& placement_tokens, bool check_for_delimiter = true) -> void {
+        current_token = tokens.next_token().token();
+        while (true) {
+            if (check_for_delimiter && current_token.is(Token::Type::Delim) && current_token.delim() == "/"sv)
+                break;
+            placement_tokens.append(current_token);
+            tokens.skip_whitespace();
+            if (!tokens.has_next_token())
+                break;
+            current_token = tokens.next_token().token();
+        }
+    };
+
+    Vector<ComponentValue> row_start_placement_tokens;
+    parse_placement_tokens(row_start_placement_tokens);
+
+    Vector<ComponentValue> column_start_placement_tokens;
+    if (tokens.has_next_token())
+        parse_placement_tokens(column_start_placement_tokens);
+
+    Vector<ComponentValue> row_end_placement_tokens;
+    if (tokens.has_next_token())
+        parse_placement_tokens(row_end_placement_tokens);
+
+    Vector<ComponentValue> column_end_placement_tokens;
+    if (tokens.has_next_token())
+        parse_placement_tokens(column_end_placement_tokens, false);
+
+    // https://www.w3.org/TR/css-grid-2/#placement-shorthands
+    // The grid-area property is a shorthand for grid-row-start, grid-column-start, grid-row-end and
+    // grid-column-end.
+    auto row_start_style_value = parse_grid_track_placement(row_start_placement_tokens);
+    auto column_start_style_value = parse_grid_track_placement(column_start_placement_tokens);
+    auto row_end_style_value = parse_grid_track_placement(row_end_placement_tokens);
+    auto column_end_style_value = parse_grid_track_placement(column_end_placement_tokens);
+
+    // If four <grid-line> values are specified, grid-row-start is set to the first value, grid-column-start
+    // is set to the second value, grid-row-end is set to the third value, and grid-column-end is set to the
+    // fourth value.
+    auto row_start = GridTrackPlacement::make_auto();
+    auto column_start = GridTrackPlacement::make_auto();
+    auto row_end = GridTrackPlacement::make_auto();
+    auto column_end = GridTrackPlacement::make_auto();
+
+    if (row_start_style_value)
+        row_start = row_start_style_value.release_nonnull()->as_grid_track_placement().grid_track_placement();
+
+    // When grid-column-start is omitted, if grid-row-start is a <custom-ident>, all four longhands are set to
+    // that value. Otherwise, it is set to auto.
+    if (column_start_style_value)
+        column_start = column_start_style_value.release_nonnull()->as_grid_track_placement().grid_track_placement();
+    else
+        column_start = row_start;
+
+    // When grid-row-end is omitted, if grid-row-start is a <custom-ident>, grid-row-end is set to that
+    // <custom-ident>; otherwise, it is set to auto.
+    if (row_end_style_value)
+        row_end = row_end_style_value.release_nonnull()->as_grid_track_placement().grid_track_placement();
+    else
+        row_end = column_start;
+
+    // When grid-column-end is omitted, if grid-column-start is a <custom-ident>, grid-column-end is set to
+    // that <custom-ident>; otherwise, it is set to auto.
+    if (column_end_style_value)
+        column_end = column_end_style_value.release_nonnull()->as_grid_track_placement().grid_track_placement();
+    else
+        column_end = row_end;
+
+    return GridAreaShorthandStyleValue::create(row_start, column_start, row_end, column_end);
+}
+
 RefPtr<StyleValue> Parser::parse_grid_template_areas_value(Vector<ComponentValue> const& component_values)
 {
     Vector<Vector<String>> grid_area_rows;
@@ -6446,6 +6522,10 @@ Parser::ParseErrorOr<NonnullRefPtr<StyleValue>> Parser::parse_css_value(Property
         if (auto parsed_value = parse_grid_track_placement_shorthand_value(component_values))
             return parsed_value.release_nonnull();
         return ParseError::SyntaxError;
+    case PropertyID::GridArea:
+        if (auto parsed_value = parse_grid_area_shorthand_value(component_values))
+            return parsed_value.release_nonnull();
+        return ParseError::SyntaxError;
     case PropertyID::GridTemplateAreas:
         if (auto parsed_value = parse_grid_template_areas_value(component_values))
             return parsed_value.release_nonnull();

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

@@ -316,6 +316,7 @@ private:
     RefPtr<StyleValue> parse_grid_track_placement(Vector<ComponentValue> const&);
     RefPtr<StyleValue> parse_grid_track_placement_shorthand_value(Vector<ComponentValue> const&);
     RefPtr<StyleValue> parse_grid_template_areas_value(Vector<ComponentValue> const&);
+    RefPtr<StyleValue> parse_grid_area_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

@@ -740,6 +740,22 @@
       "column-gap"
     ]
   },
+  "grid-area": {
+    "inherited": false,
+    "initial": "auto",
+    "valid-identifiers": [
+      "auto"
+    ],
+    "valid-types": [
+      "string"
+    ],
+    "longhands": [
+      "grid-column-end",
+      "grid-column-start",
+      "grid-row-end",
+      "grid-row-start"
+    ]
+  },
   "grid-column": {
     "inherited": false,
     "initial": "auto",

Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp

@@ -332,6 +332,34 @@ 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::GridArea: {
+        auto maybe_grid_row_start = property(CSS::PropertyID::GridRowStart);
+        auto maybe_grid_column_start = property(CSS::PropertyID::GridColumnStart);
+        auto maybe_grid_row_end = property(CSS::PropertyID::GridRowEnd);
+        auto maybe_grid_column_end = property(CSS::PropertyID::GridColumnEnd);
+        RefPtr<GridTrackPlacementStyleValue> grid_row_start, grid_column_start, grid_row_end, grid_column_end;
+        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();
+        }
+        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();
+        }
+        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_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();
+        }
+        return GridAreaShorthandStyleValue::create(
+            grid_row_start.release_nonnull(),
+            grid_column_start.release_nonnull(),
+            grid_row_end.release_nonnull(),
+            grid_column_end.release_nonnull());
+    }
     case CSS::PropertyID::GridColumn: {
         auto maybe_grid_column_end = property(CSS::PropertyID::GridColumnEnd);
         auto maybe_grid_column_start = property(CSS::PropertyID::GridColumnStart);

Userland/Libraries/LibWeb/CSS/StyleComputer.cpp

@@ -520,6 +520,22 @@ static void set_property_expanding_shorthands(StyleProperties& style, CSS::Prope
         return;
     }
 
+    if (property_id == CSS::PropertyID::GridArea) {
+        if (value.is_grid_area_shorthand()) {
+            auto const& shorthand = value.as_grid_area_shorthand();
+            style.set_property(CSS::PropertyID::GridRowStart, shorthand.row_start());
+            style.set_property(CSS::PropertyID::GridColumnStart, shorthand.column_start());
+            style.set_property(CSS::PropertyID::GridRowEnd, shorthand.row_end());
+            style.set_property(CSS::PropertyID::GridColumnEnd, shorthand.column_end());
+            return;
+        }
+        style.set_property(CSS::PropertyID::GridRowStart, value);
+        style.set_property(CSS::PropertyID::GridColumnStart, value);
+        style.set_property(CSS::PropertyID::GridRowEnd, value);
+        style.set_property(CSS::PropertyID::GridColumnEnd, value);
+        return;
+    }
+
     if (property_id == CSS::PropertyID::GridColumn) {
         if (value.is_grid_track_placement_shorthand()) {
             auto const& shorthand = value.as_grid_track_placement_shorthand();

Userland/Libraries/LibWeb/CSS/StyleProperties.cpp

@@ -751,4 +751,10 @@ Vector<Vector<String>> StyleProperties::grid_template_areas() const
     return value->as_grid_template_area().grid_template_area();
 }
 
+String StyleProperties::grid_area() const
+{
+    auto value = property(CSS::PropertyID::GridArea);
+    return value->as_string().to_string().release_value_but_fixme_should_propagate_errors();
+}
+
 }

Userland/Libraries/LibWeb/CSS/StyleProperties.h

@@ -92,6 +92,7 @@ public:
     CSS::GridTrackPlacement grid_row_start() const;
     Optional<CSS::BorderCollapse> border_collapse() const;
     Vector<Vector<String>> grid_template_areas() const;
+    String grid_area() const;
 
     Vector<CSS::Transformation> transformations() const;
     CSS::TransformOrigin transform_origin() const;

Userland/Libraries/LibWeb/CSS/StyleValue.cpp

@@ -140,6 +140,12 @@ GridTrackPlacementShorthandStyleValue const& StyleValue::as_grid_track_placement
     return static_cast<GridTrackPlacementShorthandStyleValue const&>(*this);
 }
 
+GridAreaShorthandStyleValue const& StyleValue::as_grid_area_shorthand() const
+{
+    VERIFY(is_grid_area_shorthand());
+    return static_cast<GridAreaShorthandStyleValue const&>(*this);
+}
+
 GridTemplateAreaStyleValue const& StyleValue::as_grid_template_area() const
 {
     VERIFY(is_grid_template_area());
@@ -1427,6 +1433,31 @@ bool GridTrackPlacementShorthandStyleValue::equals(StyleValue const& other) cons
         && m_end->equals(typed_other.m_end);
 }
 
+ErrorOr<String> GridAreaShorthandStyleValue::to_string() const
+{
+    StringBuilder builder;
+    if (!m_row_start->as_grid_track_placement().grid_track_placement().is_auto())
+        builder.appendff("{}", m_row_start->as_grid_track_placement().grid_track_placement().to_string().value());
+    if (!m_column_start->as_grid_track_placement().grid_track_placement().is_auto())
+        builder.appendff(" / {}", m_column_start->as_grid_track_placement().grid_track_placement().to_string().value());
+    if (!m_row_end->as_grid_track_placement().grid_track_placement().is_auto())
+        builder.appendff(" / {}", m_row_end->as_grid_track_placement().grid_track_placement().to_string().value());
+    if (!m_column_end->as_grid_track_placement().grid_track_placement().is_auto())
+        builder.appendff(" / {}", m_column_end->as_grid_track_placement().grid_track_placement().to_string().value());
+    return builder.to_string();
+}
+
+bool GridAreaShorthandStyleValue::equals(StyleValue const& other) const
+{
+    if (type() != other.type())
+        return false;
+    auto const& typed_other = other.as_grid_area_shorthand();
+    return m_row_start->equals(typed_other.m_row_start)
+        && m_column_start->equals(typed_other.m_column_start)
+        && m_row_end->equals(typed_other.m_row_end)
+        && m_column_end->equals(typed_other.m_column_end);
+}
+
 ErrorOr<String> GridTrackPlacementStyleValue::to_string() const
 {
     return m_grid_track_placement.to_string();

Userland/Libraries/LibWeb/CSS/StyleValue.h

@@ -228,6 +228,7 @@ public:
         FlexFlow,
         Font,
         Frequency,
+        GridAreaShorthand,
         GridTemplateArea,
         GridTrackPlacement,
         GridTrackPlacementShorthand,
@@ -276,6 +277,7 @@ public:
     bool is_flex_flow() const { return type() == Type::FlexFlow; }
     bool is_font() const { return type() == Type::Font; }
     bool is_frequency() const { return type() == Type::Frequency; }
+    bool is_grid_area_shorthand() const { return type() == Type::GridAreaShorthand; }
     bool is_grid_template_area() const { return type() == Type::GridTemplateArea; }
     bool is_grid_track_placement() const { return type() == Type::GridTrackPlacement; }
     bool is_grid_track_placement_shorthand() const { return type() == Type::GridTrackPlacementShorthand; }
@@ -322,6 +324,7 @@ public:
     FlexStyleValue const& as_flex() const;
     FontStyleValue const& as_font() const;
     FrequencyStyleValue const& as_frequency() const;
+    GridAreaShorthandStyleValue const& as_grid_area_shorthand() const;
     GridTemplateAreaStyleValue const& as_grid_template_area() const;
     GridTrackPlacementShorthandStyleValue const& as_grid_track_placement_shorthand() const;
     GridTrackPlacementStyleValue const& as_grid_track_placement() const;
@@ -366,6 +369,7 @@ public:
     FlexStyleValue& as_flex() { return const_cast<FlexStyleValue&>(const_cast<StyleValue const&>(*this).as_flex()); }
     FontStyleValue& as_font() { return const_cast<FontStyleValue&>(const_cast<StyleValue const&>(*this).as_font()); }
     FrequencyStyleValue& as_frequency() { return const_cast<FrequencyStyleValue&>(const_cast<StyleValue const&>(*this).as_frequency()); }
+    GridAreaShorthandStyleValue& as_grid_area_shorthand() { return const_cast<GridAreaShorthandStyleValue&>(const_cast<StyleValue const&>(*this).as_grid_area_shorthand()); }
     GridTemplateAreaStyleValue& as_grid_template_area() { return const_cast<GridTemplateAreaStyleValue&>(const_cast<StyleValue const&>(*this).as_grid_template_area()); }
     GridTrackPlacementShorthandStyleValue& as_grid_track_placement_shorthand() { return const_cast<GridTrackPlacementShorthandStyleValue&>(const_cast<StyleValue const&>(*this).as_grid_track_placement_shorthand()); }
     GridTrackPlacementStyleValue& as_grid_track_placement() { return const_cast<GridTrackPlacementStyleValue&>(const_cast<StyleValue const&>(*this).as_grid_track_placement()); }
@@ -1124,6 +1128,42 @@ private:
     NonnullRefPtr<GridTrackPlacementStyleValue> m_end;
 };
 
+class GridAreaShorthandStyleValue final : public StyleValue {
+public:
+    static NonnullRefPtr<GridAreaShorthandStyleValue> create(NonnullRefPtr<GridTrackPlacementStyleValue> row_start, NonnullRefPtr<GridTrackPlacementStyleValue> column_start, NonnullRefPtr<GridTrackPlacementStyleValue> row_end, NonnullRefPtr<GridTrackPlacementStyleValue> column_end)
+    {
+        return adopt_ref(*new GridAreaShorthandStyleValue(row_start, column_start, row_end, column_end));
+    }
+    static NonnullRefPtr<GridAreaShorthandStyleValue> create(GridTrackPlacement row_start, GridTrackPlacement column_start, GridTrackPlacement row_end, GridTrackPlacement column_end)
+    {
+        return adopt_ref(*new GridAreaShorthandStyleValue(GridTrackPlacementStyleValue::create(row_start), GridTrackPlacementStyleValue::create(column_start), GridTrackPlacementStyleValue::create(row_end), GridTrackPlacementStyleValue::create(column_end)));
+    }
+    virtual ~GridAreaShorthandStyleValue() override = default;
+
+    NonnullRefPtr<GridTrackPlacementStyleValue> row_start() const { return m_row_start; }
+    NonnullRefPtr<GridTrackPlacementStyleValue> column_start() const { return m_column_start; }
+    NonnullRefPtr<GridTrackPlacementStyleValue> row_end() const { return m_row_end; }
+    NonnullRefPtr<GridTrackPlacementStyleValue> column_end() const { return m_column_end; }
+
+    virtual ErrorOr<String> to_string() const override;
+    virtual bool equals(StyleValue const& other) const override;
+
+private:
+    GridAreaShorthandStyleValue(NonnullRefPtr<GridTrackPlacementStyleValue> row_start, NonnullRefPtr<GridTrackPlacementStyleValue> column_start, NonnullRefPtr<GridTrackPlacementStyleValue> row_end, NonnullRefPtr<GridTrackPlacementStyleValue> column_end)
+        : StyleValue(Type::GridAreaShorthand)
+        , m_row_start(row_start)
+        , m_column_start(column_start)
+        , m_row_end(row_end)
+        , m_column_end(column_end)
+    {
+    }
+
+    NonnullRefPtr<GridTrackPlacementStyleValue> m_row_start;
+    NonnullRefPtr<GridTrackPlacementStyleValue> m_column_start;
+    NonnullRefPtr<GridTrackPlacementStyleValue> m_row_end;
+    NonnullRefPtr<GridTrackPlacementStyleValue> m_column_end;
+};
+
 class GridTrackSizeStyleValue final : public StyleValue {
 public:
     static NonnullRefPtr<GridTrackSizeStyleValue> create(CSS::GridTrackSizeList grid_track_size_list);

Userland/Libraries/LibWeb/Forward.h

@@ -62,6 +62,7 @@ class FontStyleValue;
 class Frequency;
 class FrequencyPercentage;
 class FrequencyStyleValue;
+class GridAreaShorthandStyleValue;
 class GridMinMax;
 class GridRepeat;
 class GridSize;