RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 15:47:44 +00:00
Code Issues Activity Actions

LibWeb: Check recursively if CSS functions contain var() or attr()

Browse source 
Previously, `var()` inside functions like `rgb()` wasn't resolved.

This will set the background color for badges in the New category on
https://ports.serenityos.net. :^)
This commit is contained in:
Karol Kosek 2022-06-02 18:00:51 +02:00 • committed by Andreas Kling
parent 1072d523e2
commit a232395b77
2 changed files with 29 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

17
Base/res/html/misc/custom-properties.html
View file

@ -45,6 +45,11 @@
border: var(--border); border: var(--border);
} }
.test-inside-a-function {
--blue: 255;
background-color: rgb(255, 0, var(--blue));
}
.test-mixed { .test-mixed {
background: var(--background-color) url("background-repeat.png") var(--background-position) no-repeat; background: var(--background-color) url("background-repeat.png") var(--background-position) no-repeat;
} }
@ -178,6 +183,18 @@
This should have a 10px solid orange border This should have a 10px solid orange border
</div> </div>
<pre>
.test-inside-a-function {
--blue: 255;
background-color: rgb(255, 0, var(--blue));
}
</pre>
<div class="box test-inside-a-function">
<pre>.test-inside-a-function</pre>
This should be fuchsia
</div>
<h2>Mixed var()</h2> <h2>Mixed var()</h2>
<pre> <pre>
:root { :root {

15
Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp
View file

@ -4962,9 +4962,18 @@ RefPtr<StyleValue> Parser::parse_as_css_value(PropertyID property_id)
Parser::ParseErrorOr<NonnullRefPtr<StyleValue>> Parser::parse_css_value(PropertyID property_id, TokenStream<ComponentValue>& tokens) Parser::ParseErrorOr<NonnullRefPtr<StyleValue>> Parser::parse_css_value(PropertyID property_id, TokenStream<ComponentValue>& tokens)
{ {
auto block_contains_var_or_attr = [](Block const& block, auto&& recurse) -> bool { auto function_contains_var_or_attr = [](Function const& function, auto&& recurse) -> bool {
if (function.name().equals_ignoring_case("var"sv) || function.name().equals_ignoring_case("attr"sv))
return true;
for (auto const& token : function.values()) {
if (token.is_function() && recurse(token.function(), recurse))
return true;
}
return false;
};
auto block_contains_var_or_attr = [function_contains_var_or_attr](Block const& block, auto&& recurse) -> bool {
for (auto const& token : block.values()) { for (auto const& token : block.values()) {
if (token.is_function() && (token.function().name().equals_ignoring_case("var"sv) || token.function().name().equals_ignoring_case("attr"sv))) if (token.is_function() && function_contains_var_or_attr(token.function(), function_contains_var_or_attr))
return true; return true;
if (token.is_block() && recurse(token.block(), recurse)) if (token.is_block() && recurse(token.block(), recurse))
return true; return true;
@ -4993,7 +5002,7 @@ Parser::ParseErrorOr<NonnullRefPtr<StyleValue>> Parser::parse_css_value(Property
} }
if (!contains_var_or_attr) { if (!contains_var_or_attr) {
if (token.is_function() && (token.function().name().equals_ignoring_case("var"sv) || token.function().name().equals_ignoring_case("attr"sv))) if (token.is_function() && function_contains_var_or_attr(token.function(), function_contains_var_or_attr))
contains_var_or_attr = true; contains_var_or_attr = true;
else if (token.is_block() && block_contains_var_or_attr(token.block(), block_contains_var_or_attr)) else if (token.is_block() && block_contains_var_or_attr(token.block(), block_contains_var_or_attr))
contains_var_or_attr = true; contains_var_or_attr = true;