LibWeb: Combine background-repeat-x/y pseudo-properties

While right now this doesn't save much complexity, it will do once we
care about multiple background layers per node. Then, having a single
repeat value per layer will simplify things.

It also means we can remove the pseudo-property concept entirely! :^)

Userland/Libraries/LibWeb/CSS/ComputedValues.h

@@ -65,6 +65,11 @@ struct BoxShadowData {
     Color color {};
 };
 
+struct BackgroundRepeatData {
+    CSS::Repeat repeat_x;
+    CSS::Repeat repeat_y;
+};
+
 class ComputedValues {
 public:
     CSS::Float float_() const { return m_noninherited.float_; }
@@ -114,8 +119,7 @@ public:
 
     Color color() const { return m_inherited.color; }
     Color background_color() const { return m_noninherited.background_color; }
-    CSS::Repeat background_repeat_x() const { return m_noninherited.background_repeat_x; }
+    BackgroundRepeatData background_repeat() const { return m_noninherited.background_repeat; }
-    CSS::Repeat background_repeat_y() const { return m_noninherited.background_repeat_y; }
 
     CSS::ListStyleType list_style_type() const { return m_inherited.list_style_type; }
 
@@ -172,8 +176,7 @@ protected:
         Length border_top_left_radius;
         Length border_top_right_radius;
         Color background_color { InitialValues::background_color() };
-        CSS::Repeat background_repeat_x { InitialValues::background_repeat() };
+        BackgroundRepeatData background_repeat { InitialValues::background_repeat(), InitialValues::background_repeat() };
-        CSS::Repeat background_repeat_y { InitialValues::background_repeat() };
         CSS::FlexDirection flex_direction { InitialValues::flex_direction() };
         CSS::FlexWrap flex_wrap { InitialValues::flex_wrap() };
         CSS::FlexBasisData flex_basis {};
@@ -199,8 +202,7 @@ public:
     void set_cursor(CSS::Cursor cursor) { m_inherited.cursor = cursor; }
     void set_pointer_events(CSS::PointerEvents value) { m_inherited.pointer_events = value; }
     void set_background_color(const Color& color) { m_noninherited.background_color = color; }
-    void set_background_repeat_x(CSS::Repeat repeat) { m_noninherited.background_repeat_x = repeat; }
+    void set_background_repeat(BackgroundRepeatData repeat) { m_noninherited.background_repeat = repeat; }
-    void set_background_repeat_y(CSS::Repeat repeat) { m_noninherited.background_repeat_y = repeat; }
     void set_float(CSS::Float value) { m_noninherited.float_ = value; }
     void set_clear(CSS::Clear value) { m_noninherited.clear = value; }
     void set_z_index(Optional<int> value) { m_noninherited.z_index = value; }

Userland/Libraries/LibWeb/CSS/Properties.json

@@ -78,6 +78,7 @@
     ]
   },
   "background-repeat": {
+    "inherited": false,
     "initial": "repeat",
     "max-values": 2,
     "valid-identifiers": [
@@ -87,22 +88,8 @@
       "repeat-y",
       "round",
       "space"
-    ],
-    "longhands": [
-      "background-repeat-x",
-      "background-repeat-y"
     ]
   },
-  "background-repeat-x": {
-    "inherited": false,
-    "initial": "repeat",
-    "pseudo": true
-  },
-  "background-repeat-y": {
-    "inherited": false,
-    "initial": "repeat",
-    "pseudo": true
-  },
   "border": {
     "longhands": [
       "border-width",

Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp

@@ -660,15 +660,10 @@ RefPtr<StyleValue> ResolvedCSSStyleDeclaration::style_value_for_property(Layout:
         return ColorStyleValue::create(layout_node.computed_values().color());
     case PropertyID::BackgroundColor:
         return ColorStyleValue::create(layout_node.computed_values().background_color());
-    case CSS::PropertyID::BackgroundRepeatX:
+    case CSS::PropertyID::BackgroundRepeat:
-        return IdentifierStyleValue::create(to_css_value_id(layout_node.computed_values().background_repeat_x()));
+        return BackgroundRepeatStyleValue::create(
-    case CSS::PropertyID::BackgroundRepeatY:
+            IdentifierStyleValue::create(to_css_value_id(layout_node.computed_values().background_repeat().repeat_x)),
-        return IdentifierStyleValue::create(to_css_value_id(layout_node.computed_values().background_repeat_y()));
+            IdentifierStyleValue::create(to_css_value_id(layout_node.computed_values().background_repeat().repeat_y)));
-    case CSS::PropertyID::BackgroundRepeat: {
-        auto maybe_background_repeat_x = property(CSS::PropertyID::BackgroundRepeatX);
-        auto maybe_background_repeat_y = property(CSS::PropertyID::BackgroundRepeatY);
-        return BackgroundRepeatStyleValue::create(value_or_default(maybe_background_repeat_x, IdentifierStyleValue::create(CSS::ValueID::RepeatX)), value_or_default(maybe_background_repeat_y, IdentifierStyleValue::create(CSS::ValueID::RepeatY)));
-    }
     case CSS::PropertyID::Background: {
         auto maybe_background_color = property(CSS::PropertyID::BackgroundColor);
         auto maybe_background_image = property(CSS::PropertyID::BackgroundImage);

Userland/Libraries/LibWeb/CSS/StyleComputer.cpp

@@ -414,33 +414,12 @@ static void set_property_expanding_shorthands(StyleProperties& style, CSS::Prope
             auto& background_repeat_list = value.as_value_list().values();
             // FIXME: Handle multiple backgrounds.
             if (!background_repeat_list.is_empty()) {
-                auto& maybe_background_repeat = background_repeat_list.first();
+                auto& background_repeat = background_repeat_list.first();
-                if (maybe_background_repeat.is_background_repeat()) {
+                style.set_property(CSS::PropertyID::BackgroundRepeat, background_repeat);
-                    auto& background_repeat = maybe_background_repeat.as_background_repeat();
-                    set_property_expanding_shorthands(style, PropertyID::BackgroundRepeatX, background_repeat.repeat_x(), document, true);
-                    set_property_expanding_shorthands(style, PropertyID::BackgroundRepeatY, background_repeat.repeat_y(), document, true);
-                }
             }
             return;
         }
-        if (value.is_background_repeat()) {
+        style.set_property(CSS::PropertyID::BackgroundRepeat, value);
-            auto& background_repeat = value.as_background_repeat();
-            set_property_expanding_shorthands(style, PropertyID::BackgroundRepeatX, background_repeat.repeat_x(), document, true);
-            set_property_expanding_shorthands(style, PropertyID::BackgroundRepeatY, background_repeat.repeat_y(), document, true);
-            return;
-        }
-
-        set_property_expanding_shorthands(style, PropertyID::BackgroundRepeatX, value, document, true);
-        set_property_expanding_shorthands(style, PropertyID::BackgroundRepeatY, value, document, true);
-        return;
-    }
-
-    if (property_id == CSS::PropertyID::BackgroundRepeatX || property_id == CSS::PropertyID::BackgroundRepeatY) {
-        auto value_id = value.to_identifier();
-        if (value_id == CSS::ValueID::RepeatX || value_id == CSS::ValueID::RepeatY)
-            return;
-
-        style.set_property(property_id, value);
         return;
     }
 

Userland/Libraries/LibWeb/CSS/StyleProperties.cpp

@@ -688,42 +688,33 @@ Optional<CSS::Overflow> StyleProperties::overflow(CSS::PropertyID property_id) c
     }
 }
 
-Optional<CSS::Repeat> StyleProperties::background_repeat_x() const
+Optional<BackgroundRepeatData> StyleProperties::background_repeat() const
 {
-    auto value = property(CSS::PropertyID::BackgroundRepeatX);
+    auto value = property(CSS::PropertyID::BackgroundRepeat);
-    if (!value.has_value())
+    if (!value.has_value() || !value.value()->is_background_repeat())
         return {};
-    switch (value.value()->to_identifier()) {
+    auto& background_repeat = value.value()->as_background_repeat();
-    case CSS::ValueID::NoRepeat:
-        return CSS::Repeat::NoRepeat;
-    case CSS::ValueID::Repeat:
-        return CSS::Repeat::Repeat;
-    case CSS::ValueID::Round:
-        return CSS::Repeat::Round;
-    case CSS::ValueID::Space:
-        return CSS::Repeat::Space;
-    default:
-        return {};
-    }
-}
 
-Optional<CSS::Repeat> StyleProperties::background_repeat_y() const
+    auto to_repeat = [](auto value) -> Optional<CSS::Repeat> {
-{
+        switch (value->to_identifier()) {
-    auto value = property(CSS::PropertyID::BackgroundRepeatY);
+        case CSS::ValueID::NoRepeat:
-    if (!value.has_value())
+            return CSS::Repeat::NoRepeat;
-        return {};
+        case CSS::ValueID::Repeat:
-    switch (value.value()->to_identifier()) {
+            return CSS::Repeat::Repeat;
-    case CSS::ValueID::NoRepeat:
+        case CSS::ValueID::Round:
-        return CSS::Repeat::NoRepeat;
+            return CSS::Repeat::Round;
-    case CSS::ValueID::Repeat:
+        case CSS::ValueID::Space:
-        return CSS::Repeat::Repeat;
+            return CSS::Repeat::Space;
-    case CSS::ValueID::Round:
+        default:
-        return CSS::Repeat::Round;
+            return {};
-    case CSS::ValueID::Space:
+        }
-        return CSS::Repeat::Space;
+    };
-    default:
+    auto repeat_x = to_repeat(background_repeat.repeat_x());
-        return {};
+    auto repeat_y = to_repeat(background_repeat.repeat_y());
-    }
+    if (repeat_x.has_value() && repeat_y.has_value())
+        return BackgroundRepeatData { repeat_x.value(), repeat_y.value() };
+
+    return {};
 }
 
 Optional<CSS::BoxShadowData> StyleProperties::box_shadow() const

Userland/Libraries/LibWeb/CSS/StyleProperties.h

@@ -62,8 +62,7 @@ public:
     Optional<CSS::JustifyContent> justify_content() const;
     Optional<CSS::Overflow> overflow_x() const;
     Optional<CSS::Overflow> overflow_y() const;
-    Optional<CSS::Repeat> background_repeat_x() const;
+    Optional<BackgroundRepeatData> background_repeat() const;
-    Optional<CSS::Repeat> background_repeat_y() const;
     Optional<CSS::BoxShadowData> box_shadow() const;
     CSS::BoxSizing box_sizing() const;
     Optional<CSS::PointerEvents> pointer_events() const;

Userland/Libraries/LibWeb/DOM/Document.cpp

@@ -379,7 +379,7 @@ CSS::Repeat Document::background_repeat_x() const
     if (!body_layout_node)
         return CSS::Repeat::Repeat;
 
-    return body_layout_node->computed_values().background_repeat_x();
+    return body_layout_node->computed_values().background_repeat().repeat_x;
 }
 
 CSS::Repeat Document::background_repeat_y() const
@@ -392,7 +392,7 @@ CSS::Repeat Document::background_repeat_y() const
     if (!body_layout_node)
         return CSS::Repeat::Repeat;
 
-    return body_layout_node->computed_values().background_repeat_y();
+    return body_layout_node->computed_values().background_repeat().repeat_y;
 }
 
 // https://html.spec.whatwg.org/multipage/urls-and-fetching.html#parse-a-url

Userland/Libraries/LibWeb/Layout/Box.cpp

@@ -73,8 +73,7 @@ void Box::paint_background(PaintContext& context)
     Gfx::IntRect background_rect;
     Color background_color = computed_values().background_color();
     const Gfx::Bitmap* background_image = this->background_image() ? this->background_image()->bitmap() : nullptr;
-    CSS::Repeat background_repeat_x = computed_values().background_repeat_x();
+    CSS::BackgroundRepeatData background_repeat = computed_values().background_repeat();
-    CSS::Repeat background_repeat_y = computed_values().background_repeat_y();
 
     if (is_root_element()) {
         // CSS 2.1 Appendix E.2: If the element is a root element, paint the background over the entire canvas.
@@ -85,8 +84,7 @@ void Box::paint_background(PaintContext& context)
         if (document().html_element()->should_use_body_background_properties()) {
             background_color = document().background_color(context.palette());
             background_image = document().background_image();
-            background_repeat_x = document().background_repeat_x();
+            background_repeat = { document().background_repeat_x(), document().background_repeat_y() };
-            background_repeat_y = document().background_repeat_y();
         }
     } else {
         background_rect = enclosing_int_rect(padded_rect());
@@ -100,8 +98,8 @@ void Box::paint_background(PaintContext& context)
     auto background_data = Painting::BackgroundData {
         .color = background_color,
         .image = background_image,
-        .repeat_x = background_repeat_x,
+        .repeat_x = background_repeat.repeat_x,
-        .repeat_y = background_repeat_y
+        .repeat_y = background_repeat.repeat_y
     };
     Painting::paint_background(context, background_rect, background_data, normalized_border_radius_data());
 }

Userland/Libraries/LibWeb/Layout/InlineNode.cpp

@@ -52,8 +52,8 @@ void InlineNode::paint(PaintContext& context, PaintPhase phase)
         auto background_data = Painting::BackgroundData {
             .color = computed_values().background_color(),
             .image = background_image() ? background_image()->bitmap() : nullptr,
-            .repeat_x = computed_values().background_repeat_x(),
+            .repeat_x = computed_values().background_repeat().repeat_x,
-            .repeat_y = computed_values().background_repeat_y()
+            .repeat_y = computed_values().background_repeat().repeat_y
         };
 
         auto top_left_border_radius = computed_values().border_top_left_radius();

Userland/Libraries/LibWeb/Layout/Node.cpp

@@ -240,13 +240,9 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& specified_style)
     if (border_top_right_radius.has_value())
         computed_values.set_border_top_right_radius(border_top_right_radius.value()->to_length());
 
-    auto background_repeat_x = specified_style.background_repeat_x();
+    auto background_repeat = specified_style.background_repeat();
-    if (background_repeat_x.has_value())
+    if (background_repeat.has_value())
-        computed_values.set_background_repeat_x(background_repeat_x.value());
+        computed_values.set_background_repeat(background_repeat.value());
-
-    auto background_repeat_y = specified_style.background_repeat_y();
-    if (background_repeat_y.has_value())
-        computed_values.set_background_repeat_y(background_repeat_y.value());
 
     computed_values.set_display(specified_style.display());