diff --git a/Userland/Libraries/LibWeb/CSS/CalculatedOr.cpp b/Userland/Libraries/LibWeb/CSS/CalculatedOr.cpp
index 51d2a34f89..16f12bc1c7 100644
--- a/Userland/Libraries/LibWeb/CSS/CalculatedOr.cpp
+++ b/Userland/Libraries/LibWeb/CSS/CalculatedOr.cpp
@@ -5,6 +5,15 @@
  */
 
 #include "CalculatedOr.h"
+#include <LibWeb/CSS/StyleValues/AngleStyleValue.h>
+#include <LibWeb/CSS/StyleValues/FlexStyleValue.h>
+#include <LibWeb/CSS/StyleValues/FrequencyStyleValue.h>
+#include <LibWeb/CSS/StyleValues/IntegerStyleValue.h>
+#include <LibWeb/CSS/StyleValues/LengthStyleValue.h>
+#include <LibWeb/CSS/StyleValues/NumberStyleValue.h>
+#include <LibWeb/CSS/StyleValues/PercentageStyleValue.h>
+#include <LibWeb/CSS/StyleValues/ResolutionStyleValue.h>
+#include <LibWeb/CSS/StyleValues/TimeStyleValue.h>
 
 namespace Web::CSS {
 
@@ -13,21 +22,41 @@ Angle AngleOrCalculated::resolve_calculated(NonnullRefPtr<CalculatedStyleValue>
     return calculated->resolve_angle().value();
 }
 
+NonnullRefPtr<StyleValue> AngleOrCalculated::create_style_value() const
+{
+    return AngleStyleValue::create(value());
+}
+
 Flex FlexOrCalculated::resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const& calculated, Layout::Node const&) const
 {
     return calculated->resolve_flex().value();
 }
 
+NonnullRefPtr<StyleValue> FlexOrCalculated::create_style_value() const
+{
+    return FlexStyleValue::create(value());
+}
+
 Frequency FrequencyOrCalculated::resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const& calculated, Layout::Node const&) const
 {
     return calculated->resolve_frequency().value();
 }
 
+NonnullRefPtr<StyleValue> FrequencyOrCalculated::create_style_value() const
+{
+    return FrequencyStyleValue::create(value());
+}
+
 i64 IntegerOrCalculated::resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const& calculated, Layout::Node const&) const
 {
     return calculated->resolve_integer().value();
 }
 
+NonnullRefPtr<StyleValue> IntegerOrCalculated::create_style_value() const
+{
+    return IntegerStyleValue::create(value());
+}
+
 Length LengthOrCalculated::resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const& calculated, Layout::Node const& layout_node) const
 {
     return calculated->resolve_length(layout_node).value();
@@ -40,24 +69,49 @@ Length LengthOrCalculated::resolved(Length::ResolutionContext const& context) co
     return value();
 }
 
+NonnullRefPtr<StyleValue> LengthOrCalculated::create_style_value() const
+{
+    return LengthStyleValue::create(value());
+}
+
 double NumberOrCalculated::resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const& calculated, Layout::Node const&) const
 {
     return calculated->resolve_number().value();
 }
 
+NonnullRefPtr<StyleValue> NumberOrCalculated::create_style_value() const
+{
+    return NumberStyleValue::create(value());
+}
+
 Percentage PercentageOrCalculated::resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const& calculated, Layout::Node const&) const
 {
     return calculated->resolve_percentage().value();
 }
 
+NonnullRefPtr<StyleValue> PercentageOrCalculated::create_style_value() const
+{
+    return PercentageStyleValue::create(value());
+}
+
 Resolution ResolutionOrCalculated::resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const& calculated, Layout::Node const&) const
 {
     return calculated->resolve_resolution().value();
 }
 
+NonnullRefPtr<StyleValue> ResolutionOrCalculated::create_style_value() const
+{
+    return ResolutionStyleValue::create(value());
+}
+
 Time TimeOrCalculated::resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const& calculated, Layout::Node const&) const
 {
     return calculated->resolve_time().value();
 }
 
+NonnullRefPtr<StyleValue> TimeOrCalculated::create_style_value() const
+{
+    return TimeStyleValue::create(value());
+}
+
 }
diff --git a/Userland/Libraries/LibWeb/CSS/CalculatedOr.h b/Userland/Libraries/LibWeb/CSS/CalculatedOr.h
index 1a200b68d2..bbb64f2a62 100644
--- a/Userland/Libraries/LibWeb/CSS/CalculatedOr.h
+++ b/Userland/Libraries/LibWeb/CSS/CalculatedOr.h
@@ -41,14 +41,19 @@ public:
         return m_value.template get<T>();
     }
 
+    NonnullRefPtr<StyleValue> as_style_value() const
+    {
+        if (is_calculated())
+            return calculated();
+        return create_style_value();
+    }
+
     NonnullRefPtr<CalculatedStyleValue> const& calculated() const
     {
         VERIFY(is_calculated());
         return m_value.template get<NonnullRefPtr<CalculatedStyleValue>>();
     }
 
-    virtual T resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, Layout::Node const&) const = 0;
-
     T resolved(Layout::Node const& layout_node) const
     {
         return m_value.visit(
@@ -75,6 +80,10 @@ public:
         return (m_value.template get<T>() == other.m_value.template get<T>());
     }
 
+protected:
+    virtual T resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, Layout::Node const&) const = 0;
+    virtual NonnullRefPtr<StyleValue> create_style_value() const = 0;
+
 private:
     Variant<T, NonnullRefPtr<CalculatedStyleValue>> m_value;
 };
@@ -83,64 +92,83 @@ class AngleOrCalculated : public CalculatedOr<Angle> {
 public:
     using CalculatedOr<Angle>::CalculatedOr;
 
-    Angle resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, Layout::Node const&) const override;
+private:
+    virtual Angle resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, Layout::Node const&) const override;
+    virtual NonnullRefPtr<StyleValue> create_style_value() const override;
 };
 
 class FlexOrCalculated : public CalculatedOr<Flex> {
 public:
     using CalculatedOr<Flex>::CalculatedOr;
 
-    Flex resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, Layout::Node const&) const override;
+private:
+    virtual Flex resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, Layout::Node const&) const override;
+    virtual NonnullRefPtr<StyleValue> create_style_value() const override;
 };
 
 class FrequencyOrCalculated : public CalculatedOr<Frequency> {
 public:
     using CalculatedOr<Frequency>::CalculatedOr;
 
-    Frequency resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, Layout::Node const&) const override;
+private:
+    virtual Frequency resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, Layout::Node const&) const override;
+    virtual NonnullRefPtr<StyleValue> create_style_value() const override;
 };
 
 class IntegerOrCalculated : public CalculatedOr<i64> {
 public:
     using CalculatedOr<i64>::CalculatedOr;
 
-    i64 resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, Layout::Node const&) const override;
+private:
+    virtual i64 resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, Layout::Node const&) const override;
+    virtual NonnullRefPtr<StyleValue> create_style_value() const override;
 };
 
 class LengthOrCalculated : public CalculatedOr<Length> {
 public:
     using CalculatedOr<Length>::CalculatedOr;
 
-    Length resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, Layout::Node const&) const override;
     [[nodiscard]] Length resolved(Length::ResolutionContext const&) const;
+
+private:
+    virtual Length resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, Layout::Node const&) const override;
+    virtual NonnullRefPtr<StyleValue> create_style_value() const override;
 };
 
 class NumberOrCalculated : public CalculatedOr<double> {
 public:
     using CalculatedOr<double>::CalculatedOr;
 
-    double resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, Layout::Node const&) const override;
+private:
+    virtual double resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, Layout::Node const&) const override;
+    virtual NonnullRefPtr<StyleValue> create_style_value() const override;
 };
 
 class PercentageOrCalculated : public CalculatedOr<Percentage> {
 public:
     using CalculatedOr<Percentage>::CalculatedOr;
 
-    Percentage resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, Layout::Node const&) const override;
+private:
+    virtual Percentage resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, Layout::Node const&) const override;
+    virtual NonnullRefPtr<StyleValue> create_style_value() const override;
 };
 
 class ResolutionOrCalculated : public CalculatedOr<Resolution> {
 public:
     using CalculatedOr<Resolution>::CalculatedOr;
 
-    Resolution resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, Layout::Node const&) const override;
+private:
+    virtual Resolution resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, Layout::Node const&) const override;
+    virtual NonnullRefPtr<StyleValue> create_style_value() const override;
 };
 
 class TimeOrCalculated : public CalculatedOr<Time> {
 public:
     using CalculatedOr<Time>::CalculatedOr;
 
-    Time resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, Layout::Node const&) const override;
+private:
+    virtual Time resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, Layout::Node const&) const override;
+    virtual NonnullRefPtr<StyleValue> create_style_value() const override;
 };
 
 }