| <style> |
| img { |
| width: 100px; |
| height: 100px; |
| } |
| </style> |
| <body> |
| <img src='data:image/svg+xml;utf8, |
| <svg xmlns="http://www.w3.org/2000/svg"> |
| <style> |
| @keyframes fadein { |
| from { opacity:0; } |
| to { opacity:1; } |
| } |
| #green { |
| animation: fadein 16ms; |
| } |
| </style> |
| <rect width="100%" height="100%" fill="red"/> |
| <rect id="green" width="100%" height="100%" fill="green"/> |
| </svg>'> |
| <script> |
| window.addEventListener('load', (event) => { |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| |
| var rAFCount = 0; |
| function animate(timestamp) { |
| if (++rAFCount < 10) |
| window.requestAnimationFrame(animate); |
| else if (window.testRunner) |
| testRunner.notifyDone(); |
| } |
| |
| window.requestAnimationFrame(animate); |
| }); |
| </script> |
| </body> |
