LibWeb: Use correct SerializationMode when serializing PercentageOr

Author: https://github.com/Calme1709
Commit: a5cbcaf698
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/5699
Reviewed-by: https://github.com/AtkinsSJ ✅

Libraries/LibWeb/CSS/GridTrackSize.cpp

@@ -86,13 +86,13 @@ Size GridSize::css_size() const
     return CSS::Size::make_percentage(length_percentage.percentage());
 }
 
-String GridSize::to_string() const
+String GridSize::to_string(SerializationMode mode) const
 {
     switch (m_type) {
     case Type::LengthPercentage:
-        return m_value.get<LengthPercentage>().to_string();
+        return m_value.get<LengthPercentage>().to_string(mode);
     case Type::FitContent:
-        return MUST(String::formatted("fit-content({})", m_value.get<LengthPercentage>().to_string()));
+        return MUST(String::formatted("fit-content({})", m_value.get<LengthPercentage>().to_string(mode)));
     case Type::FlexibleLength:
         return m_value.get<Flex>().to_string();
     case Type::MaxContent:
@@ -109,13 +109,13 @@ GridMinMax::GridMinMax(GridSize min_grid_size, GridSize max_grid_size)
 {
 }
 
-String GridMinMax::to_string() const
+String GridMinMax::to_string(SerializationMode mode) const
 {
     StringBuilder builder;
     builder.append("minmax("sv);
-    builder.appendff("{}", m_min_grid_size.to_string());
+    builder.appendff("{}", m_min_grid_size.to_string(mode));
     builder.append(", "sv);
-    builder.appendff("{}", m_max_grid_size.to_string());
+    builder.appendff("{}", m_max_grid_size.to_string(mode));
     builder.append(")"sv);
     return MUST(builder.to_string());
 }
@@ -127,7 +127,7 @@ GridRepeat::GridRepeat(GridTrackSizeList&& grid_track_size_list, GridRepeatParam
 {
 }
 
-String GridRepeat::to_string() const
+String GridRepeat::to_string(SerializationMode mode) const
 {
     StringBuilder builder;
     builder.append("repeat("sv);
@@ -145,7 +145,7 @@ String GridRepeat::to_string() const
         VERIFY_NOT_REACHED();
     }
     builder.append(", "sv);
-    builder.appendff("{}", m_grid_track_size_list.to_string());
+    builder.appendff("{}", m_grid_track_size_list.to_string(mode));
     builder.append(")"sv);
     return MUST(builder.to_string());
 }
@@ -155,10 +155,10 @@ ExplicitGridTrack::ExplicitGridTrack(Variant<GridRepeat, GridMinMax, GridSize>&&
 {
 }
 
-String ExplicitGridTrack::to_string() const
+String ExplicitGridTrack::to_string(SerializationMode mode) const
 {
-    return m_value.visit([](auto const& track) {
-        return track.to_string();
+    return m_value.visit([&mode](auto const& track) {
+        return track.to_string(mode);
     });
 }
 
@@ -180,7 +180,7 @@ GridTrackSizeList GridTrackSizeList::make_none()
     return GridTrackSizeList();
 }
 
-String GridTrackSizeList::to_string() const
+String GridTrackSizeList::to_string(SerializationMode mode) const
 {
     if (m_list.is_empty())
         return "none"_string;
@@ -190,7 +190,7 @@ String GridTrackSizeList::to_string() const
         if (!builder.is_empty())
             builder.append(" "sv);
         if (line_definition_or_name.has<ExplicitGridTrack>()) {
-            builder.append(line_definition_or_name.get<ExplicitGridTrack>().to_string());
+            builder.append(line_definition_or_name.get<ExplicitGridTrack>().to_string(mode));
         } else if (line_definition_or_name.has<GridLineNames>()) {
             auto const& line_names = line_definition_or_name.get<GridLineNames>();
             builder.append(line_names.to_string());

Libraries/LibWeb/CSS/GridTrackSize.h

@@ -55,7 +55,7 @@ public:
 
     Size css_size() const;
 
-    String to_string() const;
+    String to_string(SerializationMode) const;
     bool operator==(GridSize const& other) const = default;
 
 private:
@@ -70,7 +70,7 @@ public:
     GridSize const& min_grid_size() const& { return m_min_grid_size; }
     GridSize const& max_grid_size() const& { return m_max_grid_size; }
 
-    String to_string() const;
+    String to_string(SerializationMode) const;
     bool operator==(GridMinMax const& other) const = default;
 
 private:
@@ -106,7 +106,7 @@ public:
     Vector<CSS::ExplicitGridTrack> track_list() const;
     auto const& list() const { return m_list; }
 
-    String to_string() const;
+    String to_string(SerializationMode) const;
     bool operator==(GridTrackSizeList const& other) const;
 
     bool is_empty() const { return m_list.is_empty(); }
@@ -144,7 +144,7 @@ public:
     GridTrackSizeList const& grid_track_size_list() const& { return m_grid_track_size_list; }
     GridRepeatType type() const& { return m_type; }
 
-    String to_string() const;
+    String to_string(SerializationMode) const;
     bool operator==(GridRepeat const& other) const = default;
 
 private:
@@ -166,7 +166,7 @@ public:
     bool is_default() const { return m_value.has<GridSize>(); }
     GridSize const& grid_size() const { return m_value.get<GridSize>(); }
 
-    String to_string() const;
+    String to_string(SerializationMode) const;
     bool operator==(ExplicitGridTrack const& other) const = default;
 
 private:

Libraries/LibWeb/CSS/PercentageOr.h

@@ -119,10 +119,10 @@ public:
             });
     }
 
-    String to_string() const
+    String to_string(SerializationMode mode) const
     {
         if (is_calculated())
-            return m_value.template get<NonnullRefPtr<CalculatedStyleValue const>>()->to_string(SerializationMode::Normal);
+            return m_value.template get<NonnullRefPtr<CalculatedStyleValue const>>()->to_string(mode);
         if (is_percentage())
             return m_value.template get<Percentage>().to_string();
         return m_value.template get<T>().to_string();
@@ -229,7 +229,7 @@ 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, angle_percentage.to_string());
+        return Formatter<StringView>::format(builder, angle_percentage.to_string(Web::CSS::SerializationMode::Normal));
     }
 };
 
@@ -237,7 +237,7 @@ 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, frequency_percentage.to_string());
+        return Formatter<StringView>::format(builder, frequency_percentage.to_string(Web::CSS::SerializationMode::Normal));
     }
 };
 
@@ -245,7 +245,7 @@ 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, length_percentage.to_string());
+        return Formatter<StringView>::format(builder, length_percentage.to_string(Web::CSS::SerializationMode::Normal));
     }
 };
 
@@ -253,6 +253,6 @@ 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, time_percentage.to_string());
+        return Formatter<StringView>::format(builder, time_percentage.to_string(Web::CSS::SerializationMode::Normal));
     }
 };

Libraries/LibWeb/CSS/Size.cpp

@@ -87,7 +87,7 @@ bool Size::contains_percentage() const
     }
 }
 
-String Size::to_string() const
+String Size::to_string(SerializationMode mode) const
 {
     switch (m_type) {
     case Type::Auto:
@@ -95,13 +95,13 @@ String Size::to_string() const
     case Type::Calculated:
     case Type::Length:
     case Type::Percentage:
-        return m_length_percentage.to_string();
+        return m_length_percentage.to_string(mode);
     case Type::MinContent:
         return "min-content"_string;
     case Type::MaxContent:
         return "max-content"_string;
     case Type::FitContent:
-        return MUST(String::formatted("fit-content({})", m_length_percentage.to_string()));
+        return MUST(String::formatted("fit-content({})", m_length_percentage.to_string(mode)));
     case Type::None:
         return "none"_string;
     }

Libraries/LibWeb/CSS/Size.h

@@ -73,7 +73,7 @@ public:
         return m_length_percentage;
     }
 
-    String to_string() const;
+    String to_string(SerializationMode) const;
 
 private:
     Size(Type type, LengthPercentage);
@@ -88,6 +88,6 @@ template<>
 struct AK::Formatter<Web::CSS::Size> : Formatter<StringView> {
     ErrorOr<void> format(FormatBuilder& builder, Web::CSS::Size const& size)
     {
-        return Formatter<StringView>::format(builder, size.to_string());
+        return Formatter<StringView>::format(builder, size.to_string(Web::CSS::SerializationMode::Normal));
     }
 };

Libraries/LibWeb/CSS/StyleValues/AbstractImageStyleValue.h

@@ -185,12 +185,12 @@ static void serialize_color_stop_list(StringBuilder& builder, auto const& color_
             builder.append(", "sv);
 
         if (element.transition_hint.has_value())
-            builder.appendff("{}, "sv, element.transition_hint->value.to_string());
+            builder.appendff("{}, "sv, element.transition_hint->value.to_string(mode));
 
         builder.append(element.color_stop.color->to_string(mode));
         for (auto position : Array { &element.color_stop.position, &element.color_stop.second_position }) {
             if (position->has_value())
-                builder.appendff(" {}"sv, (*position)->to_string());
+                builder.appendff(" {}"sv, (*position)->to_string(mode));
         }
         first = false;
     }

Libraries/LibWeb/CSS/StyleValues/BackgroundSizeStyleValue.cpp

@@ -19,11 +19,11 @@ BackgroundSizeStyleValue::BackgroundSizeStyleValue(LengthPercentage size_x, Leng
 
 BackgroundSizeStyleValue::~BackgroundSizeStyleValue() = default;
 
-String BackgroundSizeStyleValue::to_string(SerializationMode) const
+String BackgroundSizeStyleValue::to_string(SerializationMode mode) const
 {
     if (m_properties.size_x.is_auto() && m_properties.size_y.is_auto())
         return "auto"_string;
-    return MUST(String::formatted("{} {}", m_properties.size_x.to_string(), m_properties.size_y.to_string()));
+    return MUST(String::formatted("{} {}", m_properties.size_x.to_string(mode), m_properties.size_y.to_string(mode)));
 }
 
 }

Libraries/LibWeb/CSS/StyleValues/BasicShapeStyleValue.cpp

@@ -76,10 +76,10 @@ String Rect::to_string(SerializationMode) const
     return MUST(String::formatted("rect({} {} {} {})", box.top(), box.right(), box.bottom(), box.left()));
 }
 
-static String radius_to_string(ShapeRadius radius)
+static String radius_to_string(ShapeRadius radius, SerializationMode mode)
 {
     return radius.visit(
-        [](LengthPercentage const& length_percentage) { return length_percentage.to_string(); },
+        [&mode](LengthPercentage const& length_percentage) { return length_percentage.to_string(mode); },
         [](FitSide const& side) {
             switch (side) {
             case FitSide::ClosestSide:
@@ -128,7 +128,7 @@ Gfx::Path Circle::to_path(CSSPixelRect reference_box, Layout::Node const& node)
 
 String Circle::to_string(SerializationMode mode) const
 {
-    return MUST(String::formatted("circle({} at {})", radius_to_string(radius), position->to_string(mode)));
+    return MUST(String::formatted("circle({} at {})", radius_to_string(radius, mode), position->to_string(mode)));
 }
 
 Gfx::Path Ellipse::to_path(CSSPixelRect reference_box, Layout::Node const& node) const
@@ -173,7 +173,7 @@ Gfx::Path Ellipse::to_path(CSSPixelRect reference_box, Layout::Node const& node)
 
 String Ellipse::to_string(SerializationMode mode) const
 {
-    return MUST(String::formatted("ellipse({} {} at {})", radius_to_string(radius_x), radius_to_string(radius_y), position->to_string(mode)));
+    return MUST(String::formatted("ellipse({} {} at {})", radius_to_string(radius_x, mode), radius_to_string(radius_y, mode), position->to_string(mode)));
 }
 
 Gfx::Path Polygon::to_path(CSSPixelRect reference_box, Layout::Node const& node) const

Libraries/LibWeb/CSS/StyleValues/BorderRadiusStyleValue.cpp

@@ -11,11 +11,11 @@
 
 namespace Web::CSS {
 
-String BorderRadiusStyleValue::to_string(SerializationMode) const
+String BorderRadiusStyleValue::to_string(SerializationMode mode) const
 {
     if (m_properties.horizontal_radius == m_properties.vertical_radius)
-        return m_properties.horizontal_radius.to_string();
-    return MUST(String::formatted("{} {}", m_properties.horizontal_radius.to_string(), m_properties.vertical_radius.to_string()));
+        return m_properties.horizontal_radius.to_string(mode);
+    return MUST(String::formatted("{} {}", m_properties.horizontal_radius.to_string(mode), m_properties.vertical_radius.to_string(mode)));
 }
 
 ValueComparingNonnullRefPtr<CSSStyleValue const> BorderRadiusStyleValue::absolutized(CSSPixelRect const& viewport_rect, Length::FontMetrics const& font_metrics, Length::FontMetrics const& root_font_metrics) const

Libraries/LibWeb/CSS/StyleValues/EdgeStyleValue.cpp

@@ -13,7 +13,7 @@ String EdgeStyleValue::to_string(SerializationMode mode) const
     if (mode == SerializationMode::ResolvedValue) {
         // FIXME: Figure out how to get the proper calculation context here
         CalculationContext context {};
-        return resolved_value(context)->offset().to_string();
+        return resolved_value(context)->offset().to_string(mode);
     }
 
     StringBuilder builder;
@@ -25,7 +25,7 @@ String EdgeStyleValue::to_string(SerializationMode mode) const
         builder.append(' ');
 
     if (m_properties.offset.has_value())
-        builder.append(m_properties.offset->to_string());
+        builder.append(m_properties.offset->to_string(mode));
 
     return builder.to_string_without_validation();
 }

Libraries/LibWeb/CSS/StyleValues/FilterValueListStyleValue.cpp

@@ -43,7 +43,7 @@ float FilterOperation::Color::resolved_amount() const
     VERIFY_NOT_REACHED();
 }
 
-String FilterValueListStyleValue::to_string(SerializationMode) const
+String FilterValueListStyleValue::to_string(SerializationMode mode) const
 {
     StringBuilder builder {};
     bool first = true;
@@ -97,7 +97,7 @@ String FilterValueListStyleValue::to_string(SerializationMode) const
                         }
                     }());
 
-                builder.append(color.amount.to_string());
+                builder.append(color.amount.to_string(mode));
             },
             [&](CSS::URL const& url) {
                 builder.append(url.to_string());

Libraries/LibWeb/CSS/StyleValues/FitContentStyleValue.h

@@ -23,11 +23,11 @@ public:
     }
     virtual ~FitContentStyleValue() override = default;
 
-    virtual String to_string(SerializationMode) const override
+    virtual String to_string(SerializationMode mode) const override
     {
         if (m_length_percentage.is_auto())
             return "fit-content"_string;
-        return MUST(String::formatted("fit-content({})", m_length_percentage.to_string()));
+        return MUST(String::formatted("fit-content({})", m_length_percentage.to_string(mode)));
     }
 
     bool equals(CSSStyleValue const& other) const override

Libraries/LibWeb/CSS/StyleValues/GridTrackSizeListStyleValue.cpp

@@ -11,9 +11,9 @@
 
 namespace Web::CSS {
 
-String GridTrackSizeListStyleValue::to_string(SerializationMode) const
+String GridTrackSizeListStyleValue::to_string(SerializationMode mode) const
 {
-    return m_grid_track_size_list.to_string();
+    return m_grid_track_size_list.to_string(mode);
 }
 
 ValueComparingNonnullRefPtr<GridTrackSizeListStyleValue const> GridTrackSizeListStyleValue::create(CSS::GridTrackSizeList grid_track_size_list)

Libraries/LibWeb/CSS/StyleValues/RadialGradientStyleValue.cpp

@@ -47,7 +47,7 @@ String RadialGradientStyleValue::to_string(SerializationMode mode) const
             builder.append(circle_size.radius.to_string());
         },
         [&](EllipseSize const& ellipse_size) {
-            builder.appendff("{} {}", ellipse_size.radius_a.to_string(), ellipse_size.radius_b.to_string());
+            builder.appendff("{} {}", ellipse_size.radius_a.to_string(mode), ellipse_size.radius_b.to_string(mode));
         });
 
     if (has_position) {

Libraries/LibWeb/CSS/StyleValues/ShorthandStyleValue.cpp

@@ -280,7 +280,7 @@ String ShorthandStyleValue::to_string(SerializationMode mode) const
 
         auto horizontal_radius = [&](auto& style_value) -> String {
             if (style_value->is_border_radius())
-                return style_value->as_border_radius().horizontal_radius().to_string();
+                return style_value->as_border_radius().horizontal_radius().to_string(mode);
             return style_value->to_string(mode);
         };
 
@@ -291,7 +291,7 @@ String ShorthandStyleValue::to_string(SerializationMode mode) const
 
         auto vertical_radius = [&](auto& style_value) -> String {
             if (style_value->is_border_radius())
-                return style_value->as_border_radius().vertical_radius().to_string();
+                return style_value->as_border_radius().vertical_radius().to_string(mode);
             return style_value->to_string(mode);
         };
 
@@ -463,7 +463,7 @@ String ShorthandStyleValue::to_string(SerializationMode mode) const
                     }
                     builder.append("\" "sv);
                 }
-                builder.append(row.to_string());
+                builder.append(row.to_string(mode));
                 if (idx < rows.grid_track_size_list().track_list().size() - 1)
                     builder.append(' ');
                 idx++;
@@ -473,7 +473,7 @@ String ShorthandStyleValue::to_string(SerializationMode mode) const
 
         if (columns.grid_track_size_list().track_list().size() == 0)
             return MUST(String::formatted("{}", construct_rows_string()));
-        return MUST(String::formatted("{} / {}", construct_rows_string(), columns.grid_track_size_list().to_string()));
+        return MUST(String::formatted("{} / {}", construct_rows_string(), columns.grid_track_size_list().to_string(mode)));
     }
     case PropertyID::GridColumn: {
         auto start = longhand(PropertyID::GridColumnStart);

Libraries/LibWeb/IntersectionObserver/IntersectionObserver.cpp

@@ -208,13 +208,13 @@ String IntersectionObserver::root_margin() const
     // IntersectionObserver constructor. If no rootMargin was passed to the IntersectionObserver
     // constructor, the value of this attribute is "0px 0px 0px 0px".
     StringBuilder builder;
-    builder.append(m_root_margin[0].to_string());
+    builder.append(m_root_margin[0].to_string(CSS::SerializationMode::ResolvedValue));
     builder.append(' ');
-    builder.append(m_root_margin[1].to_string());
+    builder.append(m_root_margin[1].to_string(CSS::SerializationMode::ResolvedValue));
     builder.append(' ');
-    builder.append(m_root_margin[2].to_string());
+    builder.append(m_root_margin[2].to_string(CSS::SerializationMode::ResolvedValue));
     builder.append(' ');
-    builder.append(m_root_margin[3].to_string());
+    builder.append(m_root_margin[3].to_string(CSS::SerializationMode::ResolvedValue));
     return builder.to_string().value();
 }
 
@@ -227,13 +227,13 @@ String IntersectionObserver::scroll_margin() const
     // IntersectionObserver constructor. If no scrollMargin was passed to the IntersectionObserver
     // constructor, the value of this attribute is "0px 0px 0px 0px".
     StringBuilder builder;
-    builder.append(m_scroll_margin[0].to_string());
+    builder.append(m_scroll_margin[0].to_string(CSS::SerializationMode::ResolvedValue));
     builder.append(' ');
-    builder.append(m_scroll_margin[1].to_string());
+    builder.append(m_scroll_margin[1].to_string(CSS::SerializationMode::ResolvedValue));
     builder.append(' ');
-    builder.append(m_scroll_margin[2].to_string());
+    builder.append(m_scroll_margin[2].to_string(CSS::SerializationMode::ResolvedValue));
     builder.append(' ');
-    builder.append(m_scroll_margin[3].to_string());
+    builder.append(m_scroll_margin[3].to_string(CSS::SerializationMode::ResolvedValue));
     return builder.to_string().value();
 }
 

Tests/LibWeb/Text/expected/css/calc-coverage.txt

@@ -4,20 +4,20 @@ animation-duration: 'calc(2s)' -> '2s'
 animation-duration: 'calc(2s * var(--n))' -> '4s'
 animation-iteration-count: 'calc(2)' -> '2'
 animation-iteration-count: 'calc(2 * var(--n))' -> '4'
-backdrop-filter: 'grayscale(calc(2%))' -> 'grayscale(calc(2%))'
-backdrop-filter: 'grayscale(calc(2% * var(--n)))' -> 'grayscale(calc(4%))'
-backdrop-filter: 'grayscale(calc(0.02))' -> 'grayscale(calc(0.02))'
-backdrop-filter: 'grayscale(calc(0.02 * var(--n)))' -> 'grayscale(calc(0.04))'
-background-position-x: 'calc(2px)' -> 'calc(2px)'
-background-position-x: 'calc(2px * var(--n))' -> 'calc(4px)'
-background-position-y: 'calc(2%)' -> 'calc(2%)'
-background-position-y: 'calc(2% * var(--n))' -> 'calc(4%)'
-background-size: 'calc(2px * var(--n)) calc(2%)' -> 'calc(4px) calc(2%)'
-background-size: 'calc(2px * var(--n)) calc(2% * var(--n))' -> 'calc(4px) calc(4%)'
-border-bottom-left-radius: 'calc(2px)' -> 'calc(2px)'
-border-bottom-left-radius: 'calc(2px * var(--n))' -> 'calc(4px)'
-border-bottom-right-radius: 'calc(2%)' -> 'calc(2%)'
-border-bottom-right-radius: 'calc(2% * var(--n))' -> 'calc(4%)'
+backdrop-filter: 'grayscale(calc(2%))' -> 'grayscale(2%)'
+backdrop-filter: 'grayscale(calc(2% * var(--n)))' -> 'grayscale(4%)'
+backdrop-filter: 'grayscale(calc(0.02))' -> 'grayscale(0.02)'
+backdrop-filter: 'grayscale(calc(0.02 * var(--n)))' -> 'grayscale(0.04)'
+background-position-x: 'calc(2px)' -> '2px'
+background-position-x: 'calc(2px * var(--n))' -> '4px'
+background-position-y: 'calc(2%)' -> '2%'
+background-position-y: 'calc(2% * var(--n))' -> '4%'
+background-size: 'calc(2px * var(--n)) calc(2%)' -> '4px 2%'
+background-size: 'calc(2px * var(--n)) calc(2% * var(--n))' -> '4px 4%'
+border-bottom-left-radius: 'calc(2px)' -> '2px'
+border-bottom-left-radius: 'calc(2px * var(--n))' -> '4px'
+border-bottom-right-radius: 'calc(2%)' -> '2%'
+border-bottom-right-radius: 'calc(2% * var(--n))' -> '4%'
 border-bottom-width: 'calc(2px)' -> '0px'
 border-bottom-width: 'calc(2px * var(--n))' -> '0px'
 border-left-width: 'calc(2px)' -> '0px'
@@ -26,10 +26,10 @@ border-right-width: 'calc(2px)' -> '0px'
 border-right-width: 'calc(2px * var(--n))' -> '0px'
 border-spacing: 'calc(2px)' -> '2px'
 border-spacing: 'calc(2px * var(--n))' -> '4px'
-border-top-left-radius: 'calc(2px)' -> 'calc(2px)'
-border-top-left-radius: 'calc(2px * var(--n))' -> 'calc(4px)'
-border-top-right-radius: 'calc(2%)' -> 'calc(2%)'
-border-top-right-radius: 'calc(2% * var(--n))' -> 'calc(4%)'
+border-top-left-radius: 'calc(2px)' -> '2px'
+border-top-left-radius: 'calc(2px * var(--n))' -> '4px'
+border-top-right-radius: 'calc(2%)' -> '2%'
+border-top-right-radius: 'calc(2% * var(--n))' -> '4%'
 border-top-width: 'calc(2px)' -> '0px'
 border-top-width: 'calc(2px * var(--n))' -> '0px'
 bottom: 'calc(2px)' -> '2px'
@@ -56,10 +56,10 @@ cy: 'calc(2%)' -> '2%'
 cy: 'calc(2% * var(--n))' -> '4%'
 fill-opacity: 'calc(2)' -> '1'
 fill-opacity: 'calc(2 * var(--n))' -> '1'
-filter: 'grayscale(calc(2%))' -> 'grayscale(calc(2%))'
-filter: 'grayscale(calc(2% * var(--n)))' -> 'grayscale(calc(4%))'
-filter: 'grayscale(calc(0.02))' -> 'grayscale(calc(0.02))'
-filter: 'grayscale(calc(0.02 * var(--n)))' -> 'grayscale(calc(0.04))'
+filter: 'grayscale(calc(2%))' -> 'grayscale(2%)'
+filter: 'grayscale(calc(2% * var(--n)))' -> 'grayscale(4%)'
+filter: 'grayscale(calc(0.02))' -> 'grayscale(0.02)'
+filter: 'grayscale(calc(0.02 * var(--n)))' -> 'grayscale(0.04)'
 flex-basis: 'calc(2px)' -> '2px'
 flex-basis: 'calc(2px * var(--n))' -> '4px'
 flex-grow: 'calc(2)' -> '2'