Stowage/ladybird
2
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-10-19 07:33:20 +00:00
Code Issues Projects Releases Packages Wiki Activity

LibWeb: Always parse calc() inside CSS color functions consistently

Browse source 
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.
This commit is contained in:
Andreas Kling 2025-07-22 00:23:56 +02:00 • committed by Sam Atkins
parent 5d19aacce7
commit 038d8ade50
Notes: github-actions[bot] 2025-07-22 07:48:31 +00:00
3 changed files with 29 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

6
Libraries/LibWeb/CSS/Parser/ValueParsing.cpp
View file

@ -3842,6 +3842,12 @@ RefPtr<CSSStyleValue const> 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 {};
},

11
Tests/LibWeb/Ref/expected/css/gradient-calc-inside-stop-color-ref.html Normal file
View file

@ -0,0 +1,11 @@
<!doctype html>
<style>
div {
background-image: linear-gradient(to right, red, rgb(0 255 0));
width: 100px;
height: 100px;
}
</style>
<body>
<div></div>
</body>

12
Tests/LibWeb/Ref/input/css/gradient-calc-inside-stop-color.html Normal file
View file

@ -0,0 +1,12 @@
<!doctype html>
<link rel="match" href="../../expected/css/gradient-calc-inside-stop-color-ref.html" />
<style>
div {
background-image: linear-gradient(to right, red, rgb(0 calc(100%) 0));
width: 100px;
height: 100px;
}
</style>
<body>
<div></div>
</body>