mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-07-29 12:19:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb: Always parse calc() inside CSS color functions consistently
Some checks are pending
CI / macOS, arm64, Sanitizer, Clang (push) Waiting to run
Details
CI / Linux, x86_64, Fuzzers, Clang (push) Waiting to run
Details
CI / Linux, x86_64, Sanitizer, GNU (push) Waiting to run
Details
CI / Linux, x86_64, Sanitizer, Clang (push) Waiting to run
Details
Package the js repl as a binary artifact / Linux, arm64 (push) Waiting to run
Details
Package the js repl as a binary artifact / macOS, arm64 (push) Waiting to run
Details
Package the js repl as a binary artifact / Linux, x86_64 (push) Waiting to run
Details
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Details
Lint Code / lint (push) Waiting to run
Details
Label PRs with merge conflicts / auto-labeler (push) Waiting to run
Details
Push notes / build (push) Waiting to run
Details

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
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. // caller to handle the resolved value being a percentage.
return CalculationContext {}; 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 // FIXME: Add other functions that provide a context for resolving values
return {}; 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>