<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');
});
</script>
</body>
