shadow-part-with-class.html (1413B)
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 view-transition-class: green; 17 } 18 19 :root { view-transition-name: none; } 20 html::view-transition-group(*) { animation-play-state: paused; } 21 html::view-transition-old(*) { animation: unset; opacity: 0 } 22 html::view-transition-new(*) { animation: unset; opacity: 0 } 23 html::view-transition-group(party) { 24 position: absolute; 25 width: 100px; 26 height: 100px; 27 background: yellow; 28 } 29 html::view-transition-group(party.red) { 30 background: red; 31 } 32 html::view-transition-group(party.green) { 33 background: green; 34 } 35 </style> 36 37 <custom-component> 38 <template shadowrootmode="open"> 39 <style> 40 div { 41 width: 100px; 42 height: 100px; 43 } 44 </style> 45 <div part="party" style="view-transition-class: red"></div> 46 </template> 47 </custom-component> 48 49 <script> 50 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 51 52 function runTest() { 53 document.startViewTransition().ready.then(takeScreenshot); 54 } 55 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 56 </script> 57 58 </body>