From 0c14103025737bd5e033c4198882f5bab13732e3 Mon Sep 17 00:00:00 2001
From: Sam Atkins <atkinssj@serenityos.org>
Date: Thu, 30 Mar 2023 17:13:37 +0100
Subject: [PATCH] LibWeb: Move PercentageOr and subclasses into
 PercentageOr.{h,cpp}

This solves an awkward dependency cycle, where CalculatedStyleValue
needs the definition of Percentage, but including that would also pull
in PercentageOr, which in turn needs CalculatedStyleValue.

Many places that previously included StyleValue.h no longer need to. :^)
---
 Userland/Libraries/LibWeb/CMakeLists.txt      |   2 +-
 .../Libraries/LibWeb/CSS/ComputedValues.h     |   3 +-
 .../Libraries/LibWeb/CSS/GridTrackSize.cpp    |   3 -
 Userland/Libraries/LibWeb/CSS/LengthBox.cpp   |   1 -
 Userland/Libraries/LibWeb/CSS/LengthBox.h     |   2 +-
 Userland/Libraries/LibWeb/CSS/MediaQuery.h    |   3 +-
 Userland/Libraries/LibWeb/CSS/Percentage.h    | 228 ----------------
 .../CSS/{Percentage.cpp => PercentageOr.cpp}  |   5 +-
 Userland/Libraries/LibWeb/CSS/PercentageOr.h  | 247 ++++++++++++++++++
 Userland/Libraries/LibWeb/CSS/Position.cpp    |   1 -
 Userland/Libraries/LibWeb/CSS/Position.h      |   2 +-
 Userland/Libraries/LibWeb/CSS/Resolution.cpp  |   1 -
 Userland/Libraries/LibWeb/CSS/Size.cpp        |   2 -
 Userland/Libraries/LibWeb/CSS/Size.h          |   2 +-
 .../Libraries/LibWeb/CSS/StyleProperties.h    |   1 -
 Userland/Libraries/LibWeb/CSS/StyleValue.cpp  |   5 -
 .../CSS/StyleValues/AbstractImageStyleValue.h |   1 +
 .../StyleValues/BackgroundSizeStyleValue.h    |   2 +-
 .../CSS/StyleValues/BorderRadiusStyleValue.h  |   2 +-
 .../CSS/StyleValues/ConicGradientStyleValue.h |   1 +
 .../StyleValues/FilterValueListStyleValue.h   |   3 +-
 .../StyleValues/LinearGradientStyleValue.h    |   2 +
 .../CSS/StyleValues/PositionStyleValue.h      |   2 +-
 .../Libraries/LibWeb/HTML/HTMLBodyElement.cpp |   1 -
 .../Libraries/LibWeb/HTML/HTMLFontElement.cpp |   1 -
 .../LibWeb/Painting/GradientPainting.cpp      |   1 -
 26 files changed, 265 insertions(+), 259 deletions(-)
 rename Userland/Libraries/LibWeb/CSS/{Percentage.cpp => PercentageOr.cpp} (88%)
 create mode 100644 Userland/Libraries/LibWeb/CSS/PercentageOr.h

diff --git a/Userland/Libraries/LibWeb/CMakeLists.txt b/Userland/Libraries/LibWeb/CMakeLists.txt
index f7f07dde622..77c13a040b1 100644
--- a/Userland/Libraries/LibWeb/CMakeLists.txt
+++ b/Userland/Libraries/LibWeb/CMakeLists.txt
@@ -51,7 +51,7 @@ set(SOURCES
     CSS/Parser/Rule.cpp
     CSS/Parser/Token.cpp
     CSS/Parser/Tokenizer.cpp
-    CSS/Percentage.cpp
+    CSS/PercentageOr.cpp
     CSS/Position.cpp
     CSS/PreferredColorScheme.cpp
     CSS/Ratio.cpp
diff --git a/Userland/Libraries/LibWeb/CSS/ComputedValues.h b/Userland/Libraries/LibWeb/CSS/ComputedValues.h
index 48bb3e206d2..f742d79bceb 100644
--- a/Userland/Libraries/LibWeb/CSS/ComputedValues.h
+++ b/Userland/Libraries/LibWeb/CSS/ComputedValues.h
@@ -8,13 +8,14 @@
 
 #include <AK/Optional.h>
 #include <LibWeb/CSS/BackdropFilter.h>
+#include <LibWeb/CSS/CalculatedOr.h>
 #include <LibWeb/CSS/Clip.h>
 #include <LibWeb/CSS/Display.h>
 #include <LibWeb/CSS/GridTrackPlacement.h>
 #include <LibWeb/CSS/GridTrackSize.h>
 #include <LibWeb/CSS/LengthBox.h>
+#include <LibWeb/CSS/PercentageOr.h>
 #include <LibWeb/CSS/Size.h>
-#include <LibWeb/CSS/StyleValue.h>
 #include <LibWeb/CSS/StyleValues/AbstractImageStyleValue.h>
 #include <LibWeb/CSS/StyleValues/ShadowStyleValue.h>
 #include <LibWeb/CSS/TransformFunctions.h>
diff --git a/Userland/Libraries/LibWeb/CSS/GridTrackSize.cpp b/Userland/Libraries/LibWeb/CSS/GridTrackSize.cpp
index 128651f1afa..64396ade9d1 100644
--- a/Userland/Libraries/LibWeb/CSS/GridTrackSize.cpp
+++ b/Userland/Libraries/LibWeb/CSS/GridTrackSize.cpp
@@ -6,9 +6,6 @@
 
 #include "GridTrackSize.h"
 #include <AK/String.h>
-#include <LibWeb/CSS/Length.h>
-#include <LibWeb/CSS/Percentage.h>
-#include <LibWeb/CSS/StyleValue.h>
 
 namespace Web::CSS {
 
diff --git a/Userland/Libraries/LibWeb/CSS/LengthBox.cpp b/Userland/Libraries/LibWeb/CSS/LengthBox.cpp
index f6ced27f35f..7d271763e3d 100644
--- a/Userland/Libraries/LibWeb/CSS/LengthBox.cpp
+++ b/Userland/Libraries/LibWeb/CSS/LengthBox.cpp
@@ -6,7 +6,6 @@
  */
 
 #include "LengthBox.h"
-#include <LibWeb/CSS/StyleValue.h>
 
 namespace Web::CSS {
 
diff --git a/Userland/Libraries/LibWeb/CSS/LengthBox.h b/Userland/Libraries/LibWeb/CSS/LengthBox.h
index 6d5bdd8e67c..87f6d3cc051 100644
--- a/Userland/Libraries/LibWeb/CSS/LengthBox.h
+++ b/Userland/Libraries/LibWeb/CSS/LengthBox.h
@@ -6,7 +6,7 @@
 
 #pragma once
 
-#include <LibWeb/CSS/Percentage.h>
+#include <LibWeb/CSS/PercentageOr.h>
 
 namespace Web::CSS {
 
diff --git a/Userland/Libraries/LibWeb/CSS/MediaQuery.h b/Userland/Libraries/LibWeb/CSS/MediaQuery.h
index 99a95808b69..942b8296b2e 100644
--- a/Userland/Libraries/LibWeb/CSS/MediaQuery.h
+++ b/Userland/Libraries/LibWeb/CSS/MediaQuery.h
@@ -11,9 +11,10 @@
 #include <AK/OwnPtr.h>
 #include <AK/RefCounted.h>
 #include <LibWeb/CSS/GeneralEnclosed.h>
+#include <LibWeb/CSS/Length.h>
 #include <LibWeb/CSS/MediaFeatureID.h>
 #include <LibWeb/CSS/Ratio.h>
-#include <LibWeb/CSS/StyleValue.h>
+#include <LibWeb/CSS/Resolution.h>
 
 namespace Web::CSS {
 
diff --git a/Userland/Libraries/LibWeb/CSS/Percentage.h b/Userland/Libraries/LibWeb/CSS/Percentage.h
index 48fbc067f93..6769ccf1ca2 100644
--- a/Userland/Libraries/LibWeb/CSS/Percentage.h
+++ b/Userland/Libraries/LibWeb/CSS/Percentage.h
@@ -42,232 +42,4 @@ private:
     float m_value;
 };
 
-bool calculated_style_value_contains_percentage(CalculatedStyleValue const&);
-
-template<typename T>
-class PercentageOr {
-public:
-    PercentageOr(T t)
-        : m_value(move(t))
-    {
-    }
-
-    PercentageOr(Percentage percentage)
-        : m_value(move(percentage))
-    {
-    }
-
-    PercentageOr(NonnullRefPtr<CalculatedStyleValue> calculated)
-        : m_value(move(calculated))
-    {
-    }
-
-    virtual ~PercentageOr() = default;
-
-    PercentageOr<T>& operator=(T t)
-    {
-        m_value = move(t);
-        return *this;
-    }
-
-    PercentageOr<T>& operator=(Percentage percentage)
-    {
-        m_value = move(percentage);
-        return *this;
-    }
-
-    bool is_percentage() const { return m_value.template has<Percentage>(); }
-    bool is_calculated() const { return m_value.template has<NonnullRefPtr<CalculatedStyleValue>>(); }
-
-    bool contains_percentage() const
-    {
-        return m_value.visit(
-            [&](T const& t) {
-                if constexpr (requires { t.is_calculated(); }) {
-                    if (t.is_calculated())
-                        return calculated_style_value_contains_percentage(*t.calculated_style_value());
-                }
-                return false;
-            },
-            [&](Percentage const&) {
-                return true;
-            },
-            [&](NonnullRefPtr<CalculatedStyleValue> const& calculated) {
-                return calculated_style_value_contains_percentage(*calculated);
-            });
-    }
-
-    Percentage const& percentage() const
-    {
-        VERIFY(is_percentage());
-        return m_value.template get<Percentage>();
-    }
-
-    NonnullRefPtr<CalculatedStyleValue> const& calculated() const
-    {
-        VERIFY(is_calculated());
-        return m_value.template get<NonnullRefPtr<CalculatedStyleValue>>();
-    }
-
-    virtual T resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, [[maybe_unused]] Layout::Node const&, [[maybe_unused]] T const& reference_value) const
-    {
-        VERIFY_NOT_REACHED();
-    }
-
-    T resolved(Layout::Node const& layout_node, T const& reference_value) const
-    {
-        return m_value.visit(
-            [&](T const& t) {
-                if constexpr (requires { t.is_calculated(); }) {
-                    if (t.is_calculated())
-                        return resolve_calculated(t.calculated_style_value(), layout_node, reference_value);
-                }
-
-                return t;
-            },
-            [&](Percentage const& percentage) {
-                return reference_value.percentage_of(percentage);
-            },
-            [&](NonnullRefPtr<CalculatedStyleValue> const& calculated) {
-                return resolve_calculated(calculated, layout_node, reference_value);
-            });
-    }
-
-    ErrorOr<String> to_string() const
-    {
-        if (is_percentage())
-            return m_value.template get<Percentage>().to_string();
-
-        return m_value.template get<T>().to_string();
-    }
-
-    bool operator==(PercentageOr<T> const& other) const
-    {
-        if (is_calculated())
-            return false;
-        if (is_percentage() != other.is_percentage())
-            return false;
-        if (is_percentage())
-            return (m_value.template get<Percentage>() == other.m_value.template get<Percentage>());
-        return (m_value.template get<T>() == other.m_value.template get<T>());
-    }
-
-protected:
-    bool is_t() const { return m_value.template has<T>(); }
-    T const& get_t() const { return m_value.template get<T>(); }
-
-private:
-    Variant<T, Percentage, NonnullRefPtr<CalculatedStyleValue>> m_value;
-};
-
-template<typename T>
-bool operator==(PercentageOr<T> const& percentage_or, T const& t)
-{
-    return percentage_or == PercentageOr<T> { t };
 }
-
-template<typename T>
-bool operator==(T const& t, PercentageOr<T> const& percentage_or)
-{
-    return t == percentage_or;
-}
-
-template<typename T>
-bool operator==(PercentageOr<T> const& percentage_or, Percentage const& percentage)
-{
-    return percentage_or == PercentageOr<T> { percentage };
-}
-
-template<typename T>
-bool operator==(Percentage const& percentage, PercentageOr<T> const& percentage_or)
-{
-    return percentage == percentage_or;
-}
-
-class AnglePercentage : public PercentageOr<Angle> {
-public:
-    using PercentageOr<Angle>::PercentageOr;
-
-    bool is_angle() const { return is_t(); }
-    Angle const& angle() const { return get_t(); }
-    virtual Angle resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, Layout::Node const&, Angle const& reference_value) const override;
-};
-
-class FrequencyPercentage : public PercentageOr<Frequency> {
-public:
-    using PercentageOr<Frequency>::PercentageOr;
-
-    bool is_frequency() const { return is_t(); }
-    Frequency const& frequency() const { return get_t(); }
-    virtual Frequency resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, Layout::Node const&, Frequency const& reference_value) const override;
-};
-
-class LengthPercentage : public PercentageOr<Length> {
-public:
-    using PercentageOr<Length>::PercentageOr;
-
-    bool is_auto() const { return is_length() && length().is_auto(); }
-
-    bool is_length() const { return is_t(); }
-    Length const& length() const { return get_t(); }
-    virtual Length resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, Layout::Node const&, Length const& reference_value) const override;
-};
-
-class TimePercentage : public PercentageOr<Time> {
-public:
-    using PercentageOr<Time>::PercentageOr;
-
-    bool is_time() const { return is_t(); }
-    Time const& time() const { return get_t(); }
-    virtual Time resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, Layout::Node const&, Time const& reference_value) const override;
-};
-
-struct NumberPercentage : public PercentageOr<Number> {
-public:
-    using PercentageOr<Number>::PercentageOr;
-
-    bool is_number() const { return is_t(); }
-    Number const& number() const { return get_t(); }
-};
-
-}
-
-template<>
-struct AK::Formatter<Web::CSS::Percentage> : Formatter<StringView> {
-    ErrorOr<void> format(FormatBuilder& builder, Web::CSS::Percentage const& percentage)
-    {
-        return Formatter<StringView>::format(builder, TRY(percentage.to_string()));
-    }
-};
-
-template<>
-struct AK::Formatter<Web::CSS::AnglePercentage> : Formatter<StringView> {
-    ErrorOr<void> format(FormatBuilder& builder, Web::CSS::AnglePercentage const& angle_percentage)
-    {
-        return Formatter<StringView>::format(builder, TRY(angle_percentage.to_string()));
-    }
-};
-
-template<>
-struct AK::Formatter<Web::CSS::FrequencyPercentage> : Formatter<StringView> {
-    ErrorOr<void> format(FormatBuilder& builder, Web::CSS::FrequencyPercentage const& frequency_percentage)
-    {
-        return Formatter<StringView>::format(builder, TRY(frequency_percentage.to_string()));
-    }
-};
-
-template<>
-struct AK::Formatter<Web::CSS::LengthPercentage> : Formatter<StringView> {
-    ErrorOr<void> format(FormatBuilder& builder, Web::CSS::LengthPercentage const& length_percentage)
-    {
-        return Formatter<StringView>::format(builder, TRY(length_percentage.to_string()));
-    }
-};
-
-template<>
-struct AK::Formatter<Web::CSS::TimePercentage> : Formatter<StringView> {
-    ErrorOr<void> format(FormatBuilder& builder, Web::CSS::TimePercentage const& time_percentage)
-    {
-        return Formatter<StringView>::format(builder, TRY(time_percentage.to_string()));
-    }
-};
diff --git a/Userland/Libraries/LibWeb/CSS/Percentage.cpp b/Userland/Libraries/LibWeb/CSS/PercentageOr.cpp
similarity index 88%
rename from Userland/Libraries/LibWeb/CSS/Percentage.cpp
rename to Userland/Libraries/LibWeb/CSS/PercentageOr.cpp
index 473e04be8f5..12ddfb1022b 100644
--- a/Userland/Libraries/LibWeb/CSS/Percentage.cpp
+++ b/Userland/Libraries/LibWeb/CSS/PercentageOr.cpp
@@ -1,11 +1,10 @@
 /*
- * Copyright (c) 2022, Sam Atkins <atkinssj@serenityos.org>
+ * Copyright (c) 2022-2023, Sam Atkins <atkinssj@serenityos.org>
  *
  * SPDX-License-Identifier: BSD-2-Clause
  */
 
-#include <LibWeb/CSS/Percentage.h>
-#include <LibWeb/CSS/StyleValue.h>
+#include "PercentageOr.h"
 
 namespace Web::CSS {
 
diff --git a/Userland/Libraries/LibWeb/CSS/PercentageOr.h b/Userland/Libraries/LibWeb/CSS/PercentageOr.h
new file mode 100644
index 00000000000..4e7166a1885
--- /dev/null
+++ b/Userland/Libraries/LibWeb/CSS/PercentageOr.h
@@ -0,0 +1,247 @@
+/*
+ * Copyright (c) 2022-2023, Sam Atkins <atkinssj@serenityos.org>
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#pragma once
+
+#include <AK/String.h>
+#include <AK/Variant.h>
+#include <LibWeb/CSS/Angle.h>
+#include <LibWeb/CSS/Frequency.h>
+#include <LibWeb/CSS/Length.h>
+#include <LibWeb/CSS/Number.h>
+#include <LibWeb/CSS/Percentage.h>
+#include <LibWeb/CSS/StyleValue.h>
+#include <LibWeb/CSS/Time.h>
+
+namespace Web::CSS {
+
+template<typename T>
+class PercentageOr {
+public:
+    PercentageOr(T t)
+        : m_value(move(t))
+    {
+    }
+
+    PercentageOr(Percentage percentage)
+        : m_value(move(percentage))
+    {
+    }
+
+    PercentageOr(NonnullRefPtr<CalculatedStyleValue> calculated)
+        : m_value(move(calculated))
+    {
+    }
+
+    virtual ~PercentageOr() = default;
+
+    PercentageOr<T>& operator=(T t)
+    {
+        m_value = move(t);
+        return *this;
+    }
+
+    PercentageOr<T>& operator=(Percentage percentage)
+    {
+        m_value = move(percentage);
+        return *this;
+    }
+
+    bool is_percentage() const { return m_value.template has<Percentage>(); }
+    bool is_calculated() const { return m_value.template has<NonnullRefPtr<CalculatedStyleValue>>(); }
+
+    bool contains_percentage() const
+    {
+        return m_value.visit(
+            [&](T const& t) {
+                if constexpr (requires { t.is_calculated(); }) {
+                    if (t.is_calculated())
+                        return t.calculated_style_value()->contains_percentage();
+                }
+                return false;
+            },
+            [&](Percentage const&) {
+                return true;
+            },
+            [&](NonnullRefPtr<CalculatedStyleValue> const& calculated) {
+                return calculated->contains_percentage();
+            });
+    }
+
+    Percentage const& percentage() const
+    {
+        VERIFY(is_percentage());
+        return m_value.template get<Percentage>();
+    }
+
+    NonnullRefPtr<CalculatedStyleValue> const& calculated() const
+    {
+        VERIFY(is_calculated());
+        return m_value.template get<NonnullRefPtr<CalculatedStyleValue>>();
+    }
+
+    virtual T resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, [[maybe_unused]] Layout::Node const&, [[maybe_unused]] T const& reference_value) const
+    {
+        VERIFY_NOT_REACHED();
+    }
+
+    T resolved(Layout::Node const& layout_node, T const& reference_value) const
+    {
+        return m_value.visit(
+            [&](T const& t) {
+                if constexpr (requires { t.is_calculated(); }) {
+                    if (t.is_calculated())
+                        return resolve_calculated(t.calculated_style_value(), layout_node, reference_value);
+                }
+
+                return t;
+            },
+            [&](Percentage const& percentage) {
+                return reference_value.percentage_of(percentage);
+            },
+            [&](NonnullRefPtr<CalculatedStyleValue> const& calculated) {
+                return resolve_calculated(calculated, layout_node, reference_value);
+            });
+    }
+
+    ErrorOr<String> to_string() const
+    {
+        if (is_percentage())
+            return m_value.template get<Percentage>().to_string();
+
+        return m_value.template get<T>().to_string();
+    }
+
+    bool operator==(PercentageOr<T> const& other) const
+    {
+        if (is_calculated())
+            return false;
+        if (is_percentage() != other.is_percentage())
+            return false;
+        if (is_percentage())
+            return (m_value.template get<Percentage>() == other.m_value.template get<Percentage>());
+        return (m_value.template get<T>() == other.m_value.template get<T>());
+    }
+
+protected:
+    bool is_t() const { return m_value.template has<T>(); }
+    T const& get_t() const { return m_value.template get<T>(); }
+
+private:
+    Variant<T, Percentage, NonnullRefPtr<CalculatedStyleValue>> m_value;
+};
+
+template<typename T>
+bool operator==(PercentageOr<T> const& percentage_or, T const& t)
+{
+    return percentage_or == PercentageOr<T> { t };
+}
+
+template<typename T>
+bool operator==(T const& t, PercentageOr<T> const& percentage_or)
+{
+    return t == percentage_or;
+}
+
+template<typename T>
+bool operator==(PercentageOr<T> const& percentage_or, Percentage const& percentage)
+{
+    return percentage_or == PercentageOr<T> { percentage };
+}
+
+template<typename T>
+bool operator==(Percentage const& percentage, PercentageOr<T> const& percentage_or)
+{
+    return percentage == percentage_or;
+}
+
+class AnglePercentage : public PercentageOr<Angle> {
+public:
+    using PercentageOr<Angle>::PercentageOr;
+
+    bool is_angle() const { return is_t(); }
+    Angle const& angle() const { return get_t(); }
+    virtual Angle resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, Layout::Node const&, Angle const& reference_value) const override;
+};
+
+class FrequencyPercentage : public PercentageOr<Frequency> {
+public:
+    using PercentageOr<Frequency>::PercentageOr;
+
+    bool is_frequency() const { return is_t(); }
+    Frequency const& frequency() const { return get_t(); }
+    virtual Frequency resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, Layout::Node const&, Frequency const& reference_value) const override;
+};
+
+class LengthPercentage : public PercentageOr<Length> {
+public:
+    using PercentageOr<Length>::PercentageOr;
+
+    bool is_auto() const { return is_length() && length().is_auto(); }
+
+    bool is_length() const { return is_t(); }
+    Length const& length() const { return get_t(); }
+    virtual Length resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, Layout::Node const&, Length const& reference_value) const override;
+};
+
+class TimePercentage : public PercentageOr<Time> {
+public:
+    using PercentageOr<Time>::PercentageOr;
+
+    bool is_time() const { return is_t(); }
+    Time const& time() const { return get_t(); }
+    virtual Time resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, Layout::Node const&, Time const& reference_value) const override;
+};
+
+struct NumberPercentage : public PercentageOr<Number> {
+public:
+    using PercentageOr<Number>::PercentageOr;
+
+    bool is_number() const { return is_t(); }
+    Number const& number() const { return get_t(); }
+};
+
+}
+
+template<>
+struct AK::Formatter<Web::CSS::Percentage> : Formatter<StringView> {
+    ErrorOr<void> format(FormatBuilder& builder, Web::CSS::Percentage const& percentage)
+    {
+        return Formatter<StringView>::format(builder, TRY(percentage.to_string()));
+    }
+};
+
+template<>
+struct AK::Formatter<Web::CSS::AnglePercentage> : Formatter<StringView> {
+    ErrorOr<void> format(FormatBuilder& builder, Web::CSS::AnglePercentage const& angle_percentage)
+    {
+        return Formatter<StringView>::format(builder, TRY(angle_percentage.to_string()));
+    }
+};
+
+template<>
+struct AK::Formatter<Web::CSS::FrequencyPercentage> : Formatter<StringView> {
+    ErrorOr<void> format(FormatBuilder& builder, Web::CSS::FrequencyPercentage const& frequency_percentage)
+    {
+        return Formatter<StringView>::format(builder, TRY(frequency_percentage.to_string()));
+    }
+};
+
+template<>
+struct AK::Formatter<Web::CSS::LengthPercentage> : Formatter<StringView> {
+    ErrorOr<void> format(FormatBuilder& builder, Web::CSS::LengthPercentage const& length_percentage)
+    {
+        return Formatter<StringView>::format(builder, TRY(length_percentage.to_string()));
+    }
+};
+
+template<>
+struct AK::Formatter<Web::CSS::TimePercentage> : Formatter<StringView> {
+    ErrorOr<void> format(FormatBuilder& builder, Web::CSS::TimePercentage const& time_percentage)
+    {
+        return Formatter<StringView>::format(builder, TRY(time_percentage.to_string()));
+    }
+};
diff --git a/Userland/Libraries/LibWeb/CSS/Position.cpp b/Userland/Libraries/LibWeb/CSS/Position.cpp
index cfca1e29aca..ae1dda72ea5 100644
--- a/Userland/Libraries/LibWeb/CSS/Position.cpp
+++ b/Userland/Libraries/LibWeb/CSS/Position.cpp
@@ -7,7 +7,6 @@
 #include "Position.h"
 #include <LibGfx/Point.h>
 #include <LibGfx/Rect.h>
-#include <LibWeb/CSS/StyleValue.h>
 
 namespace Web::CSS {
 
diff --git a/Userland/Libraries/LibWeb/CSS/Position.h b/Userland/Libraries/LibWeb/CSS/Position.h
index f9f7425dcde..321d967e8ad 100644
--- a/Userland/Libraries/LibWeb/CSS/Position.h
+++ b/Userland/Libraries/LibWeb/CSS/Position.h
@@ -6,7 +6,7 @@
 
 #pragma once
 
-#include <LibWeb/CSS/Percentage.h>
+#include <LibWeb/CSS/PercentageOr.h>
 #include <LibWeb/PixelUnits.h>
 
 namespace Web::CSS {
diff --git a/Userland/Libraries/LibWeb/CSS/Resolution.cpp b/Userland/Libraries/LibWeb/CSS/Resolution.cpp
index 8963ad4b7e3..c7a0cad3442 100644
--- a/Userland/Libraries/LibWeb/CSS/Resolution.cpp
+++ b/Userland/Libraries/LibWeb/CSS/Resolution.cpp
@@ -5,7 +5,6 @@
  */
 
 #include "Resolution.h"
-#include <LibWeb/CSS/StyleValue.h>
 
 namespace Web::CSS {
 
diff --git a/Userland/Libraries/LibWeb/CSS/Size.cpp b/Userland/Libraries/LibWeb/CSS/Size.cpp
index fa4e8f8fe9e..0513d254ff1 100644
--- a/Userland/Libraries/LibWeb/CSS/Size.cpp
+++ b/Userland/Libraries/LibWeb/CSS/Size.cpp
@@ -4,9 +4,7 @@
  * SPDX-License-Identifier: BSD-2-Clause
  */
 
-#include <LibWeb/CSS/Length.h>
 #include <LibWeb/CSS/Size.h>
-#include <LibWeb/CSS/StyleValue.h>
 
 namespace Web::CSS {
 
diff --git a/Userland/Libraries/LibWeb/CSS/Size.h b/Userland/Libraries/LibWeb/CSS/Size.h
index 8e2a8ac952f..77aaf2da59b 100644
--- a/Userland/Libraries/LibWeb/CSS/Size.h
+++ b/Userland/Libraries/LibWeb/CSS/Size.h
@@ -8,7 +8,7 @@
 #pragma once
 
 #include <LibWeb/CSS/Length.h>
-#include <LibWeb/CSS/Percentage.h>
+#include <LibWeb/CSS/PercentageOr.h>
 
 namespace Web::CSS {
 
diff --git a/Userland/Libraries/LibWeb/CSS/StyleProperties.h b/Userland/Libraries/LibWeb/CSS/StyleProperties.h
index 8c777b11210..404491dee52 100644
--- a/Userland/Libraries/LibWeb/CSS/StyleProperties.h
+++ b/Userland/Libraries/LibWeb/CSS/StyleProperties.h
@@ -13,7 +13,6 @@
 #include <LibWeb/CSS/ComputedValues.h>
 #include <LibWeb/CSS/LengthBox.h>
 #include <LibWeb/CSS/PropertyID.h>
-#include <LibWeb/CSS/StyleValue.h>
 
 namespace Web::CSS {
 
diff --git a/Userland/Libraries/LibWeb/CSS/StyleValue.cpp b/Userland/Libraries/LibWeb/CSS/StyleValue.cpp
index 60122d7c269..ec330244c22 100644
--- a/Userland/Libraries/LibWeb/CSS/StyleValue.cpp
+++ b/Userland/Libraries/LibWeb/CSS/StyleValue.cpp
@@ -1073,9 +1073,4 @@ bool CalculatedStyleValue::CalcValue::contains_percentage() const
         [](auto const&) { return false; });
 }
 
-bool calculated_style_value_contains_percentage(CalculatedStyleValue const& value)
-{
-    return value.contains_percentage();
-}
-
 }
diff --git a/Userland/Libraries/LibWeb/CSS/StyleValues/AbstractImageStyleValue.h b/Userland/Libraries/LibWeb/CSS/StyleValues/AbstractImageStyleValue.h
index 6cc8bace8fa..692b822571c 100644
--- a/Userland/Libraries/LibWeb/CSS/StyleValues/AbstractImageStyleValue.h
+++ b/Userland/Libraries/LibWeb/CSS/StyleValues/AbstractImageStyleValue.h
@@ -10,6 +10,7 @@
 #pragma once
 
 #include <LibWeb/CSS/Enums.h>
+#include <LibWeb/CSS/PercentageOr.h>
 #include <LibWeb/CSS/Serialize.h>
 #include <LibWeb/CSS/StyleValue.h>
 
diff --git a/Userland/Libraries/LibWeb/CSS/StyleValues/BackgroundSizeStyleValue.h b/Userland/Libraries/LibWeb/CSS/StyleValues/BackgroundSizeStyleValue.h
index f67a94c6371..a01a79eed0d 100644
--- a/Userland/Libraries/LibWeb/CSS/StyleValues/BackgroundSizeStyleValue.h
+++ b/Userland/Libraries/LibWeb/CSS/StyleValues/BackgroundSizeStyleValue.h
@@ -10,7 +10,7 @@
 #pragma once
 
 #include <LibWeb/CSS/Length.h>
-#include <LibWeb/CSS/Percentage.h>
+#include <LibWeb/CSS/PercentageOr.h>
 #include <LibWeb/CSS/StyleValue.h>
 
 namespace Web::CSS {
diff --git a/Userland/Libraries/LibWeb/CSS/StyleValues/BorderRadiusStyleValue.h b/Userland/Libraries/LibWeb/CSS/StyleValues/BorderRadiusStyleValue.h
index f8474d23df3..29c38976345 100644
--- a/Userland/Libraries/LibWeb/CSS/StyleValues/BorderRadiusStyleValue.h
+++ b/Userland/Libraries/LibWeb/CSS/StyleValues/BorderRadiusStyleValue.h
@@ -10,7 +10,7 @@
 #pragma once
 
 #include <LibWeb/CSS/Length.h>
-#include <LibWeb/CSS/Percentage.h>
+#include <LibWeb/CSS/PercentageOr.h>
 #include <LibWeb/CSS/StyleValue.h>
 
 namespace Web::CSS {
diff --git a/Userland/Libraries/LibWeb/CSS/StyleValues/ConicGradientStyleValue.h b/Userland/Libraries/LibWeb/CSS/StyleValues/ConicGradientStyleValue.h
index bb2ea86ad60..5223e78ff48 100644
--- a/Userland/Libraries/LibWeb/CSS/StyleValues/ConicGradientStyleValue.h
+++ b/Userland/Libraries/LibWeb/CSS/StyleValues/ConicGradientStyleValue.h
@@ -9,6 +9,7 @@
 
 #pragma once
 
+#include <LibWeb/CSS/Angle.h>
 #include <LibWeb/CSS/Position.h>
 #include <LibWeb/CSS/StyleValues/AbstractImageStyleValue.h>
 #include <LibWeb/Painting/GradientPainting.h>
diff --git a/Userland/Libraries/LibWeb/CSS/StyleValues/FilterValueListStyleValue.h b/Userland/Libraries/LibWeb/CSS/StyleValues/FilterValueListStyleValue.h
index 2275d04dcc7..b93ba812651 100644
--- a/Userland/Libraries/LibWeb/CSS/StyleValues/FilterValueListStyleValue.h
+++ b/Userland/Libraries/LibWeb/CSS/StyleValues/FilterValueListStyleValue.h
@@ -12,8 +12,7 @@
 #include <LibWeb/CSS/Angle.h>
 #include <LibWeb/CSS/Length.h>
 #include <LibWeb/CSS/Number.h>
-#include <LibWeb/CSS/Percentage.h>
-#include <LibWeb/CSS/StyleValue.h>
+#include <LibWeb/CSS/PercentageOr.h>
 
 namespace Web::CSS {
 
diff --git a/Userland/Libraries/LibWeb/CSS/StyleValues/LinearGradientStyleValue.h b/Userland/Libraries/LibWeb/CSS/StyleValues/LinearGradientStyleValue.h
index 9c5b08656af..218b8bb3d4c 100644
--- a/Userland/Libraries/LibWeb/CSS/StyleValues/LinearGradientStyleValue.h
+++ b/Userland/Libraries/LibWeb/CSS/StyleValues/LinearGradientStyleValue.h
@@ -10,6 +10,8 @@
 #pragma once
 
 #include <AK/Vector.h>
+#include <LibWeb/CSS/Angle.h>
+#include <LibWeb/CSS/Percentage.h>
 #include <LibWeb/CSS/StyleValues/AbstractImageStyleValue.h>
 #include <LibWeb/Painting/GradientPainting.h>
 
diff --git a/Userland/Libraries/LibWeb/CSS/StyleValues/PositionStyleValue.h b/Userland/Libraries/LibWeb/CSS/StyleValues/PositionStyleValue.h
index 77bfb4737a8..39efe318ffc 100644
--- a/Userland/Libraries/LibWeb/CSS/StyleValues/PositionStyleValue.h
+++ b/Userland/Libraries/LibWeb/CSS/StyleValues/PositionStyleValue.h
@@ -10,7 +10,7 @@
 #pragma once
 
 #include <LibWeb/CSS/Enums.h>
-#include <LibWeb/CSS/Percentage.h>
+#include <LibWeb/CSS/PercentageOr.h>
 #include <LibWeb/CSS/StyleValue.h>
 
 namespace Web::CSS {
diff --git a/Userland/Libraries/LibWeb/HTML/HTMLBodyElement.cpp b/Userland/Libraries/LibWeb/HTML/HTMLBodyElement.cpp
index d2ef4644263..32aaf20490c 100644
--- a/Userland/Libraries/LibWeb/HTML/HTMLBodyElement.cpp
+++ b/Userland/Libraries/LibWeb/HTML/HTMLBodyElement.cpp
@@ -5,7 +5,6 @@
  */
 
 #include <LibWeb/CSS/StyleProperties.h>
-#include <LibWeb/CSS/StyleValue.h>
 #include <LibWeb/CSS/StyleValues/ColorStyleValue.h>
 #include <LibWeb/CSS/StyleValues/ImageStyleValue.h>
 #include <LibWeb/DOM/Document.h>
diff --git a/Userland/Libraries/LibWeb/HTML/HTMLFontElement.cpp b/Userland/Libraries/LibWeb/HTML/HTMLFontElement.cpp
index 0d606678b56..3d16e37e1db 100644
--- a/Userland/Libraries/LibWeb/HTML/HTMLFontElement.cpp
+++ b/Userland/Libraries/LibWeb/HTML/HTMLFontElement.cpp
@@ -6,7 +6,6 @@
 
 #include <LibWeb/Bindings/Intrinsics.h>
 #include <LibWeb/CSS/StyleProperties.h>
-#include <LibWeb/CSS/StyleValue.h>
 #include <LibWeb/CSS/StyleValues/ColorStyleValue.h>
 #include <LibWeb/HTML/HTMLFontElement.h>
 
diff --git a/Userland/Libraries/LibWeb/Painting/GradientPainting.cpp b/Userland/Libraries/LibWeb/Painting/GradientPainting.cpp
index f7962f9b923..9c10e7ab9f5 100644
--- a/Userland/Libraries/LibWeb/Painting/GradientPainting.cpp
+++ b/Userland/Libraries/LibWeb/Painting/GradientPainting.cpp
@@ -6,7 +6,6 @@
 
 #include <AK/Math.h>
 #include <LibGfx/Gradients.h>
-#include <LibWeb/CSS/StyleValue.h>
 #include <LibWeb/CSS/StyleValues/ConicGradientStyleValue.h>
 #include <LibWeb/CSS/StyleValues/LinearGradientStyleValue.h>
 #include <LibWeb/CSS/StyleValues/RadialGradientStyleValue.h>