<!doctype html> <meta charset=utf-8> <title>CSS Animation Test: fractional animation-iteration-count</title> <link rel="help" href="https://drafts.csswg.org/css-animations/#animation-iteration-count"> <link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="support/testcommon.js"></script> <style> @keyframes margin-animation { from { margin-left: 0px; } to { margin-left: 100px; } } </style> <div id="log"></div> <script> 'use strict'; promise_test(async t => { const div = addDiv(t); div.style.animation = 'margin-animation 1s -10s linear 1.5 normal forwards paused'; assert_equals(getComputedStyle(div).marginLeft, '50px'); }, 'Basic floating point iteration count'); promise_test(async t => { const div = addDiv(t); div.style.animation = 'margin-animation 1s -10s linear 3.25 normal forwards paused'; assert_equals(getComputedStyle(div).marginLeft, '25px'); }, 'Floating point iteration count after multiple iterations'); promise_test(async t => { const div = addDiv(t); div.style.animation = 'margin-animation 1s -10s linear 0.75 normal forwards paused'; assert_equals(getComputedStyle(div).marginLeft, '75px'); }, 'Floating point iteration count during first iteration'); promise_test(async t => { const div = addDiv(t); div.style.animation = 'margin-animation 1s -10s linear 1.75 alternate forwards paused'; assert_equals(getComputedStyle(div).marginLeft, '25px'); }, 'Floating point iteration count with alternating directions'); </script>