From 038d8ade50f0bc9f34b33e4a3e339d34b6b30d43 Mon Sep 17 00:00:00 2001 From: Andreas Kling Date: Tue, 22 Jul 2025 00:23:56 +0200 Subject: [PATCH] LibWeb: Always parse calc() inside CSS color functions consistently Before this change, calc() would resolve to different types depending on the nearest containing value context. This meant that rgb(calc(), ...) by itself worked correctly due to fallbacks, but rgb(calc(), ...) inside e.g a linear-gradient would create a calc() value that resolves to a length, which subsequently got rejected by the color value parser. Fixing this makes various little gradients show up on Discord. --- Libraries/LibWeb/CSS/Parser/ValueParsing.cpp | 6 ++++++ .../css/gradient-calc-inside-stop-color-ref.html | 11 +++++++++++ .../input/css/gradient-calc-inside-stop-color.html | 12 ++++++++++++ 3 files changed, 29 insertions(+) create mode 100644 Tests/LibWeb/Ref/expected/css/gradient-calc-inside-stop-color-ref.html create mode 100644 Tests/LibWeb/Ref/input/css/gradient-calc-inside-stop-color.html diff --git a/Libraries/LibWeb/CSS/Parser/ValueParsing.cpp b/Libraries/LibWeb/CSS/Parser/ValueParsing.cpp index 8f0590f86ef..4127436b97d 100644 --- a/Libraries/LibWeb/CSS/Parser/ValueParsing.cpp +++ b/Libraries/LibWeb/CSS/Parser/ValueParsing.cpp @@ -3842,6 +3842,12 @@ RefPtr Parser::parse_calculated_value(ComponentValue const& // caller to handle the resolved value being a percentage. return CalculationContext {}; } + if (function.name.is_one_of_ignoring_ascii_case( + "rgb"sv, "rgba"sv, "hsl"sv, "hsla"sv, + "hwb"sv, "lab"sv, "lch"sv, "oklab"sv, "oklch"sv, + "color"sv)) { + return CalculationContext {}; + } // FIXME: Add other functions that provide a context for resolving values return {}; }, diff --git a/Tests/LibWeb/Ref/expected/css/gradient-calc-inside-stop-color-ref.html b/Tests/LibWeb/Ref/expected/css/gradient-calc-inside-stop-color-ref.html new file mode 100644 index 00000000000..89d2057d0a5 --- /dev/null +++ b/Tests/LibWeb/Ref/expected/css/gradient-calc-inside-stop-color-ref.html @@ -0,0 +1,11 @@ + + + +
+ diff --git a/Tests/LibWeb/Ref/input/css/gradient-calc-inside-stop-color.html b/Tests/LibWeb/Ref/input/css/gradient-calc-inside-stop-color.html new file mode 100644 index 00000000000..11db96c9b09 --- /dev/null +++ b/Tests/LibWeb/Ref/input/css/gradient-calc-inside-stop-color.html @@ -0,0 +1,12 @@ + + + + +
+