Blitz - WPT: shadow-dom.html

wpt / css / css-view-transitions / scoped / shadow-dom.html

/css/css-view-transitions/scoped/shadow-dom.html

<!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>

/css/css-view-transitions/scoped/shadow-dom-ref.html

<!DOCTYPE html>
<style>

#scope { contain: strict; position: relative;
         background: lightgrey; width: 100px; height: 100px; }
#part { background: blue; margin: 25px; width: 50px; height: 50px; }

</style>
<div id=scope>
  <div id=part></div>
</div>