shadow-part-with-name.html (1217B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>View transitions: shadow parts </title> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 5 <link rel="match" href="names-are-tree-scoped-ref.html"> 6 <script src="/common/reftest-wait.js"></script> 7 <style> 8 div { 9 width: 100px; 10 height: 100px; 11 background: red; 12 } 13 14 ::part(party) { 15 view-transition-name: party; 16 } 17 18 :root { view-transition-name: none; } 19 html::view-transition-group(*) { animation-play-state: paused; } 20 html::view-transition-old(*) { animation: unset; opacity: 0 } 21 html::view-transition-new(*) { animation: unset; opacity: 0 } 22 html::view-transition-group(party) { 23 position: absolute; 24 width: 100px; 25 height: 100px; 26 background: green; 27 } 28 </style> 29 30 <custom-component> 31 <template shadowrootmode="open"> 32 <style> 33 div { 34 width: 100px; 35 height: 100px; 36 } 37 </style> 38 <div part="party"></div> 39 </template> 40 </custom-component> 41 42 <script> 43 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 44 45 function runTest() { 46 document.startViewTransition().ready.then(takeScreenshot); 47 } 48 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 49 </script> 50 51 </body>