| <!DOCTYPE html> |
| <html class="reftest-wait"> |
| <title>Transform animation under large scale</title> |
| <link rel="author" title="Kevin Ellis" href="mailto:kevers@chromium.org"> |
| <link rel="help" href="https://crbug.com/1221622"> |
| <link rel="match" href="flip-running-animation-via-variable-ref.html"> |
| <script src="/common/reftest-wait.js"></script> |
| <style> |
| @keyframes spin { |
| 0% { transform: scaleX(var(--scale)) rotate(0deg); } |
| 100% { transform: scaleX(var(--scale)) rotate(180deg); } |
| } |
| |
| html { |
| --scale: 1; |
| } |
| |
| html.tweaked { |
| --scale: -1; |
| } |
| |
| #container { |
| display: inline-block; |
| margin-left: 150px; |
| padding: 0; |
| /* Force animation to be effectively frozen at 50% progress. */ |
| animation: spin 1000000s cubic-bezier(0, 1, 1, 0) -500000s; |
| } |
| |
| #block-1 { |
| background: blue; |
| height: 200px; |
| width: 100px; |
| } |
| |
| #block-2 { |
| background: green; |
| height: 100px; |
| width: 100px; |
| } |
| </style> |
| |
| <body> |
| <div id="container"> |
| <div id="block-1"></div> |
| <div id="block-2"></div> |
| </div> |
| </body> |
| |
| <script> |
| window.onload = () => { |
| const anim = document.getAnimations()[0]; |
| anim.ready.then(() => { |
| requestAnimationFrame(() => { |
| requestAnimationFrame(() => { |
| document.querySelector('html').classList.add('tweaked'); |
| requestAnimationFrame(() => { |
| requestAnimationFrame(() => { |
| takeScreenshot(); |
| }); |
| }); |
| }); |
| }); |
| }); |
| }; |
| </script> |
| </html> |