tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

scale-animation-on-svg.html (789B)


      1 <!DOCTYPE html>
      2 <html class="reftest-wait">
      3 <head>
      4 <title>Animating the "scale" property on an SVG element</title>
      5 <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms">
      6 <link rel="match" href="scale-animation-on-svg-ref.html">
      7 
      8 <style>
      9 
     10 @keyframes scale-animation {
     11    from { scale: 1; }
     12    to   { scale: 2; }
     13 }
     14 
     15 svg {
     16    width: 400px;
     17    height: 400px;
     18 }
     19 
     20 rect {
     21    width: 100px;
     22    height: 100px;
     23    transform-origin: top left;
     24    animation: scale-animation 1ms linear forwards;
     25 }
     26 
     27 </style>
     28 </head>
     29 <body>
     30 <svg><rect></rect></svg>
     31 
     32 <script>
     33 
     34 (async function() {
     35    await Promise.all(document.getAnimations().map(animation => animation.finished));
     36    document.documentElement.classList.remove("reftest-wait");
     37 })();
     38 
     39 </script>
     40 </body>
     41 </html>