mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-07-24 09:52:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb: Produce computed values for custom properties

Browse source 
Custom properties are required to produce a computed value just like
regular properties. The computed value is defined in the spec as
"specified value with variables substituted, or the guaranteed-invalid
value", though in reality all arbitrary substitution functions should be
substituted, not just `var()`.

To support this, we parse the CSS-wide keywords normally in custom
properties, instead of ignoring them. We don't yet handle all of them
properly, and because that will require us to cascade them like regular
properties. This is just enough to prevent regressions when implementing
ASFs.

Our output in this new test is not quite correct, because of the awkward
way we handle whitespace in property values - so it has 3 spaces in the
middle instead of 1, until that's fixed.

It's possible this computed-value production should go in
cascade_custom_properties(), but I had issues with that. Hopefully once
we start cascading custom properties properly, it'll be clearer how
this should all work.
This commit is contained in:
Sam Atkins 2025-06-26 16:48:33 +01:00 • committed by Tim Ledbetter
parent 1ff1093a24
commit 26acd897bf
Notes: github-actions[bot] 2025-07-09 15:45:57 +00:00
9 changed files with 119 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

62
Libraries/LibWeb/CSS/StyleComputer.cpp
View file

@ -55,6 +55,7 @@
#include <LibWeb/CSS/StyleValues/FrequencyStyleValue.h>
#include <LibWeb/CSS/StyleValues/GridTrackPlacementStyleValue.h>
#include <LibWeb/CSS/StyleValues/GridTrackSizeListStyleValue.h>
#include <LibWeb/CSS/StyleValues/GuaranteedInvalidStyleValue.h>
#include <LibWeb/CSS/StyleValues/IntegerStyleValue.h>
#include <LibWeb/CSS/StyleValues/LengthStyleValue.h>
#include <LibWeb/CSS/StyleValues/MathDepthStyleValue.h>
@ -2569,6 +2570,7 @@ RefPtr<CSSStyleValue const> StyleComputer::recascade_font_size_if_needed(
GC::Ref<ComputedProperties> StyleComputer::compute_properties(DOM::Element& element, Optional<PseudoElement> pseudo_element, CascadedProperties& cascaded_properties) const
{
DOM::AbstractElement abstract_element { element, pseudo_element };
auto computed_style = document().heap().allocate<CSS::ComputedProperties>();
auto new_font_size = recascade_font_size_if_needed(element, pseudo_element, cascaded_properties);
@ -2682,6 +2684,9 @@ GC::Ref<ComputedProperties> StyleComputer::compute_properties(DOM::Element& elem
}
}
// Compute the value of custom properties
compute_custom_properties(computed_style, abstract_element);
// 2. Compute the math-depth property, since that might affect the font-size
compute_math_depth(computed_style, &element, pseudo_element);
@ -3090,6 +3095,63 @@ void StyleComputer::unload_fonts_from_sheet(CSSStyleSheet& sheet)
}
}
NonnullRefPtr<CSSStyleValue const> StyleComputer::compute_value_of_custom_property(DOM::AbstractElement abstract_element, FlyString const& name)
{
// https://drafts.csswg.org/css-variables/#propdef-
// The computed value of a custom property is its specified value with any arbitrary-substitution functions replaced.
// FIXME: These should probably be part of ComputedProperties.
auto value = abstract_element.get_custom_property(name);
if (!value)
return GuaranteedInvalidStyleValue::create();
// Initial value is the guaranteed-invalid value.
if (value->is_initial())
return GuaranteedInvalidStyleValue::create();
// Unset is the same as inherit for inherited properties, and by default all custom properties are inherited.
// FIXME: Update handling of css-wide keywords once we support @property properly.
if (value->is_inherit() || value->is_unset()) {
auto inherited_value = DOM::AbstractElement { const_cast<DOM::Element&>(*abstract_element.parent_element()) }.get_custom_property(name);
if (!inherited_value)
return GuaranteedInvalidStyleValue::create();
return inherited_value.release_nonnull();
}
if (value->is_revert()) {
// FIXME: Implement reverting custom properties.
}
if (value->is_revert_layer()) {
// FIXME: Implement reverting custom properties.
}
if (!value->is_unresolved() || !value->as_unresolved().contains_arbitrary_substitution_function())
return value.release_nonnull();
auto& unresolved = value->as_unresolved();
return Parser::Parser::resolve_unresolved_style_value(Parser::ParsingParams {}, abstract_element.element(), abstract_element.pseudo_element(), name, unresolved);
}
void StyleComputer::compute_custom_properties(ComputedProperties&, DOM::AbstractElement abstract_element) const
{
// https://drafts.csswg.org/css-variables/#propdef-
// The computed value of a custom property is its specified value with any arbitrary-substitution functions replaced.
// FIXME: These should probably be part of ComputedProperties.
auto custom_properties = abstract_element.custom_properties();
decltype(custom_properties) resolved_custom_properties;
for (auto const& [name, style_property] : custom_properties) {
resolved_custom_properties.set(name,
StyleProperty {
.important = style_property.important,
.property_id = style_property.property_id,
.value = compute_value_of_custom_property(abstract_element, name),
.custom_name = style_property.custom_name,
});
}
abstract_element.set_custom_properties(move(resolved_custom_properties));
}
void StyleComputer::compute_math_depth(ComputedProperties& style, DOM::Element const* element, Optional<CSS::PseudoElement> pseudo_element) const
{
// https://w3c.github.io/mathml-core/#propdef-math-depth