| <style> |
| rect { |
| transition: transform 50ms; |
| transform-box: unset; |
| transform-origin: 0px 0px; |
| fill: green; |
| } |
| |
| rect.animated { |
| transform: rotate(-180deg); |
| } |
| </style> |
| <body> |
| <svg> |
| <rect id="rect" x="-100" y="-100" width="100" height="100" /> |
| </svg> |
| <script> |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| |
| window.addEventListener('load', () => { |
| const rect = document.querySelector('#rect'); |
| rect.classList.add("animated"); |
| |
| rect.addEventListener('transitionend', () => { |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| }); |
| }); |
| </script> |
| </body> |
