ladybird/Tests/LibWeb/Text/input/WebAnimations/misc/steps-serialization.html

35 lines
1.2 KiB
HTML

<!DOCTYPE html>
<script src="../../include.js"></script>
<script>
test(() => {
const div = document.createElement('div');
div.style.width = '50px';
div.style.height = '50px';
div.style.backgroundColor = 'red';
div.style.animation = 'test-animation 2s infinite';
document.body.appendChild(div);
const testCases = [
{ input: 'steps(1, jump-none)' },
{ input: 'steps(1, start)' },
{ input: 'steps(1)' }, // Equivalent to steps(1, end)
{ input: 'steps(4, jump-both)' },
{ input: 'steps(2, jump-start)' },
{ input: 'steps(3, end)' }, // Implicitly steps(3)
{ input: 'steps(5, start)' },
{ input: 'steps(6, jump-none)' },
{ input: 'steps(10, jump-both)' },
{ input: 'steps(1, jump-end)' }, // Implicitly steps(1)
];
testCases.forEach(({ input }) => {
div.style.animationTimingFunction = input;
const computed = getComputedStyle(div).animationTimingFunction;
println(`Input: ${input}, Computed: ${computed}`);
});
document.body.removeChild(div);
});
</script>