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