| <style> |
| .box { |
| width: 100px; |
| height: 100px; |
| background-color: red; |
| } |
| .hover { |
| background: url("data:image/svg+xml;charset=utf8, \ |
| %3Csvg xmlns='http://www.w3.org/2000/svg'%3E \ |
| %3Cstyle%3E \ |
| @keyframes fadein { \ |
| from { opacity:0; } \ |
| to { opacity:1; } \ |
| } \ |
| %23green { \ |
| animation: fadein 16ms; \ |
| } \ |
| %3C/style%3E \ |
| %3Crect width='100%' height='100%' fill='red'/%3E \ |
| %3Crect id='green' width='100%' height='100%' fill='green'/%3E \ |
| %3C/svg%3E"); |
| } |
| </style> |
| <body> |
| <div class="box"></div> |
| <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(); |
| } |
| |
| var box = document.querySelector(".box"); |
| box.classList.add('hover'); |
| window.requestAnimationFrame(animate); |
| }); |
| </script> |
| </body> |
