<!doctype html> <meta charset=utf-8> <title>AnimationEffect.updateTiming() for CSS animations</title> <!-- TODO: Add a more specific link for this once it is specified. --> <link rel="help" href="https://drafts.csswg.org/css-animations-2/"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="support/testcommon.js"></script> <style> @keyframes anim-empty { } </style> <body> <div id="log"></div> <script> "use strict"; test(t => { const div = addDiv(t); div.style.animation = 'anim-empty 100s'; const animation = div.getAnimations()[0]; animation.effect.updateTiming({ duration: 2 * MS_PER_SEC }); div.style.animationDuration = '4s'; div.style.animationDelay = '6s'; assert_equals( animation.effect.getTiming().duration, 2 * MS_PER_SEC, 'Duration should be the value set by the API' ); assert_equals( animation.effect.getTiming().delay, 6 * MS_PER_SEC, 'Delay should be the value set by style' ); }, 'AnimationEffect.updateTiming({ duration }) causes changes to the' + ' animation-duration to be ignored'); // The above test covers duration (with delay as a control). The remaining // properties are: // // iterations - animation-iteration-count // direction - animation-direction // delay - animation-delay // fill - animation-fill-mode // // Which we test in two batches, overriding two properties each time and using // the remaining two properties as control values to check they are NOT // overridden. test(t => { const div = addDiv(t); div.style.animation = 'anim-empty 100s'; const animation = div.getAnimations()[0]; animation.effect.updateTiming({ iterations: 2, direction: 'reverse' }); div.style.animationIterationCount = '4'; div.style.animationDirection = 'alternate'; div.style.animationDelay = '6s'; div.style.animationFillMode = 'both'; assert_equals( animation.effect.getTiming().iterations, 2, 'Iterations should be the value set by the API' ); assert_equals( animation.effect.getTiming().direction, 'reverse', 'Direction should be the value set by the API' ); assert_equals( animation.effect.getTiming().delay, 6 * MS_PER_SEC, 'Delay should be the value set by style' ); assert_equals( animation.effect.getTiming().fill, 'both', 'Fill should be the value set by style' ); }, 'AnimationEffect.updateTiming({ iterations, direction }) causes changes to' + ' the animation-iteration-count and animation-direction to be ignored'); test(t => { const div = addDiv(t); div.style.animation = 'anim-empty 100s'; const animation = div.getAnimations()[0]; animation.effect.updateTiming({ delay: 2 * MS_PER_SEC, fill: 'both' }); div.style.animationDelay = '4s'; div.style.animationFillMode = 'forwards'; div.style.animationIterationCount = '6'; div.style.animationDirection = 'reverse'; assert_equals( animation.effect.getTiming().delay, 2 * MS_PER_SEC, 'Delay should be the value set by the API' ); assert_equals( animation.effect.getTiming().fill, 'both', 'Fill should be the value set by the API' ); assert_equals( animation.effect.getTiming().iterations, 6, 'Iterations should be the value set by style' ); assert_equals( animation.effect.getTiming().direction, 'reverse', 'Direction should be the value set by style' ); }, 'AnimationEffect.updateTiming({ delay, fill }) causes changes to' + ' the animation-delay and animation-fill-mode to be ignored'); test(t => { const div = addDiv(t); div.style.animation = 'anim-empty 100s'; const animation = div.getAnimations()[0]; assert_throws_js(TypeError, () => { animation.effect.updateTiming({ duration: 2 * MS_PER_SEC, iterations: -1 }); }, 'Negative iteration count should cause an error to be thrown'); div.style.animationDuration = '4s'; assert_equals( animation.effect.getTiming().duration, 4 * MS_PER_SEC, 'Duration should be the value set by style' ); }, 'AnimationEffect.updateTiming() does override to changes from animation-*' + ' properties if there is an error'); test(t => { const div = addDiv(t); div.style.animation = 'anim-empty 100s'; const animation = div.getAnimations()[0]; animation.effect.updateTiming({ easing: 'steps(4)', endDelay: 2 * MS_PER_SEC, iterationStart: 4, }); div.style.animationDuration = '6s'; div.style.animationTimingFunction = 'ease-in'; assert_equals( animation.effect.getTiming().easing, 'steps(4)', 'endDelay should be the value set by the API' ); assert_equals( animation.effect.getTiming().endDelay, 2 * MS_PER_SEC, 'endDelay should be the value set by the API' ); assert_equals( animation.effect.getTiming().iterationStart, 4, 'iterationStart should be the value set by style' ); }, 'AnimationEffect properties that do not map to animation-* properties' + ' should not be changed when animation-* style is updated'); </script> </body>