Bug 1258972 - Move finish and playbackrate mochitest to web platform tests. r=birtles.

This commit is contained in:
Mantaroh Yoshinaga 2016-03-31 18:30:00 +02:00
Родитель 5082e816d8
Коммит 0c861db219
7 изменённых файлов: 252 добавлений и 234 удалений

Просмотреть файл

@ -2,16 +2,10 @@
<meta charset=utf-8>
<script src="../testcommon.js"></script>
<style>
.animated-div {
margin-left: 10px;
}
@keyframes anim {
from { margin-left: 100px; }
to { margin-left: 200px; }
}
</style>
<body>
<script>
@ -21,27 +15,6 @@
const ANIM_PROP_VAL = 'anim 100s';
const ANIM_DURATION = 100000; // ms
test(function(t) {
var div = addDiv(t);
div.style.animation = ANIM_PROP_VAL;
var animation = div.getAnimations()[0];
animation.playbackRate = 0;
var threw = false;
try {
animation.finish();
} catch (e) {
threw = true;
assert_equals(e.name, 'InvalidStateError',
'Exception should be an InvalidStateError exception when ' +
'trying to finish an animation with playbackRate == 0');
}
assert_true(threw,
'Expect InvalidStateError exception trying to finish an ' +
'animation with playbackRate == 0');
}, 'Test exceptions when finishing non-running animation');
test(function(t) {
var div = addDiv(t);
div.style.animation = ANIM_PROP_VAL;
@ -62,67 +35,6 @@ test(function(t) {
'infinite animation');
}, 'Test exceptions when finishing infinite animation');
test(function(t) {
var div = addDiv(t);
div.style.animation = ANIM_PROP_VAL;
var animation = div.getAnimations()[0];
animation.finish();
assert_equals(animation.currentTime, ANIM_DURATION,
'After finishing, the currentTime should be set to the end ' +
'of the active duration');
}, 'Test finishing of animation');
test(function(t) {
var div = addDiv(t);
div.style.animation = ANIM_PROP_VAL;
var animation = div.getAnimations()[0];
animation.currentTime = ANIM_DURATION + 1000; // 1s past effect end
animation.finish();
assert_equals(animation.currentTime, ANIM_DURATION,
'After finishing, the currentTime should be set back to the ' +
'end of the active duration');
}, 'Test finishing of animation with a current time past the effect end');
async_test(function(t) {
var div = addDiv(t);
div.style.animation = ANIM_PROP_VAL;
var animation = div.getAnimations()[0];
animation.currentTime = ANIM_DURATION;
animation.finished.then(t.step_func(function() {
animation.playbackRate = -1;
animation.finish();
assert_equals(animation.currentTime, 0,
'After finishing a reversed animation the currentTime ' +
'should be set to zero');
t.done();
}));
}, 'Test finishing of reversed animation');
async_test(function(t) {
var div = addDiv(t);
div.style.animation = ANIM_PROP_VAL;
var animation = div.getAnimations()[0];
animation.currentTime = ANIM_DURATION;
animation.finished.then(t.step_func(function() {
animation.playbackRate = -1;
animation.currentTime = -1000;
animation.finish();
assert_equals(animation.currentTime, 0,
'After finishing a reversed animation the currentTime ' +
'should be set back to zero');
t.done();
}));
}, 'Test finishing of reversed animation with a current time less than zero');
async_test(function(t) {
var div = addDiv(t);
div.style.animation = ANIM_PROP_VAL + ' paused';
@ -180,86 +92,6 @@ test(function(t) {
'set after calling finish()');
}, 'Test finish() while pause-pending with negative playbackRate');
test(function(t) {
var div = addDiv(t);
div.style.animation = ANIM_PROP_VAL;
var animation = div.getAnimations()[0];
animation.playbackRate = 0.5;
animation.finish();
assert_equals(animation.playState, 'finished',
'The play state of a play-pending animation should become ' +
'"finished" after finish() is called');
assert_approx_equals(animation.startTime,
animation.timeline.currentTime - ANIM_DURATION / 0.5,
0.0001,
'The start time of a play-pending animation should ' +
'be set after calling finish()');
}, 'Test finish() while play-pending');
// FIXME: Add a test for when we are play-pending without an active timeline.
// - In that case even after calling finish() we should still be pending but
// the current time should be updated
async_test(function(t) {
var div = addDiv(t);
div.style.animation = ANIM_PROP_VAL;
var animation = div.getAnimations()[0];
animation.ready.then(t.step_func(function() {
// Trigger pause
animation.pause();
// Then abort
animation.play();
// We are now in the unusual situation of being play-pending whilst having
// a resolved start time. Check that finish() still triggers a transition
// to the finished state immediately.
animation.finish();
assert_equals(animation.playState, 'finished',
'After aborting a pause then calling finish() the play ' +
'state of an animation should become "finished" immediately');
t.done();
}));
}, 'Test finish() during aborted pause');
async_test(function(t) {
var div = addDiv(t, {'class': 'animated-div'});
div.style.animation = ANIM_PROP_VAL;
var animation = div.getAnimations()[0];
animation.ready.then(t.step_func(function() {
animation.finish();
var marginLeft = parseFloat(getComputedStyle(div).marginLeft);
assert_equals(marginLeft, 10,
'The computed style should be reset when finish() is ' +
'called');
t.done();
}));
}, 'Test resetting of computed style');
async_test(function(t) {
var div = addDiv(t, {'class': 'animated-div'});
div.style.animation = ANIM_PROP_VAL;
var animation = div.getAnimations()[0];
var resolvedFinished = false;
animation.finished.then(function() {
resolvedFinished = true;
});
animation.ready.then(function() {
animation.finish();
}).then(t.step_func(function() {
assert_true(resolvedFinished,
'Animation.finished should be resolved soon after ' +
'Animation.finish()');
t.done();
}));
}, 'Test finish() resolves finished promise synchronously');
done();
</script>
</body>

Просмотреть файл

@ -1,15 +0,0 @@
<!doctype html>
<meta charset=utf-8>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="log"></div>
<script>
'use strict';
setup({explicit_done: true});
SpecialPowers.pushPrefEnv(
{ "set": [["dom.animations-api.core.enabled", true]]},
function() {
window.open("file_animation-playbackrate.html");
});
</script>
</html>

Просмотреть файл

@ -27,8 +27,6 @@ support-files = css-animations/file_animation-onfinish.html
support-files = css-animations/file_animation-pausing.html
[css-animations/test_animation-play.html]
support-files = css-animations/file_animation-play.html
[css-animations/test_animation-playbackrate.html]
support-files = css-animations/file_animation-playbackrate.html
[css-animations/test_animation-playstate.html]
support-files = css-animations/file_animation-playstate.html
[css-animations/test_animation-ready.html]

Просмотреть файл

@ -28429,6 +28429,14 @@
"path": "web-animations/animation/constructor.html",
"url": "/web-animations/animation/constructor.html"
},
{
"path": "web-animations/animation/finish.html",
"url": "/web-animations/animation/finish.html"
},
{
"path": "web-animations/animation/playbackRate.html",
"url": "/web-animations/animation/playbackRate.html"
},
{
"path": "web-animations/keyframe-effect/constructor.html",
"url": "/web-animations/keyframe-effect/constructor.html"

Просмотреть файл

@ -0,0 +1,210 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Animation.finish()</title>
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animation-finish">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<link rel="stylesheet" href="/resources/testharness.css">
<body>
<div id="log"></div>
<script>
'use strict';
var gKeyFrames = { 'marginLeft': ['100px', '200px'] };
test(function(t) {
var div = createDiv(t);
var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
animation.playbackRate = 0;
assert_throws({name: 'InvalidStateError'}, function() {
animation.finish();
});
}, 'Test exceptions when finishing non-running animation');
test(function(t) {
var div = createDiv(t);
var animation = div.animate(gKeyFrames,
{duration : 100 * MS_PER_SEC,
iterations : Infinity});
assert_throws({name: 'InvalidStateError'}, function() {
animation.finish();
});
}, 'Test exceptions when finishing infinite animation');
test(function(t) {
var div = createDiv(t);
var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
animation.finish();
assert_equals(animation.currentTime, 100 * MS_PER_SEC,
'After finishing, the currentTime should be set to the end ' +
'of the active duration');
}, 'Test finishing of animation');
test(function(t) {
var div = createDiv(t);
var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
// 1s past effect end
animation.currentTime =
animation.effect.getComputedTiming().endTime + 1 * MS_PER_SEC;
animation.finish();
assert_equals(animation.currentTime, 100 * MS_PER_SEC,
'After finishing, the currentTime should be set back to the ' +
'end of the active duration');
}, 'Test finishing of animation with a current time past the effect end');
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
animation.currentTime = 100 * MS_PER_SEC;
return animation.finished.then(function() {
animation.playbackRate = -1;
animation.finish();
assert_equals(animation.currentTime, 0,
'After finishing a reversed animation the currentTime ' +
'should be set to zero');
});
}, 'Test finishing of reversed animation');
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
animation.currentTime = 100 * MS_PER_SEC;
return animation.finished.then(function() {
animation.playbackRate = -1;
animation.currentTime = -1000;
animation.finish();
assert_equals(animation.currentTime, 0,
'After finishing a reversed animation the currentTime ' +
'should be set back to zero');
});
}, 'Test finishing of reversed animation with a current time less than zero');
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
animation.pause();
return animation.ready.then(function() {
animation.finish();
assert_equals(animation.playState, 'finished',
'The play state of a paused animation should become ' +
'"finished" after finish() is called');
assert_approx_equals(animation.startTime,
animation.timeline.currentTime - 100 * MS_PER_SEC,
0.0001,
'The start time of a paused animation should be set ' +
'after calling finish()');
});
}, 'Test finish() while paused');
test(function(t) {
var div = createDiv(t);
var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
animation.pause();
// Update playbackRate so we can test that the calculated startTime
// respects it
animation.playbackRate = 2;
// While animation is still pause-pending call finish()
animation.finish();
assert_equals(animation.playState, 'finished',
'The play state of a pause-pending animation should become ' +
'"finished" after finish() is called');
assert_approx_equals(animation.startTime,
animation.timeline.currentTime - 100 * MS_PER_SEC / 2,
0.0001,
'The start time of a pause-pending animation should ' +
'be set after calling finish()');
}, 'Test finish() while pause-pending with positive playbackRate');
test(function(t) {
var div = createDiv(t);
var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
animation.pause();
animation.playbackRate = -2;
animation.finish();
assert_equals(animation.playState, 'finished',
'The play state of a pause-pending animation should become ' +
'"finished" after finish() is called');
assert_equals(animation.startTime, animation.timeline.currentTime,
'The start time of a pause-pending animation should be ' +
'set after calling finish()');
}, 'Test finish() while pause-pending with negative playbackRate');
test(function(t) {
var div = createDiv(t);
var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
animation.playbackRate = 0.5;
animation.finish();
assert_equals(animation.playState, 'finished',
'The play state of a play-pending animation should become ' +
'"finished" after finish() is called');
assert_approx_equals(animation.startTime,
animation.timeline.currentTime - 100 * MS_PER_SEC / 0.5,
0.0001,
'The start time of a play-pending animation should ' +
'be set after calling finish()');
}, 'Test finish() while play-pending');
// FIXME: Add a test for when we are play-pending without an active timeline.
// - In that case even after calling finish() we should still be pending but
// the current time should be updated
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
return animation.ready.then(function() {
animation.pause();
animation.play();
// We are now in the unusual situation of being play-pending whilst having
// a resolved start time. Check that finish() still triggers a transition
// to the finished state immediately.
animation.finish();
assert_equals(animation.playState, 'finished',
'After aborting a pause then calling finish() the play ' +
'state of an animation should become "finished" immediately');
});
}, 'Test finish() during aborted pause');
promise_test(function(t) {
var div = createDiv(t);
div.style.marginLeft = '10px';
var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
return animation.ready.then(function() {
animation.finish();
var marginLeft = parseFloat(getComputedStyle(div).marginLeft);
assert_equals(marginLeft, 10,
'The computed style should be reset when finish() is ' +
'called');
});
}, 'Test resetting of computed style');
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC);
var resolvedFinished = false;
animation.finished.then(function() {
resolvedFinished = true;
});
return animation.ready.then(function() {
animation.finish();
}).then(function() {
assert_true(resolvedFinished,
'Animation.finished should be resolved soon after ' +
'Animation.finish()');
});
}, 'Test finish() resolves finished promise synchronously');
</script>
</body>

Просмотреть файл

@ -1,27 +1,23 @@
<!doctype html>
<!DOCTYPE html>
<meta charset=utf-8>
<title>Animation.playbackRate</title>
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animation-playbackrate">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
<style>
div {
/* Make it easier to calculate expected values: */
animation-timing-function: linear ! important;
}
@keyframes anim {
from { margin-left: 100px; }
to { margin-left: 200px; }
}
</style>
<link rel="stylesheet" href="/resources/testharness.css">
<body>
<div id="log"></div>
<script>
'use strict';
"use strict";
var keyFrames = { 'marginLeft': ['100px', '200px'] };
function assert_playbackrate(animation,
previousAnimationCurrentTime,
previousTimelineCurrentTime,
description) {
var accuracy = 0.001; /* accuracy of DOMHighResTimeStamp */
var animationCurrentTimeDifference =
animation.currentTime - previousAnimationCurrentTime;
var timelineCurrentTimeDifference =
@ -33,73 +29,61 @@ function assert_playbackrate(animation,
description);
}
async_test(function(t) {
var div = addDiv(test, {'style': 'animation: anim 10s'});
var animation = div.getAnimations()[0];
animation.ready.then(t.step_func_done(function() {
animation.currentTime = 7000; // ms
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate({keyFrames}, 100 * MS_PER_SEC);
return animation.ready.then(function() {
animation.currentTime = 7 * MS_PER_SEC; // ms
animation.playbackRate = 0.5;
assert_equals(animation.currentTime, 7000,
assert_equals(animation.currentTime, 7 * MS_PER_SEC,
'Reducing Animation.playbackRate should not change the currentTime ' +
'of a playing animation');
animation.playbackRate = 2;
assert_equals(animation.currentTime, 7000,
assert_equals(animation.currentTime, 7 * MS_PER_SEC,
'Increasing Animation.playbackRate should not change the currentTime ' +
'of a playing animation');
}));
});
}, 'Test the initial effect of setting playbackRate on currentTime');
async_test(function(t) {
var div = addDiv(test, {'style': 'animation: anim 100s'});
var animation = div.getAnimations()[0];
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate({keyFrames}, 100 * MS_PER_SEC);
animation.playbackRate = 2;
var previousTimelineCurrentTime;
var previousAnimationCurrentTime;
animation.ready.then(function() {
return animation.ready.then(function() {
previousAnimationCurrentTime = animation.currentTime;
previousTimelineCurrentTime = animation.timeline.currentTime;
return waitForFrame();
}).then(t.step_func_done(function() {
return waitForAnimationFrames(1);
}).then(function() {
assert_playbackrate(animation,
previousAnimationCurrentTime,
previousTimelineCurrentTime,
'animation.currentTime should be 10 times faster than timeline.');
}));
'animation.currentTime should be 2 times faster than timeline.');
});
}, 'Test the effect of setting playbackRate on currentTime');
async_test(function(t) {
var div = addDiv(test, {'style': 'animation: anim 100s'});
var animation = div.getAnimations()[0];
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate({keyFrames}, 100 * MS_PER_SEC);
animation.playbackRate = 2;
var previousTimelineCurrentTime;
var previousAnimationCurrentTime;
animation.ready.then(function() {
return animation.ready.then(function() {
previousAnimationCurrentTime = animation.currentTime;
previousTimelineCurrentTime = animation.timeline.currentTime;
animation.playbackRate = 1;
return waitForFrame();
}).then(t.step_func_done(function() {
return waitForAnimationFrames(1);
}).then(function() {
assert_equals(animation.playbackRate, 1,
'sanity check: animation.playbackRate is still 1.');
assert_playbackrate(animation,
previousAnimationCurrentTime,
previousTimelineCurrentTime,
'animation.currentTime should be the same speed as timeline now.');
}));
});
}, 'Test the effect of setting playbackRate while playing animation');
done();
</script>
</body>

Просмотреть файл

@ -9,6 +9,7 @@ policies and contribution forms [3].
*/
"use strict";
var MS_PER_SEC = 1000;
// creates div element, appends it to the document body and
// removes the created element during test cleanup