CSSStyleSheet-constructable-replace-on-regular-sheet.html (3024B)
1 <!doctype html> 2 <title>replace / replaceSync on non-constructed stylesheet</title> 3 <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> 4 <link rel="help" href="https://wicg.github.io/construct-stylesheets/"> 5 <script src = '/resources/testharness.js'></script> 6 <script src = '/resources/testharnessreport.js'></script> 7 <style id="style"> 8 @import url("support/constructable-import.css"); 9 :root { background-color: lime } 10 </style> 11 <script> 12 13 promise_test(async () => { 14 await new Promise(resolve => window.addEventListener("load", resolve)); 15 assert_equals(getComputedStyle(document.documentElement).backgroundColor, "rgb(0, 255, 0)", "precondition") 16 let sheet = document.styleSheets[0]; 17 let childSheet = sheet.cssRules[0].styleSheet; 18 assert_throws_dom("NotAllowedError", () => sheet.replaceSync(":root { background-color: red }"), "replaceSync on non-constructed sheet should throw"); 19 assert_throws_dom("NotAllowedError", () => childSheet.replaceSync(":root { background-color: red }"), "replaceSync on non-constructed sheet should throw"); 20 assert_equals(getComputedStyle(document.documentElement).backgroundColor, "rgb(0, 255, 0)", "old sheet should still apply after replace"); 21 }, "CSSStyleSheet.replaceSync throws NotAllowedError for non-constructed sheets") 22 23 promise_test(async function(t) { 24 assert_equals(getComputedStyle(document.documentElement).backgroundColor, "rgb(0, 255, 0)", "precondition") 25 let sheet = document.styleSheets[0]; 26 let childSheet = sheet.cssRules[0].styleSheet; 27 await promise_rejects_dom(t, "NotAllowedError", sheet.replace(":root { background-color: red }"), "replace on non-constructed sheet should return a rejected promise"); 28 await promise_rejects_dom(t, "NotAllowedError", childSheet.replace(":root { background-color: red }"), "replace on non-constructed sheet should return a rejected promise"); 29 assert_equals(getComputedStyle(document.documentElement).backgroundColor, "rgb(0, 255, 0)", "old sheet should still apply after replace"); 30 }, "CSSStyleSheet.replace returns a rejected promise for non-constructed sheets") 31 32 promise_test(async function(t) { 33 assert_equals(getComputedStyle(document.documentElement).backgroundColor, "rgb(0, 255, 0)", "precondition") 34 let sheet = document.styleSheets[0]; 35 let childSheet = sheet.cssRules[0].styleSheet; 36 style.remove() // sheet's associated document becomes null. 37 await promise_rejects_dom(t, "NotAllowedError", sheet.replace(":root { background-color: red }"), "replace on non-constructed sheet should return a rejected promise"); 38 await promise_rejects_dom(t, "NotAllowedError", childSheet.replace(":root { background-color: red }"), "replace on non-constructed sheet should return a rejected promise"); 39 assert_equals(getComputedStyle(document.documentElement).backgroundColor, "rgba(0, 0, 0, 0)", "old sheet was removed, so the default color should apply"); 40 }, "CSSStyleSheet.replace returns a rejected promise for non-constructed sheets that have no associated document") 41 42 </script>