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

LibWeb: Parse and resolve UnresolvedStyleValues

Browse source 
If a property is custom or contains a `var()` reference, it cannot be
parsed into a proper StyleValue immediately, so we store it as an
UnresolvedStyleValue until the property is compute. Then, at compute
time, we resolve them by expanding out any `var()` references, and
parsing the result.

The implementation here is very naive, and involves copying the
UnresolvedStyleValue's tree of StyleComponentValueRules while copying
the contents of any `var()`s it finds along the way. This is quite an
expensive operation to do every time that the style is computed.
This commit is contained in:
Sam Atkins 2021-12-03 12:32:12 +00:00 • committed by Andreas Kling
parent 000fb5a70d
commit 23dc0dac88
6 changed files with 138 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

83
Userland/Libraries/LibWeb/CSS/StyleComputer.cpp
View file

@ -452,6 +452,85 @@ struct MatchingDeclarations {
Vector<MatchingRule> author_rules;
};
bool StyleComputer::expand_unresolved_values(DOM::Element& element, Vector<StyleComponentValueRule> const& source, Vector<StyleComponentValueRule>& dest) const
{
// FIXME: Do this better!
// We build a copy of the tree of StyleComponentValueRules, with all var()s replaced with their contents.
// This is a very naive solution, and we could do better if the CSS Parser could accept tokens one at a time.
// FIXME: Handle dependency cycles. https://www.w3.org/TR/css-variables-1/#cycles
// FIXME: Handle overly-long variables. https://www.w3.org/TR/css-variables-1/#long-variables
auto get_custom_property = [this, &element](auto& name) -> RefPtr<StyleValue> {
auto custom_property = resolve_custom_property(element, name);
if (custom_property.has_value())
return custom_property.value().value;
return nullptr;
};
for (auto& value : source) {
if (value.is_function()) {
if (value.function().name().equals_ignoring_case("var"sv)) {
auto& var_contents = value.function().values();
if (var_contents.is_empty())
return false;
auto& custom_property_name_token = var_contents.first();
if (!custom_property_name_token.is(Token::Type::Ident))
return false;
auto custom_property_name = custom_property_name_token.token().ident();
if (!custom_property_name.starts_with("--"))
return false;
if (auto custom_property_value = get_custom_property(custom_property_name)) {
VERIFY(custom_property_value->is_unresolved());
if (!expand_unresolved_values(element, custom_property_value->as_unresolved().values(), dest))
return false;
continue;
}
// TODO: Handle fallback value
}
auto& source_function = value.function();
Vector<StyleComponentValueRule> function_values;
if (!expand_unresolved_values(element, source_function.values(), function_values))
return false;
NonnullRefPtr<StyleFunctionRule> function = adopt_ref(*new StyleFunctionRule(source_function.name(), move(function_values)));
dest.empend(function);
continue;
}
if (value.is_block()) {
auto& source_block = value.block();
Vector<StyleComponentValueRule> block_values;
if (!expand_unresolved_values(element, source_block.values(), block_values))
return false;
NonnullRefPtr<StyleBlockRule> block = adopt_ref(*new StyleBlockRule(source_block.token(), move(block_values)));
dest.empend(block);
continue;
}
dest.empend(value.token());
}
return true;
}
RefPtr<StyleValue> StyleComputer::resolve_unresolved_style_value(DOM::Element& element, PropertyID property_id, UnresolvedStyleValue const& unresolved) const
{
// Unresolved always contains a var(), unless it is a custom property's value, in which case we shouldn't be trying
// to produce a different StyleValue from it.
VERIFY(unresolved.contains_var());
Vector<StyleComponentValueRule> expanded_values;
if (!expand_unresolved_values(element, unresolved.values(), expanded_values))
return {};
if (auto parsed_value = Parser::parse_css_value({}, ParsingContext { document() }, property_id, expanded_values))
return parsed_value.release_nonnull();
return {};
}
void StyleComputer::cascade_declarations(StyleProperties& style, DOM::Element& element, Vector<MatchingRule> const& matching_rules, CascadeOrigin cascade_origin, bool important) const
{
for (auto& match : matching_rules) {
@ -466,6 +545,10 @@ void StyleComputer::cascade_declarations(StyleProperties& style, DOM::Element& e
property_value = resolved.value().value;
}
}
if (property.value->is_unresolved()) {
if (auto resolved = resolve_unresolved_style_value(element, property.property_id, property.value->as_unresolved()))
property_value = resolved.release_nonnull();
}
set_property_expanding_shorthands(style, property.property_id, property_value, m_document);
}
}