shadow-part-with-name-nested.html (1341B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>View transitions: nested shadow parts should work with view-transition-name</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 <nested-component exportparts="party"> 33 <style> 34 div { 35 width: 100px; 36 height: 100px; 37 } 38 </style> 39 <div part="party"></div> 40 </nested-component> 41 </template> 42 </custom-component> 43 44 <script> 45 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 46 47 function runTest() { 48 document.startViewTransition().ready.then(takeScreenshot); 49 } 50 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 51 </script> 52 53 </body>