83 lines
3.4 KiB
HTML
83 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<title>CSSStyleSheet Disallow Import Rules</title>
|
|
<link rel="author" title="Erik Nordin" href="mailto:enordin@mozilla.com">
|
|
<link rel="help" href="https://github.com/WICG/construct-stylesheets/issues/119#issuecomment-597733392">
|
|
<div id="target"></div>
|
|
<script src='/resources/testharness.js'></script>
|
|
<script src='/resources/testharnessreport.js'></script>
|
|
<script>
|
|
|
|
const greenStyleText = ".green { color: green; }";
|
|
const import_text = '@import url("support/constructable-import.css");';
|
|
|
|
function attachShadowDiv(host) {
|
|
const shadowRoot = host.attachShadow({mode: 'open'});
|
|
const shadowDiv = document.createElement("div");
|
|
shadowRoot.appendChild(shadowDiv);
|
|
return shadowDiv;
|
|
}
|
|
|
|
test(() => {
|
|
assert_throws_dom("SyntaxError", () => { (new CSSStyleSheet).insertRule(import_text) });
|
|
}, 'Inserting an @import rule through insertRule on a constructed stylesheet throws an exception');
|
|
|
|
promise_test(async t => {
|
|
const importUrl = "support/constructable-import.css";
|
|
const sheet = new CSSStyleSheet();
|
|
|
|
sheet.replaceSync(import_text);
|
|
await sheet.replace(import_text);
|
|
assert_throws_dom("SyntaxError", () => { sheet.insertRule(import_text) });
|
|
|
|
const timeAfterImportsInvoked = performance.now();
|
|
|
|
let link = document.createElement("link");
|
|
t.add_cleanup(() => { link.remove(); });
|
|
link.rel = "stylesheet";
|
|
link.href = importUrl;
|
|
|
|
await new Promise((resolve, reject) => {
|
|
link.addEventListener("load", resolve);
|
|
link.addEventListener("error", reject);
|
|
document.body.appendChild(link);
|
|
});
|
|
|
|
let entries = window.performance.getEntriesByType('resource').filter(entry => entry.name.includes(importUrl));
|
|
assert_equals(entries.length, 1, "There should be only one entry for the import URL");
|
|
assert_greater_than_equal(entries[0].startTime, timeAfterImportsInvoked, "The entry's start time should be after all throws");
|
|
}, "@import rules should not trigger any loads.")
|
|
|
|
promise_test(() => {
|
|
const span = document.createElement("span");
|
|
target.appendChild(span);
|
|
const shadowDiv = attachShadowDiv(span);
|
|
shadowDiv.classList.add("green");
|
|
const sheet = new CSSStyleSheet();
|
|
span.shadowRoot.adoptedStyleSheets = [sheet];
|
|
assert_equals(getComputedStyle(shadowDiv).color, "rgb(0, 0, 0)");
|
|
const sheet_promise = sheet.replace(`${import_text} ${greenStyleText}`);
|
|
return sheet_promise.then((sheet) => {
|
|
assert_equals(sheet.cssRules.length, 1);
|
|
assert_equals(sheet.cssRules[0].cssText, greenStyleText);
|
|
assert_equals(getComputedStyle(shadowDiv).color, "rgb(0, 128, 0)");
|
|
}).catch((reason) => {
|
|
assert_unreached(`Promise was rejected (${reason}) when it should have been resolved`);
|
|
});
|
|
}, '@import rules are not parsed in CSSStyleSheet.replace');
|
|
|
|
test(() => {
|
|
const span = document.createElement("span");
|
|
target.appendChild(span);
|
|
const shadowDiv = attachShadowDiv(span);
|
|
shadowDiv.classList.add("green");
|
|
const sheet = new CSSStyleSheet();
|
|
span.shadowRoot.adoptedStyleSheets = [sheet];
|
|
assert_equals(getComputedStyle(shadowDiv).color, "rgb(0, 0, 0)");
|
|
// Replace and assert that the imported rule is applied.
|
|
const sheet_promise = sheet.replaceSync(`${import_text} ${greenStyleText}`);
|
|
assert_equals(sheet.cssRules.length, 1);
|
|
assert_equals(sheet.cssRules[0].cssText, greenStyleText);
|
|
assert_equals(getComputedStyle(shadowDiv).color, "rgb(0, 128, 0)");
|
|
}, '@import rules are not parsed in CSSStyleSheet.replaceSync');
|
|
|
|
</script>
|