shadow-part-with-class-inside-shadow.html (1314B)
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 html::view-transition-group(party.red) { 29 background: red; 30 } 31 </style> 32 33 <custom-component> 34 <template shadowrootmode="open"> 35 <style> 36 div { 37 width: 100px; 38 height: 100px; 39 } 40 </style> 41 <div part="party" style="view-transition-class: red"></div> 42 </template> 43 </custom-component> 44 45 <script> 46 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 47 48 function runTest() { 49 document.startViewTransition().ready.then(takeScreenshot); 50 } 51 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 52 </script> 53 54 </body>