ladybird/Tests/LibWeb/Text/input/css/animate-with-many-keyframes.html
2025-06-23 21:01:26 +02:00

39 lines
939 B
HTML

<!DOCTYPE html>
<style>
#foo {
animation: 1s forwards linear anim;
animation-play-state: paused;
position: absolute;
}
@keyframes anim {
0% {
left: 0px;
top: 0px;
}
50% {
left: 100px;
top: 0px;
}
100% {
left: 100px;
top: 100px;
}
}
</style>
<div id="foo"></div>
<script src="../include.js"></script>
<script>
asyncTest(async (done) => {
const foo = document.getElementById("foo");
const anim = foo.getAnimations()[0];
anim.onfinish = function () {
const rect = foo.getBoundingClientRect();
println("rect.left > 0: " + (rect.left > 0));
println("rect.left <= 100: " + (rect.left <= 100));
println("rect.top > 0: " + (rect.top > 0));
done();
};
anim.play();
});
</script>