LibWeb: Add CSS support for border-spacing property

Author: https://github.com/axgallo
Commit: https://github.com/SerenityOS/serenity/commit/396f1a977c
Pull-request: https://github.com/SerenityOS/serenity/pull/19417

Userland/Libraries/LibWeb/CSS/ComputedValues.h

@@ -35,6 +35,7 @@ public:
     static int font_weight() { return 400; }
     static CSS::FontVariant font_variant() { return CSS::FontVariant::Normal; }
     static CSS::Float float_() { return CSS::Float::None; }
+    static CSS::Length border_spacing() { return CSS::Length::make_px(0); }
     static CSS::CaptionSide caption_side() { return CSS::CaptionSide::Top; }
     static CSS::Clear clear() { return CSS::Clear::None; }
     static CSS::Clip clip() { return CSS::Clip::make_auto(); }
@@ -222,6 +223,8 @@ class ComputedValues {
 public:
     AspectRatio aspect_ratio() const { return m_noninherited.aspect_ratio; }
     CSS::Float float_() const { return m_noninherited.float_; }
+    CSS::Length border_spacing_horizontal() const { return m_inherited.border_spacing_horizontal; }
+    CSS::Length border_spacing_vertical() const { return m_inherited.border_spacing_vertical; }
     CSS::CaptionSide caption_side() const { return m_inherited.caption_side; }
     CSS::Clear clear() const { return m_noninherited.clear; }
     CSS::Clip clip() const { return m_noninherited.clip; }
@@ -332,6 +335,8 @@ protected:
         float font_size { InitialValues::font_size() };
         int font_weight { InitialValues::font_weight() };
         CSS::FontVariant font_variant { InitialValues::font_variant() };
+        CSS::Length border_spacing_horizontal { InitialValues::border_spacing() };
+        CSS::Length border_spacing_vertical { InitialValues::border_spacing() };
         CSS::CaptionSide caption_side { InitialValues::caption_side() };
         Color color { InitialValues::color() };
         Optional<Color> accent_color {};
@@ -437,6 +442,8 @@ public:
     void set_font_size(float font_size) { m_inherited.font_size = font_size; }
     void set_font_weight(int font_weight) { m_inherited.font_weight = font_weight; }
     void set_font_variant(CSS::FontVariant font_variant) { m_inherited.font_variant = font_variant; }
+    void set_border_spacing_horizontal(CSS::Length border_spacing_horizontal) { m_inherited.border_spacing_horizontal = border_spacing_horizontal; }
+    void set_border_spacing_vertical(CSS::Length border_spacing_vertical) { m_inherited.border_spacing_vertical = border_spacing_vertical; }
     void set_caption_side(CSS::CaptionSide caption_side) { m_inherited.caption_side = caption_side; }
     void set_color(Color color) { m_inherited.color = color; }
     void set_clip(CSS::Clip const& clip) { m_noninherited.clip = clip; }

Userland/Libraries/LibWeb/CSS/Properties.json

@@ -502,6 +502,7 @@
   "border-spacing": {
     "inherited": true,
     "initial": "0",
+    "max-values": 2,
     "valid-types": [
       "length [0,∞]"
     ],

Userland/Libraries/LibWeb/CSS/StyleProperties.cpp

@@ -379,6 +379,24 @@ Optional<CSS::ImageRendering> StyleProperties::image_rendering() const
     return value_id_to_image_rendering(value->to_identifier());
 }
 
+CSS::Length StyleProperties::border_spacing_horizontal() const
+{
+    auto value = property(CSS::PropertyID::BorderSpacing);
+    if (value->is_length())
+        return value->as_length().length();
+    auto const& list = value->as_value_list();
+    return list.value_at(0, false)->as_length().length();
+}
+
+CSS::Length StyleProperties::border_spacing_vertical() const
+{
+    auto value = property(CSS::PropertyID::BorderSpacing);
+    if (value->is_length())
+        return value->as_length().length();
+    auto const& list = value->as_value_list();
+    return list.value_at(1, false)->as_length().length();
+}
+
 Optional<CSS::CaptionSide> StyleProperties::caption_side() const
 {
     auto value = property(CSS::PropertyID::CaptionSide);

Userland/Libraries/LibWeb/CSS/StyleProperties.h

@@ -50,6 +50,8 @@ public:
     Color color_or_fallback(CSS::PropertyID, Layout::NodeWithStyle const&, Color fallback) const;
     Optional<CSS::TextAlign> text_align() const;
     Optional<CSS::TextJustify> text_justify() const;
+    CSS::Length border_spacing_horizontal() const;
+    CSS::Length border_spacing_vertical() const;
     Optional<CSS::CaptionSide> caption_side() const;
     CSS::Clip clip() const;
     CSS::Display display() const;

Userland/Libraries/LibWeb/Layout/Node.cpp

@@ -533,6 +533,9 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
     if (float_.has_value())
         computed_values.set_float(float_.value());
 
+    computed_values.set_border_spacing_horizontal(computed_style.border_spacing_horizontal());
+    computed_values.set_border_spacing_vertical(computed_style.border_spacing_vertical());
+
     auto caption_side = computed_style.caption_side();
     if (caption_side.has_value())
         computed_values.set_caption_side(caption_side.value());