ladybird/Tests/LibWeb/Text/input/WebAnimations/misc/parse-animation-timing-function-steps.html

27 lines
No EOL
759 B
HTML

<!DOCTYPE html>
<style>
@keyframes test-animation {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
.animate {
animation: test-animation 2s steps(1, jump-none) infinite;
}
</style>
<div class="box animate" style="width: 50px; height: 50px; background-color: red;"></div>
<script src="../../include.js"></script>
<script>
test(() => {
// Apply animation dynamically to trigger re-computation.
document.querySelector('.box').classList.add('animate');
// Log computed style to confirm the animation is parsed and applied correctly.
const animation = getComputedStyle(document.querySelector('.box')).animationTimingFunction;
println('Computed animation-timing-function: ' + animation);
});
</script>