animation-iteration-count-009.html (1634B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>CSS Animation Test: fractional animation-iteration-count</title> 4 <link rel="help" href="https://drafts.csswg.org/css-animations/#animation-iteration-count"> 5 <link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="support/testcommon.js"></script> 9 <style> 10 @keyframes margin-animation { 11 from { 12 margin-left: 0px; 13 } 14 to { 15 margin-left: 100px; 16 } 17 } 18 </style> 19 <div id="log"></div> 20 <script> 21 'use strict'; 22 23 promise_test(async t => { 24 const div = addDiv(t); 25 div.style.animation = 'margin-animation 1s -10s linear 1.5 normal forwards paused'; 26 assert_equals(getComputedStyle(div).marginLeft, '50px'); 27 }, 'Basic floating point iteration count'); 28 29 promise_test(async t => { 30 const div = addDiv(t); 31 div.style.animation = 'margin-animation 1s -10s linear 3.25 normal forwards paused'; 32 assert_equals(getComputedStyle(div).marginLeft, '25px'); 33 }, 'Floating point iteration count after multiple iterations'); 34 35 promise_test(async t => { 36 const div = addDiv(t); 37 div.style.animation = 'margin-animation 1s -10s linear 0.75 normal forwards paused'; 38 assert_equals(getComputedStyle(div).marginLeft, '75px'); 39 }, 'Floating point iteration count during first iteration'); 40 41 promise_test(async t => { 42 const div = addDiv(t); 43 div.style.animation = 'margin-animation 1s -10s linear 1.75 alternate forwards paused'; 44 assert_equals(getComputedStyle(div).marginLeft, '25px'); 45 }, 'Floating point iteration count with alternating directions'); 46 </script>