CSSStyleSheet-template-adoption.html (2320B)
1 <!doctype html> 2 <title>adoptedStyleSheets should stay when adopting to/from template document</title> 3 <link rel="author" title="Rakina Zata Amni" href="mailto:rakina@chromium.org"> 4 <link rel="help" href="https://wicg.github.io/construct-stylesheets/"> 5 <script src = '/resources/testharness.js'></script> 6 <script src = '/resources/testharnessreport.js'></script> 7 <body> 8 <div id="host"></div> 9 <template id='template'> 10 <template id='nested_template'></template> 11 </template> 12 </body> 13 <script> 14 test(function() { 15 let sheet = new CSSStyleSheet(); 16 sheet.replaceSync("div { color: blue }"); 17 18 let host = document.getElementById("host"); 19 let root = host.attachShadow({ mode: "open" }); 20 root.innerHTML = `<div></div>`; 21 root.adoptedStyleSheets = [sheet]; 22 23 function assertAdoptedStyleSheet() { 24 assert_equals(host.ownerDocument, root.firstChild.ownerDocument, "Shadow root was not adopted?"); 25 assert_equals(root.adoptedStyleSheets.length, 1); 26 assert_equals(root.adoptedStyleSheets[0], sheet); 27 if (root.ownerDocument == document) { 28 assert_equals(getComputedStyle(root.firstChild).color, "rgb(0, 0, 255)", "Sheet should apply"); 29 } 30 } 31 32 assertAdoptedStyleSheet(); 33 34 // adoptedStyleSheets is not cleared when adopted into a <template>. 35 const template = document.getElementById("template"); 36 template.content.appendChild(host); 37 38 assert_not_equals(host.ownerDocument, document, "Should've been adopted"); 39 assertAdoptedStyleSheet(); 40 41 // adoptedStyleSheets is not cleared when adopted back in the main document. 42 document.body.appendChild(host); 43 assert_equals(host.ownerDocument, document, "Should've been re-adopted"); 44 assertAdoptedStyleSheet(); 45 46 // adoptedStyleSheets is not cleared when adopted into a nested <template>. 47 const nested_template = template.content.firstElementChild; 48 nested_template.content.appendChild(host); 49 assert_not_equals(host.ownerDocument, document, "Should've been adopted"); 50 assertAdoptedStyleSheet(); 51 52 // adoptedStyleSheets is cleared when adopted into an <iframe>. 53 const iframe = document.createElement("iframe"); 54 document.body.appendChild(iframe); 55 iframe.contentDocument.body.appendChild(host); 56 assert_equals(root.adoptedStyleSheets.length, 0); 57 }, "adoptedStyleSheets won'te be cleared when adopting into/from <template>s"); 58 </script>