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