LibWeb: Add missing StyleValue::equals() methods

Every StyleValue type now has its own `equals()` method, rather than
relying on the default "compare the to_string() output" method, which
has now been removed. This logic is still used by UnresolvedSV and
CalculatedSV, because it's probably the best option for them unless
performance becomes a real issue.

Also took this opportunity to move all the `equals()` implementations
into the .cpp file, which may or may not actually help with compile
times but StyleValue.h is huge and included everywhere, so it can't
hurt.

Userland/Libraries/LibWeb/CSS/StyleValue.cpp

@@ -281,21 +281,62 @@ String BackgroundStyleValue::to_string() const
     return builder.to_string();
 }
 
+bool BackgroundStyleValue::equals(StyleValue const& other) const
+{
+    if (type() != other.type())
+        return false;
+    auto const& typed_other = other.as_background();
+    return m_color->equals(typed_other.m_color)
+        && m_image->equals(typed_other.m_image)
+        && m_position->equals(typed_other.m_position)
+        && m_size->equals(typed_other.m_size)
+        && m_repeat->equals(typed_other.m_repeat)
+        && m_attachment->equals(typed_other.m_attachment)
+        && m_origin->equals(typed_other.m_origin)
+        && m_clip->equals(typed_other.m_clip);
+}
+
 String BackgroundRepeatStyleValue::to_string() const
 {
     return String::formatted("{} {}", CSS::to_string(m_repeat_x), CSS::to_string(m_repeat_y));
 }
 
+bool BackgroundRepeatStyleValue::equals(StyleValue const& other) const
+{
+    if (type() != other.type())
+        return false;
+    auto const& typed_other = other.as_background_repeat();
+    return m_repeat_x == typed_other.m_repeat_x && m_repeat_y == typed_other.m_repeat_y;
+}
+
 String BackgroundSizeStyleValue::to_string() const
 {
     return String::formatted("{} {}", m_size_x.to_string(), m_size_y.to_string());
 }
 
+bool BackgroundSizeStyleValue::equals(StyleValue const& other) const
+{
+    if (type() != other.type())
+        return false;
+    auto const& typed_other = other.as_background_size();
+    return m_size_x == typed_other.m_size_x && m_size_y == typed_other.m_size_y;
+}
+
 String BorderStyleValue::to_string() const
 {
     return String::formatted("{} {} {}", m_border_width->to_string(), m_border_style->to_string(), m_border_color->to_string());
 }
 
+bool BorderStyleValue::equals(StyleValue const& other) const
+{
+    if (type() != other.type())
+        return false;
+    auto const& typed_other = other.as_border();
+    return m_border_width->equals(typed_other.m_border_width)
+        && m_border_style->equals(typed_other.m_border_style)
+        && m_border_color->equals(typed_other.m_border_color);
+}
+
 String BorderRadiusStyleValue::to_string() const
 {
     if (m_horizontal_radius == m_vertical_radius)
@@ -303,13 +344,30 @@ String BorderRadiusStyleValue::to_string() const
     return String::formatted("{} / {}", m_horizontal_radius.to_string(), m_vertical_radius.to_string());
 }
 
-String ShadowStyleValue::to_string() const
+bool BorderRadiusStyleValue::equals(StyleValue const& other) const
 {
-    StringBuilder builder;
+    if (type() != other.type())
-    builder.appendff("{} {} {} {} {}", m_color.to_string(), m_offset_x.to_string(), m_offset_y.to_string(), m_blur_radius.to_string(), m_spread_distance.to_string());
+        return false;
-    if (m_placement == ShadowPlacement::Inner)
+    auto const& typed_other = other.as_border_radius();
-        builder.append(" inset");
+    return m_is_elliptical == typed_other.m_is_elliptical
-    return builder.to_string();
+        && m_horizontal_radius == typed_other.m_horizontal_radius
+        && m_vertical_radius == typed_other.m_vertical_radius;
+}
+
+String BorderRadiusShorthandStyleValue::to_string() const
+{
+    return String::formatted("{} {} {} {} / {} {} {} {}", m_top_left->horizontal_radius().to_string(), m_top_right->horizontal_radius().to_string(), m_bottom_right->horizontal_radius().to_string(), m_bottom_left->horizontal_radius().to_string(), m_top_left->vertical_radius().to_string(), m_top_right->vertical_radius().to_string(), m_bottom_right->vertical_radius().to_string(), m_bottom_left->vertical_radius().to_string());
+}
+
+bool BorderRadiusShorthandStyleValue::equals(StyleValue const& other) const
+{
+    if (type() != other.type())
+        return false;
+    auto const& typed_other = other.as_border_radius_shorthand();
+    return m_top_left->equals(typed_other.m_top_left)
+        && m_top_right->equals(typed_other.m_top_right)
+        && m_bottom_right->equals(typed_other.m_bottom_right)
+        && m_bottom_left->equals(typed_other.m_bottom_left);
 }
 
 void CalculatedStyleValue::CalculationResult::add(CalculationResult const& other, Layout::Node const* layout_node, PercentageBasis const& percentage_basis)
@@ -503,6 +561,14 @@ String CalculatedStyleValue::to_string() const
     return String::formatted("calc({})", m_expression->to_string());
 }
 
+bool CalculatedStyleValue::equals(StyleValue const& other) const
+{
+    if (type() != other.type())
+        return false;
+    // This is a case where comparing the strings actually makes sense.
+    return to_string() == other.to_string();
+}
+
 String CalculatedStyleValue::CalcNumberValue::to_string() const
 {
     return value.visit(
@@ -1010,9 +1076,11 @@ String ColorStyleValue::to_string() const
     return String::formatted("rgba({}, {}, {}, {})", m_color.red(), m_color.green(), m_color.blue(), (float)(m_color.alpha()) / 255.0f);
 }
 
-String BorderRadiusShorthandStyleValue::to_string() const
+bool ColorStyleValue::equals(StyleValue const& other) const
 {
-    return String::formatted("{} {} {} {} / {} {} {} {}", m_top_left->horizontal_radius().to_string(), m_top_right->horizontal_radius().to_string(), m_bottom_right->horizontal_radius().to_string(), m_bottom_left->horizontal_radius().to_string(), m_top_left->vertical_radius().to_string(), m_top_right->vertical_radius().to_string(), m_bottom_right->vertical_radius().to_string(), m_bottom_left->vertical_radius().to_string());
+    if (type() != other.type())
+        return false;
+    return m_color == other.as_color().m_color;
 }
 
 String ContentStyleValue::to_string() const
@@ -1022,26 +1090,85 @@ String ContentStyleValue::to_string() const
     return m_content->to_string();
 }
 
+bool ContentStyleValue::equals(StyleValue const& other) const
+{
+    if (type() != other.type())
+        return false;
+    auto const& typed_other = other.as_content();
+    if (!m_content->equals(typed_other.m_content))
+        return false;
+    if (m_alt_text.is_null() != typed_other.m_alt_text.is_null())
+        return false;
+    if (!m_alt_text.is_null())
+        return m_alt_text->equals(*typed_other.m_alt_text);
+    return true;
+}
+
 String FlexStyleValue::to_string() const
 {
     return String::formatted("{} {} {}", m_grow->to_string(), m_shrink->to_string(), m_basis->to_string());
 }
 
+bool FlexStyleValue::equals(StyleValue const& other) const
+{
+    if (type() != other.type())
+        return false;
+    auto const& typed_other = other.as_flex();
+    return m_grow->equals(typed_other.m_grow)
+        && m_shrink->equals(typed_other.m_shrink)
+        && m_basis->equals(typed_other.m_basis);
+}
+
 String FlexFlowStyleValue::to_string() const
 {
     return String::formatted("{} {}", m_flex_direction->to_string(), m_flex_wrap->to_string());
 }
 
+bool FlexFlowStyleValue::equals(StyleValue const& other) const
+{
+    if (type() != other.type())
+        return false;
+    auto const& typed_other = other.as_flex_flow();
+    return m_flex_direction->equals(typed_other.m_flex_direction)
+        && m_flex_wrap->equals(typed_other.m_flex_wrap);
+}
+
 String FontStyleValue::to_string() const
 {
     return String::formatted("{} {} {} / {} {}", m_font_style->to_string(), m_font_weight->to_string(), m_font_size->to_string(), m_line_height->to_string(), m_font_families->to_string());
 }
 
+bool FontStyleValue::equals(StyleValue const& other) const
+{
+    if (type() != other.type())
+        return false;
+    auto const& typed_other = other.as_font();
+    return m_font_style->equals(typed_other.m_font_style)
+        && m_font_weight->equals(typed_other.m_font_weight)
+        && m_font_size->equals(typed_other.m_font_size)
+        && m_line_height->equals(typed_other.m_line_height)
+        && m_font_families->equals(typed_other.m_font_families);
+}
+
+bool FrequencyStyleValue::equals(StyleValue const& other) const
+{
+    if (type() != other.type())
+        return false;
+    return m_frequency == other.as_frequency().m_frequency;
+}
+
 String IdentifierStyleValue::to_string() const
 {
     return CSS::string_from_value_id(m_id);
 }
 
+bool IdentifierStyleValue::equals(StyleValue const& other) const
+{
+    if (type() != other.type())
+        return false;
+    return m_id == other.as_identifier().m_id;
+}
+
 bool IdentifierStyleValue::has_color() const
 {
     switch (m_id) {
@@ -1268,11 +1395,45 @@ String ImageStyleValue::to_string() const
     return serialize_a_url(m_url.to_string());
 }
 
+bool ImageStyleValue::equals(StyleValue const& other) const
+{
+    if (type() != other.type())
+        return false;
+    return m_url == other.as_image().m_url;
+}
+
+bool InheritStyleValue::equals(StyleValue const& other) const
+{
+    return type() == other.type();
+}
+
+bool InitialStyleValue::equals(StyleValue const& other) const
+{
+    return type() == other.type();
+}
+
+bool LengthStyleValue::equals(StyleValue const& other) const
+{
+    if (type() != other.type())
+        return false;
+    return m_length == other.as_length().m_length;
+}
+
 String ListStyleStyleValue::to_string() const
 {
     return String::formatted("{} {} {}", m_position->to_string(), m_image->to_string(), m_style_type->to_string());
 }
 
+bool ListStyleStyleValue::equals(StyleValue const& other) const
+{
+    if (type() != other.type())
+        return false;
+    auto const& typed_other = other.as_list_style();
+    return m_position->equals(typed_other.m_position)
+        && m_image->equals(typed_other.m_image)
+        && m_style_type->equals(typed_other.m_style_type);
+}
+
 String NumericStyleValue::to_string() const
 {
     return m_value.visit(
@@ -1284,16 +1445,43 @@ String NumericStyleValue::to_string() const
         });
 }
 
+bool NumericStyleValue::equals(StyleValue const& other) const
+{
+    if (type() != other.type())
+        return false;
+    if (has_integer() != other.has_integer())
+        return false;
+    if (has_integer())
+        return m_value.get<i64>() == other.as_numeric().m_value.get<i64>();
+    return m_value.get<float>() == other.as_numeric().m_value.get<float>();
+}
+
 String OverflowStyleValue::to_string() const
 {
     return String::formatted("{} {}", m_overflow_x->to_string(), m_overflow_y->to_string());
 }
 
+bool OverflowStyleValue::equals(StyleValue const& other) const
+{
+    if (type() != other.type())
+        return false;
+    auto const& typed_other = other.as_overflow();
+    return m_overflow_x->equals(typed_other.m_overflow_x)
+        && m_overflow_y->equals(typed_other.m_overflow_y);
+}
+
 String PercentageStyleValue::to_string() const
 {
     return m_percentage.to_string();
 }
 
+bool PercentageStyleValue::equals(StyleValue const& other) const
+{
+    if (type() != other.type())
+        return false;
+    return m_percentage == other.as_percentage().m_percentage;
+}
+
 String PositionStyleValue::to_string() const
 {
     auto to_string = [](PositionEdge edge) {
@@ -1313,11 +1501,76 @@ String PositionStyleValue::to_string() const
     return String::formatted("{} {} {} {}", to_string(m_edge_x), m_offset_x.to_string(), to_string(m_edge_y), m_offset_y.to_string());
 }
 
+bool PositionStyleValue::equals(StyleValue const& other) const
+{
+    if (type() != other.type())
+        return false;
+    auto const& typed_other = other.as_position();
+    return m_edge_x == typed_other.m_edge_x
+        && m_offset_x == typed_other.m_offset_x
+        && m_edge_y == typed_other.m_edge_y
+        && m_offset_y == typed_other.m_offset_y;
+}
+
+bool ResolutionStyleValue::equals(StyleValue const& other) const
+{
+    if (type() != other.type())
+        return false;
+    return m_resolution == other.as_resolution().m_resolution;
+}
+
+String ShadowStyleValue::to_string() const
+{
+    StringBuilder builder;
+    builder.appendff("{} {} {} {} {}", m_color.to_string(), m_offset_x.to_string(), m_offset_y.to_string(), m_blur_radius.to_string(), m_spread_distance.to_string());
+    if (m_placement == ShadowPlacement::Inner)
+        builder.append(" inset");
+    return builder.to_string();
+}
+
+bool ShadowStyleValue::equals(StyleValue const& other) const
+{
+    if (type() != other.type())
+        return false;
+    auto const& typed_other = other.as_shadow();
+    return m_color == typed_other.m_color
+        && m_offset_x == typed_other.m_offset_x
+        && m_offset_y == typed_other.m_offset_y
+        && m_blur_radius == typed_other.m_blur_radius
+        && m_spread_distance == typed_other.m_spread_distance
+        && m_placement == typed_other.m_placement;
+}
+
+bool StringStyleValue::equals(StyleValue const& other) const
+{
+    if (type() != other.type())
+        return false;
+    return m_string == other.as_string().m_string;
+}
+
 String TextDecorationStyleValue::to_string() const
 {
     return String::formatted("{} {} {} {}", m_line->to_string(), m_thickness->to_string(), m_style->to_string(), m_color->to_string());
 }
 
+bool TextDecorationStyleValue::equals(StyleValue const& other) const
+{
+    if (type() != other.type())
+        return false;
+    auto const& typed_other = other.as_text_decoration();
+    return m_line->equals(typed_other.m_line)
+        && m_thickness->equals(typed_other.m_thickness)
+        && m_style->equals(typed_other.m_style)
+        && m_color->equals(typed_other.m_color);
+}
+
+bool TimeStyleValue::equals(StyleValue const& other) const
+{
+    if (type() != other.type())
+        return false;
+    return m_time == other.as_time().m_time;
+}
+
 String TransformationStyleValue::to_string() const
 {
     StringBuilder builder;
@@ -1329,6 +1582,22 @@ String TransformationStyleValue::to_string() const
     return builder.to_string();
 }
 
+bool TransformationStyleValue::equals(StyleValue const& other) const
+{
+    if (type() != other.type())
+        return false;
+    auto const& typed_other = other.as_transformation();
+    if (m_transform_function != typed_other.m_transform_function)
+        return false;
+    if (m_values.size() != typed_other.m_values.size())
+        return false;
+    for (size_t i = 0; i < m_values.size(); ++i) {
+        if (!m_values[i].equals(typed_other.m_values[i]))
+            return false;
+    }
+    return true;
+}
+
 String UnresolvedStyleValue::to_string() const
 {
     StringBuilder builder;
@@ -1337,6 +1606,19 @@ String UnresolvedStyleValue::to_string() const
     return builder.to_string();
 }
 
+bool UnresolvedStyleValue::equals(StyleValue const& other) const
+{
+    if (type() != other.type())
+        return false;
+    // This is a case where comparing the strings actually makes sense.
+    return to_string() == other.to_string();
+}
+
+bool UnsetStyleValue::equals(StyleValue const& other) const
+{
+    return type() == other.type();
+}
+
 String StyleValueList::to_string() const
 {
     String separator = "";
@@ -1354,6 +1636,22 @@ String StyleValueList::to_string() const
     return String::join(separator, m_values);
 }
 
+bool StyleValueList::equals(StyleValue const& other) const
+{
+    if (type() != other.type())
+        return false;
+    auto const& typed_other = other.as_value_list();
+    if (m_separator != typed_other.m_separator)
+        return false;
+    if (m_values.size() != typed_other.m_values.size())
+        return false;
+    for (size_t i = 0; i < m_values.size(); ++i) {
+        if (!m_values[i].equals(typed_other.m_values[i]))
+            return false;
+    }
+    return true;
+}
+
 NonnullRefPtr<ColorStyleValue> ColorStyleValue::create(Color color)
 {
     if (color.value() == 0) {

Userland/Libraries/LibWeb/CSS/StyleValue.h

@@ -239,12 +239,7 @@ public:
     bool operator==(StyleValue const& other) const { return equals(other); }
     bool operator!=(StyleValue const& other) const { return !(*this == other); }
 
-    virtual bool equals(StyleValue const& other) const
+    virtual bool equals(StyleValue const& other) const = 0;
-    {
-        if (type() != other.type())
-            return false;
-        return to_string() == other.to_string();
-    }
 
 protected:
     explicit StyleValue(Type);
@@ -310,6 +305,7 @@ public:
     NonnullRefPtr<StyleValue> size() const { return m_size; }
 
     virtual String to_string() const override;
+    virtual bool equals(StyleValue const& other) const override;
 
 private:
     BackgroundStyleValue(
@@ -346,14 +342,7 @@ public:
     Repeat repeat_y() const { return m_repeat_y; }
 
     virtual String to_string() const override;
-
+    virtual bool equals(StyleValue const& other) const override;
-    virtual bool equals(StyleValue const& other) const override
-    {
-        if (type() != other.type())
-            return false;
-        auto& other_value = static_cast<BackgroundRepeatStyleValue const&>(other);
-        return m_repeat_x == other_value.m_repeat_x && m_repeat_y == other_value.m_repeat_y;
-    }
 
 private:
     BackgroundRepeatStyleValue(Repeat repeat_x, Repeat repeat_y)
@@ -380,14 +369,7 @@ public:
     LengthPercentage size_y() const { return m_size_y; }
 
     virtual String to_string() const override;
-
+    virtual bool equals(StyleValue const& other) const override;
-    virtual bool equals(StyleValue const& other) const override
-    {
-        if (type() != other.type())
-            return false;
-        auto& other_value = static_cast<BackgroundSizeStyleValue const&>(other);
-        return m_size_x == other_value.m_size_x && m_size_y == other_value.m_size_y;
-    }
 
 private:
     BackgroundSizeStyleValue(LengthPercentage size_x, LengthPercentage size_y)
@@ -417,6 +399,7 @@ public:
     NonnullRefPtr<StyleValue> border_color() const { return m_border_color; }
 
     virtual String to_string() const override;
+    virtual bool equals(StyleValue const& other) const override;
 
 private:
     BorderStyleValue(
@@ -448,16 +431,7 @@ public:
     bool is_elliptical() const { return m_is_elliptical; }
 
     virtual String to_string() const override;
-
+    virtual bool equals(StyleValue const& other) const override;
-    virtual bool equals(StyleValue const& other) const override
-    {
-        if (type() != other.type())
-            return false;
-        auto& other_value = static_cast<BorderRadiusStyleValue const&>(other);
-        return m_is_elliptical == other_value.m_is_elliptical
-            && m_horizontal_radius == other_value.m_horizontal_radius
-            && m_vertical_radius == other_value.m_vertical_radius;
-    }
 
 private:
     BorderRadiusStyleValue(LengthPercentage const& horizontal_radius, LengthPercentage const& vertical_radius)
@@ -489,6 +463,7 @@ public:
     NonnullRefPtr<BorderRadiusStyleValue> bottom_left() const { return m_bottom_left; }
 
     virtual String to_string() const override;
+    virtual bool equals(StyleValue const& other) const override;
 
 private:
     BorderRadiusShorthandStyleValue(NonnullRefPtr<BorderRadiusStyleValue> top_left, NonnullRefPtr<BorderRadiusStyleValue> top_right, NonnullRefPtr<BorderRadiusStyleValue> bottom_right, NonnullRefPtr<BorderRadiusStyleValue> bottom_left)
@@ -666,6 +641,7 @@ public:
     }
 
     String to_string() const override;
+    virtual bool equals(StyleValue const& other) const override;
     ResolvedType resolved_type() const { return m_resolved_type; }
     NonnullOwnPtr<CalcSum> const& expression() const { return m_expression; }
 
@@ -703,12 +679,7 @@ public:
     virtual bool has_color() const override { return true; }
     virtual Color to_color(Layout::NodeWithStyle const&) const override { return m_color; }
 
-    virtual bool equals(StyleValue const& other) const override
+    virtual bool equals(StyleValue const& other) const override;
-    {
-        if (type() != other.type())
-            return false;
-        return m_color == static_cast<ColorStyleValue const&>(other).m_color;
-    }
 
 private:
     explicit ColorStyleValue(Color color)
@@ -732,6 +703,7 @@ public:
     StyleValueList const* alt_text() const { return m_alt_text; }
 
     virtual String to_string() const override;
+    virtual bool equals(StyleValue const& other) const override;
 
 private:
     ContentStyleValue(NonnullRefPtr<StyleValueList> content, RefPtr<StyleValueList> alt_text)
@@ -761,6 +733,7 @@ public:
     NonnullRefPtr<StyleValue> basis() const { return m_basis; }
 
     virtual String to_string() const override;
+    virtual bool equals(StyleValue const& other) const override;
 
 private:
     FlexStyleValue(
@@ -791,6 +764,7 @@ public:
     NonnullRefPtr<StyleValue> flex_wrap() const { return m_flex_wrap; }
 
     virtual String to_string() const override;
+    virtual bool equals(StyleValue const& other) const override;
 
 private:
     FlexFlowStyleValue(NonnullRefPtr<StyleValue> flex_direction, NonnullRefPtr<StyleValue> flex_wrap)
@@ -816,6 +790,7 @@ public:
     NonnullRefPtr<StyleValue> font_families() const { return m_font_families; }
 
     virtual String to_string() const override;
+    virtual bool equals(StyleValue const& other) const override;
 
 private:
     FontStyleValue(NonnullRefPtr<StyleValue> font_style, NonnullRefPtr<StyleValue> font_weight, NonnullRefPtr<StyleValue> font_size, NonnullRefPtr<StyleValue> line_height, NonnullRefPtr<StyleValue> font_families)
@@ -847,13 +822,7 @@ public:
     Frequency const& frequency() const { return m_frequency; }
 
     virtual String to_string() const override { return m_frequency.to_string(); }
-
+    virtual bool equals(StyleValue const& other) const override;
-    virtual bool equals(StyleValue const& other) const override
-    {
-        if (type() != other.type())
-            return false;
-        return m_frequency == static_cast<FrequencyStyleValue const&>(other).m_frequency;
-    }
 
 private:
     explicit FrequencyStyleValue(Frequency frequency)
@@ -881,13 +850,7 @@ public:
     virtual bool has_color() const override;
     virtual Color to_color(Layout::NodeWithStyle const& node) const override;
     virtual String to_string() const override;
-
+    virtual bool equals(StyleValue const& other) const override;
-    virtual bool equals(StyleValue const& other) const override
-    {
-        if (type() != other.type())
-            return false;
-        return m_id == static_cast<IdentifierStyleValue const&>(other).m_id;
-    }
 
 private:
     explicit IdentifierStyleValue(CSS::ValueID id)
@@ -907,6 +870,7 @@ public:
     virtual ~ImageStyleValue() override = default;
 
     virtual String to_string() const override;
+    virtual bool equals(StyleValue const& other) const override;
 
     void load_bitmap(DOM::Document& document);
     Gfx::Bitmap const* bitmap() const { return m_bitmap; }
@@ -932,6 +896,7 @@ public:
     virtual ~InheritStyleValue() override = default;
 
     String to_string() const override { return "inherit"; }
+    virtual bool equals(StyleValue const& other) const override;
 
 private:
     InheritStyleValue()
@@ -950,6 +915,7 @@ public:
     virtual ~InitialStyleValue() override = default;
 
     String to_string() const override { return "initial"; }
+    virtual bool equals(StyleValue const& other) const override;
 
 private:
     InitialStyleValue()
@@ -972,13 +938,7 @@ public:
     virtual Length to_length() const override { return m_length; }
     virtual ValueID to_identifier() const override { return has_auto() ? ValueID::Auto : ValueID::Invalid; }
     virtual NonnullRefPtr<StyleValue> absolutized(Gfx::IntRect const& viewport_rect, Gfx::FontPixelMetrics const& font_metrics, float font_size, float root_font_size) const override;
-
+    virtual bool equals(StyleValue const& other) const override;
-    virtual bool equals(StyleValue const& other) const override
-    {
-        if (type() != other.type())
-            return false;
-        return m_length == static_cast<LengthStyleValue const&>(other).m_length;
-    }
 
 private:
     explicit LengthStyleValue(Length const& length)
@@ -1006,6 +966,7 @@ public:
     NonnullRefPtr<StyleValue> style_type() const { return m_style_type; }
 
     virtual String to_string() const override;
+    virtual bool equals(StyleValue const& other) const override;
 
 private:
     ListStyleStyleValue(
@@ -1051,17 +1012,7 @@ public:
     virtual float to_integer() const override { return m_value.get<i64>(); }
 
     virtual String to_string() const override;
-
+    virtual bool equals(StyleValue const& other) const override;
-    virtual bool equals(StyleValue const& other) const override
-    {
-        if (type() != other.type())
-            return false;
-        if (has_integer() != other.has_integer())
-            return false;
-        if (has_integer())
-            return m_value.get<i64>() == static_cast<NumericStyleValue const&>(other).m_value.get<i64>();
-        return m_value.get<float>() == static_cast<NumericStyleValue const&>(other).m_value.get<float>();
-    }
 
 private:
     explicit NumericStyleValue(Variant<float, i64> value)
@@ -1085,6 +1036,7 @@ public:
     NonnullRefPtr<StyleValue> overflow_y() const { return m_overflow_y; }
 
     virtual String to_string() const override;
+    virtual bool equals(StyleValue const& other) const override;
 
 private:
     OverflowStyleValue(NonnullRefPtr<StyleValue> overflow_x, NonnullRefPtr<StyleValue> overflow_y)
@@ -1110,6 +1062,7 @@ public:
     Percentage& percentage() { return m_percentage; }
 
     virtual String to_string() const override;
+    virtual bool equals(StyleValue const& other) const override;
 
 private:
     PercentageStyleValue(Percentage&& percentage)
@@ -1135,17 +1088,7 @@ public:
     LengthPercentage const& offset_y() const { return m_offset_y; }
 
     virtual String to_string() const override;
-
+    virtual bool equals(StyleValue const& other) const override;
-    virtual bool equals(StyleValue const& other) const override
-    {
-        if (type() != other.type())
-            return false;
-        auto const& typed_other = static_cast<PositionStyleValue const&>(other);
-        return m_edge_x == typed_other.m_edge_x
-            && m_offset_x == typed_other.m_offset_x
-            && m_edge_y == typed_other.m_edge_y
-            && m_offset_y == typed_other.m_offset_y;
-    }
 
 private:
     PositionStyleValue(PositionEdge edge_x, LengthPercentage const& offset_x, PositionEdge edge_y, LengthPercentage const& offset_y)
@@ -1174,13 +1117,7 @@ public:
     Resolution const& resolution() const { return m_resolution; }
 
     virtual String to_string() const override { return m_resolution.to_string(); }
-
+    virtual bool equals(StyleValue const& other) const override;
-    virtual bool equals(StyleValue const& other) const override
-    {
-        if (type() != other.type())
-            return false;
-        return m_resolution == static_cast<ResolutionStyleValue const&>(other).m_resolution;
-    }
 
 private:
     explicit ResolutionStyleValue(Resolution resolution)
@@ -1209,19 +1146,7 @@ public:
     ShadowPlacement placement() const { return m_placement; }
 
     virtual String to_string() const override;
-
+    virtual bool equals(StyleValue const& other) const override;
-    virtual bool equals(StyleValue const& other) const override
-    {
-        if (type() != other.type())
-            return false;
-        auto& other_value = static_cast<ShadowStyleValue const&>(other);
-        return m_color == other_value.m_color
-            && m_offset_x == other_value.m_offset_x
-            && m_offset_y == other_value.m_offset_y
-            && m_blur_radius == other_value.m_blur_radius
-            && m_spread_distance == other_value.m_spread_distance
-            && m_placement == other_value.m_placement;
-    }
 
 private:
     explicit ShadowStyleValue(Color const& color, Length const& offset_x, Length const& offset_y, Length const& blur_radius, Length const& spread_distance, ShadowPlacement placement)
@@ -1254,6 +1179,7 @@ public:
     virtual ~StringStyleValue() override = default;
 
     String to_string() const override { return m_string; }
+    virtual bool equals(StyleValue const& other) const override;
 
 private:
     explicit StringStyleValue(String const& string)
@@ -1283,6 +1209,7 @@ public:
     NonnullRefPtr<StyleValue> color() const { return m_color; }
 
     virtual String to_string() const override;
+    virtual bool equals(StyleValue const& other) const override;
 
 private:
     TextDecorationStyleValue(
@@ -1315,13 +1242,7 @@ public:
     Time const& time() const { return m_time; }
 
     virtual String to_string() const override { return m_time.to_string(); }
-
+    virtual bool equals(StyleValue const& other) const override;
-    virtual bool equals(StyleValue const& other) const override
-    {
-        if (type() != other.type())
-            return false;
-        return m_time == static_cast<TimeStyleValue const&>(other).m_time;
-    }
 
 private:
     explicit TimeStyleValue(Time time)
@@ -1345,6 +1266,7 @@ public:
     NonnullRefPtrVector<StyleValue> values() const { return m_values; }
 
     virtual String to_string() const override;
+    virtual bool equals(StyleValue const& other) const override;
 
 private:
     TransformationStyleValue(CSS::TransformFunction transform_function, NonnullRefPtrVector<StyleValue>&& values)
@@ -1367,6 +1289,7 @@ public:
     virtual ~UnresolvedStyleValue() override = default;
 
     virtual String to_string() const override;
+    virtual bool equals(StyleValue const& other) const override;
 
     Vector<Parser::ComponentValue> const& values() const { return m_values; }
     bool contains_var_or_attr() const { return m_contains_var_or_attr; }
@@ -1393,6 +1316,7 @@ public:
     virtual ~UnsetStyleValue() override = default;
 
     String to_string() const override { return "unset"; }
+    virtual bool equals(StyleValue const& other) const override;
 
 private:
     UnsetStyleValue()
@@ -1419,22 +1343,7 @@ public:
     }
 
     virtual String to_string() const override;
-
+    virtual bool equals(StyleValue const& other) const override;
-    virtual bool equals(StyleValue const& other) const override
-    {
-        if (type() != other.type())
-            return false;
-        auto& other_value = static_cast<StyleValueList const&>(other);
-        if (m_separator != other_value.m_separator)
-            return false;
-        if (m_values.size() != other_value.m_values.size())
-            return false;
-        for (size_t i = 0; i < m_values.size(); ++i) {
-            if (!m_values[i].equals(other_value.m_values[i]))
-                return false;
-        }
-        return true;
-    }
 
 private:
     StyleValueList(NonnullRefPtrVector<StyleValue>&& values, Separator separator)