css/cssom/CSSStyleSheet-constructable-disallow-import.tentative.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>