minerva/Tests/LibWeb/Text/input/WebAnimations/misc/parse-animation-timing-function-steps.html at master

ErisCyan / minerva

Find file

Newer

Older

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

minerva on 13 Jul 759 bytes Initial commit

Raw Blame History

<!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>