فهرست منبع

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.
rmg-x 8 ماه پیش
والد
کامیت
e4dc758343

+ 10 - 1
Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp

@@ -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)

+ 1 - 0
Tests/LibWeb/Text/expected/custom-property-from-parent.txt

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

+ 13 - 0
Tests/LibWeb/Text/input/custom-property-from-parent.html

@@ -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>