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

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

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.