LibWeb: Parse CSS gap property

Including the legacy grid-gap, grid-column-gap and grid-row-gap
properties.

Userland/Libraries/LibWeb/CSS/ComputedValues.h

@@ -70,6 +70,8 @@ public:
     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(); }
+    static CSS::Size column_gap() { return CSS::Size::make_auto(); }
+    static CSS::Size row_gap() { return CSS::Size::make_auto(); }
 };
 
 struct BackgroundLayerData {
@@ -188,6 +190,8 @@ public:
     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::Size const& column_gap() const { return m_noninherited.column_gap; }
+    CSS::Size const& row_gap() const { return m_noninherited.row_gap; }
 
     CSS::LengthBox const& inset() const { return m_noninherited.inset; }
     const CSS::LengthBox& margin() const { return m_noninherited.margin; }
@@ -310,6 +314,8 @@ protected:
         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() };
+        CSS::Size column_gap { InitialValues::column_gap() };
+        CSS::Size row_gap { InitialValues::row_gap() };
     } m_noninherited;
 };
 
@@ -388,6 +394,8 @@ public:
     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_column_gap(CSS::Size const& column_gap) { m_noninherited.column_gap = column_gap; }
+    void set_row_gap(CSS::Size const& row_gap) { m_noninherited.row_gap = row_gap; }
 
     void set_fill(Color value) { m_inherited.fill = value; }
     void set_stroke(Color value) { m_inherited.stroke = value; }

Userland/Libraries/LibWeb/CSS/Properties.json

@@ -512,6 +512,20 @@
       "hashless-hex-color"
     ]
   },
+  "column-gap": {
+    "inherited": false,
+    "initial": "auto",
+    "valid-types": [
+      "length [0,∞]",
+      "percentage [0,∞]"
+    ],
+    "valid-identifiers": [
+      "auto"
+    ],
+    "quirks": [
+      "unitless-length"
+    ]
+  },
   "content": {
     "inherited": false,
     "initial": "normal",
@@ -713,6 +727,25 @@
       "normal"
     ]
   },
+  "gap": {
+    "inherited": false,
+    "initial": "auto",
+    "valid-types": [
+      "length [0,∞]",
+      "percentage [0,∞]"
+    ],
+    "max-values": 2,
+    "valid-identifiers": [
+      "auto"
+    ],
+    "quirks": [
+      "unitless-length"
+    ],
+    "longhands": [
+      "row-gap",
+      "column-gap"
+    ]
+  },
   "grid-column": {
     "inherited": false,
     "initial": "auto",
@@ -737,6 +770,20 @@
       "string"
     ]
   },
+  "grid-column-gap": {
+    "inherited": false,
+    "initial": "auto",
+    "valid-types": [
+      "length [0,∞]",
+      "percentage [0,∞]"
+    ],
+    "valid-identifiers": [
+      "auto"
+    ],
+    "quirks": [
+      "unitless-length"
+    ]
+  },
   "grid-column-start": {
     "inherited": false,
     "initial": "auto",
@@ -747,6 +794,25 @@
       "string"
     ]
   },
+  "grid-gap": {
+    "inherited": false,
+    "initial": "auto",
+    "valid-types": [
+      "length [0,∞]",
+      "percentage [0,∞]"
+    ],
+    "max-values": 2,
+    "valid-identifiers": [
+      "auto"
+    ],
+    "quirks": [
+      "unitless-length"
+    ],
+    "longhands": [
+      "grid-row-gap",
+      "grid-column-gap"
+    ]
+  },
   "grid-row": {
     "inherited": false,
     "initial": "auto",
@@ -771,6 +837,20 @@
       "string"
     ]
   },
+  "grid-row-gap": {
+    "inherited": false,
+    "initial": "auto",
+    "valid-types": [
+      "length [0,∞]",
+      "percentage [0,∞]"
+    ],
+    "valid-identifiers": [
+      "auto"
+    ],
+    "quirks": [
+      "unitless-length"
+    ]
+  },
   "grid-row-start": {
     "inherited": false,
     "initial": "auto",
@@ -1216,6 +1296,20 @@
       "unitless-length"
     ]
   },
+  "row-gap": {
+    "inherited": false,
+    "initial": "auto",
+    "valid-types": [
+      "length [0,∞]",
+      "percentage [0,∞]"
+    ],
+    "valid-identifiers": [
+      "auto"
+    ],
+    "quirks": [
+      "unitless-length"
+    ]
+  },
   "stroke": {
     "affects-layout": false,
     "inherited": true,

Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp

@@ -299,6 +299,8 @@ RefPtr<StyleValue> ResolvedCSSStyleDeclaration::style_value_for_property(Layout:
         return RectStyleValue::create(layout_node.computed_values().clip().to_rect());
     case CSS::PropertyID::Color:
         return ColorStyleValue::create(layout_node.computed_values().color());
+    case CSS::PropertyID::ColumnGap:
+        return style_value_for_size(layout_node.computed_values().column_gap());
     case CSS::PropertyID::Cursor:
         return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().cursor()));
     case CSS::PropertyID::Display:
@@ -425,6 +427,8 @@ RefPtr<StyleValue> ResolvedCSSStyleDeclaration::style_value_for_property(Layout:
         return style_value_for_length_percentage(layout_node.computed_values().padding().top());
     case CSS::PropertyID::Position:
         return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().position()));
+    case CSS::PropertyID::RowGap:
+        return style_value_for_size(layout_node.computed_values().row_gap());
     case CSS::PropertyID::TextAlign:
         return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().text_align()));
     case CSS::PropertyID::TextDecorationLine: {

Userland/Libraries/LibWeb/CSS/StyleComputer.cpp

@@ -544,6 +544,28 @@ static void set_property_expanding_shorthands(StyleProperties& style, CSS::Prope
         return;
     }
 
+    if (property_id == CSS::PropertyID::Gap || property_id == CSS::PropertyID::GridGap) {
+        if (value.is_value_list()) {
+            auto const& values_list = value.as_value_list();
+            style.set_property(CSS::PropertyID::RowGap, values_list.values()[0]);
+            style.set_property(CSS::PropertyID::ColumnGap, values_list.values()[1]);
+            return;
+        }
+        style.set_property(CSS::PropertyID::RowGap, value);
+        style.set_property(CSS::PropertyID::ColumnGap, value);
+        return;
+    }
+
+    if (property_id == CSS::PropertyID::RowGap || property_id == CSS::PropertyID::GridRowGap) {
+        style.set_property(CSS::PropertyID::RowGap, value);
+        return;
+    }
+
+    if (property_id == CSS::PropertyID::ColumnGap || property_id == CSS::PropertyID::GridColumnGap) {
+        style.set_property(CSS::PropertyID::ColumnGap, value);
+        return;
+    }
+
     style.set_property(property_id, value);
 }
 

Userland/Libraries/LibWeb/Layout/Node.cpp

@@ -573,6 +573,9 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
         computed_values.set_stroke_width(CSS::Length::make_px(stroke_width->to_number()));
     else
         computed_values.set_stroke_width(stroke_width->to_length());
+
+    computed_values.set_column_gap(computed_style.size_value(CSS::PropertyID::ColumnGap));
+    computed_values.set_row_gap(computed_style.size_value(CSS::PropertyID::RowGap));
 }
 
 bool Node::is_root_element() const