CSSStyleSheet-constructable-disallow-import.tentative.html (3486B)
1 <!DOCTYPE html> 2 <title>CSSStyleSheet Disallow Import Rules</title> 3 <link rel="author" title="Erik Nordin" href="mailto:enordin@mozilla.com"> 4 <link rel="help" href="https://github.com/WICG/construct-stylesheets/issues/119#issuecomment-597733392"> 5 <div id="target"></div> 6 <script src='/resources/testharness.js'></script> 7 <script src='/resources/testharnessreport.js'></script> 8 <script> 9 10 const greenStyleText = ".green { color: green; }"; 11 const import_text = '@import url("support/constructable-import.css");'; 12 13 function attachShadowDiv(host) { 14 const shadowRoot = host.attachShadow({mode: 'open'}); 15 const shadowDiv = document.createElement("div"); 16 shadowRoot.appendChild(shadowDiv); 17 return shadowDiv; 18 } 19 20 test(() => { 21 assert_throws_dom("SyntaxError", () => { (new CSSStyleSheet).insertRule(import_text) }); 22 }, 'Inserting an @import rule through insertRule on a constructed stylesheet throws an exception'); 23 24 promise_test(async t => { 25 const importUrl = "support/constructable-import.css"; 26 const sheet = new CSSStyleSheet(); 27 28 sheet.replaceSync(import_text); 29 await sheet.replace(import_text); 30 assert_throws_dom("SyntaxError", () => { sheet.insertRule(import_text) }); 31 32 const timeAfterImportsInvoked = performance.now(); 33 34 let link = document.createElement("link"); 35 t.add_cleanup(() => { link.remove(); }); 36 link.rel = "stylesheet"; 37 link.href = importUrl; 38 39 await new Promise((resolve, reject) => { 40 link.addEventListener("load", resolve); 41 link.addEventListener("error", reject); 42 document.body.appendChild(link); 43 }); 44 45 let entries = window.performance.getEntriesByType('resource').filter(entry => entry.name.includes(importUrl)); 46 assert_equals(entries.length, 1, "There should be only one entry for the import URL"); 47 assert_greater_than_equal(entries[0].startTime, timeAfterImportsInvoked, "The entry's start time should be after all throws"); 48 }, "@import rules should not trigger any loads.") 49 50 promise_test(() => { 51 const span = document.createElement("span"); 52 target.appendChild(span); 53 const shadowDiv = attachShadowDiv(span); 54 shadowDiv.classList.add("green"); 55 const sheet = new CSSStyleSheet(); 56 span.shadowRoot.adoptedStyleSheets = [sheet]; 57 assert_equals(getComputedStyle(shadowDiv).color, "rgb(0, 0, 0)"); 58 const sheet_promise = sheet.replace(`${import_text} ${greenStyleText}`); 59 return sheet_promise.then((sheet) => { 60 assert_equals(sheet.cssRules.length, 1); 61 assert_equals(sheet.cssRules[0].cssText, greenStyleText); 62 assert_equals(getComputedStyle(shadowDiv).color, "rgb(0, 128, 0)"); 63 }).catch((reason) => { 64 assert_unreached(`Promise was rejected (${reason}) when it should have been resolved`); 65 }); 66 }, '@import rules are not parsed in CSSStyleSheet.replace'); 67 68 test(() => { 69 const span = document.createElement("span"); 70 target.appendChild(span); 71 const shadowDiv = attachShadowDiv(span); 72 shadowDiv.classList.add("green"); 73 const sheet = new CSSStyleSheet(); 74 span.shadowRoot.adoptedStyleSheets = [sheet]; 75 assert_equals(getComputedStyle(shadowDiv).color, "rgb(0, 0, 0)"); 76 // Replace and assert that the imported rule is applied. 77 const sheet_promise = sheet.replaceSync(`${import_text} ${greenStyleText}`); 78 assert_equals(sheet.cssRules.length, 1); 79 assert_equals(sheet.cssRules[0].cssText, greenStyleText); 80 assert_equals(getComputedStyle(shadowDiv).color, "rgb(0, 128, 0)"); 81 }, '@import rules are not parsed in CSSStyleSheet.replaceSync'); 82 83 </script>