CSSStyleSheet-constructable-replace-cssRules.html (1801B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSSStyleSheet.replace reflects the right cssRules.</title> 4 <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> 5 <link rel="author" title="Mozilla" href="https://mozilla.org"> 6 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1864815"> 7 <link rel="help" href="https://drafts.csswg.org/cssom/#dom-cssstylesheet-replace"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <p></p> 11 <script> 12 async function runTest(sync) { 13 let sheet = new CSSStyleSheet(); 14 let rules = sheet.cssRules; 15 function replace(text) { 16 return sync ? sheet.replaceSync(text) : sheet.replace(text); 17 } 18 function assert_color(color) { 19 assert_equals(sheet.cssRules, rules, "StyleSheet.cssRules is [SameObject]"); 20 assert_equals(rules.length, 1, "Should have one rule"); 21 assert_equals(rules[0].style.color, color, "Should be the right css rule"); 22 } 23 async function replace_and_test(color) { 24 await replace(`p { color: ${color} }`); 25 assert_equals(sheet.cssRules, rules, "StyleSheet.cssRules is [SameObject]"); 26 assert_equals(rules.length, 1, "Should have one rule"); 27 assert_equals(rules[0].style.color, color, "Should be the right css rule"); 28 } 29 30 await replace_and_test("red"); 31 await replace_and_test("green"); 32 document.adoptedStyleSheets.push(sheet); 33 assert_equals(getComputedStyle(document.querySelector("p")).color, "rgb(0, 128, 0)", "Sheet should apply"); 34 document.adoptedStyleSheets.pop(sheet); 35 assert_not_equals(getComputedStyle(document.querySelector("p")).color, "rgb(0, 128, 0)", "Sheet should stop applying"); 36 } 37 38 for (let sync of [true, false]) { 39 promise_test(() => runTest(sync), `cssRules tests (sync: ${sync})`); 40 } 41 </script>