40 lines
1.2 KiB
HTML
40 lines
1.2 KiB
HTML
<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; } \
|
|
} \
|
|
%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();
|
|
}
|
|
|
|
window.requestAnimationFrame(animate);
|
|
});
|
|
</script>
|
|
</body>
|