rotation-on-scoped-element.html (981B)
1 <!DOCTYPE html> 2 <html class="test-wait"> 3 <head> 4 <meta charset="utf-8"> 5 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/"> 6 <link rel="match" href="rotation-on-scoped-element-ref.html"> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <meta name="fuzzy" content="maxDifference=0-150;totalPixels=0-2000"> 9 </head> 10 <style> 11 #target { 12 background-color: purple; 13 transform: rotate(45deg); 14 width: 200px; 15 height: 200px; 16 margin: 100px; 17 } 18 #target.updated { 19 background: green; 20 } 21 </style> 22 <body> 23 <div id="target"></div> 24 </body> 25 <script> 26 window.onload = async () => { 27 const vt = target.startViewTransition(() => { 28 target.classList.add('updated'); 29 }); 30 await vt.ready; 31 document.getAnimations().forEach(anim => { 32 anim.finish(); 33 anim.pause(); 34 }); 35 requestAnimationFrame(() => { 36 document.documentElement.classList.remove('test-wait'); 37 }); 38 }; 39 </script> 40 </html>