Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-animations/AnimationEffect-updateTiming.tentative.html - WPT Dashboard Interop Dashboard
<!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. -->
<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>