mirror of
https://github.com/servo/servo.git
synced 2025-06-28 11:03:39 +01:00
174 lines
4.9 KiB
HTML
174 lines
4.9 KiB
HTML
<!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>
|