зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1244643 - Part 2: Append tests for easing. r=hiro
MozReview-Commit-ID: 3RYWjsViwJZ --HG-- extra : rebase_source : fd62be7ed619ab846d04691ac2c0a64701e71ff4
This commit is contained in:
Daisuke Akatsuka
Родитель
f9df5acae8
Коммит
0250695f7d
|
|
@ -1669,6 +1669,29 @@ addAsyncAnimTest("change_delay",
|
|||
"records after animation end");
|
||||
});
|
||||
|
||||
addAsyncAnimTest("change_easing",
|
||||
{ observe: div, subtree: true }, function*() {
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: "steps(2, start)" });
|
||||
|
||||
yield await_frame();
|
||||
assert_records([{ added: [anim], changed: [], removed: [] }],
|
||||
"records after animation is added");
|
||||
|
||||
anim.effect.timing.easing = "steps(2, end)";
|
||||
yield await_frame();
|
||||
assert_records([{ added: [], changed: [anim], removed: [] }],
|
||||
"records after easing is changed");
|
||||
|
||||
anim.effect.timing.easing = "steps(2, end)";
|
||||
yield await_frame();
|
||||
assert_records([], "records after assigning same value");
|
||||
|
||||
anim.cancel();
|
||||
yield await_frame();
|
||||
});
|
||||
|
||||
addAsyncAnimTest("negative_delay_in_constructor",
|
||||
{ observe: div, subtree: true }, function*() {
|
||||
var anim = div.animate({ opacity: [ 0, 1 ] },
|
||||
|
|
|
|||
|
|
@ -28745,6 +28745,10 @@
|
|||
"path": "web-animations/animation-effect-timing/duration.html",
|
||||
"url": "/web-animations/animation-effect-timing/duration.html"
|
||||
},
|
||||
{
|
||||
"path": "web-animations/animation-effect-timing/easing.html",
|
||||
"url": "/web-animations/animation-effect-timing/easing.html"
|
||||
},
|
||||
{
|
||||
"path": "web-animations/animation-effect-timing/endDelay.html",
|
||||
"url": "/web-animations/animation-effect-timing/endDelay.html"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,126 @@
|
|||
<!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>
|
||||
<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');
|
||||
}
|
||||
|
||||
var gEffectEasingTests = [
|
||||
{
|
||||
desc: 'steps(start) function',
|
||||
easing: 'steps(2, start)',
|
||||
easingFunction: stepStart(2)
|
||||
},
|
||||
{
|
||||
desc: 'steps(end) function',
|
||||
easing: 'steps(2, end)',
|
||||
easingFunction: stepEnd(2)
|
||||
},
|
||||
{
|
||||
desc: 'linear function',
|
||||
easing: 'linear', // cubic-bezier(0, 0, 1.0, 1.0)
|
||||
easingFunction: cubicBezier(0, 0, 1.0, 1.0)
|
||||
},
|
||||
{
|
||||
desc: 'ease function',
|
||||
easing: 'ease', // cubic-bezier(0.25, 0.1, 0.25, 1.0)
|
||||
easingFunction: cubicBezier(0.25, 0.1, 0.25, 1.0)
|
||||
},
|
||||
{
|
||||
desc: 'ease-in function',
|
||||
easing: 'ease-in', // cubic-bezier(0.42, 0, 1.0, 1.0)
|
||||
easingFunction: cubicBezier(0.42, 0, 1.0, 1.0)
|
||||
},
|
||||
{
|
||||
desc: 'ease-in-out function',
|
||||
easing: 'ease-in-out', // cubic-bezier(0.42, 0, 0.58, 1.0)
|
||||
easingFunction: cubicBezier(0.42, 0, 0.58, 1.0)
|
||||
},
|
||||
{
|
||||
desc: 'ease-out function',
|
||||
easing: 'ease-out', // cubic-bezier(0, 0, 0.58, 1.0)
|
||||
easingFunction: cubicBezier(0, 0, 0.58, 1.0)
|
||||
},
|
||||
{
|
||||
desc: 'easing function which produces values greater than 1',
|
||||
easing: 'cubic-bezier(0, 1.5, 1, 1.5)',
|
||||
easingFunction: cubicBezier(0, 1.5, 1, 1.5)
|
||||
}
|
||||
];
|
||||
|
||||
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.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);
|
||||
});
|
||||
|
||||
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 = '';
|
||||
});
|
||||
assert_throws({ name: 'TypeError' },
|
||||
function() {
|
||||
anim.effect.timing.easing = 'test';
|
||||
});
|
||||
}, 'Test invalid easing value');
|
||||
|
||||
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>
|
||||
Загрузка…
Ссылка в новой задаче