LibWeb: Replace BackgroundStyleValue with ShorthandStyleValue

The `to_string()` for this is modified a little from the original,
because we have to calculate what the layer-count is then, instead of
having it already calculated.

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

@@ -5,7 +5,6 @@ source_set("StyleValues") {
     "AngleStyleValue.cpp",
     "BackgroundRepeatStyleValue.cpp",
     "BackgroundSizeStyleValue.cpp",
-    "BackgroundStyleValue.cpp",
     "BorderRadiusShorthandStyleValue.cpp",
     "BorderRadiusStyleValue.cpp",
     "BorderStyleValue.cpp",

Userland/Libraries/LibWeb/CMakeLists.txt

@@ -82,7 +82,6 @@ set(SOURCES
     CSS/StyleValues/AngleStyleValue.cpp
     CSS/StyleValues/BackgroundRepeatStyleValue.cpp
     CSS/StyleValues/BackgroundSizeStyleValue.cpp
-    CSS/StyleValues/BackgroundStyleValue.cpp
     CSS/StyleValues/BorderRadiusShorthandStyleValue.cpp
     CSS/StyleValues/BorderRadiusStyleValue.cpp
     CSS/StyleValues/BorderStyleValue.cpp

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

@@ -37,7 +37,6 @@
 #include <LibWeb/CSS/StyleValues/AngleStyleValue.h>
 #include <LibWeb/CSS/StyleValues/BackgroundRepeatStyleValue.h>
 #include <LibWeb/CSS/StyleValues/BackgroundSizeStyleValue.h>
-#include <LibWeb/CSS/StyleValues/BackgroundStyleValue.h>
 #include <LibWeb/CSS/StyleValues/BorderRadiusShorthandStyleValue.h>
 #include <LibWeb/CSS/StyleValues/BorderRadiusStyleValue.h>
 #include <LibWeb/CSS/StyleValues/BorderStyleValue.h>
@@ -2654,6 +2653,12 @@ RefPtr<StyleValue> Parser::parse_aspect_ratio_value(Vector<ComponentValue> const
 
 RefPtr<StyleValue> Parser::parse_background_value(Vector<ComponentValue> const& component_values)
 {
+    auto make_background_shorthand = [&](auto background_color, auto background_image, auto background_position, auto background_size, auto background_repeat, auto background_attachment, auto background_origin, auto background_clip) {
+        return ShorthandStyleValue::create(PropertyID::Background,
+            { PropertyID::BackgroundColor, PropertyID::BackgroundImage, PropertyID::BackgroundPosition, PropertyID::BackgroundSize, PropertyID::BackgroundRepeat, PropertyID::BackgroundAttachment, PropertyID::BackgroundOrigin, PropertyID::BackgroundClip },
+            { move(background_color), move(background_image), move(background_position), move(background_size), move(background_repeat), move(background_attachment), move(background_origin), move(background_clip) });
+    };
+
     StyleValueVector background_images;
     StyleValueVector background_positions;
     StyleValueVector background_sizes;
@@ -2775,7 +2780,7 @@ RefPtr<StyleValue> Parser::parse_background_value(Vector<ComponentValue> const&
             //    If two values are present, then the first sets background-origin and the second background-clip."
             //        - https://www.w3.org/TR/css-backgrounds-3/#background
             // So, we put the first one in background-origin, then if we get a second, we put it in background-clip.
-            // If we only get one, we copy the value before creating the BackgroundStyleValue.
+            // If we only get one, we copy the value before creating the ShorthandStyleValue.
             if (!background_origin) {
                 background_origin = value.release_nonnull();
             } else if (!background_clip) {
@@ -2832,7 +2837,7 @@ RefPtr<StyleValue> Parser::parse_background_value(Vector<ComponentValue> const&
 
         if (!background_color)
             background_color = initial_background_color;
-        return BackgroundStyleValue::create(
+        return make_background_shorthand(
             background_color.release_nonnull(),
             StyleValueList::create(move(background_images), StyleValueList::Separator::Comma),
             StyleValueList::create(move(background_positions), StyleValueList::Separator::Comma),
@@ -2863,7 +2868,7 @@ RefPtr<StyleValue> Parser::parse_background_value(Vector<ComponentValue> const&
         background_clip = background_origin;
     }
 
-    return BackgroundStyleValue::create(
+    return make_background_shorthand(
         background_color.release_nonnull(),
         background_image.release_nonnull(),
         background_position.release_nonnull(),

Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp

@@ -14,7 +14,6 @@
 #include <LibWeb/CSS/StyleComputer.h>
 #include <LibWeb/CSS/StyleValues/BackgroundRepeatStyleValue.h>
 #include <LibWeb/CSS/StyleValues/BackgroundSizeStyleValue.h>
-#include <LibWeb/CSS/StyleValues/BackgroundStyleValue.h>
 #include <LibWeb/CSS/StyleValues/BorderRadiusShorthandStyleValue.h>
 #include <LibWeb/CSS/StyleValues/BorderRadiusStyleValue.h>
 #include <LibWeb/CSS/StyleValues/BorderStyleValue.h>
@@ -36,6 +35,7 @@
 #include <LibWeb/CSS/StyleValues/RatioStyleValue.h>
 #include <LibWeb/CSS/StyleValues/RectStyleValue.h>
 #include <LibWeb/CSS/StyleValues/ShadowStyleValue.h>
+#include <LibWeb/CSS/StyleValues/ShorthandStyleValue.h>
 #include <LibWeb/CSS/StyleValues/StyleValueList.h>
 #include <LibWeb/CSS/StyleValues/TextDecorationStyleValue.h>
 #include <LibWeb/CSS/StyleValues/TimeStyleValue.h>
@@ -157,24 +157,16 @@ RefPtr<StyleValue const> ResolvedCSSStyleDeclaration::style_value_for_property(L
     // https://www.w3.org/TR/cssom-1/#resolved-values
     switch (property_id) {
     case PropertyID::Background: {
-        auto maybe_background_color = property(PropertyID::BackgroundColor);
+        return ShorthandStyleValue::create(property_id,
-        auto maybe_background_image = property(PropertyID::BackgroundImage);
+            { PropertyID::BackgroundColor, PropertyID::BackgroundImage, PropertyID::BackgroundPosition, PropertyID::BackgroundSize, PropertyID::BackgroundRepeat, PropertyID::BackgroundAttachment, PropertyID::BackgroundOrigin, PropertyID::BackgroundClip },
-        auto maybe_background_position = property(PropertyID::BackgroundPosition);
+            { value_or_default(property(PropertyID::BackgroundColor), InitialStyleValue::the()),
-        auto maybe_background_size = property(PropertyID::BackgroundSize);
+                value_or_default(property(PropertyID::BackgroundImage), IdentifierStyleValue::create(ValueID::None)),
-        auto maybe_background_repeat = property(PropertyID::BackgroundRepeat);
+                value_or_default(property(PropertyID::BackgroundPosition), PositionStyleValue::create(EdgeStyleValue::create(PositionEdge::Left, Length::make_px(0)), EdgeStyleValue::create(PositionEdge::Top, Length::make_px(0)))),
-        auto maybe_background_attachment = property(PropertyID::BackgroundAttachment);
+                value_or_default(property(PropertyID::BackgroundSize), IdentifierStyleValue::create(ValueID::Auto)),
-        auto maybe_background_origin = property(PropertyID::BackgroundOrigin);
+                value_or_default(property(PropertyID::BackgroundRepeat), BackgroundRepeatStyleValue::create(Repeat::Repeat, Repeat::Repeat)),
-        auto maybe_background_clip = property(PropertyID::BackgroundClip);
+                value_or_default(property(PropertyID::BackgroundAttachment), IdentifierStyleValue::create(ValueID::Scroll)),
-
+                value_or_default(property(PropertyID::BackgroundOrigin), IdentifierStyleValue::create(ValueID::PaddingBox)),
-        return BackgroundStyleValue::create(
+                value_or_default(property(PropertyID::BackgroundClip), IdentifierStyleValue::create(ValueID::BorderBox)) });
-            value_or_default(maybe_background_color, InitialStyleValue::the()),
-            value_or_default(maybe_background_image, IdentifierStyleValue::create(ValueID::None)),
-            value_or_default(maybe_background_position, PositionStyleValue::create(EdgeStyleValue::create(PositionEdge::Left, Length::make_px(0)), EdgeStyleValue::create(PositionEdge::Top, Length::make_px(0)))),
-            value_or_default(maybe_background_size, IdentifierStyleValue::create(ValueID::Auto)),
-            value_or_default(maybe_background_repeat, BackgroundRepeatStyleValue::create(Repeat::Repeat, Repeat::Repeat)),
-            value_or_default(maybe_background_attachment, IdentifierStyleValue::create(ValueID::Scroll)),
-            value_or_default(maybe_background_origin, IdentifierStyleValue::create(ValueID::PaddingBox)),
-            value_or_default(maybe_background_clip, IdentifierStyleValue::create(ValueID::BorderBox)));
     }
     case PropertyID::BackgroundColor:
         return ColorStyleValue::create(layout_node.computed_values().background_color());

Userland/Libraries/LibWeb/CSS/StyleComputer.cpp

@@ -30,7 +30,6 @@
 #include <LibWeb/CSS/StyleComputer.h>
 #include <LibWeb/CSS/StyleSheet.h>
 #include <LibWeb/CSS/StyleValues/AngleStyleValue.h>
-#include <LibWeb/CSS/StyleValues/BackgroundStyleValue.h>
 #include <LibWeb/CSS/StyleValues/BorderRadiusShorthandStyleValue.h>
 #include <LibWeb/CSS/StyleValues/BorderRadiusStyleValue.h>
 #include <LibWeb/CSS/StyleValues/BorderStyleValue.h>
@@ -661,19 +660,6 @@ static void set_property_expanding_shorthands(StyleProperties& style, CSS::Prope
     }
 
     if (property_id == CSS::PropertyID::Background) {
-        if (value.is_background()) {
-            auto const& background = value.as_background();
-            set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundColor, background.color(), document, declaration, properties_for_revert);
-            set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundImage, background.image(), document, declaration, properties_for_revert);
-            set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundPosition, background.position(), document, declaration, properties_for_revert);
-            set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundSize, background.size(), document, declaration, properties_for_revert);
-            set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundRepeat, background.repeat(), document, declaration, properties_for_revert);
-            set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundAttachment, background.attachment(), document, declaration, properties_for_revert);
-            set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundOrigin, background.origin(), document, declaration, properties_for_revert);
-            set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundClip, background.clip(), document, declaration, properties_for_revert);
-            return;
-        }
-
         set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundColor, value, document, declaration, properties_for_revert);
         set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundImage, value, document, declaration, properties_for_revert);
         set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundPosition, value, document, declaration, properties_for_revert);

Userland/Libraries/LibWeb/CSS/StyleValue.cpp

@@ -14,7 +14,6 @@
 #include <LibWeb/CSS/StyleValues/AngleStyleValue.h>
 #include <LibWeb/CSS/StyleValues/BackgroundRepeatStyleValue.h>
 #include <LibWeb/CSS/StyleValues/BackgroundSizeStyleValue.h>
-#include <LibWeb/CSS/StyleValues/BackgroundStyleValue.h>
 #include <LibWeb/CSS/StyleValues/BorderRadiusShorthandStyleValue.h>
 #include <LibWeb/CSS/StyleValues/BorderRadiusStyleValue.h>
 #include <LibWeb/CSS/StyleValues/BorderStyleValue.h>

Userland/Libraries/LibWeb/CSS/StyleValue.h

@@ -84,7 +84,6 @@ using StyleValueVector = Vector<ValueComparingNonnullRefPtr<StyleValue const>>;
 
 #define ENUMERATE_STYLE_VALUE_TYPES                                                           \
     __ENUMERATE_STYLE_VALUE_TYPE(Angle, angle)                                                \
-    __ENUMERATE_STYLE_VALUE_TYPE(Background, background)                                      \
     __ENUMERATE_STYLE_VALUE_TYPE(BackgroundRepeat, background_repeat)                         \
     __ENUMERATE_STYLE_VALUE_TYPE(BackgroundSize, background_size)                             \
     __ENUMERATE_STYLE_VALUE_TYPE(Border, border)                                              \

Userland/Libraries/LibWeb/CSS/StyleValues/BackgroundStyleValue.cpp

@@ -1,80 +0,0 @@
-/*
- * Copyright (c) 2018-2020, Andreas Kling <kling@serenityos.org>
- * Copyright (c) 2021-2023, Sam Atkins <atkinssj@serenityos.org>
- * Copyright (c) 2021, Tobias Christiansen <tobyase@serenityos.org>
- * Copyright (c) 2022-2023, MacDue <macdue@dueutil.tech>
- *
- * SPDX-License-Identifier: BSD-2-Clause
- */
-
-#include "BackgroundStyleValue.h"
-#include <LibWeb/CSS/StyleValues/StyleValueList.h>
-
-namespace Web::CSS {
-
-BackgroundStyleValue::BackgroundStyleValue(
-    ValueComparingNonnullRefPtr<StyleValue const> color,
-    ValueComparingNonnullRefPtr<StyleValue const> image,
-    ValueComparingNonnullRefPtr<StyleValue const> position,
-    ValueComparingNonnullRefPtr<StyleValue const> size,
-    ValueComparingNonnullRefPtr<StyleValue const> repeat,
-    ValueComparingNonnullRefPtr<StyleValue const> attachment,
-    ValueComparingNonnullRefPtr<StyleValue const> origin,
-    ValueComparingNonnullRefPtr<StyleValue const> clip)
-    : StyleValueWithDefaultOperators(Type::Background)
-    , m_properties {
-        .color = move(color),
-        .image = move(image),
-        .position = move(position),
-        .size = move(size),
-        .repeat = move(repeat),
-        .attachment = move(attachment),
-        .origin = move(origin),
-        .clip = move(clip),
-        .layer_count = 0
-    }
-{
-    auto layer_count = [](auto style_value) -> size_t {
-        if (style_value->is_value_list())
-            return style_value->as_value_list().size();
-        else
-            return 1;
-    };
-
-    m_properties.layer_count = max(layer_count(m_properties.image), layer_count(m_properties.position));
-    m_properties.layer_count = max(m_properties.layer_count, layer_count(m_properties.size));
-    m_properties.layer_count = max(m_properties.layer_count, layer_count(m_properties.repeat));
-    m_properties.layer_count = max(m_properties.layer_count, layer_count(m_properties.attachment));
-    m_properties.layer_count = max(m_properties.layer_count, layer_count(m_properties.origin));
-    m_properties.layer_count = max(m_properties.layer_count, layer_count(m_properties.clip));
-
-    VERIFY(!m_properties.color->is_value_list());
-}
-
-BackgroundStyleValue::~BackgroundStyleValue() = default;
-
-String BackgroundStyleValue::to_string() const
-{
-    if (m_properties.layer_count == 1) {
-        return MUST(String::formatted("{} {} {} {} {} {} {} {}", m_properties.color->to_string(), m_properties.image->to_string(), m_properties.position->to_string(), m_properties.size->to_string(), m_properties.repeat->to_string(), m_properties.attachment->to_string(), m_properties.origin->to_string(), m_properties.clip->to_string()));
-    }
-
-    auto get_layer_value_string = [](ValueComparingNonnullRefPtr<StyleValue const> const& style_value, size_t index) {
-        if (style_value->is_value_list())
-            return style_value->as_value_list().value_at(index, true)->to_string();
-        return style_value->to_string();
-    };
-
-    StringBuilder builder;
-    for (size_t i = 0; i < m_properties.layer_count; i++) {
-        if (i)
-            builder.append(", "sv);
-        if (i == m_properties.layer_count - 1)
-            builder.appendff("{} ", m_properties.color->to_string());
-        builder.appendff("{} {} {} {} {} {} {}", get_layer_value_string(m_properties.image, i), get_layer_value_string(m_properties.position, i), get_layer_value_string(m_properties.size, i), get_layer_value_string(m_properties.repeat, i), get_layer_value_string(m_properties.attachment, i), get_layer_value_string(m_properties.origin, i), get_layer_value_string(m_properties.clip, i));
-    }
-
-    return MUST(builder.to_string());
-}
-
-}

Userland/Libraries/LibWeb/CSS/StyleValues/BackgroundStyleValue.h

@@ -1,72 +0,0 @@
-/*
- * Copyright (c) 2018-2020, Andreas Kling <kling@serenityos.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/StyleValue.h>
-
-namespace Web::CSS {
-
-class BackgroundStyleValue final : public StyleValueWithDefaultOperators<BackgroundStyleValue> {
-public:
-    static ValueComparingNonnullRefPtr<BackgroundStyleValue> create(
-        ValueComparingNonnullRefPtr<StyleValue const> color,
-        ValueComparingNonnullRefPtr<StyleValue const> image,
-        ValueComparingNonnullRefPtr<StyleValue const> position,
-        ValueComparingNonnullRefPtr<StyleValue const> size,
-        ValueComparingNonnullRefPtr<StyleValue const> repeat,
-        ValueComparingNonnullRefPtr<StyleValue const> attachment,
-        ValueComparingNonnullRefPtr<StyleValue const> origin,
-        ValueComparingNonnullRefPtr<StyleValue const> clip)
-    {
-        return adopt_ref(*new (nothrow) BackgroundStyleValue(move(color), move(image), move(position), move(size), move(repeat), move(attachment), move(origin), move(clip)));
-    }
-    virtual ~BackgroundStyleValue() override;
-
-    size_t layer_count() const { return m_properties.layer_count; }
-
-    auto attachment() const { return m_properties.attachment; }
-    auto clip() const { return m_properties.clip; }
-    auto color() const { return m_properties.color; }
-    auto image() const { return m_properties.image; }
-    auto origin() const { return m_properties.origin; }
-    auto position() const { return m_properties.position; }
-    auto repeat() const { return m_properties.repeat; }
-    auto size() const { return m_properties.size; }
-
-    virtual String to_string() const override;
-
-    bool properties_equal(BackgroundStyleValue const& other) const { return m_properties == other.m_properties; }
-
-private:
-    BackgroundStyleValue(
-        ValueComparingNonnullRefPtr<StyleValue const> color,
-        ValueComparingNonnullRefPtr<StyleValue const> image,
-        ValueComparingNonnullRefPtr<StyleValue const> position,
-        ValueComparingNonnullRefPtr<StyleValue const> size,
-        ValueComparingNonnullRefPtr<StyleValue const> repeat,
-        ValueComparingNonnullRefPtr<StyleValue const> attachment,
-        ValueComparingNonnullRefPtr<StyleValue const> origin,
-        ValueComparingNonnullRefPtr<StyleValue const> clip);
-
-    struct Properties {
-        ValueComparingNonnullRefPtr<StyleValue const> color;
-        ValueComparingNonnullRefPtr<StyleValue const> image;
-        ValueComparingNonnullRefPtr<StyleValue const> position;
-        ValueComparingNonnullRefPtr<StyleValue const> size;
-        ValueComparingNonnullRefPtr<StyleValue const> repeat;
-        ValueComparingNonnullRefPtr<StyleValue const> attachment;
-        ValueComparingNonnullRefPtr<StyleValue const> origin;
-        ValueComparingNonnullRefPtr<StyleValue const> clip;
-        size_t layer_count;
-        bool operator==(Properties const&) const = default;
-    } m_properties;
-};
-
-}

Userland/Libraries/LibWeb/CSS/StyleValues/ShorthandStyleValue.cpp

@@ -35,6 +35,43 @@ String ShorthandStyleValue::to_string() const
 {
     // Special-cases first
     switch (m_properties.shorthand_property) {
+    case PropertyID::Background: {
+        auto color = longhand(PropertyID::BackgroundColor);
+        auto image = longhand(PropertyID::BackgroundImage);
+        auto position = longhand(PropertyID::BackgroundPosition);
+        auto size = longhand(PropertyID::BackgroundSize);
+        auto repeat = longhand(PropertyID::BackgroundRepeat);
+        auto attachment = longhand(PropertyID::BackgroundAttachment);
+        auto origin = longhand(PropertyID::BackgroundOrigin);
+        auto clip = longhand(PropertyID::BackgroundClip);
+
+        auto get_layer_count = [](auto style_value) -> size_t {
+            return style_value->is_value_list() ? style_value->as_value_list().size() : 1;
+        };
+
+        auto layer_count = max(get_layer_count(image), max(get_layer_count(position), max(get_layer_count(size), max(get_layer_count(repeat), max(get_layer_count(attachment), max(get_layer_count(origin), get_layer_count(clip)))))));
+
+        if (layer_count == 1) {
+            return MUST(String::formatted("{} {} {} {} {} {} {} {}", color->to_string(), image->to_string(), position->to_string(), size->to_string(), repeat->to_string(), attachment->to_string(), origin->to_string(), clip->to_string()));
+        }
+
+        auto get_layer_value_string = [](ValueComparingRefPtr<StyleValue const> const& style_value, size_t index) {
+            if (style_value->is_value_list())
+                return style_value->as_value_list().value_at(index, true)->to_string();
+            return style_value->to_string();
+        };
+
+        StringBuilder builder;
+        for (size_t i = 0; i < layer_count; i++) {
+            if (i)
+                builder.append(", "sv);
+            if (i == layer_count - 1)
+                builder.appendff("{} ", color->to_string());
+            builder.appendff("{} {} {} {} {} {} {}", get_layer_value_string(image, i), get_layer_value_string(position, i), get_layer_value_string(size, i), get_layer_value_string(repeat, i), get_layer_value_string(attachment, i), get_layer_value_string(origin, i), get_layer_value_string(clip, i));
+        }
+
+        return MUST(builder.to_string());
+    }
     case PropertyID::Flex:
         return MUST(String::formatted("{} {} {}", longhand(PropertyID::FlexGrow)->to_string(), longhand(PropertyID::FlexShrink)->to_string(), longhand(PropertyID::FlexBasis)->to_string()));
     case PropertyID::FlexFlow:

Userland/Libraries/LibWeb/Forward.h

@@ -74,7 +74,6 @@ class AnglePercentage;
 class AngleStyleValue;
 class BackgroundRepeatStyleValue;
 class BackgroundSizeStyleValue;
-class BackgroundStyleValue;
 class BorderRadiusShorthandStyleValue;
 class BorderRadiusStyleValue;
 class BorderStyleValue;