to-scale-zero.html (1355B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <link rel="match" href="empty-ref.html"> 7 <title>Scoped view-transition to scale 0</title> 8 <!-- TODO update link --> 9 <link rel="help" href="https://www.w3.org/TR/css-view-transitions-2/"> 10 </head> 11 <script src="/common/reftest-wait.js"></script> 12 <script src="/dom/events/scrolling/scroll_support.js"></script> 13 <style> 14 #target { 15 background-color: blue; 16 height: 100px; 17 width: 100px; 18 position: relative; 19 view-transition-name: target; 20 z-index: 1; 21 } 22 .collapsed { 23 transform: scale(0); 24 } 25 26 ::view-transition-old(target) { 27 animation: -ua-view-transition-fade-out 1s -0.5s linear paused; 28 } 29 30 ::view-transition-new(target) { 31 animation: -ua-view-transition-fade-in 1s -0.5s linear paused; 32 } 33 </style> 34 <body> 35 <div id="target"></div> 36 </body> 37 <script> 38 failIfNot(Element.prototype.startViewTransition, 39 "Missing element.startViewTransition"); 40 41 window.onload = async () => { 42 const target = document.getElementById('target'); 43 await waitForCompositorReady(); 44 const vt = target.startViewTransition(() => { 45 target.classList.toggle('collapsed'); 46 }); 47 await vt.ready; 48 requestAnimationFrame(takeScreenshot); 49 }; 50 </script> 51 </html>