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