LibWeb: Invalidate style when CSSStyleRule selectorText changes

Previously, any change to the selectorText of a CSSStyleRule was not
reflected in the document style.
This commit is contained in:
Tim Ledbetter 2024-04-14 23:05:05 +01:00 committed by Andreas Kling
commit 99b2eff988
Notes: sideshowbarker 2024-07-17 08:25:15 +09:00
4 changed files with 57 additions and 1 deletions

View file

@ -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)

View file

@ -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>

View file

@ -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.
}

View file

@ -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;