blob: c854c52dd1675f92e0118a67942c48de3ad695ee [file] [log] [blame]
<style>
.box {
width: 100px;
height: 100px;
background: url("data:image/svg+xml;utf8, \
%3Csvg xmlns='http://www.w3.org/2000/svg'%3E \
%3Cstyle%3E \
@keyframes fadein { \
from { opacity:0; } \
to { opacity:1; } \
} \
#green { \
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();
}
window.requestAnimationFrame(animate);
});
</script>
</body>