mirror of
https://github.com/servo/servo.git
synced 2025-07-11 01:13:41 +01:00
83 lines
3.2 KiB
HTML
83 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset=utf-8>
|
|
<title>easing tests</title>
|
|
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animationeffecttiming-easing">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="../../testcommon.js"></script>
|
|
<script src="../../resources/effect-easing-tests.js"></script>
|
|
<body>
|
|
<div id="log"></div>
|
|
<script>
|
|
'use strict';
|
|
|
|
function assert_progress(animation, currentTime, easingFunction) {
|
|
animation.currentTime = currentTime;
|
|
var portion = currentTime / animation.effect.timing.duration;
|
|
assert_approx_equals(animation.effect.getComputedTiming().progress,
|
|
easingFunction(portion),
|
|
0.01,
|
|
'The progress of the animation should be approximately ' +
|
|
easingFunction(portion) + ' at ' + currentTime + 'ms');
|
|
}
|
|
|
|
gEffectEasingTests.forEach(function(options) {
|
|
test(function(t) {
|
|
var target = createDiv(t);
|
|
var anim = target.animate([ { opacity: 0 }, { opacity: 1 } ],
|
|
{ duration: 1000 * MS_PER_SEC,
|
|
fill: 'forwards' });
|
|
anim.effect.timing.easing = options.easing;
|
|
assert_equals(anim.effect.timing.easing,
|
|
options.serialization || options.easing);
|
|
|
|
var easing = options.easingFunction;
|
|
assert_progress(anim, 0, easing);
|
|
assert_progress(anim, 250 * MS_PER_SEC, easing);
|
|
assert_progress(anim, 500 * MS_PER_SEC, easing);
|
|
assert_progress(anim, 750 * MS_PER_SEC, easing);
|
|
assert_progress(anim, 1000 * MS_PER_SEC, easing);
|
|
}, options.desc);
|
|
});
|
|
|
|
gInvalidEasingTests.forEach(function(options) {
|
|
test(function(t) {
|
|
var div = createDiv(t);
|
|
var anim = div.animate({ opacity: [ 0, 1 ] }, 100 * MS_PER_SEC);
|
|
assert_throws({ name: 'TypeError' },
|
|
function() {
|
|
anim.effect.timing.easing = options.easing;
|
|
});
|
|
}, 'Invalid effect easing value test: \'' + options.easing + '\'');
|
|
});
|
|
|
|
test(function(t) {
|
|
var delay = 1000 * MS_PER_SEC;
|
|
|
|
var target = createDiv(t);
|
|
var anim = target.animate([ { opacity: 0 }, { opacity: 1 } ],
|
|
{ duration: 1000 * MS_PER_SEC,
|
|
fill: 'both',
|
|
delay: delay,
|
|
easing: 'steps(2, start)' });
|
|
|
|
anim.effect.timing.easing = 'steps(2, end)';
|
|
assert_equals(anim.effect.getComputedTiming().progress, 0,
|
|
'easing replace to steps(2, end) at before phase');
|
|
|
|
anim.currentTime = delay + 750 * MS_PER_SEC;
|
|
assert_equals(anim.effect.getComputedTiming().progress, 0.5,
|
|
'change currentTime to active phase');
|
|
|
|
anim.effect.timing.easing = 'steps(2, start)';
|
|
assert_equals(anim.effect.getComputedTiming().progress, 1,
|
|
'easing replace to steps(2, start) at active phase');
|
|
|
|
anim.currentTime = delay + 1500 * MS_PER_SEC;
|
|
anim.effect.timing.easing = 'steps(2, end)';
|
|
assert_equals(anim.effect.getComputedTiming().progress, 1,
|
|
'easing replace to steps(2, end) again at after phase');
|
|
}, 'Change the easing while the animation is running');
|
|
|
|
</script>
|
|
</body>
|