CSSStyleSheet-constructable-disallow-import.tentative.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/cssom/CSSStyleSheet-constructable-disallow-import.tentative.html - WPT Dashboard Interop Dashboard

<!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>