Browse Source

LibWeb: Invalidate style when CSSStyleRule selectorText changes

Previously, any change to the selectorText of a CSSStyleRule was not
reflected in the document style.
Tim Ledbetter 1 year ago
parent
commit
99b2eff988

+ 10 - 0
Tests/LibWeb/Text/expected/css/CSSStyleRule-set-selectorText.txt

@@ -0,0 +1,10 @@
+  Testing window.document:
+selectorText initial value: .green-background
+container element backgroundColor initial value: rgb(255, 0, 0)
+selectorText after setting selectorText value to #container: #container
+container element backgroundColor after setting selectorText value to #container: rgb(0, 255, 0)
+Testing iframe.contentDocument:
+selectorText initial value: .green-background
+container element backgroundColor initial value: rgb(255, 0, 0)
+selectorText after setting selectorText value to #container: #container
+container element backgroundColor after setting selectorText value to #container: rgb(0, 255, 0)

+ 36 - 0
Tests/LibWeb/Text/input/css/CSSStyleRule-set-selectorText.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<style id="styleElement">
+    .green-background { background-color: rgb(0, 255, 0) !important; }
+    .red-background { background-color: rgb(255, 0, 0); }
+</style>
+<script src="../include.js"></script>
+<iframe id="iframe"></iframe>
+<script>
+
+    function testSetSelectorText(doc) {
+        const divElement = doc.createElement("div");
+        divElement.classList.add("red-background");
+        divElement.id = "container";
+        divElement.innerHTML = "This shouldn't be visible";
+        doc.body.appendChild(divElement);
+        const divStyle = getComputedStyle(divElement);
+        const greenBackgroundRule = doc.styleSheets[0].cssRules[0];
+        println(`selectorText initial value: ${greenBackgroundRule.selectorText}`);
+        println(`container element backgroundColor initial value: ${divStyle.backgroundColor}`);
+        greenBackgroundRule.selectorText = "#container";
+        println(`selectorText after setting selectorText value to #container: ${greenBackgroundRule.selectorText}`);
+        println(`container element backgroundColor after setting selectorText value to #container: ${divStyle.backgroundColor}`);
+        doc.body.removeChild(divElement);        
+    }
+
+    test(() => {
+        const frameDocument = document.getElementById("iframe").contentDocument;
+        frameDocument.body.appendChild(document.getElementById("styleElement").cloneNode(true));
+
+        println("Testing window.document:");
+        testSetSelectorText(document);
+        
+        println("Testing iframe.contentDocument:");
+        testSetSelectorText(frameDocument);
+    });
+</script>

+ 10 - 1
Userland/Libraries/LibWeb/CSS/CSSStyleRule.cpp

@@ -8,6 +8,7 @@
 #include <LibWeb/Bindings/Intrinsics.h>
 #include <LibWeb/CSS/CSSStyleRule.h>
 #include <LibWeb/CSS/Parser/Parser.h>
+#include <LibWeb/CSS/StyleComputer.h>
 #include <LibWeb/WebIDL/ExceptionOr.h>
 
 namespace Web::CSS {
@@ -102,8 +103,16 @@ void CSSStyleRule::set_selector_text(StringView selector_text)
     auto parsed_selectors = parse_selector(Parser::ParsingContext { realm() }, selector_text);
 
     // 2. If the algorithm returns a non-null value replace the associated group of selectors with the returned value.
-    if (parsed_selectors.has_value())
+    if (parsed_selectors.has_value()) {
         m_selectors = parsed_selectors.release_value();
+        if (auto* sheet = parent_style_sheet()) {
+            if (auto style_sheet_list = sheet->style_sheet_list()) {
+                auto& document = style_sheet_list->document();
+                document.style_computer().invalidate_rule_cache();
+                document.invalidate_style();
+            }
+        }
+    }
 
     // 3. Otherwise, if the algorithm returns a null value, do nothing.
 }

+ 1 - 0
Userland/Libraries/LibWeb/CSS/CSSStyleSheet.h

@@ -62,6 +62,7 @@ public:
     bool evaluate_media_queries(HTML::Window const&);
     void for_each_effective_keyframes_at_rule(Function<void(CSSKeyframesRule const&)> const& callback) const;
 
+    JS::GCPtr<StyleSheetList> style_sheet_list() const { return m_style_sheet_list; }
     void set_style_sheet_list(Badge<StyleSheetList>, StyleSheetList*);
 
     Optional<FlyString> default_namespace() const;