LibWeb/CSS: Rename background-repeat related symbols to align with spec

These will be used for the mask-repeat property as well in an upcoming
commit, hence the more generic names. Also, this more closely matches
the names used in the spec.

Libraries/LibWeb/CMakeLists.txt

@@ -182,7 +182,6 @@ set(SOURCES
     CSS/StyleValues/AnchorStyleValue.cpp
     CSS/StyleValues/AnchorSizeStyleValue.cpp
     CSS/StyleValues/AngleStyleValue.cpp
-    CSS/StyleValues/BackgroundRepeatStyleValue.cpp
     CSS/StyleValues/BackgroundSizeStyleValue.cpp
     CSS/StyleValues/BasicShapeStyleValue.cpp
     CSS/StyleValues/BorderImageSliceStyleValue.cpp
@@ -224,6 +223,7 @@ set(SOURCES
     CSS/StyleValues/PositionStyleValue.cpp
     CSS/StyleValues/RadialGradientStyleValue.cpp
     CSS/StyleValues/RectStyleValue.cpp
+    CSS/StyleValues/RepeatStyleStyleValue.cpp
     CSS/StyleValues/ScrollbarColorStyleValue.cpp
     CSS/StyleValues/ShadowStyleValue.cpp
     CSS/StyleValues/ShorthandStyleValue.cpp

Libraries/LibWeb/CSS/CSSStyleValue.cpp

@@ -16,7 +16,6 @@
 #include <LibWeb/CSS/StyleValues/AnchorSizeStyleValue.h>
 #include <LibWeb/CSS/StyleValues/AnchorStyleValue.h>
 #include <LibWeb/CSS/StyleValues/AngleStyleValue.h>
-#include <LibWeb/CSS/StyleValues/BackgroundRepeatStyleValue.h>
 #include <LibWeb/CSS/StyleValues/BackgroundSizeStyleValue.h>
 #include <LibWeb/CSS/StyleValues/BasicShapeStyleValue.h>
 #include <LibWeb/CSS/StyleValues/BorderImageSliceStyleValue.h>
@@ -58,6 +57,7 @@
 #include <LibWeb/CSS/StyleValues/RadialGradientStyleValue.h>
 #include <LibWeb/CSS/StyleValues/RatioStyleValue.h>
 #include <LibWeb/CSS/StyleValues/RectStyleValue.h>
+#include <LibWeb/CSS/StyleValues/RepeatStyleStyleValue.h>
 #include <LibWeb/CSS/StyleValues/ResolutionStyleValue.h>
 #include <LibWeb/CSS/StyleValues/ScrollbarColorStyleValue.h>
 #include <LibWeb/CSS/StyleValues/ScrollbarGutterStyleValue.h>
@@ -128,10 +128,10 @@ AngleStyleValue const& CSSStyleValue::as_angle() const
     return static_cast<AngleStyleValue const&>(*this);
 }
 
-BackgroundRepeatStyleValue const& CSSStyleValue::as_background_repeat() const
+RepeatStyleStyleValue const& CSSStyleValue::as_repeat_style() const
 {
-    VERIFY(is_background_repeat());
-    return static_cast<BackgroundRepeatStyleValue const&>(*this);
+    VERIFY(is_repeat_style());
+    return static_cast<RepeatStyleStyleValue const&>(*this);
 }
 
 BackgroundSizeStyleValue const& CSSStyleValue::as_background_size() const

Libraries/LibWeb/CSS/CSSStyleValue.h

@@ -102,10 +102,9 @@ public:
         Anchor,
         AnchorSize,
         Angle,
-        BackgroundRepeat,
         BackgroundSize,
-        BorderImageSlice,
         BasicShape,
+        BorderImageSlice,
         BorderRadius,
         Calculated,
         Color,
@@ -144,6 +143,7 @@ public:
         RadialGradient,
         Ratio,
         Rect,
+        RepeatStyle,
         Resolution,
         ScrollbarColor,
         ScrollbarGutter,
@@ -180,10 +180,6 @@ public:
     AngleStyleValue const& as_angle() const;
     AngleStyleValue& as_angle() { return const_cast<AngleStyleValue&>(const_cast<CSSStyleValue const&>(*this).as_angle()); }
 
-    bool is_background_repeat() const { return type() == Type::BackgroundRepeat; }
-    BackgroundRepeatStyleValue const& as_background_repeat() const;
-    BackgroundRepeatStyleValue& as_background_repeat() { return const_cast<BackgroundRepeatStyleValue&>(const_cast<CSSStyleValue const&>(*this).as_background_repeat()); }
-
     bool is_background_size() const { return type() == Type::BackgroundSize; }
     BackgroundSizeStyleValue const& as_background_size() const;
     BackgroundSizeStyleValue& as_background_size() { return const_cast<BackgroundSizeStyleValue&>(const_cast<CSSStyleValue const&>(*this).as_background_size()); }
@@ -349,6 +345,10 @@ public:
     RectStyleValue const& as_rect() const;
     RectStyleValue& as_rect() { return const_cast<RectStyleValue&>(const_cast<CSSStyleValue const&>(*this).as_rect()); }
 
+    bool is_repeat_style() const { return type() == Type::RepeatStyle; }
+    RepeatStyleStyleValue const& as_repeat_style() const;
+    RepeatStyleStyleValue& as_repeat_style() { return const_cast<RepeatStyleStyleValue&>(const_cast<CSSStyleValue const&>(*this).as_repeat_style()); }
+
     bool is_resolution() const { return type() == Type::Resolution; }
     ResolutionStyleValue const& as_resolution() const;
     ResolutionStyleValue& as_resolution() { return const_cast<ResolutionStyleValue&>(const_cast<CSSStyleValue const&>(*this).as_resolution()); }

Libraries/LibWeb/CSS/ComputedValues.h

@@ -314,8 +314,8 @@ struct BackgroundLayerData {
     CSS::BackgroundSize size_type { CSS::BackgroundSize::LengthPercentage };
     CSS::LengthPercentage size_x { CSS::Length::make_auto() };
     CSS::LengthPercentage size_y { CSS::Length::make_auto() };
-    CSS::Repeat repeat_x { CSS::Repeat::Repeat };
-    CSS::Repeat repeat_y { CSS::Repeat::Repeat };
+    CSS::Repetition repeat_x { CSS::Repetition::Repeat };
+    CSS::Repetition repeat_y { CSS::Repetition::Repeat };
     CSS::MixBlendMode blend_mode { CSS::MixBlendMode::Normal };
 };
 

Libraries/LibWeb/CSS/Enums.json

@@ -597,7 +597,7 @@
     "strict-origin-when-cross-origin",
     "unsafe-url"
   ],
-  "repeat": [
+  "repetition": [
     "no-repeat",
     "repeat",
     "round",

Libraries/LibWeb/CSS/Parser/Parser.h

@@ -421,7 +421,6 @@ private:
     RefPtr<CSSStyleValue const> parse_aspect_ratio_value(TokenStream<ComponentValue>&);
     RefPtr<CSSStyleValue const> parse_background_value(TokenStream<ComponentValue>&);
     RefPtr<CSSStyleValue const> parse_single_background_position_x_or_y_value(TokenStream<ComponentValue>&, PropertyID);
-    RefPtr<CSSStyleValue const> parse_single_background_repeat_value(TokenStream<ComponentValue>&);
     RefPtr<CSSStyleValue const> parse_single_background_size_value(TokenStream<ComponentValue>&);
     RefPtr<CSSStyleValue const> parse_border_value(PropertyID, TokenStream<ComponentValue>&);
     RefPtr<CSSStyleValue const> parse_border_image_value(TokenStream<ComponentValue>&);
@@ -458,6 +457,7 @@ private:
     RefPtr<CSSStyleValue const> parse_place_items_value(TokenStream<ComponentValue>&);
     RefPtr<CSSStyleValue const> parse_place_self_value(TokenStream<ComponentValue>&);
     RefPtr<CSSStyleValue const> parse_quotes_value(TokenStream<ComponentValue>&);
+    RefPtr<CSSStyleValue const> parse_single_repeat_style_value(PropertyID, TokenStream<ComponentValue>&);
     RefPtr<CSSStyleValue const> parse_scrollbar_color_value(TokenStream<ComponentValue>&);
     RefPtr<CSSStyleValue const> parse_scrollbar_gutter_value(TokenStream<ComponentValue>&);
     enum class AllowInsetKeyword {

Libraries/LibWeb/CSS/Parser/PropertyParsing.cpp

@@ -20,7 +20,6 @@
 #include <LibWeb/CSS/Parser/ErrorReporter.h>
 #include <LibWeb/CSS/Parser/Parser.h>
 #include <LibWeb/CSS/StyleValues/AngleStyleValue.h>
-#include <LibWeb/CSS/StyleValues/BackgroundRepeatStyleValue.h>
 #include <LibWeb/CSS/StyleValues/BackgroundSizeStyleValue.h>
 #include <LibWeb/CSS/StyleValues/BorderImageSliceStyleValue.h>
 #include <LibWeb/CSS/StyleValues/BorderRadiusStyleValue.h>
@@ -50,6 +49,7 @@
 #include <LibWeb/CSS/StyleValues/OpenTypeTaggedStyleValue.h>
 #include <LibWeb/CSS/StyleValues/PercentageStyleValue.h>
 #include <LibWeb/CSS/StyleValues/PositionStyleValue.h>
+#include <LibWeb/CSS/StyleValues/RepeatStyleStyleValue.h>
 #include <LibWeb/CSS/StyleValues/ResolutionStyleValue.h>
 #include <LibWeb/CSS/StyleValues/ScrollbarColorStyleValue.h>
 #include <LibWeb/CSS/StyleValues/ScrollbarGutterStyleValue.h>
@@ -476,7 +476,7 @@ Parser::ParseErrorOr<NonnullRefPtr<CSSStyleValue const>> Parser::parse_css_value
             return parsed_value.release_nonnull();
         return ParseError::SyntaxError;
     case PropertyID::BackgroundRepeat:
-        if (auto parsed_value = parse_comma_separated_value_list(tokens, [this](auto& tokens) { return parse_single_background_repeat_value(tokens); }))
+        if (auto parsed_value = parse_comma_separated_value_list(tokens, [this, property_id](auto& tokens) { return parse_single_repeat_style_value(property_id, tokens); }))
             return parsed_value.release_nonnull();
         return ParseError::SyntaxError;
     case PropertyID::BackgroundSize:
@@ -1252,9 +1252,10 @@ RefPtr<CSSStyleValue const> Parser::parse_background_value(TokenStream<Component
         if (!value_and_property.has_value())
             return nullptr;
         auto& value = value_and_property->style_value;
-        remove_property(remaining_layer_properties, value_and_property->property);
+        auto property = value_and_property->property;
+        remove_property(remaining_layer_properties, property);
 
-        switch (value_and_property->property) {
+        switch (property) {
         case PropertyID::BackgroundAttachment:
             VERIFY(!background_attachment);
             background_attachment = value.release_nonnull();
@@ -1306,7 +1307,7 @@ RefPtr<CSSStyleValue const> Parser::parse_background_value(TokenStream<Component
         case PropertyID::BackgroundRepeat: {
             VERIFY(!background_repeat);
             tokens.reconsume_current_input_token();
-            if (auto maybe_repeat = parse_single_background_repeat_value(tokens)) {
+            if (auto maybe_repeat = parse_single_repeat_style_value(property, tokens)) {
                 background_repeat = maybe_repeat.release_nonnull();
                 continue;
             }
@@ -1448,66 +1449,6 @@ RefPtr<CSSStyleValue const> Parser::parse_single_background_position_x_or_y_valu
     return EdgeStyleValue::create(relative_edge, {});
 }
 
-RefPtr<CSSStyleValue const> Parser::parse_single_background_repeat_value(TokenStream<ComponentValue>& tokens)
-{
-    auto transaction = tokens.begin_transaction();
-
-    auto is_directional_repeat = [](CSSStyleValue const& value) -> bool {
-        auto keyword = value.to_keyword();
-        return keyword == Keyword::RepeatX || keyword == Keyword::RepeatY;
-    };
-
-    auto as_repeat = [](Keyword keyword) -> Optional<Repeat> {
-        switch (keyword) {
-        case Keyword::NoRepeat:
-            return Repeat::NoRepeat;
-        case Keyword::Repeat:
-            return Repeat::Repeat;
-        case Keyword::Round:
-            return Repeat::Round;
-        case Keyword::Space:
-            return Repeat::Space;
-        default:
-            return {};
-        }
-    };
-
-    auto maybe_x_value = parse_css_value_for_property(PropertyID::BackgroundRepeat, tokens);
-    if (!maybe_x_value)
-        return nullptr;
-    auto x_value = maybe_x_value.release_nonnull();
-
-    if (is_directional_repeat(*x_value)) {
-        auto keyword = x_value->to_keyword();
-        transaction.commit();
-        return BackgroundRepeatStyleValue::create(
-            keyword == Keyword::RepeatX ? Repeat::Repeat : Repeat::NoRepeat,
-            keyword == Keyword::RepeatX ? Repeat::NoRepeat : Repeat::Repeat);
-    }
-
-    auto x_repeat = as_repeat(x_value->to_keyword());
-    if (!x_repeat.has_value())
-        return nullptr;
-
-    // See if we have a second value for Y
-    auto maybe_y_value = parse_css_value_for_property(PropertyID::BackgroundRepeat, tokens);
-    if (!maybe_y_value) {
-        // We don't have a second value, so use x for both
-        transaction.commit();
-        return BackgroundRepeatStyleValue::create(x_repeat.value(), x_repeat.value());
-    }
-    auto y_value = maybe_y_value.release_nonnull();
-    if (is_directional_repeat(*y_value))
-        return nullptr;
-
-    auto y_repeat = as_repeat(y_value->to_keyword());
-    if (!y_repeat.has_value())
-        return nullptr;
-
-    transaction.commit();
-    return BackgroundRepeatStyleValue::create(x_repeat.value(), y_repeat.value());
-}
-
 RefPtr<CSSStyleValue const> Parser::parse_single_background_size_value(TokenStream<ComponentValue>& tokens)
 {
     auto transaction = tokens.begin_transaction();
@@ -3764,6 +3705,66 @@ RefPtr<CSSStyleValue const> Parser::parse_quotes_value(TokenStream<ComponentValu
     return StyleValueList::create(move(string_values), StyleValueList::Separator::Space);
 }
 
+RefPtr<CSSStyleValue const> Parser::parse_single_repeat_style_value(PropertyID property, TokenStream<ComponentValue>& tokens)
+{
+    auto transaction = tokens.begin_transaction();
+
+    auto is_directional_repeat = [](CSSStyleValue const& value) -> bool {
+        auto keyword = value.to_keyword();
+        return keyword == Keyword::RepeatX || keyword == Keyword::RepeatY;
+    };
+
+    auto as_repeat = [](Keyword keyword) -> Optional<Repetition> {
+        switch (keyword) {
+        case Keyword::NoRepeat:
+            return Repetition::NoRepeat;
+        case Keyword::Repeat:
+            return Repetition::Repeat;
+        case Keyword::Round:
+            return Repetition::Round;
+        case Keyword::Space:
+            return Repetition::Space;
+        default:
+            return {};
+        }
+    };
+
+    auto maybe_x_value = parse_css_value_for_property(property, tokens);
+    if (!maybe_x_value)
+        return nullptr;
+    auto x_value = maybe_x_value.release_nonnull();
+
+    if (is_directional_repeat(*x_value)) {
+        auto keyword = x_value->to_keyword();
+        transaction.commit();
+        return RepeatStyleStyleValue::create(
+            keyword == Keyword::RepeatX ? Repetition::Repeat : Repetition::NoRepeat,
+            keyword == Keyword::RepeatX ? Repetition::NoRepeat : Repetition::Repeat);
+    }
+
+    auto x_repeat = as_repeat(x_value->to_keyword());
+    if (!x_repeat.has_value())
+        return nullptr;
+
+    // See if we have a second value for Y
+    auto maybe_y_value = parse_css_value_for_property(property, tokens);
+    if (!maybe_y_value) {
+        // We don't have a second value, so use x for both
+        transaction.commit();
+        return RepeatStyleStyleValue::create(x_repeat.value(), x_repeat.value());
+    }
+    auto y_value = maybe_y_value.release_nonnull();
+    if (is_directional_repeat(*y_value))
+        return nullptr;
+
+    auto y_repeat = as_repeat(y_value->to_keyword());
+    if (!y_repeat.has_value())
+        return nullptr;
+
+    transaction.commit();
+    return RepeatStyleStyleValue::create(x_repeat.value(), y_repeat.value());
+}
+
 RefPtr<CSSStyleValue const> Parser::parse_text_decoration_value(TokenStream<ComponentValue>& tokens)
 {
     RefPtr<CSSStyleValue const> decoration_line;

Libraries/LibWeb/CSS/Parser/ValueParsing.cpp

@@ -25,7 +25,6 @@
 #include <LibWeb/CSS/StyleValues/AnchorSizeStyleValue.h>
 #include <LibWeb/CSS/StyleValues/AnchorStyleValue.h>
 #include <LibWeb/CSS/StyleValues/AngleStyleValue.h>
-#include <LibWeb/CSS/StyleValues/BackgroundRepeatStyleValue.h>
 #include <LibWeb/CSS/StyleValues/BackgroundSizeStyleValue.h>
 #include <LibWeb/CSS/StyleValues/BasicShapeStyleValue.h>
 #include <LibWeb/CSS/StyleValues/CSSColorValue.h>
@@ -61,6 +60,7 @@
 #include <LibWeb/CSS/StyleValues/RadialGradientStyleValue.h>
 #include <LibWeb/CSS/StyleValues/RatioStyleValue.h>
 #include <LibWeb/CSS/StyleValues/RectStyleValue.h>
+#include <LibWeb/CSS/StyleValues/RepeatStyleStyleValue.h>
 #include <LibWeb/CSS/StyleValues/ResolutionStyleValue.h>
 #include <LibWeb/CSS/StyleValues/StringStyleValue.h>
 #include <LibWeb/CSS/StyleValues/StyleValueList.h>

Libraries/LibWeb/CSS/Properties.json

@@ -459,7 +459,7 @@
     "initial": "repeat",
     "max-values": 2,
     "valid-types": [
-      "repeat"
+      "repetition"
     ],
     "valid-identifiers": [
       "repeat-x",

Libraries/LibWeb/CSS/StyleValues/BackgroundRepeatStyleValue.h

@@ -1,42 +0,0 @@
-/*
- * Copyright (c) 2018-2020, Andreas Kling <andreas@ladybird.org>
- * Copyright (c) 2021, Tobias Christiansen <tobyase@serenityos.org>
- * Copyright (c) 2021-2023, Sam Atkins <atkinssj@serenityos.org>
- * Copyright (c) 2022-2023, MacDue <macdue@dueutil.tech>
- *
- * SPDX-License-Identifier: BSD-2-Clause
- */
-
-#pragma once
-
-#include <LibWeb/CSS/CSSStyleValue.h>
-#include <LibWeb/CSS/Enums.h>
-
-namespace Web::CSS {
-
-class BackgroundRepeatStyleValue final : public StyleValueWithDefaultOperators<BackgroundRepeatStyleValue> {
-public:
-    static ValueComparingNonnullRefPtr<BackgroundRepeatStyleValue const> create(Repeat repeat_x, Repeat repeat_y)
-    {
-        return adopt_ref(*new (nothrow) BackgroundRepeatStyleValue(repeat_x, repeat_y));
-    }
-    virtual ~BackgroundRepeatStyleValue() override;
-
-    Repeat repeat_x() const { return m_properties.repeat_x; }
-    Repeat repeat_y() const { return m_properties.repeat_y; }
-
-    virtual String to_string(SerializationMode) const override;
-
-    bool properties_equal(BackgroundRepeatStyleValue const& other) const { return m_properties == other.m_properties; }
-
-private:
-    BackgroundRepeatStyleValue(Repeat repeat_x, Repeat repeat_y);
-
-    struct Properties {
-        Repeat repeat_x;
-        Repeat repeat_y;
-        bool operator==(Properties const&) const = default;
-    } m_properties;
-};
-
-}

Libraries/LibWeb/CSS/StyleValues/RepeatStyleStyleValue.cpp

@@ -7,27 +7,27 @@
  * SPDX-License-Identifier: BSD-2-Clause
  */
 
-#include "BackgroundRepeatStyleValue.h"
+#include "RepeatStyleStyleValue.h"
 #include <AK/String.h>
 
 namespace Web::CSS {
 
-BackgroundRepeatStyleValue::BackgroundRepeatStyleValue(Repeat repeat_x, Repeat repeat_y)
-    : StyleValueWithDefaultOperators(Type::BackgroundRepeat)
+RepeatStyleStyleValue::RepeatStyleStyleValue(Repetition repeat_x, Repetition repeat_y)
+    : StyleValueWithDefaultOperators(Type::RepeatStyle)
     , m_properties { .repeat_x = repeat_x, .repeat_y = repeat_y }
 {
 }
 
-BackgroundRepeatStyleValue::~BackgroundRepeatStyleValue() = default;
+RepeatStyleStyleValue::~RepeatStyleStyleValue() = default;
 
-String BackgroundRepeatStyleValue::to_string(SerializationMode) const
+String RepeatStyleStyleValue::to_string(SerializationMode) const
 {
     if (m_properties.repeat_x == m_properties.repeat_y)
         return MUST(String::from_utf8(CSS::to_string(m_properties.repeat_x)));
 
-    if (m_properties.repeat_x == Repeat::Repeat && m_properties.repeat_y == Repeat::NoRepeat)
+    if (m_properties.repeat_x == Repetition::Repeat && m_properties.repeat_y == Repetition::NoRepeat)
         return "repeat-x"_string;
-    if (m_properties.repeat_x == Repeat::NoRepeat && m_properties.repeat_y == Repeat::Repeat)
+    if (m_properties.repeat_x == Repetition::NoRepeat && m_properties.repeat_y == Repetition::Repeat)
         return "repeat-y"_string;
 
     return MUST(String::formatted("{} {}", CSS::to_string(m_properties.repeat_x), CSS::to_string(m_properties.repeat_y)));

Libraries/LibWeb/CSS/StyleValues/RepeatStyleStyleValue.h

@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2018-2020, Andreas Kling <andreas@ladybird.org>
+ * Copyright (c) 2021, Tobias Christiansen <tobyase@serenityos.org>
+ * Copyright (c) 2021-2023, Sam Atkins <atkinssj@serenityos.org>
+ * Copyright (c) 2022-2023, MacDue <macdue@dueutil.tech>
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#pragma once
+
+#include <LibWeb/CSS/CSSStyleValue.h>
+#include <LibWeb/CSS/Enums.h>
+
+namespace Web::CSS {
+
+class RepeatStyleStyleValue final : public StyleValueWithDefaultOperators<RepeatStyleStyleValue> {
+public:
+    static ValueComparingNonnullRefPtr<RepeatStyleStyleValue const> create(Repetition repeat_x, Repetition repeat_y)
+    {
+        return adopt_ref(*new (nothrow) RepeatStyleStyleValue(repeat_x, repeat_y));
+    }
+    virtual ~RepeatStyleStyleValue() override;
+
+    Repetition repeat_x() const { return m_properties.repeat_x; }
+    Repetition repeat_y() const { return m_properties.repeat_y; }
+
+    virtual String to_string(SerializationMode) const override;
+
+    bool properties_equal(RepeatStyleStyleValue const& other) const { return m_properties == other.m_properties; }
+
+private:
+    RepeatStyleStyleValue(Repetition repeat_x, Repetition repeat_y);
+
+    struct Properties {
+        Repetition repeat_x;
+        Repetition repeat_y;
+        bool operator==(Properties const&) const = default;
+    } m_properties;
+};
+
+}

Libraries/LibWeb/Forward.h

@@ -198,7 +198,6 @@ class Angle;
 class AngleOrCalculated;
 class AnglePercentage;
 class AngleStyleValue;
-class BackgroundRepeatStyleValue;
 class BackgroundSizeStyleValue;
 class BasicShapeStyleValue;
 class BorderImageSliceStyleValue;
@@ -307,6 +306,7 @@ class RadialGradientStyleValue;
 class Ratio;
 class RatioStyleValue;
 class RectStyleValue;
+class RepeatStyleStyleValue;
 class Resolution;
 class ResolutionOrCalculated;
 class ResolutionStyleValue;

Libraries/LibWeb/Layout/Node.cpp

@@ -9,7 +9,6 @@
 #include <AK/Demangle.h>
 #include <LibWeb/CSS/ComputedProperties.h>
 #include <LibWeb/CSS/StyleValues/AbstractImageStyleValue.h>
-#include <LibWeb/CSS/StyleValues/BackgroundRepeatStyleValue.h>
 #include <LibWeb/CSS/StyleValues/BackgroundSizeStyleValue.h>
 #include <LibWeb/CSS/StyleValues/BorderRadiusStyleValue.h>
 #include <LibWeb/CSS/StyleValues/CSSKeywordValue.h>
@@ -18,6 +17,7 @@
 #include <LibWeb/CSS/StyleValues/NumberStyleValue.h>
 #include <LibWeb/CSS/StyleValues/PercentageStyleValue.h>
 #include <LibWeb/CSS/StyleValues/RatioStyleValue.h>
+#include <LibWeb/CSS/StyleValues/RepeatStyleStyleValue.h>
 #include <LibWeb/CSS/StyleValues/StyleValueList.h>
 #include <LibWeb/CSS/StyleValues/TimeStyleValue.h>
 #include <LibWeb/CSS/StyleValues/URLStyleValue.h>
@@ -510,9 +510,9 @@ void NodeWithStyle::apply_style(CSS::ComputedProperties const& computed_style)
                 }
             }
 
-            if (auto repeat_value = value_for_layer(repeats, layer_index); repeat_value && repeat_value->is_background_repeat()) {
-                layer.repeat_x = repeat_value->as_background_repeat().repeat_x();
-                layer.repeat_y = repeat_value->as_background_repeat().repeat_y();
+            if (auto repeat_value = value_for_layer(repeats, layer_index); repeat_value && repeat_value->is_repeat_style()) {
+                layer.repeat_x = repeat_value->as_repeat_style().repeat_x();
+                layer.repeat_y = repeat_value->as_repeat_style().repeat_y();
             }
 
             layer.blend_mode = CSS::keyword_to_mix_blend_mode(value_for_layer(background_blend_modes, layer_index)->to_keyword()).value_or(CSS::MixBlendMode::Normal);

Libraries/LibWeb/Painting/BackgroundPainting.cpp

@@ -204,11 +204,11 @@ void paint_background(DisplayListRecordingContext& context, PaintableBox const&
         CSSPixels y_step = 0;
 
         switch (layer.repeat_x) {
-        case CSS::Repeat::Round:
+        case CSS::Repetition::Round:
             x_step = image_rect.width();
             repeat_x = true;
             break;
-        case CSS::Repeat::Space: {
+        case CSS::Repetition::Space: {
             int whole_images = (background_positioning_area.width() / image_rect.width()).to_int();
             if (whole_images <= 1) {
                 x_step = image_rect.width();
@@ -221,11 +221,11 @@ void paint_background(DisplayListRecordingContext& context, PaintableBox const&
             }
             break;
         }
-        case CSS::Repeat::Repeat:
+        case CSS::Repetition::Repeat:
             x_step = image_rect.width();
             repeat_x = true;
             break;
-        case CSS::Repeat::NoRepeat:
+        case CSS::Repetition::NoRepeat:
             repeat_x = false;
             break;
         }
@@ -236,11 +236,11 @@ void paint_background(DisplayListRecordingContext& context, PaintableBox const&
         }
 
         switch (layer.repeat_y) {
-        case CSS::Repeat::Round:
+        case CSS::Repetition::Round:
             y_step = image_rect.height();
             repeat_y = true;
             break;
-        case CSS::Repeat::Space: {
+        case CSS::Repetition::Space: {
             int whole_images = (background_positioning_area.height() / image_rect.height()).to_int();
             if (whole_images <= 1) {
                 y_step = image_rect.height();
@@ -253,11 +253,11 @@ void paint_background(DisplayListRecordingContext& context, PaintableBox const&
             }
             break;
         }
-        case CSS::Repeat::Repeat:
+        case CSS::Repetition::Repeat:
             y_step = image_rect.height();
             repeat_y = true;
             break;
-        case CSS::Repeat::NoRepeat:
+        case CSS::Repetition::NoRepeat:
             repeat_y = false;
             break;
         }
@@ -417,15 +417,15 @@ ResolvedBackground resolve_background_layers(Vector<CSS::BackgroundLayerData> co
         // If background-repeat is round for one (or both) dimensions, there is a second step.
         // The UA must scale the image in that dimension (or both dimensions) so that it fits a
         // whole number of times in the background positioning area.
-        if (layer.repeat_x == CSS::Repeat::Round || layer.repeat_y == CSS::Repeat::Round) {
+        if (layer.repeat_x == CSS::Repetition::Round || layer.repeat_y == CSS::Repetition::Round) {
             // If X ≠ 0 is the width of the image after step one and W is the width of the
             // background positioning area, then the rounded width X' = W / round(W / X)
             // where round() is a function that returns the nearest natural number
             // (integer greater than zero).
-            if (layer.repeat_x == CSS::Repeat::Round) {
+            if (layer.repeat_x == CSS::Repetition::Round) {
                 image_rect.set_width(background_positioning_area.width() / round(background_positioning_area.width() / image_rect.width()));
             }
-            if (layer.repeat_y == CSS::Repeat::Round) {
+            if (layer.repeat_y == CSS::Repetition::Round) {
                 image_rect.set_height(background_positioning_area.height() / round(background_positioning_area.height() / image_rect.height()));
             }
 

Libraries/LibWeb/Painting/BackgroundPainting.h

@@ -21,8 +21,8 @@ struct ResolvedBackgroundLayerData {
     CSSPixels offset_y;
     CSSPixelRect background_positioning_area;
     CSSPixelRect image_rect;
-    CSS::Repeat repeat_x;
-    CSS::Repeat repeat_y;
+    CSS::Repetition repeat_x;
+    CSS::Repetition repeat_y;
     CSS::MixBlendMode blend_mode;
 };
 

Meta/gn/secondary/Userland/Libraries/LibWeb/CSS/StyleValues/BUILD.gn

@@ -3,7 +3,6 @@ source_set("StyleValues") {
   deps = [ "//Userland/Libraries/LibWeb:all_generated" ]
   sources = [
     "AngleStyleValue.cpp",
-    "BackgroundRepeatStyleValue.cpp",
     "BackgroundSizeStyleValue.cpp",
     "BasicShapeStyleValue.cpp",
     "BorderRadiusStyleValue.cpp",
@@ -39,6 +38,7 @@ source_set("StyleValues") {
     "PositionStyleValue.cpp",
     "RadialGradientStyleValue.cpp",
     "RectStyleValue.cpp",
+    "RepeatStyleStyleValue.cpp",
     "ShadowStyleValue.cpp",
     "ShorthandStyleValue.cpp",
     "StyleValueList.cpp",