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

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

Browse source 
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
commit e4dc758343
Notes: github-actions[bot] 2024-11-21 23:33:10 +00:00
3 changed files with 24 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

11
Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp
View file

@ -604,7 +604,16 @@ Optional<StyleProperty> ResolvedCSSStyleDeclaration::property(PropertyID propert
Optional<StyleProperty> ResolvedCSSStyleDeclaration::custom_property(FlyString const& name) const Optional<StyleProperty> ResolvedCSSStyleDeclaration::custom_property(FlyString const& name) const
{ {
const_cast<DOM::Document&>(m_element->document()).update_style(); 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) static WebIDL::ExceptionOr<void> cannot_modify_computed_property_error(JS::Realm& realm)

1
Tests/LibWeb/Text/expected/custom-property-from-parent.txt Normal file
View file

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

13
Tests/LibWeb/Text/input/custom-property-from-parent.html Normal file
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>