mirror of
https://github.com/RGBCube/serenity
synced 2025-07-25 18:17:44 +00:00
LibWeb: Parse and resolve UnresolvedStyleValues
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:
parent
000fb5a70d
commit
23dc0dac88
6 changed files with 138 additions and 6 deletions
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue