| <!doctype html> |
| <title>adoptedStyleSheets should stay when adopting to/from template document</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> |
| <body> |
| <div id="host"></div> |
| <template id='template'> |
| <template id='nested_template'></template> |
| </template> |
| </body> |
| <script> |
| test(function() { |
| let sheet = new CSSStyleSheet(); |
| sheet.replaceSync("div { color: red }"); |
| |
| let host = document.getElementById("host"); |
| let root = host.attachShadow({ mode: "open" }); |
| root.adoptedStyleSheets = [sheet]; |
| assert_equals(root.adoptedStyleSheets.length, 1); |
| assert_equals(root.adoptedStyleSheets[0], sheet); |
| |
| // adoptedStyleSheets is not cleared when adopted into a <template>. |
| const template = document.getElementById("template"); |
| template.content.appendChild(host); |
| assert_equals(root.adoptedStyleSheets.length, 1); |
| assert_equals(root.adoptedStyleSheets[0], sheet); |
| |
| // adoptedStyleSheets is not cleared when adopted back in the main document. |
| document.body.appendChild(host); |
| assert_equals(root.adoptedStyleSheets.length, 1); |
| assert_equals(root.adoptedStyleSheets[0], sheet); |
| |
| // adoptedStyleSheets is not cleared when adopted into a nested <template>. |
| const nested_template = template.content.firstElementChild; |
| nested_template.content.appendChild(host); |
| assert_equals(root.adoptedStyleSheets.length, 1); |
| assert_equals(root.adoptedStyleSheets[0], sheet); |
| |
| // adoptedStyleSheets is cleared when adopted into an <iframe>. |
| const iframe = document.createElement("iframe"); |
| document.body.appendChild(iframe); |
| iframe.contentDocument.body.appendChild(host); |
| assert_equals(root.adoptedStyleSheets.length, 0); |
| }, "adoptedStyleSheets won'te be cleared when adopting into/from <template>s"); |
| </script> |
