[css-nesting] Implement CSSStyleRule::setSelectorText by re-nesting

This replaces re-parenting (in-place mutation) with re-nesting (modified deep copies), as described in CL:ABC. This fixes invalidation issues for inner (nested) rules when modifying the selectorText of an outer rule. The kScope branch will be handled by a future CL. (This is already incorrect, Issue 363019839.) Note: Somehow, this fixes the invalidation problems even though we don't actually add the affected rules to the RuleSetDiff, nor mark it unrepresentable. I'm leaving Issue 363019837 open until I understand why. Bug: 363019837 Change-Id: I5f35aaf1f04a6c018ec9beaedf835266ac38480d Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6070884 Reviewed-by: Steinar H Gunderson <[email protected]> Commit-Queue: Anders Hartvoll Ruud <[email protected]> Cr-Commit-Position: refs/heads/main@{#1394135}
web-platform-tests · Dec 10, 2024 · 39f20a7 · 39f20a7
1 parent ef41368
commit 39f20a7
Showing 1 changed file with 44 additions and 0 deletions.
diff --git a/css/css-nesting/set-selector-text.html b/css/css-nesting/set-selector-text.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<title>CSS Nesting: Mutating selectorText of outer rule</title>
+<link rel="help" href="https://drafts.csswg.org/css-nesting/">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style id=style>
+</style>
+<main style="container-type:size;width:50px;height:50px">
+  <div class=a>
+    <div class=x></div>
+  </div>
+  <div class=b>
+    <div class=x></div>
+  </div>
+</main>
+<script>
+  let cases = [
+    ['style',        '.a { & .x { z-index: 1; } }'],
+    ['@media',       '.a { @media (width) { & .x { z-index: 1; } } }'],
+    ['@supports',    '.a { @supports (width:1px) { & .x { z-index: 1; } } }'],
+    ['@layer',       '.a { @layer foo { & .x { z-index: 1; } } }'],
+    ['@container',   '.a { @container (width) { & .x { z-index: 1; } } }'],
+    ['@scope',       '.a { @scope (&) { & .x { z-index: 1; } } }'],
+    ['nested decl.', '.a { & .x { .y { } z-index: 1; } } '],
+  ];
+
+  for (let [test_name, style_text] of cases) {
+    test((t) => {
+      t.add_cleanup(() => { style.textContent = ''; });
+      style.textContent = style_text;
+      let ax = document.querySelector('.a > .x');
+      let bx = document.querySelector('.b > .x');
+      assert_equals(getComputedStyle(ax).zIndex, '1',
+        'z-index of "ax" element before selectorText mutation');
+      assert_equals(getComputedStyle(bx).zIndex, 'auto',
+        'z-index of "bx" element before selectorText mutation');
+      style.sheet.cssRules[0].selectorText = '.b';
+      assert_equals(getComputedStyle(ax).zIndex, 'auto',
+        'z-index of "ax" element after selectorText mutation');
+      assert_equals(getComputedStyle(bx).zIndex, '1',
+        'z-index of "bx" element after selectorText mutation');
+    }, `Outer selectorText text mutation with inner ${test_name} rule`);
+  }
+</script>