| <!DOCTYPE html> |
| <meta charset=utf-8> |
| <title>AnimationEffectTiming.delay</title> |
| <link rel="help" href="https://drafts.csswg.org/web-animations/#dom-animationeffecttiming-delay"> |
| <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.delay, 0); |
| }, 'Has the default value 0'); |
| |
| test(t => { |
| const div = createDiv(t); |
| const anim = div.animate({ opacity: [ 0, 1 ] }, 100); |
| anim.effect.timing.delay = 100; |
| assert_equals(anim.effect.timing.delay, 100, 'set delay 100'); |
| assert_equals(anim.effect.getComputedTiming().delay, 100, |
| 'getComputedTiming() after set delay 100'); |
| }, 'Can be set to a positive number'); |
| |
| test(t => { |
| const div = createDiv(t); |
| const anim = div.animate({ opacity: [ 0, 1 ] }, 100); |
| anim.effect.timing.delay = -100; |
| assert_equals(anim.effect.timing.delay, -100, 'set delay -100'); |
| assert_equals(anim.effect.getComputedTiming().delay, -100, |
| 'getComputedTiming() after set delay -100'); |
| }, 'Can be set to a negative number'); |
| |
| test(t => { |
| const div = createDiv(t); |
| const anim = div.animate({ opacity: [ 0, 1 ] }, 100); |
| anim.effect.timing.delay = 100; |
| assert_equals(anim.effect.getComputedTiming().progress, null); |
| assert_equals(anim.effect.getComputedTiming().currentIteration, null); |
| }, 'Can set a positive delay on an animation without a backwards fill to' |
| + ' make it no longer active'); |
| |
| test(t => { |
| const div = createDiv(t); |
| const anim = div.animate({ opacity: [ 0, 1 ] }, |
| { fill: 'both', |
| duration: 100 }); |
| anim.effect.timing.delay = -50; |
| assert_equals(anim.effect.getComputedTiming().progress, 0.5); |
| }, 'Can set a negative delay to seek into the active interval'); |
| |
| test(t => { |
| const div = createDiv(t); |
| const anim = div.animate({ opacity: [ 0, 1 ] }, |
| { fill: 'both', |
| duration: 100 }); |
| anim.effect.timing.delay = -100; |
| assert_equals(anim.effect.getComputedTiming().progress, 1); |
| assert_equals(anim.effect.getComputedTiming().currentIteration, 0); |
| }, 'Can set a large negative delay to finishing an animation'); |
| |
| test(t => { |
| const div = createDiv(t); |
| const anim = div.animate(null); |
| for (let invalid of [NaN, Infinity]) { |
| assert_throws({ name: 'TypeError' }, () => { |
| anim.effect.timing.delay = invalid; |
| }, `setting ${invalid}`); |
| assert_throws({ name: 'TypeError' }, () => { |
| div.animate({}, { delay: invalid }); |
| }, `animate() with ${invalid}`); |
| } |
| }, 'Throws when setting invalid values'); |
| |
| </script> |
| </body> |
