mirrors/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-04-21 03:55:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 10

LibWeb/CSS: Use fallback var() value if custom property is empty

Browse source 
If the expansion of a custom property in variable expansion returns
tokens, then the custom property is not the initial guaranteed-invalid
value.

If it didn't return any tokens, then it is the initial
guaranteed-invalid value, and thus we should move on to the fallback
value.

Makes Shopify checkout show the background colours, borders, skeletons,
etc.
This commit is contained in:
Luke Wilde 2025-02-14 20:00:10 +00:00 • committed by Andreas Kling
parent 8f79f2137e
commit 751b93959f
Notes: github-actions[bot] 2025-02-16 08:20:17 +00:00
3 changed files with 38 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -3678,9 +3678,17 @@ bool Parser::expand_variables(DOM::Element& element, Optional<Selector::PseudoEl
if (auto custom_property_value = get_custom_property(element, pseudo_element, custom_property_name)) {
VERIFY(custom_property_value->is_unresolved());
TokenStream custom_property_tokens { custom_property_value->as_unresolved().values() };
auto dest_size_before = dest.size();
if (!expand_variables(element, pseudo_element, custom_property_name, dependencies, custom_property_tokens, dest))
return false;
continue;
// If the size of dest has increased, then the custom property is not the initial guaranteed-invalid value.
// If it hasn't increased, then it is the initial guaranteed-invalid value, and thus we should move on to the fallback value.
if (dest_size_before < dest.size())
continue;
dbgln_if(CSS_PARSER_DEBUG, "CSSParser: Expanding custom property '{}' did not return any tokens, treating it as invalid and moving on to the fallback value.", custom_property_name);
}
// Use the provided fallback value, if any.

1
Tests/LibWeb/Text/expected/css/var-uses-fallback-value-if-custom-property-is-empty.txt Normal file
View file

@ -0,0 +1 @@
background-color: rgb(0, 128, 0)

28
Tests/LibWeb/Text/input/css/var-uses-fallback-value-if-custom-property-is-empty.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<style>
:root {
--color-green: green;
--i: var(--invalid);
--dont: var(--invalid);
--exist: var(--invalid);
--but-i-do: var(--color-green);
--green-background-color: var(--i, var(--dont, var(--exist, var(--but-i-do))));
}
div {
width: 300px;
height: 300px;
background-color: red;
}
#box {
background-color: var(--green-background-color);
}
</style>
<div id="box"></div>
<script src="../include.js"></script>
<script>
test(() => {
const box = document.getElementById("box");
const computedStyle = window.getComputedStyle(box);
println(`background-color: ${computedStyle.backgroundColor}`);
});
</script>