1 files changed, 127 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-nesting/cssom.html b/testing/web-platform/tests/css/css-nesting/cssom.html
new file mode 100644
index 0000000000..c7150cec5d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-nesting/cssom.html
@@ -0,0 +1,127 @@
+<!doctype html>
+<title>Simple CSSOM manipulation of subrules</title>
+<link rel="author" title="Steinar H. Gunderson" href="mailto:sesse@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-nesting-1/">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style id="ss"></style>
+
+<script>
+  test(() => {
+    let [ss] = document.styleSheets;
+    assert_equals(ss.cssRules.length, 0);
+    ss.insertRule('.a { color: red; }');
+    assert_equals(ss.cssRules.length, 1);
+    assert_equals(ss.cssRules[0].cssText, '.a { color: red; }');
+
+    // Test inserting sub-cssRules, at various positions.
+    ss.cssRules[0].insertRule('& .b { color: green; }');
+    ss.cssRules[0].insertRule('& .c { color: blue; }', 1);
+    ss.cssRules[0].insertRule('& .d { color: hotpink; }', 1);
+    assert_equals(ss.cssRules[0].cssText,
+`.a {
+  color: red;
+  & .b { color: green; }
+  & .d { color: hotpink; }
+  & .c { color: blue; }
+}`, 'inserting should work');
+
+    // Test deleting a rule.
+    ss.cssRules[0].deleteRule(1);
+    assert_equals(ss.cssRules[0].cssText,
+`.a {
+  color: red;
+  & .b { color: green; }
+  & .c { color: blue; }
+}`, 'deleting should work');
+  });
+
+  // Test that out-of-bounds throws exceptions and does not affect the stylesheet.
+  const sampleSheetText =
+`.a {
+  color: red;
+  & .b { color: green; }
+  & .c { color: blue; }
+}`;
+
+  test(() => {
+    document.getElementById('ss').innerHTML = sampleSheetText;
+    let [ss] = document.styleSheets;
+    assert_throws_dom('IndexSizeError', () => { ss.cssRules[0].insertRule('& .broken {}', 3); });
+    assert_equals(ss.cssRules[0].cssText, sampleSheetText, 'unchanged after no-insert');
+  });
+
+  test(() => {
+    document.getElementById('ss').innerHTML = sampleSheetText;
+    let [ss] = document.styleSheets;
+    assert_throws_dom('IndexSizeError', () => { ss.cssRules[0].insertRule('& .broken {}', -1); });
+    assert_equals(ss.cssRules[0].cssText, sampleSheetText, 'unchanged after no-insert');
+  });
+
+  test(() => {
+    document.getElementById('ss').innerHTML = sampleSheetText;
+    let [ss] = document.styleSheets;
+    assert_throws_dom('IndexSizeError', () => { ss.cssRules[0].deleteRule(5); });
+    assert_equals(ss.cssRules[0].cssText, sampleSheetText, 'unchanged after no-delete');
+  });
+
+  test(() => {
+    document.getElementById('ss').innerHTML = sampleSheetText;
+    let [ss] = document.styleSheets;
+    assert_equals(ss.cssRules[0].cssRules[2], undefined, 'subscript out-of-bounds returns undefined');
+    assert_equals(ss.cssRules[0].cssRules.item(2), null, 'item() out-of-bounds returns null');
+    assert_equals(ss.cssRules[0].cssText, sampleSheetText, 'unchanged after no-access');
+  });
+
+  // Test that inserting an invalid rule throws an exception.
+  test(() => {
+    document.getElementById('ss').innerHTML = sampleSheetText;
+    let [ss] = document.styleSheets;
+    let exception;
+    assert_throws_dom('SyntaxError', () => { ss.cssRules[0].insertRule('% {}'); });
+    assert_equals(ss.cssRules[0].cssText, sampleSheetText, 'unchanged after invalid rule');
+  });
+
+  // Test that we can get out single rule through .cssRules.
+  test(() => {
+    document.getElementById('ss').innerHTML = sampleSheetText;
+    let [ss] = document.styleSheets;
+    assert_equals(ss.cssRules[0].cssRules[1].cssText, '& .c { color: blue; }');
+  });
+
+  // Test that we can insert a @supports rule, that it serializes in the right place
+  // and has the right parent. Note that the indentation is broken per-spec.
+  test(() => {
+    document.getElementById('ss').innerHTML = sampleSheetText;
+    let [ss] = document.styleSheets;
+    ss.cssRules[0].insertRule('@supports selector(&) { & div { font-size: 10px; }}', 1);
+    assert_equals(ss.cssRules[0].cssText,
+`.a {
+  color: red;
+  & .b { color: green; }
+  @supports selector(&) {
+  & div { font-size: 10px; }
+}
+  & .c { color: blue; }
+}`, '@supports is added');
+
+    assert_equals(ss.cssRules[0].cssRules[1].parentRule, ss.cssRules[0]);
+    ss.cssRules[0].deleteRule(1);
+    assert_equals(ss.cssRules[0].cssText, sampleSheetText);
+  });
+
+  // Nested rules are not part of declaration lists, and thus should not
+  // be possible to insert with .style.
+  test(() => {
+    document.getElementById('ss').innerHTML = sampleSheetText;
+    let [ss] = document.styleSheets;
+    ss.cssRules[0].style = 'color: olivedrab; &.d { color: peru; }';
+    assert_equals(ss.cssRules[0].cssText,
+`.a {
+  color: olivedrab;
+  & .b { color: green; }
+  & .c { color: blue; }
+}`, 'color is changed, new rule is ignored');
+  });
+</script>