css/css-cascade/scope-implicit-external.html

<!DOCTYPE html>
<html>
  <head>
    <title>@scope - implicit scope root (external sheet)</title>
    <link rel="help" href="https://drafts.csswg.org/css-cascade-6/#scope-atrule">
    <script src="/resources/testharness.js"></script>
    <script src="/resources/testharnessreport.js"></script>
  </head>
  <body>
    <div class="a outside"></div>
    <div id=main></div>
    <div class="a outside"></div>

    <template id=templateLink>
      <div id=root>
        <link id=importElement rel="stylesheet" href="resources/scope.css">
        <div class=a></div>
      </div>
    </template>

    <template id=templateImport>
      <div id=root>
        <style id="importElement">
          @import url("resources/scope.css");
        </style>
        <div class=a></div>
      </div>
    </template>

    <script>
      function test_external(template_element, description) {
        promise_test(async t => {
          t.add_cleanup(() => main.replaceChildren());
          const cloned = template_element.content.cloneNode(true);
          const importElement = cloned.querySelector('#importElement');
          const p = new Promise((resolve, reject) => importElement.addEventListener('load', () => {
            try {
              assert_equals(getComputedStyle(root).zIndex, '1');
              assert_equals(getComputedStyle(document.querySelector('#root > .a')).zIndex, '2');
              let outside = document.querySelectorAll('.outside');
              assert_equals(outside.length, 2);
              for (let div of outside) {
                assert_equals(getComputedStyle(div).zIndex, 'auto');
              }
              resolve();
            } catch(e) {
              reject(e);
            }
          }));
          main.append(cloned);
          return p;
        }, description);
      }

      test_external(templateLink, '@scope with external stylesheet through link element');
      test_external(templateImport, '@scope with external stylesheet through @import');
    </script>
  </body>
</html>