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