<!doctype html>
  <html lang="en">
  <body>
    <outer-custom-el></outer-custom-el>
    <p>Tests CSS container queries don't break when using nested shadow DOM</p>
    <p>PASS if not crash</p>
  </body>
  <script>
    var ShadowHostBase = class extends HTMLElement {
      createRenderRoot() {
        const renderRoot = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
        renderRoot.adoptedStyleSheets = this.constructor.styles;
        return renderRoot;
      }
      connectedCallback() {
        this.renderRoot ??= this.createRenderRoot();
        this.update();
      }
      update() {
        const htmlContent = this.render();
        const template = document.createElement("template");
        template.innerHTML = htmlContent;
        this.renderRoot.appendChild(template.content.cloneNode(true));
      }
    };
    ShadowHostBase.shadowRootOptions = { mode: "open" };
    var SecondShadowHost = class extends ShadowHostBase {
      render() {
        return `
        <div>
          <span part="label">Nested span with label part</span>
        </div>
        `;
      }
    };
    var secondShadowHostStyles = `div:hover span {
    }`;
    var prepareStyleSheets = (textStyle) => {
      const style = new CSSStyleSheet();
      style.replaceSync(textStyle);
      return [style];
    };
    SecondShadowHost.styles = prepareStyleSheets(secondShadowHostStyles);
    customElements.define("inner-custom-el", SecondShadowHost);
    var firstShadowHostStyles = `* {
      @container style(--foo: bar) {
        ::part(baz) {}
      }
    }`;
    var FirstShadowHost = class extends ShadowHostBase {
      render() {
        return `
        <inner-custom-el>
        </inner-custom-el>
      `;
      }
    };
    FirstShadowHost.styles = prepareStyleSheets(firstShadowHostStyles);
    customElements.define("outer-custom-el", FirstShadowHost);

    if (window.testRunner) {
      testRunner.dumpAsText();
      testRunner.waitUntilDone();
    }
    window.onload = async () => {
      await customElements.whenDefined('outer-custom-el');
      await customElements.whenDefined('inner-custom-el');
      const button = document.querySelector('outer-custom-el').shadowRoot.querySelector('inner-custom-el');
      const rect = button.getBoundingClientRect();
      if (window.eventSender) {
        // The action below triggers the hover behaviour. In combination with the styles defined earlier,
        // this triggers styleForContainer and used to crash.
        eventSender.mouseMoveTo(rect.x + rect.width / 2, rect.y + rect.height / 2);
      }
      testRunner.notifyDone();
    };
  </script>
</html>