WebKit export: [css-nesting] Cascade interleaved rules in place

https://bugs.webkit.org/show_bug.cgi?id=275365
tkntjsdw · Jan 3, 2025 · 09bf6b6 · 09bf6b6
1 parent c3fe120
commit 09bf6b6
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 0 deletions.
diff --git a/css/css-nesting/cssom.html b/css/css-nesting/cssom.html
@@ -185,4 +185,41 @@
     assert_equals(getComputedStyle(inner1).zIndex, '1');
     assert_equals(getComputedStyle(inner2).zIndex, '1');
   }, 'Mutating the selectorText of outer rule invalidates inner rules');
+
+  // CSSNestedDeclarations
+  test((t) => {
+    const main = document.createElement('main');
+    main.innerHTML = `
+      <style id="main_ss">
+        div {
+          z-index: 1;
+          &.test { foo:bar; }
+        }
+      </style>
+      <div id="outer" class="test">
+      </div>
+    `;
+    document.documentElement.append(main);
+    t.add_cleanup(() => main.remove());
+    assert_equals(getComputedStyle(outer).zIndex, '1');
+    const main_ss = document.getElementById("main_ss").sheet;
+    const rule = main_ss.cssRules[0];
+    assert_equals(rule.cssRules.length, 1);
+    rule.insertRule('z-index: 3;');
+    assert_equals(rule.cssRules.length, 2);
+    assert_equals(getComputedStyle(outer).zIndex, '3');
+
+    // Throw only when no valid declaration  https://github.com/w3c/csswg-drafts/issues/10520
+    assert_throws_dom('SyntaxError', () => { rule.insertRule('nothing-to-insert-because-invalid-property-should-throw: 2;'); });
+    assert_equals(rule.cssRules.length, 2);
+
+    // Test the insertion of nested declarations inside grouping rule
+    rule.insertRule('@media screen { a { color: blue; }}',2);
+    assert_equals(rule.cssRules.length, 3);
+    const mediaRule = rule.cssRules[2];
+    mediaRule.insertRule('z-index: 3;');
+    assert_equals(mediaRule.cssRules.length, 2);
+    assert_throws_dom('SyntaxError', () => { mediaRule.insertRule('nothing-to-insert-because-invalid-property-should-throw: 2;'); });
+  }, 'Manipulation of nested declarations through CSSOM');
+
 </script>
diff --git a/css/css-nesting/mixed-declarations-rules.html b/css/css-nesting/mixed-declarations-rules.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<title>Mixed declarations and rules</title>
+<link rel="help" href="https://drafts.csswg.org/css-nesting/#nested-declarations-rule">
+
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  background-color: blue;
+  @media all {
+    background-color: red;
+  }
+  background-color: green;
+}
+</style>
+
+<body>
+  <p>Tests pass if <strong>block is green</strong></p>
+  <div class="test"></div>
+</body>