| <!DOCTYPE html> |
| <meta charset=utf-8> |
| <title>AnimationEffectTiming.iterations</title> |
| <link rel="help" href="https://drafts.csswg.org/web-animations/#dom-animationeffecttiming-iterations"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="../../testcommon.js"></script> |
| <body> |
| <div id="log"></div> |
| <script> |
| 'use strict'; |
| |
| test(t => { |
| const anim = createDiv(t).animate(null); |
| assert_equals(anim.effect.timing.iterations, 1); |
| }, 'Has the default value 1'); |
| |
| test(t => { |
| const div = createDiv(t); |
| const anim = div.animate({ opacity: [ 0, 1 ] }, 2000); |
| anim.effect.timing.iterations = 2; |
| assert_equals(anim.effect.timing.iterations, 2, 'set duration 2'); |
| assert_equals(anim.effect.getComputedTiming().iterations, 2, |
| 'getComputedTiming() after set iterations 2'); |
| }, 'Can be set to a double value'); |
| |
| test(t => { |
| const div = createDiv(t); |
| const anim = div.animate({ opacity: [ 0, 1 ] }, 2000); |
| anim.effect.timing.iterations = Infinity; |
| assert_equals(anim.effect.timing.iterations, Infinity, 'set duration Infinity'); |
| assert_equals(anim.effect.getComputedTiming().iterations, Infinity, |
| 'getComputedTiming() after set iterations Infinity'); |
| }, 'Can be set to infinity'); |
| |
| test(t => { |
| const div = createDiv(t); |
| const anim = div.animate({ opacity: [ 0, 1 ] }, 2000); |
| assert_throws({ name: 'TypeError' }, () => { |
| anim.effect.timing.iterations = -1; |
| }); |
| }, 'Throws when setting a negative number'); |
| |
| test(t => { |
| const div = createDiv(t); |
| const anim = div.animate({ opacity: [ 0, 1 ] }, 2000); |
| assert_throws({ name: 'TypeError' }, () => { |
| anim.effect.timing.iterations = -Infinity; |
| }); |
| }, 'Throws when setting negative infinity'); |
| |
| test(t => { |
| const div = createDiv(t); |
| const anim = div.animate({ opacity: [ 0, 1 ] }, 2000); |
| assert_throws({ name: 'TypeError' }, () => { |
| anim.effect.timing.iterations = NaN; |
| }); |
| }, 'Throws when setting a NaN value'); |
| |
| test(t => { |
| const div = createDiv(t); |
| const anim = div.animate(null, { duration: 100000, fill: 'both' }); |
| |
| anim.finish(); |
| |
| assert_equals(anim.effect.getComputedTiming().progress, 1, |
| 'progress when animation is finished'); |
| assert_equals(anim.effect.getComputedTiming().currentIteration, 0, |
| 'current iteration when animation is finished'); |
| |
| anim.effect.timing.iterations = 2; |
| |
| assert_time_equals_literal(anim.effect.getComputedTiming().progress, |
| 0, |
| 'progress after adding an iteration'); |
| assert_time_equals_literal(anim.effect.getComputedTiming().currentIteration, |
| 1, |
| 'current iteration after adding an iteration'); |
| |
| anim.effect.timing.iterations = 0; |
| |
| assert_equals(anim.effect.getComputedTiming().progress, 0, |
| 'progress after setting iterations to zero'); |
| assert_equals(anim.effect.getComputedTiming().currentIteration, 0, |
| 'current iteration after setting iterations to zero'); |
| |
| anim.effect.timing.iterations = Infinity; |
| |
| assert_equals(anim.effect.getComputedTiming().progress, 0, |
| 'progress after setting iterations to Infinity'); |
| assert_equals(anim.effect.getComputedTiming().currentIteration, 1, |
| 'current iteration after setting iterations to Infinity'); |
| }, 'Can be updated while the animation is in progress'); |
| |
| </script> |
| </body> |
