LibWeb: Allow custom properties in CSSStyleDeclaration.getPropertyValue

Author: https://github.com/kalenikaliaksandr
Commit: https://github.com/LadybirdBrowser/ladybird/commit/ce26e5d7575
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/2460
Reviewed-by: https://github.com/AtkinsSJ ✅

Libraries/LibWeb/CSS/CSSStyleDeclaration.cpp

@@ -258,6 +258,14 @@ String CSSStyleDeclaration::get_property_value(StringView property_name) const
     if (!property_id.has_value())
         return {};
 
+    if (property_id.value() == PropertyID::Custom) {
+        auto maybe_custom_property = custom_property(FlyString::from_utf8_without_validation(property_name.bytes()));
+        if (maybe_custom_property.has_value()) {
+            return maybe_custom_property.value().value->to_string();
+        }
+        return {};
+    }
+
     // 2. If property is a shorthand property, then follow these substeps:
     if (property_is_shorthand(property_id.value())) {
         // 1. Let list be a new empty array.

Libraries/LibWeb/CSS/CSSStyleDeclaration.h

@@ -29,6 +29,7 @@ public:
     virtual String item(size_t index) const = 0;
 
     virtual Optional<StyleProperty> property(PropertyID) const = 0;
+    virtual Optional<StyleProperty> custom_property(FlyString const& custom_property_name) const = 0;
 
     virtual WebIDL::ExceptionOr<void> set_property(PropertyID, StringView css_text, StringView priority = ""sv);
     virtual WebIDL::ExceptionOr<String> remove_property(PropertyID) = 0;
@@ -75,13 +76,14 @@ public:
     virtual String item(size_t index) const override;
 
     virtual Optional<StyleProperty> property(PropertyID) const override;
+    virtual Optional<StyleProperty> custom_property(FlyString const& custom_property_name) const override { return m_custom_properties.get(custom_property_name); }
 
     virtual WebIDL::ExceptionOr<void> set_property(StringView property_name, StringView css_text, StringView priority) override;
     virtual WebIDL::ExceptionOr<String> remove_property(PropertyID) override;
 
     Vector<StyleProperty> const& properties() const { return m_properties; }
     HashMap<FlyString, StyleProperty> const& custom_properties() const { return m_custom_properties; }
-    Optional<StyleProperty> custom_property(FlyString const& custom_property_name) const { return m_custom_properties.get(custom_property_name); }
+
     size_t custom_property_count() const { return m_custom_properties.size(); }
 
     virtual String serialized() const final override;

Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp

@@ -601,6 +601,12 @@ Optional<StyleProperty> ResolvedCSSStyleDeclaration::property(PropertyID propert
     };
 }
 
+Optional<StyleProperty> ResolvedCSSStyleDeclaration::custom_property(FlyString const&) const
+{
+    dbgln("FIXME: ResolvedCSSStyleDeclaration::custom_property is not implemented");
+    return {};
+}
+
 static WebIDL::ExceptionOr<void> cannot_modify_computed_property_error(JS::Realm& realm)
 {
     return WebIDL::NoModificationAllowedError::create(realm, "Cannot modify properties in result of getComputedStyle()"_string);

Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.h

@@ -24,6 +24,7 @@ public:
     virtual String item(size_t index) const override;
 
     virtual Optional<StyleProperty> property(PropertyID) const override;
+    virtual Optional<StyleProperty> custom_property(FlyString const& custom_property_name) const override;
     virtual WebIDL::ExceptionOr<void> set_property(PropertyID, StringView css_text, StringView priority) override;
     virtual WebIDL::ExceptionOr<void> set_property(StringView property_name, StringView css_text, StringView priority) override;
     virtual WebIDL::ExceptionOr<String> remove_property(PropertyID) override;

Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-custom-properties.txt

@@ -1 +1,2 @@
+style.getPropertyValue(--redcolor)=red
 rgb(255, 0, 0)

Tests/LibWeb/Text/input/css/CSSStyleDeclaration-custom-properties.html

@@ -5,6 +5,7 @@
     test(() => {
         const div = document.createElement('div');
         div.style.setProperty("--redcolor", "red");
+        println(`style.getPropertyValue(--redcolor)=${div.style.getPropertyValue("--redcolor")}`);
 
         const nested = document.createElement('div');
         nested.style["backgroundColor"] = "var(--redcolor)";