diff --git a/Libraries/LibWeb/CSS/CalculatedOr.h b/Libraries/LibWeb/CSS/CalculatedOr.h
index 688537a4a39..9fdbb6e9051 100644
--- a/Libraries/LibWeb/CSS/CalculatedOr.h
+++ b/Libraries/LibWeb/CSS/CalculatedOr.h
@@ -63,7 +63,7 @@ public:
             });
     }
 
-    String to_string() const
+    String to_string(SerializationMode mode) const
     {
         return m_value.visit(
             [](T const& t) {
@@ -73,8 +73,8 @@ public:
                     return t.to_string();
                 }
             },
-            [](NonnullRefPtr<CalculatedStyleValue const> const& calculated) {
-                return calculated->to_string(SerializationMode::Normal);
+            [&mode](NonnullRefPtr<CalculatedStyleValue const> const& calculated) {
+                return calculated->to_string(mode);
             });
     }
 
@@ -177,7 +177,7 @@ template<>
 struct AK::Formatter<Web::CSS::AngleOrCalculated> : Formatter<StringView> {
     ErrorOr<void> format(FormatBuilder& builder, Web::CSS::AngleOrCalculated const& calculated_or)
     {
-        return Formatter<StringView>::format(builder, calculated_or.to_string());
+        return Formatter<StringView>::format(builder, calculated_or.to_string(Web::CSS::SerializationMode::Normal));
     }
 };
 
@@ -185,7 +185,7 @@ template<>
 struct AK::Formatter<Web::CSS::FrequencyOrCalculated> : Formatter<StringView> {
     ErrorOr<void> format(FormatBuilder& builder, Web::CSS::FrequencyOrCalculated const& calculated_or)
     {
-        return Formatter<StringView>::format(builder, calculated_or.to_string());
+        return Formatter<StringView>::format(builder, calculated_or.to_string(Web::CSS::SerializationMode::Normal));
     }
 };
 
@@ -193,7 +193,7 @@ template<>
 struct AK::Formatter<Web::CSS::LengthOrCalculated> : Formatter<StringView> {
     ErrorOr<void> format(FormatBuilder& builder, Web::CSS::LengthOrCalculated const& calculated_or)
     {
-        return Formatter<StringView>::format(builder, calculated_or.to_string());
+        return Formatter<StringView>::format(builder, calculated_or.to_string(Web::CSS::SerializationMode::Normal));
     }
 };
 
@@ -201,7 +201,7 @@ template<>
 struct AK::Formatter<Web::CSS::PercentageOrCalculated> : Formatter<StringView> {
     ErrorOr<void> format(FormatBuilder& builder, Web::CSS::PercentageOrCalculated const& calculated_or)
     {
-        return Formatter<StringView>::format(builder, calculated_or.to_string());
+        return Formatter<StringView>::format(builder, calculated_or.to_string(Web::CSS::SerializationMode::Normal));
     }
 };
 
@@ -209,6 +209,6 @@ template<>
 struct AK::Formatter<Web::CSS::TimeOrCalculated> : Formatter<StringView> {
     ErrorOr<void> format(FormatBuilder& builder, Web::CSS::TimeOrCalculated const& calculated_or)
     {
-        return Formatter<StringView>::format(builder, calculated_or.to_string());
+        return Formatter<StringView>::format(builder, calculated_or.to_string(Web::CSS::SerializationMode::Normal));
     }
 };
diff --git a/Libraries/LibWeb/CSS/GridTrackPlacement.cpp b/Libraries/LibWeb/CSS/GridTrackPlacement.cpp
index f8e93df3df1..05da0078c82 100644
--- a/Libraries/LibWeb/CSS/GridTrackPlacement.cpp
+++ b/Libraries/LibWeb/CSS/GridTrackPlacement.cpp
@@ -10,7 +10,7 @@
 
 namespace Web::CSS {
 
-String GridTrackPlacement::to_string() const
+String GridTrackPlacement::to_string(SerializationMode mode) const
 {
     StringBuilder builder;
     m_value.visit(
@@ -19,9 +19,9 @@ String GridTrackPlacement::to_string() const
         },
         [&](AreaOrLine const& area_or_line) {
             if (area_or_line.line_number.has_value() && area_or_line.name.has_value()) {
-                builder.appendff("{} {}", area_or_line.line_number->to_string(), *area_or_line.name);
+                builder.appendff("{} {}", area_or_line.line_number->to_string(mode), *area_or_line.name);
             } else if (area_or_line.line_number.has_value()) {
-                builder.appendff("{}", area_or_line.line_number->to_string());
+                builder.appendff("{}", area_or_line.line_number->to_string(mode));
             } else if (area_or_line.name.has_value()) {
                 builder.appendff("{}", *area_or_line.name);
             }
@@ -30,7 +30,7 @@ String GridTrackPlacement::to_string() const
             builder.append("span"sv);
 
             if (!span.name.has_value() || span.value.is_calculated() || span.value.value() != 1)
-                builder.appendff(" {}", span.value.to_string());
+                builder.appendff(" {}", span.value.to_string(mode));
 
             if (span.name.has_value())
                 builder.appendff(" {}", span.name.value());
diff --git a/Libraries/LibWeb/CSS/GridTrackPlacement.h b/Libraries/LibWeb/CSS/GridTrackPlacement.h
index 722710b4c93..d7f5d041f50 100644
--- a/Libraries/LibWeb/CSS/GridTrackPlacement.h
+++ b/Libraries/LibWeb/CSS/GridTrackPlacement.h
@@ -53,7 +53,7 @@ public:
     IntegerOrCalculated line_number() const { return *m_value.get<AreaOrLine>().line_number; }
     IntegerOrCalculated span() const { return m_value.get<Span>().value; }
 
-    String to_string() const;
+    String to_string(SerializationMode mode) const;
 
     bool operator==(GridTrackPlacement const& other) const = default;
 
diff --git a/Libraries/LibWeb/CSS/MediaQuery.cpp b/Libraries/LibWeb/CSS/MediaQuery.cpp
index 5be730a98c8..76b7cc1a460 100644
--- a/Libraries/LibWeb/CSS/MediaQuery.cpp
+++ b/Libraries/LibWeb/CSS/MediaQuery.cpp
@@ -25,13 +25,13 @@ NonnullRefPtr<MediaQuery> MediaQuery::create_not_all()
     return adopt_ref(*media_query);
 }
 
-String MediaFeatureValue::to_string() const
+String MediaFeatureValue::to_string(SerializationMode mode) const
 {
     return m_value.visit(
         [](Keyword const& ident) { return MUST(String::from_utf8(string_from_keyword(ident))); },
-        [](LengthOrCalculated const& length) { return length.to_string(); },
+        [&mode](LengthOrCalculated const& length) { return length.to_string(mode); },
         [](Ratio const& ratio) { return ratio.to_string(); },
-        [](ResolutionOrCalculated const& resolution) { return resolution.to_string(); },
+        [&mode](ResolutionOrCalculated const& resolution) { return resolution.to_string(mode); },
         [](IntegerOrCalculated const& integer) {
             if (integer.is_calculated())
                 return integer.calculated()->to_string(SerializationMode::Normal);
@@ -75,19 +75,19 @@ String MediaFeature::to_string() const
     case Type::IsTrue:
         return MUST(String::from_utf8(string_from_media_feature_id(m_id)));
     case Type::ExactValue:
-        return MUST(String::formatted("{}: {}", string_from_media_feature_id(m_id), value().to_string()));
+        return MUST(String::formatted("{}: {}", string_from_media_feature_id(m_id), value().to_string(SerializationMode::Normal)));
     case Type::MinValue:
-        return MUST(String::formatted("min-{}: {}", string_from_media_feature_id(m_id), value().to_string()));
+        return MUST(String::formatted("min-{}: {}", string_from_media_feature_id(m_id), value().to_string(SerializationMode::Normal)));
     case Type::MaxValue:
-        return MUST(String::formatted("max-{}: {}", string_from_media_feature_id(m_id), value().to_string()));
+        return MUST(String::formatted("max-{}: {}", string_from_media_feature_id(m_id), value().to_string(SerializationMode::Normal)));
     case Type::Range: {
         auto& range = this->range();
         StringBuilder builder;
         if (range.left_comparison.has_value())
-            builder.appendff("{} {} ", range.left_value->to_string(), comparison_string(*range.left_comparison));
+            builder.appendff("{} {} ", range.left_value->to_string(SerializationMode::Normal), comparison_string(*range.left_comparison));
         builder.append(string_from_media_feature_id(m_id));
         if (range.right_comparison.has_value())
-            builder.appendff(" {} {}", comparison_string(*range.right_comparison), range.right_value->to_string());
+            builder.appendff(" {} {}", comparison_string(*range.right_comparison), range.right_value->to_string(SerializationMode::Normal));
 
         return builder.to_string_without_validation();
     }
diff --git a/Libraries/LibWeb/CSS/MediaQuery.h b/Libraries/LibWeb/CSS/MediaQuery.h
index 9bcd12042f2..0941f6f4b5f 100644
--- a/Libraries/LibWeb/CSS/MediaQuery.h
+++ b/Libraries/LibWeb/CSS/MediaQuery.h
@@ -57,7 +57,7 @@ public:
     {
     }
 
-    String to_string() const;
+    String to_string(SerializationMode mode) const;
 
     bool is_ident() const { return m_value.has<Keyword>(); }
     bool is_length() const { return m_value.has<LengthOrCalculated>(); }
diff --git a/Libraries/LibWeb/CSS/StyleValues/ColorMixStyleValue.cpp b/Libraries/LibWeb/CSS/StyleValues/ColorMixStyleValue.cpp
index 9e7b1450684..08fa2587d92 100644
--- a/Libraries/LibWeb/CSS/StyleValues/ColorMixStyleValue.cpp
+++ b/Libraries/LibWeb/CSS/StyleValues/ColorMixStyleValue.cpp
@@ -40,7 +40,7 @@ bool ColorMixStyleValue::equals(CSSStyleValue const& other) const
 // https://drafts.csswg.org/css-color-5/#serial-color-mix
 String ColorMixStyleValue::to_string(SerializationMode mode) const
 {
-    auto serialize_first_percentage = [](StringBuilder& builder, Optional<PercentageOrCalculated> const& p1, Optional<PercentageOrCalculated> const& p2) {
+    auto serialize_first_percentage = [&mode](StringBuilder& builder, Optional<PercentageOrCalculated> const& p1, Optional<PercentageOrCalculated> const& p2) {
         // if BOTH the first percentage p1 and second percentage p2 are specified:
         if (p1.has_value() && p2.has_value()) {
             // If both p1 equals 50% and p2 equals 50%, nothing is serialized.
@@ -48,7 +48,7 @@ String ColorMixStyleValue::to_string(SerializationMode mode) const
                 return;
 
             // else, p1 is serialized as is.
-            builder.appendff(" {}", p1->to_string());
+            builder.appendff(" {}", p1->to_string(mode));
         }
         // else if ONLY the first percentage p1 is specified:
         else if (p1.has_value()) {
@@ -57,7 +57,7 @@ String ColorMixStyleValue::to_string(SerializationMode mode) const
                 return;
 
             // else, p1 is serialized as is.
-            builder.appendff(" {}", p1->to_string());
+            builder.appendff(" {}", p1->to_string(mode));
         }
         // else if ONLY the second percentage p2 is specified:
         else if (p2.has_value()) {
@@ -77,7 +77,7 @@ String ColorMixStyleValue::to_string(SerializationMode mode) const
         }
     };
 
-    auto serialize_second_percentage = [](StringBuilder& builder, Optional<PercentageOrCalculated> const& p1, Optional<PercentageOrCalculated> const& p2) {
+    auto serialize_second_percentage = [&mode](StringBuilder& builder, Optional<PercentageOrCalculated> const& p1, Optional<PercentageOrCalculated> const& p2) {
         // If BOTH the first percentage p1 and second percentages p2 are specified:
         if (p1.has_value() && p2.has_value()) {
             // if neither p1 nor p2 is calc(), and p1 + p2 equals 100%, nothing is serialized.
@@ -85,7 +85,7 @@ String ColorMixStyleValue::to_string(SerializationMode mode) const
                 return;
 
             // else, p2 is serialized as is.
-            builder.appendff(" {}", p2->to_string());
+            builder.appendff(" {}", p2->to_string(mode));
         }
         // else if ONLY the first percentage p1 is specified:
         else if (p1.has_value()) {
@@ -102,7 +102,7 @@ String ColorMixStyleValue::to_string(SerializationMode mode) const
                 return;
 
             // else, p2 is serialized as is.
-            builder.appendff(" {}", p2->to_string());
+            builder.appendff(" {}", p2->to_string(mode));
         }
         // else if NEITHER is specified:
         else {
diff --git a/Libraries/LibWeb/CSS/StyleValues/CursorStyleValue.cpp b/Libraries/LibWeb/CSS/StyleValues/CursorStyleValue.cpp
index eb8b6853a2f..300fc871d1f 100644
--- a/Libraries/LibWeb/CSS/StyleValues/CursorStyleValue.cpp
+++ b/Libraries/LibWeb/CSS/StyleValues/CursorStyleValue.cpp
@@ -22,7 +22,7 @@ String CursorStyleValue::to_string(SerializationMode mode) const
 
     if (m_properties.x.has_value()) {
         VERIFY(m_properties.y.has_value());
-        builder.appendff(" {} {}", m_properties.x->to_string(), m_properties.y->to_string());
+        builder.appendff(" {} {}", m_properties.x->to_string(mode), m_properties.y->to_string(mode));
     }
 
     return builder.to_string_without_validation();
diff --git a/Libraries/LibWeb/CSS/StyleValues/EasingStyleValue.cpp b/Libraries/LibWeb/CSS/StyleValues/EasingStyleValue.cpp
index cd9f5670d80..3b799dea556 100644
--- a/Libraries/LibWeb/CSS/StyleValues/EasingStyleValue.cpp
+++ b/Libraries/LibWeb/CSS/StyleValues/EasingStyleValue.cpp
@@ -345,7 +345,7 @@ String EasingStyleValue::CubicBezier::to_string(SerializationMode mode) const
             y2_value = y2_value.resolved({}).value_or(0.0);
         }
         builder.appendff("cubic-bezier({}, {}, {}, {})",
-            x1_value.to_string(), y1_value.to_string(), x2_value.to_string(), y2_value.to_string());
+            x1_value.to_string(mode), y1_value.to_string(mode), x2_value.to_string(mode), y2_value.to_string(mode));
     }
     return MUST(builder.to_string());
 }
@@ -429,9 +429,9 @@ String EasingStyleValue::Steps::to_string(SerializationMode mode) const
             intervals = max(resolved_value, this->position == Steps::Position::JumpNone ? 2 : 1);
         }
         if (position.has_value()) {
-            builder.appendff("steps({}, {})", intervals.to_string(), position.value());
+            builder.appendff("steps({}, {})", intervals.to_string(mode), position.value());
         } else {
-            builder.appendff("steps({})", intervals.to_string());
+            builder.appendff("steps({})", intervals.to_string(mode));
         }
     }
     return MUST(builder.to_string());
diff --git a/Libraries/LibWeb/CSS/StyleValues/FilterValueListStyleValue.cpp b/Libraries/LibWeb/CSS/StyleValues/FilterValueListStyleValue.cpp
index 5b3a39bd57f..1b934df58ea 100644
--- a/Libraries/LibWeb/CSS/StyleValues/FilterValueListStyleValue.cpp
+++ b/Libraries/LibWeb/CSS/StyleValues/FilterValueListStyleValue.cpp
@@ -52,7 +52,7 @@ String FilterValueListStyleValue::to_string(SerializationMode mode) const
             builder.append(' ');
         filter_function.visit(
             [&](FilterOperation::Blur const& blur) {
-                builder.appendff("blur({}", blur.radius.to_string());
+                builder.appendff("blur({}", blur.radius.to_string(mode));
             },
             [&](FilterOperation::DropShadow const& drop_shadow) {
                 builder.append("drop-shadow("sv);
@@ -62,13 +62,13 @@ String FilterValueListStyleValue::to_string(SerializationMode mode) const
                 }
                 builder.appendff("{} {}", drop_shadow.offset_x, drop_shadow.offset_y);
                 if (drop_shadow.radius.has_value())
-                    builder.appendff(" {}", drop_shadow.radius->to_string());
+                    builder.appendff(" {}", drop_shadow.radius->to_string(mode));
             },
             [&](FilterOperation::HueRotate const& hue_rotate) {
                 builder.append("hue-rotate("sv);
                 hue_rotate.angle.visit(
                     [&](AngleOrCalculated const& angle) {
-                        builder.append(angle.to_string());
+                        builder.append(angle.to_string(mode));
                     },
                     [&](FilterOperation::HueRotate::Zero const&) {
                         builder.append("0deg"sv);
diff --git a/Libraries/LibWeb/CSS/StyleValues/GridTrackPlacementStyleValue.cpp b/Libraries/LibWeb/CSS/StyleValues/GridTrackPlacementStyleValue.cpp
index 4fdd091a5d4..82be65f7f11 100644
--- a/Libraries/LibWeb/CSS/StyleValues/GridTrackPlacementStyleValue.cpp
+++ b/Libraries/LibWeb/CSS/StyleValues/GridTrackPlacementStyleValue.cpp
@@ -16,9 +16,9 @@ ValueComparingNonnullRefPtr<GridTrackPlacementStyleValue const> GridTrackPlaceme
     return adopt_ref(*new (nothrow) GridTrackPlacementStyleValue(grid_track_placement));
 }
 
-String GridTrackPlacementStyleValue::to_string(SerializationMode) const
+String GridTrackPlacementStyleValue::to_string(SerializationMode mode) const
 {
-    return m_grid_track_placement.to_string();
+    return m_grid_track_placement.to_string(mode);
 }
 
 }
diff --git a/Libraries/LibWeb/CSS/StyleValues/ShorthandStyleValue.cpp b/Libraries/LibWeb/CSS/StyleValues/ShorthandStyleValue.cpp
index d662b66514c..aaff4999584 100644
--- a/Libraries/LibWeb/CSS/StyleValues/ShorthandStyleValue.cpp
+++ b/Libraries/LibWeb/CSS/StyleValues/ShorthandStyleValue.cpp
@@ -429,13 +429,13 @@ String ShorthandStyleValue::to_string(SerializationMode mode) const
         auto& column_end = longhand(PropertyID::GridColumnEnd)->as_grid_track_placement();
         StringBuilder builder;
         if (!row_start.grid_track_placement().is_auto())
-            builder.appendff("{}", row_start.grid_track_placement().to_string());
+            builder.appendff("{}", row_start.grid_track_placement().to_string(mode));
         if (!column_start.grid_track_placement().is_auto())
-            builder.appendff(" / {}", column_start.grid_track_placement().to_string());
+            builder.appendff(" / {}", column_start.grid_track_placement().to_string(mode));
         if (!row_end.grid_track_placement().is_auto())
-            builder.appendff(" / {}", row_end.grid_track_placement().to_string());
+            builder.appendff(" / {}", row_end.grid_track_placement().to_string(mode));
         if (!column_end.grid_track_placement().is_auto())
-            builder.appendff(" / {}", column_end.grid_track_placement().to_string());
+            builder.appendff(" / {}", column_end.grid_track_placement().to_string(mode));
         if (builder.is_empty())
             return "auto"_string;
         return MUST(builder.to_string());