CSSStyleSheet-constructable.html

<!DOCTYPE html>

<title>CSSStyleSheet constructor and adoptedStyleSheets</title>

<link rel="author" title="Rakina Zata Amni" href="mailto:rakina@chromium.org">

<link rel="help" href="https://wicg.github.io/construct-stylesheets/">

<script src = '/resources/testharness.js'></script>

<script src = '/resources/testharnessreport.js'></script>

<section id="firstSection">

  <div>

    <span class="green"></span>

    <span class="red"></span>

    <span class="blue"></span>

    <span class="white"></span>

    <span class="yellow"></span>

  </div>

</section>

<section id="shadowHost"></section>

<section id="thirdSection"></section>

<script>

'use strict';

const greenStyleText = ".green { color: green; }";

const redStyleTexts = [".red { color: red; }", ".red + span + span { color: red; }"];

const blueStyleTexts = [".blue { color: blue; }", ".blue + span + span { color: blue; }"];

const whiteStyleText = "* { color: white; }";

const yellowStyleText = ".yellow { color: yellow; }";

const firstDiv = document.querySelector('#firstSection > div');

const secondDiv = firstDiv.cloneNode(true);

const shadowHost = document.querySelector('#shadowHost');

const shadowRoot = shadowHost.attachShadow({mode: 'open'});

shadowRoot.appendChild(secondDiv);

const greenSpan = firstDiv.children[0];

const redSpan = firstDiv.children[1];

const blueSpan = firstDiv.children[2];

const whiteSpan = firstDiv.children[3];

const yellowSpan = firstDiv.children[4];

const greenShadowSpan = secondDiv.children[0];

const redShadowSpan = secondDiv.children[1];

const blueShadowSpan = secondDiv.children[2];

const whiteShadowSpan = secondDiv.children[3];

const yellowShadowSpan = secondDiv.children[4];

test(() => {

  assert_equals(document.adoptedStyleSheets.length, 0);

}, "document.adoptedStyleSheets should initially have length 0.");

test(() => {

  const sheet = new CSSStyleSheet({disabled: true, media: "screen, print"});

  assert_equals(sheet.title, null, "The title attribute must return the title or null if title is the empty string");

  assert_equals(sheet.ownerNode, null);

  assert_equals(sheet.ownerRule, null);

  assert_equals(sheet.media.length, 2);

  assert_equals(sheet.media.item(0), "screen");

  assert_equals(sheet.media.item(1), "print");

  assert_true(sheet.disabled);

  assert_equals(sheet.cssRules.length, 0);

  sheet.insertRule(redStyleTexts[0]);

  assert_equals(sheet.cssRules.length, 1);

  assert_equals(sheet.cssRules[0].cssText, redStyleTexts[0]);

  sheet.insertRule(redStyleTexts[1]);

  assert_equals(sheet.cssRules.length, 2);

  assert_equals(sheet.cssRules[0].cssText, redStyleTexts[1]);

  const sheet2 = new CSSStyleSheet({});

  assert_equals(sheet2.title, null, "The title attribute must return the title or null if title is the empty string");

  assert_equals(sheet2.ownerNode, null);

  assert_equals(sheet2.ownerRule, null);

  assert_equals(sheet2.media.length, 0);

  assert_false(sheet2.disabled);

  assert_equals(sheet2.cssRules.length, 0);

  sheet2.insertRule(redStyleTexts[1]);

  assert_equals(sheet2.cssRules.length, 1);

  assert_equals(sheet2.cssRules[0].cssText, redStyleTexts[1]);

  sheet2.deleteRule(0);

  assert_equals(sheet2.cssRules.length, 0);

  const sheet3 = new CSSStyleSheet();

  assert_equals(sheet3.title, null, "The title attribute must return the title or null if title is the empty string");

  assert_equals(sheet3.ownerNode, null);

  assert_equals(sheet3.ownerRule, null);

  assert_equals(sheet3.media.length, 0);

  assert_false(sheet3.disabled);

  assert_equals(sheet3.cssRules.length, 0);

  sheet3.insertRule(redStyleTexts[1]);

  assert_equals(sheet3.cssRules.length, 1);

  assert_equals(sheet3.cssRules[0].cssText, redStyleTexts[1]);

  sheet3.deleteRule(0);

  assert_equals(sheet3.cssRules.length, 0);

}, 'new CSSStyleSheet produces empty CSSStyleSheet');

test(() => {

  const sheet = new CSSStyleSheet({title: "something"});

  assert_equals(sheet.title, null, "title and alternate are not supported by the constructor. https://github.com/WICG/construct-stylesheets/issues/105");

}, "title can be set in the CSSStyleSheet constructor");

promise_test(() => {

  const sheet = new CSSStyleSheet({disabled: true, media: "screen, print"});

  const promise_sheet = sheet.replace(redStyleTexts[0]);

  return promise_sheet.then(function(sheet) {

    assert_equals(sheet.title, null, "The title attribute must return the title or null if title is the empty string");

    assert_equals(sheet.ownerNode, null);

    assert_equals(sheet.ownerRule, null);

    assert_equals(sheet.media.length, 2);

    assert_equals(sheet.media.item(0), "screen");

    assert_equals(sheet.media.item(1), "print");

    assert_true(sheet.disabled);

    assert_equals(sheet.cssRules.length, 1);

    assert_equals(sheet.cssRules[0].cssText, redStyleTexts[0]);

    sheet.insertRule(redStyleTexts[1]);

    assert_equals(sheet.cssRules.length, 2);

    assert_equals(sheet.cssRules[0].cssText, redStyleTexts[1]);

});

}, 'CSSStyleSheet.replace produces Promise<CSSStyleSheet>');

function createAllSheetsPromise() {

  const greenSheet = new CSSStyleSheet();

  const redSheet = new CSSStyleSheet({media: "screen, print"});

  const blueSheet = new CSSStyleSheet({disabled: true});

  const whiteSheet = new CSSStyleSheet({disabled: true});

  const yellowSheet = new CSSStyleSheet({disabled: false});

  const greenPromise = greenSheet.replace(greenStyleText);

  const redPromise = redSheet.replace(redStyleTexts[0] + redStyleTexts[1]);

  const bluePromise = blueSheet.replace(blueStyleTexts[0] + blueStyleTexts[1]);

  const whitePromise = whiteSheet.replace(whiteStyleText);

  const yellowPromise = yellowSheet.replace(yellowStyleText);

  return [greenPromise, redPromise, bluePromise, whitePromise, yellowPromise];

promise_test(() => {

  return Promise.all(createAllSheetsPromise()).then(values => {

    const greenStyleSheet = values[0];

    const redStyleSheet = values[1];

    const blueStyleSheet = values[2];

    const whiteStyleSheet = values[3];

    const yellowStyleSheet = values[4];

    // Lists of style sheets can be created, assigned and read.

    // disabled stylesheets aren't applied

    document.adoptedStyleSheets = [whiteStyleSheet];

    assert_equals(getComputedStyle(greenSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(redSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(blueSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(whiteSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(yellowSpan).color, "rgb(0, 0, 0)");

    // disable dsheets don't block other styles from applying

    document.adoptedStyleSheets = [greenStyleSheet, blueStyleSheet];

    assert_equals(getComputedStyle(greenSpan).color, "rgb(0, 128, 0)");

    assert_equals(getComputedStyle(redSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(blueSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(whiteSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(yellowSpan).color, "rgb(0, 0, 0)");

    document.adoptedStyleSheets = [redStyleSheet, yellowStyleSheet];

    assert_equals(getComputedStyle(greenSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(redSpan).color, "rgb(255, 0, 0)");

    assert_equals(getComputedStyle(blueSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(whiteSpan).color, "rgb(255, 0, 0)");

    assert_equals(getComputedStyle(yellowSpan).color, "rgb(255, 255, 0)");

    document.adoptedStyleSheets = [redStyleSheet, yellowStyleSheet, greenStyleSheet, blueStyleSheet];

    assert_equals(getComputedStyle(greenSpan).color, "rgb(0, 128, 0)");

    assert_equals(getComputedStyle(redSpan).color, "rgb(255, 0, 0)");

    assert_equals(getComputedStyle(blueSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(whiteSpan).color, "rgb(255, 0, 0)");

    assert_equals(getComputedStyle(yellowSpan).color, "rgb(255, 255, 0)");

    document.adoptedStyleSheets = [];

});

}, 'Constructed style sheets can be applied on document');

promise_test(() => {

  return Promise.all(createAllSheetsPromise()).then(values => {

    const greenStyleSheet = values[0];

    const redStyleSheet = values[1];

    const blueStyleSheet = values[2];

    const whiteStyleSheet = values[3];

    const yellowStyleSheet = values[4];

    shadowRoot.adoptedStyleSheets = [whiteStyleSheet];

    assert_equals(getComputedStyle(greenShadowSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(redShadowSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(blueShadowSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(whiteShadowSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(yellowShadowSpan).color, "rgb(0, 0, 0)");

    shadowRoot.adoptedStyleSheets = [greenStyleSheet, blueStyleSheet];

    assert_equals(getComputedStyle(greenShadowSpan).color, "rgb(0, 128, 0)");

    assert_equals(getComputedStyle(redShadowSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(blueShadowSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(whiteShadowSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(yellowShadowSpan).color, "rgb(0, 0, 0)");

    shadowRoot.adoptedStyleSheets = [redStyleSheet, yellowStyleSheet];

    assert_equals(getComputedStyle(greenShadowSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(redShadowSpan).color, "rgb(255, 0, 0)");

    assert_equals(getComputedStyle(blueShadowSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(whiteShadowSpan).color, "rgb(255, 0, 0)");

    assert_equals(getComputedStyle(yellowShadowSpan).color, "rgb(255, 255, 0)");

    shadowRoot.adoptedStyleSheets = [redStyleSheet, yellowStyleSheet, greenStyleSheet, blueStyleSheet];

    assert_equals(getComputedStyle(greenShadowSpan).color, "rgb(0, 128, 0)");

    assert_equals(getComputedStyle(redShadowSpan).color, "rgb(255, 0, 0)");

    assert_equals(getComputedStyle(blueShadowSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(whiteShadowSpan).color, "rgb(255, 0, 0)");

    assert_equals(getComputedStyle(yellowShadowSpan).color, "rgb(255, 255, 0)");

});

}, 'Constructed style sheets can be applied on shadow root');

promise_test(() => {

  return Promise.all(createAllSheetsPromise()).then(values => {

    const greenStyleSheet = values[0];

    const redStyleSheet = values[1];

    shadowRoot.adoptedStyleSheets = [greenStyleSheet];

    assert_equals(getComputedStyle(greenShadowSpan).color, "rgb(0, 128, 0)", "Style applies connected");

    assert_equals(getComputedStyle(redShadowSpan).color, "rgb(0, 0, 0)", "Style applies when connected");

    let hostParent = shadowHost.parentNode;

    hostParent.removeChild(shadowHost);

    assert_equals(getComputedStyle(greenShadowSpan).color, "", "Style doesn't apply when detached");

    assert_equals(getComputedStyle(redShadowSpan).color, "", "Style doesn't apply when detached");

    shadowRoot.adoptedStyleSheets = [redStyleSheet, greenStyleSheet];

    hostParent.appendChild(shadowHost);

    assert_equals(getComputedStyle(greenShadowSpan).color, "rgb(0, 128, 0)", "Style applies after reattach");

    assert_equals(getComputedStyle(redShadowSpan).color, "rgb(255, 0, 0)", "Style applies after reattach");

});

}, 'Re-attaching shadow host with adopted stylesheets work');

test(() => {

  const sheet = new CSSStyleSheet();

  sheet.replaceSync(":host { color: red; }");

  const host = document.createElement("div");

  let sr = host.attachShadow({mode: "open"});

  sr.adoptedStyleSheets = [sheet];

  document.body.appendChild(host);

  assert_equals(getComputedStyle(host).color, "rgb(255, 0, 0)", "Style applies when connected");

  sheet.replaceSync(":host { color: blue; }");

  assert_equals(getComputedStyle(host).color, "rgb(0, 0, 255)", "Style update applies when connected");

}, 'Attaching a shadow root that already has adopted stylesheets work');

test(() => {

  const sheet = new CSSStyleSheet();

  sheet.replaceSync(":host([red]) { color: red; } :host(.blue) { color: blue; }");

  const host = document.createElement("div");

  host.toggleAttribute("red");

  document.body.appendChild(host);

  assert_equals(getComputedStyle(host).color, "rgb(0, 0, 0)", "No style applies yet");

  let sr = host.attachShadow({mode: "open"});

  sr.adoptedStyleSheets = [sheet];

  assert_equals(getComputedStyle(host).color, "rgb(255, 0, 0)", "Style applies after adding style");

  document.body.removeChild(host);

  document.body.appendChild(host);

  assert_equals(getComputedStyle(host).color, "rgb(255, 0, 0)", "Style applies after reattachment");

  host.toggleAttribute("red");

  assert_equals(getComputedStyle(host).color, "rgb(0, 0, 0)", "Attribute updates to the element after reattachment apply");

  host.classList.toggle("blue");

  assert_equals(getComputedStyle(host).color, "rgb(0, 0, 255)", "Class updates to the element after reattachment apply");

}, "Re-attaching shadow host and updating attributes work");

promise_test(() => {

  const plainSheet = new CSSStyleSheet();

  const redStyleSheetPromise = plainSheet.replace(redStyleTexts[0]);

  return redStyleSheetPromise.then(function(redStyleSheet) {

    document.adoptedStyleSheets = [redStyleSheet];

    assert_equals(getComputedStyle(greenSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(redSpan).color, "rgb(255, 0, 0)");

    assert_equals(getComputedStyle(blueSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(whiteSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(yellowSpan).color, "rgb(0, 0, 0)");

    redStyleSheet.insertRule(redStyleTexts[1]);

    assert_equals(getComputedStyle(greenSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(redSpan).color, "rgb(255, 0, 0)");

    assert_equals(getComputedStyle(blueSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(whiteSpan).color, "rgb(255, 0, 0)");

    assert_equals(getComputedStyle(yellowSpan).color, "rgb(0, 0, 0)");

    redStyleSheet.deleteRule(1);

    assert_equals(getComputedStyle(greenSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(redSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(blueSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(whiteSpan).color, "rgb(255, 0, 0)");

    assert_equals(getComputedStyle(yellowSpan).color, "rgb(0, 0, 0)");

    redStyleSheet.cssRules[0].style.color = "white";

    assert_equals(getComputedStyle(greenSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(redSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(blueSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(whiteSpan).color, "rgb(255, 255, 255)");

    assert_equals(getComputedStyle(yellowSpan).color, "rgb(0, 0, 0)");

});

}, 'Changes to constructed stylesheets through CSSOM is reflected');

promise_test(() => {

  const plainSheet = new CSSStyleSheet();

  const redStyleSheetPromise = plainSheet.replace(redStyleTexts[0]);

  return redStyleSheetPromise.then(function(redStyleSheet) {

    document.adoptedStyleSheets = [redStyleSheet];

    shadowRoot.adoptedStyleSheets = [redStyleSheet];

    assert_equals(getComputedStyle(greenSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(redSpan).color, "rgb(255, 0, 0)");

    assert_equals(getComputedStyle(blueSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(whiteSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(yellowSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(greenShadowSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(redShadowSpan).color, "rgb(255, 0, 0)");

    assert_equals(getComputedStyle(blueShadowSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(whiteShadowSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(yellowShadowSpan).color, "rgb(0, 0, 0)");

    shadowRoot.adoptedStyleSheets[0].insertRule(redStyleTexts[1]);

    assert_equals(getComputedStyle(greenSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(redSpan).color, "rgb(255, 0, 0)");

    assert_equals(getComputedStyle(blueSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(whiteSpan).color, "rgb(255, 0, 0)");

    assert_equals(getComputedStyle(yellowSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(greenShadowSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(redShadowSpan).color, "rgb(255, 0, 0)");

    assert_equals(getComputedStyle(blueShadowSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(whiteShadowSpan).color, "rgb(255, 0, 0)");

    assert_equals(getComputedStyle(yellowShadowSpan).color, "rgb(0, 0, 0)");

    document.adoptedStyleSheets = [];

});

}, 'Constructed stylesheet can be used and modified in multiple TreeScopes');

promise_test(() => {

  const iframe = document.createElement("iframe");

  document.body.appendChild(iframe);

  const thirdDiv = firstDiv.cloneNode(true);

  iframe.contentDocument.body.appendChild(thirdDiv);

  const greenIframeSpan = thirdDiv.children[0];

  const redIframeSpan = thirdDiv.children[1];

  const blueIframeSpan = thirdDiv.children[2];

  const whiteIframeSpan = thirdDiv.children[3];

  const yellowIframeSpan = thirdDiv.children[4];

  const plainSheet = new CSSStyleSheet();

  const redStyleSheetPromise = plainSheet.replace(redStyleTexts[0]);

  return redStyleSheetPromise.then(function(redStyleSheet) {

    assert_throws_dom(

      'NotAllowedError',

      iframe.contentWindow.DOMException,

      () => { iframe.contentDocument.adoptedStyleSheets = [redStyleSheet]; }

);

    assert_equals(getComputedStyle(greenIframeSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(redIframeSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(blueIframeSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(whiteIframeSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(yellowIframeSpan).color, "rgb(0, 0, 0)");

    document.adoptedStyleSheets = [redStyleSheet];

    assert_equals(getComputedStyle(greenSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(redSpan).color, "rgb(255, 0, 0)");

    assert_equals(getComputedStyle(blueSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(whiteSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(yellowSpan).color, "rgb(0, 0, 0)");

    document.adoptedStyleSheets[0].insertRule(redStyleTexts[1]);

    assert_equals(getComputedStyle(greenSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(redSpan).color, "rgb(255, 0, 0)");

    assert_equals(getComputedStyle(blueSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(whiteSpan).color, "rgb(255, 0, 0)");

    assert_equals(getComputedStyle(yellowSpan).color, "rgb(0, 0, 0)");

});

}, 'Stylesheets constructed on the main Document cannot be used in iframes');

promise_test(async () => {

  const iframe = document.createElement("iframe");

  const iframeLoaded = new Promise(resolve => iframe.addEventListener("load", resolve));

  document.body.appendChild(iframe);

  await iframeLoaded;

  const thirdDiv = firstDiv.cloneNode(true);

  iframe.contentDocument.body.appendChild(thirdDiv);

  const greenIframeSpan = thirdDiv.children[0];

  const redIframeSpan = thirdDiv.children[1];

  const blueIframeSpan = thirdDiv.children[2];

  const whiteIframeSpan = thirdDiv.children[3];

  const yellowIframeSpan = thirdDiv.children[4];

  // Make sure both the main Document and the iframe are not styled

  const emptyStyleSheet = new CSSStyleSheet();

  document.adoptedStyleSheets = [emptyStyleSheet];

  assert_equals(getComputedStyle(greenSpan).color, "rgb(0, 0, 0)");

  assert_equals(getComputedStyle(redSpan).color, "rgb(0, 0, 0)");

  assert_equals(getComputedStyle(blueSpan).color, "rgb(0, 0, 0)");

  assert_equals(getComputedStyle(whiteSpan).color, "rgb(0, 0, 0)");

  assert_equals(getComputedStyle(yellowSpan).color, "rgb(0, 0, 0)");

  assert_equals(getComputedStyle(greenIframeSpan).color, "rgb(0, 0, 0)");

  assert_equals(getComputedStyle(redIframeSpan).color, "rgb(0, 0, 0)");

  assert_equals(getComputedStyle(blueIframeSpan).color, "rgb(0, 0, 0)");

  assert_equals(getComputedStyle(whiteIframeSpan).color, "rgb(0, 0, 0)");

  assert_equals(getComputedStyle(yellowIframeSpan).color, "rgb(0, 0, 0)");

  const iframePlainSheet = new iframe.contentWindow.CSSStyleSheet();

  const iframeRedStyleSheetPromise = iframePlainSheet.replace(redStyleTexts[0]);

  return iframeRedStyleSheetPromise.then(function(iframeRedStyleSheet) {

    assert_throws_dom('NotAllowedError', () => { document.adoptedStyleSheets = [iframeRedStyleSheet]; });

    assert_equals(getComputedStyle(greenSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(redSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(blueSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(whiteSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(yellowSpan).color, "rgb(0, 0, 0)");

    iframe.contentDocument.adoptedStyleSheets = [iframeRedStyleSheet];

    assert_equals(getComputedStyle(greenIframeSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(redIframeSpan).color, "rgb(255, 0, 0)");

    assert_equals(getComputedStyle(blueIframeSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(whiteIframeSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(yellowIframeSpan).color, "rgb(0, 0, 0)");

    iframe.contentDocument.adoptedStyleSheets[0].insertRule(redStyleTexts[1]);

    assert_equals(getComputedStyle(greenIframeSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(redIframeSpan).color, "rgb(255, 0, 0)");

    assert_equals(getComputedStyle(blueIframeSpan).color, "rgb(0, 0, 0)");

    assert_equals(getComputedStyle(whiteIframeSpan).color, "rgb(255, 0, 0)");

    assert_equals(getComputedStyle(yellowIframeSpan).color, "rgb(0, 0, 0)");

});

}, 'Stylesheet constructed on iframe cannot be used in the main Document');

</script>

<div id="divNonConstructed" class="nonConstructed">

</div>

<script>

`use strict`;

const shadowRootNonConstructed = divNonConstructed.attachShadow({mode:'open'})

nonConstructedStyle = document.createElement("style");

shadowRootNonConstructed.appendChild(nonConstructedStyle);

nonConstructedStyle.sheet.insertRule(".nonConstructed { color: red; }", 0);

const nonConstructedStyleSheet = nonConstructedStyle.sheet;

test(() => {

  assert_equals(getComputedStyle(divNonConstructed).color, "rgb(0, 0, 0)");

  assert_throws_dom('NotAllowedError', () => { document.adoptedStyleSheets = [nonConstructedStyleSheet]; });

}, 'Adding non-constructed stylesheet to AdoptedStyleSheets is not allowed when the owner document of the stylesheet is in the same document tree as the AdoptedStyleSheets');

test(() => {

  const iframe = document.createElement("iframe");

  document.body.appendChild(iframe);

  iframeDiv = iframe.contentDocument.createElement("div");

  iframeDiv.classList.add("nonConstructed");

  iframe.contentDocument.body.appendChild(iframeDiv);

  assert_equals(getComputedStyle(iframeDiv).color, "rgb(0, 0, 0)");

  assert_throws_dom('NotAllowedError', iframe.contentWindow.DOMException, () => {

    iframe.contentDocument.adoptedStyleSheets = [nonConstructedStyleSheet];

});

  assert_equals(getComputedStyle(iframeDiv).color, "rgb(0, 0, 0)");

  iframeStyle = iframe.contentDocument.createElement("style");

  iframe.contentDocument.body.appendChild(iframeStyle);

  iframeStyle.sheet.insertRule(".nonConstructedSpan { color: red; }");

  const iframeStyleSheet = iframeStyle.sheet;

  nonConstructedSpan = document.createElement("span");

  nonConstructedSpan.classList.add(".nonConstructedSpan");

  divNonConstructed.appendChild(nonConstructedSpan);

  assert_equals(getComputedStyle(iframeDiv).color, "rgb(0, 0, 0)");

  assert_throws_dom('NotAllowedError', () => { document.adoptedStyleSheets = [iframeStyleSheet]; });

  assert_equals(getComputedStyle(iframeDiv).color, "rgb(0, 0, 0)");

}, 'Adding non-constructed stylesheet to AdoptedStyleSheets is not allowed when the owner document of the stylesheet and the AdoptedStyleSheets are in different document trees');

function attachShadowDiv(host) {

  const shadowRoot = host.attachShadow({mode: 'open'});

  const shadowDiv = document.createElement("div");

  shadowRoot.appendChild(shadowDiv);

  return shadowDiv;

test(() => {

  const sheet = new CSSStyleSheet();

  assert_equals(sheet.cssRules.length, 0);

  sheet.replaceSync(redStyleTexts[0])

  assert_equals(sheet.cssRules.length, 1);

  assert_equals(redStyleTexts[0], sheet.cssRules[0].cssText);

  sheet.replaceSync(redStyleTexts[1]);

  assert_equals(sheet.cssRules.length, 1);

  assert_equals(redStyleTexts[1], sheet.cssRules[0].cssText);

}, 'CSSStyleSheet.replaceSync replaces stylesheet text synchronously');

test(() => {

  // Attach a div inside a shadow root with the class ".red".

  const span = document.createElement("span");

  thirdSection.appendChild(span);

  const shadowDiv = attachShadowDiv(span);

  shadowDiv.classList.add("red");

  // Create empty stylesheet.

  const sheet = new CSSStyleSheet();

  span.shadowRoot.adoptedStyleSheets = [sheet];

  assert_equals(getComputedStyle(shadowDiv).color, "rgb(0, 0, 0)");

  // Replace the stylesheet text that will color it red.

  sheet.replaceSync(redStyleTexts[0]);

  assert_equals(getComputedStyle(shadowDiv).color, "rgb(255, 0, 0)");

  assert_equals(sheet.cssRules.length, 1);

  assert_equals(sheet.cssRules[0].cssText, redStyleTexts[0]);

  sheet.insertRule(redStyleTexts[1]);

  assert_equals(sheet.cssRules.length, 2);

  assert_equals(sheet.cssRules[0].cssText, redStyleTexts[1]);

}, 'CSSStyleSheet.replaceSync correctly updates the style of its adopters synchronously');

test(() => {

  // Attach a div inside a shadow root with the class ".red".

  const span = document.createElement("span");

  thirdSection.appendChild(span);

  const shadowDiv = attachShadowDiv(span);

  shadowDiv.classList.add("target");

  // Create empty stylesheet.

  const sheet = new CSSStyleSheet();

  span.shadowRoot.adoptedStyleSheets = [sheet];

  assert_equals(getComputedStyle(shadowDiv).color, "rgb(0, 0, 0)");

  // Replace the stylesheet text that will color it red.

  sheet.replaceSync(".target { color: red; }");

  assert_equals(getComputedStyle(shadowDiv).color, "rgb(255, 0, 0)");

  // Create a style element that will set colors to white.

  const style = document.createElement("style");

  style.textContent = ".target { color: white; }";

  span.shadowRoot.appendChild(style)

  assert_equals(getComputedStyle(shadowDiv).color, "rgb(255, 0, 0)", "non-adopted styles should be ordered before adopted styles");

  span.shadowRoot.adoptedStyleSheets = [];

  assert_equals(getComputedStyle(shadowDiv).color, "rgb(255, 255, 255)", "with no adopted styles in conflict, the non-adopted style should take effect");

  span.shadowRoot.adoptedStyleSheets = [sheet];

  assert_equals(getComputedStyle(shadowDiv).color, "rgb(255, 0, 0)", "the adopted style should be ordered after the non-adopted style");

  sheet.disabled = true;

  assert_equals(getComputedStyle(shadowDiv).color, "rgb(255, 255, 255)", "with the adopted sheet disabled, the non-adopted style should take effect");

  sheet.disabled = false;

  assert_equals(getComputedStyle(shadowDiv).color, "rgb(255, 0, 0)", "the adopted sheet re-enabled, it should take effect again");

}, 'Adopted sheets are ordered after non-adopted sheets in the shadow root')

test(() => {

  // Attach a div inside a shadow root with the class ".red".

  const span = document.createElement("span");

  thirdSection.appendChild(span);

  span.classList.add("target");

  // Create empty stylesheet.

  const sheet = new CSSStyleSheet();

  document.adoptedStyleSheets = [sheet];

  assert_equals(getComputedStyle(span).color, "rgb(0, 0, 0)");

  // Replace the stylesheet text that will color it red.

  sheet.replaceSync(".target { color: red; }");

  assert_equals(getComputedStyle(span).color, "rgb(255, 0, 0)");

  // Create a style element that will set colors to white.

  const style = document.createElement("style");

  style.textContent = ".target { color: white; }";

  span.appendChild(style)

  assert_equals(getComputedStyle(span).color, "rgb(255, 0, 0)", "non-adopted styles should be ordered before adopted styles");

  document.adoptedStyleSheets = [];

  assert_equals(getComputedStyle(span).color, "rgb(255, 255, 255)", "with no adopted styles in conflict, the non-adopted style should take effect");

  document.adoptedStyleSheets = [sheet];

  assert_equals(getComputedStyle(span).color, "rgb(255, 0, 0)", "the adopted style should be ordered after the non-adopted style");

  sheet.disabled = true;

  assert_equals(getComputedStyle(span).color, "rgb(255, 255, 255)", "with the adopted sheet disabled, the non-adopted style should take effect");

  sheet.disabled = false;

  assert_equals(getComputedStyle(span).color, "rgb(255, 0, 0)", "the adopted sheet re-enabled, it should take effect again")

}, 'Adopted sheets are ordered after non-adopted sheets in the document')

const import_text = '@import url("support/constructable-import.css");';

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(t => {

    const importUrl = "support/constructable-import.css";

    const sheet = new CSSStyleSheet();

    sheet.replaceSync(`@import url("${importUrl}");`);

    const timeAfterReplaceSync = performance.now();

    let link = document.createElement("link");

    link.rel = "stylesheet";

    link.href = importUrl;

    return new Promise(resolve => {

      link.addEventListener("error", t.unreached_func("Load shouldn't fail"));

      link.addEventListener("load", t.step_func(() => {

        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, timeAfterReplaceSync, "The entry's start time should be after replaceSync threw");

        link.remove();

        resolve();

      }));

      document.body.appendChild(link);

});

}, "CSSStyleSheet.replaceSync should not trigger any loads from @import rules")

promise_test(() => {

  const span = document.createElement("span");

  thirdSection.appendChild(span);

  const shadowDiv = attachShadowDiv(span);

  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 NOT applied.

  const sheet_promise = sheet.replace(import_text);

  return sheet_promise.then((sheet) => {

    // replace() ignores @import rules:

    assert_equals(sheet.cssRules.length, 0);

    assert_equals(getComputedStyle(shadowDiv).color, "rgb(0, 0, 0)");

  }).catch((reason) => {

    assert_unreached(`Promise was rejected (${reason}) when it should have been resolved`);

});

}, 'CSSStyleSheet.replace allows, but ignores, import rule inside');

promise_test(() => {

  const span = document.createElement("span");

  thirdSection.appendChild(span);

  const shadowDiv = attachShadowDiv(span);

  const targetSpan = document.createElement("span");

  targetSpan.classList.add("target");

  shadowDiv.appendChild(targetSpan);

  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 NOT applied, but regular rule does apply.

  const sheet_promise = sheet.replace(import_text + ".target { color: blue; }");

  return sheet_promise.then((sheet) => {

    assert_equals(sheet.cssRules.length, 1);

    // @import not applied:

    assert_equals(getComputedStyle(shadowDiv).color, "rgb(0, 0, 0)");

    // regular rule applied:

    assert_equals(getComputedStyle(targetSpan).color, "rgb(0, 0, 255)");

  }).catch((reason) => {

    assert_unreached(`Promise was rejected (${reason}) when it should have been resolved`);

});

}, 'CSSStyleSheet.replace ignores @import rule but still loads other rules');

test(() => {

  const span = document.createElement("span");

  thirdSection.appendChild(span);

  const shadowDiv = attachShadowDiv(span);

  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 NOT applied.

  try {

    sheet.replaceSync(import_text);

    // replaceSync() ignores @import rules:

    assert_equals(sheet.cssRules.length, 0);

    assert_equals(getComputedStyle(shadowDiv).color, "rgb(0, 0, 0)");

  } catch(reason) {

    assert_unreached(`replaceSync threw an exception (${reason}) when it shouldn't have`);

}, 'CSSStyleSheet.replaceSync allows, but ignores, import rule inside');

promise_test(() => {

  const sheet = new CSSStyleSheet();

  const sheet_promise = sheet.replace("@import url('not-there.css');");

  return sheet_promise.then((sheet) => {

    // No exception here

  }).catch((reason) => {

    assert_unreached("Promise was rejected");

});

}, 'CSSStyleSheet.replace does not reject on failed imports');

test(() => {

  const span = document.createElement("span");

  thirdSection.appendChild(span);

  const shadowDiv = attachShadowDiv(span);

  const sheet = new CSSStyleSheet();

  span.shadowRoot.adoptedStyleSheets = [sheet];

  const newSpan = span.cloneNode(true);

  assert_equals(newSpan.shadowRoot, null);

}, 'Cloning a shadow host will not clone shadow root, and also adoptedStyleSheets');

test(() => {

  const span = document.createElement("span");

  thirdSection.appendChild(span);

  const shadowDiv = attachShadowDiv(span);

  const sheet = new CSSStyleSheet();

  span.shadowRoot.adoptedStyleSheets = [sheet];

  const iframe = document.createElement("iframe");

  document.body.appendChild(iframe);

  const newSpan = iframe.contentDocument.importNode(span, true);

  iframe.contentDocument.body.appendChild(newSpan);

  assert_equals(newSpan.shadowRoot, null);

}, 'Importing a shadow host will not copy shadow root, and also adoptedStyleSheets');

test(() => {

  const span = document.createElement("span");

  thirdSection.appendChild(span);

  const shadowDiv = attachShadowDiv(span);

  const sheet = new CSSStyleSheet();

  sheet.replaceSync("* { color: red; }");

  span.shadowRoot.adoptedStyleSheets = [sheet];

  assert_equals(getComputedStyle(shadowDiv).color, "rgb(255, 0, 0)");

  document.adoptNode(span);

  assert_equals(span.shadowRoot.adoptedStyleSheets.length, 1);

  assert_equals(span.shadowRoot.adoptedStyleSheets[0], sheet);

  const iframe = document.createElement("iframe");

  document.body.appendChild(iframe);

  iframe.contentDocument.adoptNode(span);

  iframe.contentDocument.body.appendChild(span);

  assert_not_equals(span.shadowRoot, null);

  assert_equals(span.shadowRoot.adoptedStyleSheets.length, 0);

  assert_equals(getComputedStyle(shadowDiv).color, "rgb(0, 0, 0)");

}, 'Adopting a shadow host will empty adoptedStyleSheets if adopting to a different document');

test(() => {

  const span = document.createElement("span");

  const div = document.createElement("div");

  thirdSection.appendChild(span);

  span.appendChild(div);

  const shadowDiv = attachShadowDiv(div);

  const sheet = new CSSStyleSheet();

  sheet.replaceSync("* { color: red; }");

  div.shadowRoot.adoptedStyleSheets = [sheet];

  assert_equals(getComputedStyle(shadowDiv).color, "rgb(255, 0, 0)");

  document.adoptNode(span);

  assert_equals(div.shadowRoot.adoptedStyleSheets.length, 1);

  assert_equals(div.shadowRoot.adoptedStyleSheets[0], sheet);

  const iframe = document.createElement("iframe");

  document.body.appendChild(iframe);

  iframe.contentDocument.adoptNode(span);

  iframe.contentDocument.body.appendChild(span);

  assert_not_equals(div.shadowRoot, null);

  assert_equals(div.shadowRoot.adoptedStyleSheets.length, 0);

  assert_equals(getComputedStyle(shadowDiv).color, "rgb(0, 0, 0)");

}, `Adopting a shadow host's ancestor will empty adoptedStyleSheets if adopting to a different document`);

test(() => {

  const host = document.createElement("div");

  const root = host.attachShadow({mode: "open"});

  root.adoptedStyleSheets = [new CSSStyleSheet()];

  document.body.offsetTop;

}, 'Forcing a style update after adding an adopted stylesheet on a disconnected shadow root should not crash.');

test(() => {

  const host = document.createElement("div");

  thirdSection.appendChild(host);

  const root = host.attachShadow({mode: "open"});

  const sheet = new CSSStyleSheet();

  root.adoptedStyleSheets = [sheet];

  host.remove();

  sheet.replaceSync('');

}, 'Modifying an adopted stylesheet on a disconnected shadow root should not crash.');

function currentLocation() {

  const sections = location.href.split("/")

  sections.pop();

  return sections.join("/");

test(() => {

  const span = document.createElement("span");

  thirdSection.appendChild(span);

  const shadowDiv = attachShadowDiv(span);

  const fileName = "example.png"

  const fullPath = `${currentLocation()}/${fileName}`

  const sheet = new CSSStyleSheet();

  span.shadowRoot.adoptedStyleSheets = [sheet];

  sheet.replaceSync(`* { background-image: url("${fileName}"); }`);

  const styleFromRelative = getComputedStyle(shadowDiv).backgroundImage;

  sheet.replaceSync(`* { background-image: url("${fullPath}"); }`);

  const styleFromFull = getComputedStyle(shadowDiv).backgroundImage;

  assert_equals(styleFromRelative, styleFromFull);

}, "Constructing a sheet with the default base URL uses the constructor document's base URL for CSS rules");

</script>

Source code

Revision control

Copy as Markdown

Other Tools

Test Info: