LibWeb/CSS: Check for matching custom properties on parent elements

Previously, we were only checking the current element and not the
parents in `ResolvedCSSStyleDeclaration::custom_property()` which wasn't
correct.
This commit is contained in:
rmg-x 2024-11-21 16:11:18 -06:00 committed by Andreas Kling
parent 00f6a2b744
commit e4dc758343
Notes: github-actions[bot] 2024-11-21 23:33:10 +00:00
3 changed files with 24 additions and 1 deletions

View file

@ -604,7 +604,16 @@ Optional<StyleProperty> ResolvedCSSStyleDeclaration::property(PropertyID propert
Optional<StyleProperty> ResolvedCSSStyleDeclaration::custom_property(FlyString const& name) const
{
const_cast<DOM::Document&>(m_element->document()).update_style();
return m_element->custom_properties(m_pseudo_element).get(name);
auto const* element_to_check = m_element.ptr();
while (element_to_check) {
if (auto property = element_to_check->custom_properties(m_pseudo_element).get(name); property.has_value())
return *property;
element_to_check = element_to_check->parent_element();
}
return {};
}
static WebIDL::ExceptionOr<void> cannot_modify_computed_property_error(JS::Realm& realm)

View file

@ -0,0 +1 @@
PASS: #19db6e

View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<style>
:root {
--my-background-color: #19db6e;
}
</style>
<script src="include.js"></script>
<script>
test(() => {
const style = getComputedStyle(document.body);
println(`PASS: ${style.getPropertyValue("--my-background-color")}`);
});
</script>