Merge 3e1b67a2a5 into d6bcd3fb0b

Libraries/LibWeb/CSS/CSSStyleDeclaration.cpp

@@ -102,8 +102,13 @@ Optional<StyleProperty> PropertyOwningCSSStyleDeclaration::property(PropertyID p
 }
 
 // https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-setproperty
-WebIDL::ExceptionOr<void> PropertyOwningCSSStyleDeclaration::set_property(PropertyID property_id, StringView value, StringView priority)
+WebIDL::ExceptionOr<void> PropertyOwningCSSStyleDeclaration::set_property(StringView property_name, StringView value, StringView priority)
 {
+    auto maybe_property_id = property_id_from_string(property_name);
+    if (!maybe_property_id.has_value())
+        return {};
+    auto property_id = maybe_property_id.value();
+
     // 1. If the computed flag is set, then throw a NoModificationAllowedError exception.
     // NOTE: This is handled by the virtual override in ResolvedCSSStyleDeclaration.
 
@@ -114,7 +119,7 @@ WebIDL::ExceptionOr<void> PropertyOwningCSSStyleDeclaration::set_property(Proper
 
     // 3. If value is the empty string, invoke removeProperty() with property as argument and return.
     if (value.is_empty()) {
-        MUST(remove_property(property_id));
+        MUST(remove_property(property_name));
         return {};
     }
 
@@ -146,11 +151,23 @@ WebIDL::ExceptionOr<void> PropertyOwningCSSStyleDeclaration::set_property(Proper
     }
     // 9. Otherwise,
     else {
+        if (property_id == PropertyID::Custom) {
+            auto custom_name = FlyString::from_utf8_without_validation(property_name.bytes());
+            StyleProperty style_property {
+                .important = !priority.is_empty() ? Important::Yes : Important::No,
+                .property_id = property_id,
+                .value = component_value_list.release_nonnull(),
+                .custom_name = custom_name,
+            };
+            m_custom_properties.set(custom_name, style_property);
+            updated = true;
+        } else {
             // let updated be the result of set the CSS declaration property with value component value list,
             // with the important flag set if priority is not the empty string, and unset otherwise,
             // and with the list of declarations being the declarations.
             updated = set_a_css_declaration(property_id, *component_value_list, !priority.is_empty() ? Important::Yes : Important::No);
         }
+    }
 
     // 10. If updated is true, update style attribute for the CSS declaration block.
     if (updated)
@@ -160,8 +177,12 @@ WebIDL::ExceptionOr<void> PropertyOwningCSSStyleDeclaration::set_property(Proper
 }
 
 // https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-removeproperty
-WebIDL::ExceptionOr<String> PropertyOwningCSSStyleDeclaration::remove_property(PropertyID property_id)
+WebIDL::ExceptionOr<String> PropertyOwningCSSStyleDeclaration::remove_property(StringView property_name)
 {
+    auto property_id = property_id_from_string(property_name);
+    if (!property_id.has_value())
+        return String {};
+
     // 1. If the computed flag is set, then throw a NoModificationAllowedError exception.
     // NOTE: This is handled by the virtual override in ResolvedCSSStyleDeclaration.
 
@@ -169,8 +190,7 @@ WebIDL::ExceptionOr<String> PropertyOwningCSSStyleDeclaration::remove_property(P
     // NOTE: We've already converted it to a PropertyID enum value.
 
     // 3. Let value be the return value of invoking getPropertyValue() with property as argument.
-    // FIXME: The trip through string_from_property_id() here is silly.
-    auto value = get_property_value(string_from_property_id(property_id));
+    auto value = get_property_value(property_name);
 
     // 4. Let removed be false.
     bool removed = false;
@@ -180,7 +200,12 @@ WebIDL::ExceptionOr<String> PropertyOwningCSSStyleDeclaration::remove_property(P
     //           2. Remove that CSS declaration and let removed be true.
 
     // 6. Otherwise, if property is a case-sensitive match for a property name of a CSS declaration in the declarations, remove that CSS declaration and let removed be true.
+    if (property_id == PropertyID::Custom) {
+        auto custom_name = FlyString::from_utf8_without_validation(property_name.bytes());
+        removed = m_custom_properties.remove(custom_name);
+    } else {
         removed = m_properties.remove_first_matching([&](auto& entry) { return entry.property_id == property_id; });
+    }
 
     // 7. If removed is true, Update style attribute for the CSS declaration block.
     if (removed)
@@ -241,6 +266,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.
@@ -285,26 +318,26 @@ StringView CSSStyleDeclaration::get_property_priority(StringView property_name)
     auto property_id = property_id_from_string(property_name);
     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 {};
+        return maybe_custom_property.value().important == Important::Yes ? "important"sv : ""sv;
+    }
     auto maybe_property = property(property_id.value());
     if (!maybe_property.has_value())
         return {};
     return maybe_property->important == Important::Yes ? "important"sv : ""sv;
 }
 
-WebIDL::ExceptionOr<void> CSSStyleDeclaration::set_property(StringView property_name, StringView css_text, StringView priority)
+WebIDL::ExceptionOr<void> CSSStyleDeclaration::set_property(PropertyID property_id, StringView css_text, StringView priority)
 {
-    auto property_id = property_id_from_string(property_name);
-    if (!property_id.has_value())
-        return {};
-    return set_property(property_id.value(), css_text, priority);
+    return set_property(string_from_property_id(property_id), css_text, priority);
 }
 
-WebIDL::ExceptionOr<String> CSSStyleDeclaration::remove_property(StringView property_name)
+WebIDL::ExceptionOr<String> CSSStyleDeclaration::remove_property(PropertyID property_name)
 {
-    auto property_id = property_id_from_string(property_name);
-    if (!property_id.has_value())
-        return String {};
-    return remove_property(property_id.value());
+    return remove_property(string_from_property_id(property_name));
 }
 
 // https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-csstext

Libraries/LibWeb/CSS/CSSStyleDeclaration.h

@@ -29,12 +29,13 @@ 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) = 0;
-    virtual WebIDL::ExceptionOr<String> remove_property(PropertyID) = 0;
+    virtual WebIDL::ExceptionOr<void> set_property(PropertyID, StringView css_text, StringView priority = ""sv);
+    virtual WebIDL::ExceptionOr<String> remove_property(PropertyID);
 
-    virtual WebIDL::ExceptionOr<void> set_property(StringView property_name, StringView css_text, StringView priority);
-    virtual WebIDL::ExceptionOr<String> remove_property(StringView property_name);
+    virtual WebIDL::ExceptionOr<void> set_property(StringView property_name, StringView css_text, StringView priority) = 0;
+    virtual WebIDL::ExceptionOr<String> remove_property(StringView property_name) = 0;
 
     String get_property_value(StringView property) const;
     StringView get_property_priority(StringView property) const;
@@ -75,13 +76,13 @@ 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(PropertyID, StringView css_text, StringView priority) override;
-    virtual WebIDL::ExceptionOr<String> remove_property(PropertyID) override;
-
+    virtual WebIDL::ExceptionOr<void> set_property(StringView property_name, StringView css_text, StringView priority) override;
+    virtual WebIDL::ExceptionOr<String> remove_property(StringView property_name) 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;

Meta/Lagom/Tools/CodeGenerators/LibWeb/GenerateCSSPropertyID.cpp

@@ -402,6 +402,7 @@ ErrorOr<void> generate_implementation_file(JsonObject& properties, Core::File& f
 #include <LibWeb/CSS/Enums.h>
 #include <LibWeb/CSS/Parser/Parser.h>
 #include <LibWeb/CSS/PropertyID.h>
+#include <LibWeb/CSS/PropertyName.h>
 #include <LibWeb/CSS/CSSStyleValue.h>
 #include <LibWeb/CSS/StyleValues/PercentageStyleValue.h>
 #include <LibWeb/CSS/StyleValues/TimeStyleValue.h>
@@ -436,6 +437,9 @@ Optional<PropertyID> property_id_from_camel_case_string(StringView string)
 
 Optional<PropertyID> property_id_from_string(StringView string)
 {
+    if (is_a_custom_property_name_string(string))
+        return PropertyID::Custom;
+
     if (Infra::is_ascii_case_insensitive_match(string, "all"sv))
         return PropertyID::All;
 )~~~");

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

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

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

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<script src="../include.js"></script>
+<body></body>
+<script>
+    test(() => {
+        const div = document.createElement('div');
+        div.style.setProperty("--redcolor", "red");
+        println(`style.getPropertyValue(--redcolor)=${div.style.getPropertyValue("--redcolor")}`);
+        println(`style.getPropertyPriority(--redcolor)=${div.style.getPropertyPriority("--redcolor")}`);
+
+        const nested = document.createElement('div');
+        nested.style["backgroundColor"] = "var(--redcolor)";
+        nested.style["width"] = "100px";
+        nested.style["height"] = "100px";
+        div.appendChild(nested);
+
+        document.body.appendChild(div);
+
+        println(getComputedStyle(nested).backgroundColor);
+
+        div.style.removeProperty("--redcolor");
+        println(getComputedStyle(nested).backgroundColor);
+    });
+</script>