shadow-dom.html - mozsearch

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-view-transitions/scoped/shadow-dom.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html class=reftest-wait>

<head>

<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">

<link rel="match" href="shadow-dom-ref.html">

<script src="/common/reftest-wait.js"></script>

<script src="/web-animations/testcommon.js"></script>

</head>

<body>

<my-el id=c></my-el>

<script>

  const ss = new CSSStyleSheet();

  ss.replaceSync(`

    #scope { contain: strict; position: relative;

             background: red; width: 100px; height: 100px;

             view-transition-name: none; }

    #part { view-transition-name: foo; background: blue;

            margin: 25px; width: 50px; height: 50px; }

    #scope::view-transition { background: lightgrey; }

    #scope::view-transition-group(foo) { animation-play-state: paused; }

    #scope::view-transition-new(foo) { animation: unset; opacity: 1; }

    #scope::view-transition-old(foo) { animation: unset; opacity: 0; }

`);

  customElements.define('my-el', class extends HTMLElement {

    #shadow = this.attachShadow({ mode: "open" });

    connectedCallback() {

      this.#shadow.adoptedStyleSheets.push(ss);

      this.#shadow.innerHTML = `

        <div id=scope>

          <div id=part></div>

        </div>

`;

    play() {

      const scope = this.#shadow.querySelector("#scope");

      return scope.startViewTransition(() => {});

});

  onload = async () => {

    await waitForCompositorReady();

    await c.play().ready;

    requestAnimationFrame(takeScreenshot);

</script>

</body>

</html>