From 3a2cc1aa2084a3a758418e96e5bc30403a1eff78 Mon Sep 17 00:00:00 2001 From: Aliaksandr Kalenik Date: Wed, 20 Nov 2024 15:48:04 +0100 Subject: [PATCH] LibWeb: Allow custom properties in CSSStyleDeclaration.setProperty() This change fixes unhoverable toolbar on https://excalidraw.com/ The problem was that React.js uses setProperty() to add style properties specified in the "style" attribute in the virtual DOM, and we were failing to add the CSS variable used to set the "pointer-events" value to "all". --- Libraries/LibWeb/CSS/CSSStyleDeclaration.cpp | 34 +++++++++++++------ Libraries/LibWeb/CSS/CSSStyleDeclaration.h | 6 ++-- .../CSSStyleDeclaration-custom-properties.txt | 1 + ...CSSStyleDeclaration-custom-properties.html | 19 +++++++++++ 4 files changed, 47 insertions(+), 13 deletions(-) create mode 100644 Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-custom-properties.txt create mode 100644 Tests/LibWeb/Text/input/css/CSSStyleDeclaration-custom-properties.html diff --git a/Libraries/LibWeb/CSS/CSSStyleDeclaration.cpp b/Libraries/LibWeb/CSS/CSSStyleDeclaration.cpp index 56315c7aa4a..c95524c7d6d 100644 --- a/Libraries/LibWeb/CSS/CSSStyleDeclaration.cpp +++ b/Libraries/LibWeb/CSS/CSSStyleDeclaration.cpp @@ -102,8 +102,13 @@ Optional PropertyOwningCSSStyleDeclaration::property(PropertyID p } // https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-setproperty -WebIDL::ExceptionOr PropertyOwningCSSStyleDeclaration::set_property(PropertyID property_id, StringView value, StringView priority) +WebIDL::ExceptionOr 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. @@ -146,10 +151,22 @@ WebIDL::ExceptionOr PropertyOwningCSSStyleDeclaration::set_property(Proper } // 9. Otherwise, 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); + 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. @@ -291,12 +308,9 @@ StringView CSSStyleDeclaration::get_property_priority(StringView property_name) return maybe_property->important == Important::Yes ? "important"sv : ""sv; } -WebIDL::ExceptionOr CSSStyleDeclaration::set_property(StringView property_name, StringView css_text, StringView priority) +WebIDL::ExceptionOr 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 CSSStyleDeclaration::remove_property(StringView property_name) diff --git a/Libraries/LibWeb/CSS/CSSStyleDeclaration.h b/Libraries/LibWeb/CSS/CSSStyleDeclaration.h index 8fb18c23f06..be01254ad40 100644 --- a/Libraries/LibWeb/CSS/CSSStyleDeclaration.h +++ b/Libraries/LibWeb/CSS/CSSStyleDeclaration.h @@ -30,10 +30,10 @@ public: virtual Optional property(PropertyID) const = 0; - virtual WebIDL::ExceptionOr set_property(PropertyID, StringView css_text, StringView priority = ""sv) = 0; + virtual WebIDL::ExceptionOr set_property(PropertyID, StringView css_text, StringView priority = ""sv); virtual WebIDL::ExceptionOr remove_property(PropertyID) = 0; - virtual WebIDL::ExceptionOr set_property(StringView property_name, StringView css_text, StringView priority); + virtual WebIDL::ExceptionOr set_property(StringView property_name, StringView css_text, StringView priority) = 0; virtual WebIDL::ExceptionOr remove_property(StringView property_name); String get_property_value(StringView property) const; @@ -76,7 +76,7 @@ public: virtual Optional property(PropertyID) const override; - virtual WebIDL::ExceptionOr set_property(PropertyID, StringView css_text, StringView priority) override; + virtual WebIDL::ExceptionOr set_property(StringView property_name, StringView css_text, StringView priority) override; virtual WebIDL::ExceptionOr remove_property(PropertyID) override; Vector const& properties() const { return m_properties; } diff --git a/Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-custom-properties.txt b/Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-custom-properties.txt new file mode 100644 index 00000000000..1e04124a3a2 --- /dev/null +++ b/Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-custom-properties.txt @@ -0,0 +1 @@ +rgb(255, 0, 0) diff --git a/Tests/LibWeb/Text/input/css/CSSStyleDeclaration-custom-properties.html b/Tests/LibWeb/Text/input/css/CSSStyleDeclaration-custom-properties.html new file mode 100644 index 00000000000..51ba809f88d --- /dev/null +++ b/Tests/LibWeb/Text/input/css/CSSStyleDeclaration-custom-properties.html @@ -0,0 +1,19 @@ + + + + \ No newline at end of file