LibWeb: Support relative lengths in math-depth calcs

As this is computed before font-size we use the parent's length
resolution context.
This commit is contained in:
Callum Law 2025-08-21 17:12:56 +12:00 committed by Jelle Raaijmakers
commit 4efbd0dc4d
Notes: github-actions[bot] 2025-08-22 07:50:04 +00:00
4 changed files with 37 additions and 8 deletions

View file

@ -2394,7 +2394,7 @@ GC::Ref<ComputedProperties> StyleComputer::create_document_style() const
style->set_property(property_id, property_initial_value(property_id));
}
compute_math_depth(style, nullptr, {});
compute_math_depth(style, {});
compute_font(style, nullptr, {});
absolutize_values(style, nullptr);
style->set_property(CSS::PropertyID::Width, CSS::LengthStyleValue::create(CSS::Length::make_px(viewport_rect().width())));
@ -2702,7 +2702,7 @@ GC::Ref<ComputedProperties> StyleComputer::compute_properties(DOM::Element& elem
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);
compute_math_depth(computed_style, abstract_element);
// 3. Compute the font, since that may be needed for font-relative CSS units
compute_font(computed_style, &element, pseudo_element);
@ -3162,14 +3162,16 @@ void StyleComputer::compute_custom_properties(ComputedProperties&, DOM::Abstract
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
void StyleComputer::compute_math_depth(ComputedProperties& style, Optional<DOM::AbstractElement> element) const
{
// https://w3c.github.io/mathml-core/#propdef-math-depth
auto element_to_inherit_style_from = element.has_value() ? element->element_to_inherit_style_from() : OptionalNone {};
auto inherited_math_depth = [&]() {
if (!element || !element->element_to_inherit_style_from(pseudo_element))
if (!element_to_inherit_style_from.has_value())
return InitialValues::math_depth();
return element->element_to_inherit_style_from(pseudo_element)->computed_properties()->math_depth();
return element_to_inherit_style_from->computed_properties()->math_depth();
};
auto const& math_depth = style.property(CSS::PropertyID::MathDepth).as_math_depth();
@ -3177,8 +3179,10 @@ void StyleComputer::compute_math_depth(ComputedProperties& style, DOM::Element c
auto resolve_integer = [&](StyleValue const& integer_value) {
if (integer_value.is_integer())
return integer_value.as_integer().integer();
if (integer_value.is_calculated())
return integer_value.as_calculated().resolve_integer_deprecated({}).value();
if (integer_value.is_calculated()) {
auto parent_length_resolution_context = element_to_inherit_style_from.has_value() ? Length::ResolutionContext::for_element(element_to_inherit_style_from.value()) : Length::ResolutionContext::for_window(*m_document->window());
return integer_value.as_calculated().resolve_integer({ .length_resolution_context = parent_length_resolution_context }).value();
}
VERIFY_NOT_REACHED();
};

View file

@ -229,7 +229,7 @@ private:
static RefPtr<Gfx::FontCascadeList const> find_matching_font_weight_descending(Vector<MatchingFontCandidate> const& candidates, int target_weight, float font_size_in_pt, bool inclusive);
RefPtr<Gfx::FontCascadeList const> font_matching_algorithm(FlyString const& family_name, int weight, int slope, float font_size_in_pt) const;
void compute_custom_properties(ComputedProperties&, DOM::AbstractElement) const;
void compute_math_depth(ComputedProperties&, DOM::Element const*, Optional<CSS::PseudoElement>) const;
void compute_math_depth(ComputedProperties&, Optional<DOM::AbstractElement>) const;
void start_needed_transitions(ComputedProperties const& old_style, ComputedProperties& new_style, DOM::Element&, Optional<PseudoElement>) const;
void resolve_effective_overflow_values(ComputedProperties&) const;
void transform_box_type_if_needed(ComputedProperties&, DOM::Element const&, Optional<CSS::PseudoElement>) const;

View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<body>
<style>
#foo {
font-size: 0px;
}
#bar {
font-size: 2px;
math-depth: calc(sign(1em - 1px));
}
</style>
<div id="foo">
<div id="bar"></div>
</div>
<script src="../include.js"></script>
<script>
test(() => {
println(getComputedStyle(bar).mathDepth);
});
</script>
</body>
</html>