shadow-part-with-name-overridden-by-important.html (1393B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>View transitions: shadow parts should give precedence to !important</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: green; 12 position: absolute; 13 } 14 15 ::part(party) { 16 view-transition-name: animate-me; 17 } 18 19 html { 20 view-transition-name: none; 21 } 22 23 html::view-transition-group(*) { animation-play-state: paused; } 24 html::view-transition-old(*) { animation: unset; opacity: 0 } 25 html::view-transition-new(*) { animation: unset; opacity: 0 } 26 html::view-transition-group(animate-me) { 27 position: absolute; 28 width: 100px; 29 height: 100px; 30 background: red; 31 } 32 </style> 33 34 <div></div> 35 36 <custom-component> 37 <template shadowrootmode="open"> 38 <style> 39 div { 40 width: 100px; 41 height: 100px; 42 position: absolute; 43 view-transition-name: please-dont-animate-me !important; 44 } 45 </style> 46 <div part="party"></div> 47 </template> 48 </custom-component> 49 50 <script> 51 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 52 53 function runTest() { 54 document.startViewTransition().ready.then(takeScreenshot); 55 } 56 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 57 </script> 58 59 </body>