flip-running-animation-via-variable.html (1421B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>Transform animation under large scale</title> 4 <link rel="author" title="Kevin Ellis" href="mailto:kevers@chromium.org"> 5 <link rel="help" href="https://crbug.com/1221622"> 6 <link rel="match" href="flip-running-animation-via-variable-ref.html"> 7 <script src="/common/reftest-wait.js"></script> 8 <style> 9 @keyframes spin { 10 0% { transform: scaleX(var(--scale)) rotate(0deg); } 11 100% { transform: scaleX(var(--scale)) rotate(180deg); } 12 } 13 14 html { 15 --scale: 1; 16 } 17 18 html.tweaked { 19 --scale: -1; 20 } 21 22 #container { 23 display: inline-block; 24 margin-left: 150px; 25 padding: 0; 26 /* Force animation to be effectively frozen at 50% progress. */ 27 animation: spin 1000000s cubic-bezier(0, 1, 1, 0) -500000s; 28 } 29 30 #block-1 { 31 background: blue; 32 height: 200px; 33 width: 100px; 34 } 35 36 #block-2 { 37 background: green; 38 height: 100px; 39 width: 100px; 40 } 41 </style> 42 43 <body> 44 <div id="container"> 45 <div id="block-1"></div> 46 <div id="block-2"></div> 47 </div> 48 </body> 49 50 <script> 51 window.onload = () => { 52 const anim = document.getAnimations()[0]; 53 anim.ready.then(() => { 54 requestAnimationFrame(() => { 55 requestAnimationFrame(() => { 56 document.querySelector('html').classList.add('tweaked'); 57 requestAnimationFrame(() => { 58 requestAnimationFrame(() => { 59 takeScreenshot(); 60 }); 61 }); 62 }); 63 }); 64 }); 65 }; 66 </script> 67 </html>