From fa950a5727acc070f4970d2d9b9f07d4e0e222b7 Mon Sep 17 00:00:00 2001 From: Kevin Mas Ruiz Date: Fri, 7 Mar 2025 22:57:14 +0100 Subject: [PATCH] LibWeb: Invalidate element with CSS custom props on attribute changes Element styles should be invalidated when they depend on CSS variables defined in one of their ancesors or when one of their ancestors change their class, due to the possibility of adding new CSS variables in scope. --- Libraries/LibWeb/DOM/Element.cpp | 10 +++++++ ...tyleDeclaration-custom-properties-3838.txt | 2 ++ ...yleDeclaration-custom-properties-3838.html | 29 +++++++++++++++++++ 3 files changed, 41 insertions(+) create mode 100644 Tests/LibWeb/Text/expected/CSSStyleDeclaration-custom-properties-3838.txt create mode 100644 Tests/LibWeb/Text/input/CSSStyleDeclaration-custom-properties-3838.html diff --git a/Libraries/LibWeb/DOM/Element.cpp b/Libraries/LibWeb/DOM/Element.cpp index 0ef76abf31a..36e8224ed22 100644 --- a/Libraries/LibWeb/DOM/Element.cpp +++ b/Libraries/LibWeb/DOM/Element.cpp @@ -2202,10 +2202,20 @@ void Element::invalidate_style_after_attribute_change(FlyString const& attribute style_invalidation_options.invalidate_self = true; } + if (style_uses_css_custom_properties()) { + // A css custom property can be hooked on to this element by any attribute + // so invalidate elements and rerender them in that scenario + style_invalidation_options.invalidate_elements_that_use_css_custom_properties = true; + } + if (attribute_name == HTML::AttributeNames::style) { style_invalidation_options.invalidate_self = true; + // even if we don't have custom properties, the new "style" attribute could add one style_invalidation_options.invalidate_elements_that_use_css_custom_properties = true; } else if (attribute_name == HTML::AttributeNames::class_) { + // adding or removing classes can add new custom properties to this element + style_invalidation_options.invalidate_elements_that_use_css_custom_properties = true; + Vector old_classes; Vector new_classes; if (old_value.has_value()) diff --git a/Tests/LibWeb/Text/expected/CSSStyleDeclaration-custom-properties-3838.txt b/Tests/LibWeb/Text/expected/CSSStyleDeclaration-custom-properties-3838.txt new file mode 100644 index 00000000000..031baaf570c --- /dev/null +++ b/Tests/LibWeb/Text/expected/CSSStyleDeclaration-custom-properties-3838.txt @@ -0,0 +1,2 @@ +rgb(255, 0, 0) +rgb(0, 128, 0) \ No newline at end of file diff --git a/Tests/LibWeb/Text/input/CSSStyleDeclaration-custom-properties-3838.html b/Tests/LibWeb/Text/input/CSSStyleDeclaration-custom-properties-3838.html new file mode 100644 index 00000000000..70d607cbf31 --- /dev/null +++ b/Tests/LibWeb/Text/input/CSSStyleDeclaration-custom-properties-3838.html @@ -0,0 +1,29 @@ + + + + +