shadow-dom.html (1508B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <head> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/"> 5 <link rel="match" href="shadow-dom-ref.html"> 6 <script src="/common/reftest-wait.js"></script> 7 <script src="/web-animations/testcommon.js"></script> 8 </head> 9 <body> 10 <my-el id=c></my-el> 11 <script> 12 13 const ss = new CSSStyleSheet(); 14 ss.replaceSync(` 15 #scope { contain: strict; position: relative; 16 background: red; width: 100px; height: 100px; 17 view-transition-name: none; } 18 #part { view-transition-name: foo; background: blue; 19 margin: 25px; width: 50px; height: 50px; } 20 #scope::view-transition { background: lightgrey; } 21 #scope::view-transition-group(foo) { animation-play-state: paused; } 22 #scope::view-transition-new(foo) { animation: unset; opacity: 1; } 23 #scope::view-transition-old(foo) { animation: unset; opacity: 0; } 24 `); 25 26 customElements.define('my-el', class extends HTMLElement { 27 #shadow = this.attachShadow({ mode: "open" }); 28 connectedCallback() { 29 this.#shadow.adoptedStyleSheets.push(ss); 30 this.#shadow.innerHTML = ` 31 <div id=scope> 32 <div id=part></div> 33 </div> 34 `; 35 } 36 play() { 37 const scope = this.#shadow.querySelector("#scope"); 38 return scope.startViewTransition(() => {}); 39 } 40 }); 41 42 onload = async () => { 43 await waitForCompositorReady(); 44 await c.play().ready; 45 requestAnimationFrame(takeScreenshot); 46 } 47 48 </script> 49 </body> 50 </html>