| <!doctype html> |
| <meta charset="utf-8"> |
| <title>CSSStyleSheet.replace reflects the right cssRules.</title> |
| <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> |
| <link rel="author" title="Mozilla" href="https://mozilla.org"> |
| <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1864815"> |
| <link rel="help" href="https://drafts.csswg.org/cssom/#dom-cssstylesheet-replace"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <p></p> |
| <script> |
| async function runTest(sync) { |
| let sheet = new CSSStyleSheet(); |
| let rules = sheet.cssRules; |
| function replace(text) { |
| return sync ? sheet.replaceSync(text) : sheet.replace(text); |
| } |
| function assert_color(color) { |
| assert_equals(sheet.cssRules, rules, "StyleSheet.cssRules is [SameObject]"); |
| assert_equals(rules.length, 1, "Should have one rule"); |
| assert_equals(rules[0].style.color, color, "Should be the right css rule"); |
| } |
| async function replace_and_test(color) { |
| await replace(`p { color: ${color} }`); |
| assert_equals(sheet.cssRules, rules, "StyleSheet.cssRules is [SameObject]"); |
| assert_equals(rules.length, 1, "Should have one rule"); |
| assert_equals(rules[0].style.color, color, "Should be the right css rule"); |
| } |
| |
| await replace_and_test("red"); |
| await replace_and_test("green"); |
| document.adoptedStyleSheets.push(sheet); |
| assert_equals(getComputedStyle(document.querySelector("p")).color, "rgb(0, 128, 0)", "Sheet should apply"); |
| document.adoptedStyleSheets.pop(sheet); |
| assert_not_equals(getComputedStyle(document.querySelector("p")).color, "rgb(0, 128, 0)", "Sheet should stop applying"); |
| } |
| |
| for (let sync of [true, false]) { |
| promise_test(() => runTest(sync), `cssRules tests (sync: ${sync})`); |
| } |
| </script> |