Bug 1259344 - Move play()/cancel()/playstate tests to web platform tests. r=birtles

This commit is contained in:
Mantaroh Yoshinaga 2016-04-04 21:57:00 +02:00
parent e44580c5fd
commit bbda165351
8 changed files with 162 additions and 63 deletions

View File

@ -1,35 +0,0 @@
<!doctype html>
<meta charset=utf-8>
<script src="../testcommon.js"></script>
<style>
@keyframes abc {
to { transform: translate(10px) }
}
</style>
<body>
<script>
'use strict';
async_test(function(t) {
var div = addDiv(t, { style: 'animation: abc 100s infinite' });
var animation = div.getAnimations()[0];
animation.ready.then(t.step_func(function() {
// Seek to a time outside the active range so that play() will have to
// snap back to the start
animation.currentTime = -5000;
animation.playbackRate = -1;
assert_throws('InvalidStateError',
function () { animation.play(); },
'Expect InvalidStateError exception on calling play() ' +
'with a negative playbackRate and infinite-duration ' +
'animation');
t.done();
}));
}, 'play() throws when seeking an infinite-duration animation played in ' +
'reverse');
done();
</script>
</body>

View File

@ -73,17 +73,6 @@ test(function(t) {
assert_equals(animation.playState, 'idle');
}, 'Animation returns correct playState when cancelled');
test(function(t) {
var div = addDiv(t);
div.style.animation = 'anim 1000s';
var animation = div.getAnimations()[0];
animation.cancel();
animation.currentTime = 50 * 1000;
assert_equals(animation.playState, 'paused',
'After seeking an idle animation, it is effectively paused');
}, 'After cancelling an animation, seeking it makes it paused');
done();
</script>
</body>

View File

@ -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-play.html");
});
</script>
</html>

View File

@ -12,7 +12,6 @@ support-files =
css-animations/file_animation-oncancel.html
css-animations/file_animation-onfinish.html
css-animations/file_animation-pausing.html
css-animations/file_animation-play.html
css-animations/file_animation-playstate.html
css-animations/file_animation-ready.html
css-animations/file_animation-reverse.html
@ -53,7 +52,6 @@ support-files =
[css-animations/test_animation-oncancel.html]
[css-animations/test_animation-onfinish.html]
[css-animations/test_animation-pausing.html]
[css-animations/test_animation-play.html]
[css-animations/test_animation-playstate.html]
[css-animations/test_animation-ready.html]
[css-animations/test_animation-reverse.html]

View File

@ -28429,6 +28429,10 @@
"path": "web-animations/animation-timeline/idlharness.html",
"url": "/web-animations/animation-timeline/idlharness.html"
},
{
"path": "web-animations/animation/cancel.html",
"url": "/web-animations/animation/cancel.html"
},
{
"path": "web-animations/animation/constructor.html",
"url": "/web-animations/animation/constructor.html"
@ -28437,10 +28441,18 @@
"path": "web-animations/animation/finish.html",
"url": "/web-animations/animation/finish.html"
},
{
"path": "web-animations/animation/play.html",
"url": "/web-animations/animation/play.html"
},
{
"path": "web-animations/animation/playbackRate.html",
"url": "/web-animations/animation/playbackRate.html"
},
{
"path": "web-animations/animation/playState.html",
"url": "/web-animations/animation/playState.html"
},
{
"path": "web-animations/keyframe-effect/constructor.html",
"url": "/web-animations/keyframe-effect/constructor.html"

View File

@ -0,0 +1,61 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Animation.cancel()</title>
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animation-cancel">
<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';
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate({transform: ['none', 'translate(100px)']},
100 * MS_PER_SEC);
return animation.ready.then(function() {
assert_not_equals(getComputedStyle(div).transform, 'none',
'transform style is animated before cancelling');
animation.cancel();
assert_equals(getComputedStyle(div).transform, 'none',
'transform style is no longer animated after cancelling');
});
}, 'Animated style is cleared after calling Animation.cancel()');
test(function(t) {
var div = createDiv(t);
var animation = div.animate({marginLeft: ['0px', '100px']},
100 * MS_PER_SEC);
animation.effect.timing.easing = 'linear';
animation.cancel();
assert_equals(getComputedStyle(div).marginLeft, '0px',
'margin-left style is not animated after cancelling');
animation.currentTime = 50 * MS_PER_SEC;
assert_equals(getComputedStyle(div).marginLeft, '50px',
'margin-left style is updated when cancelled animation is'
+ ' seeked');
}, 'After cancelling an animation, it can still be seeked');
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate({marginLeft:['100px', '200px']},
100 * MS_PER_SEC);
return animation.ready.then(function() {
animation.cancel();
assert_equals(getComputedStyle(div).marginLeft, '0px',
'margin-left style is not animated after cancelling');
animation.play();
assert_equals(getComputedStyle(div).marginLeft, '100px',
'margin-left style is animated after re-starting animation');
return animation.ready;
}).then(function() {
assert_equals(animation.playState, 'running',
'Animation succeeds in running after being re-started');
});
}, 'After cancelling an animation, it can still be re-used');
</script>
</body>

View File

@ -0,0 +1,35 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Animation.play()</title>
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animation-play">
<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';
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate({ transform: ['none', 'translate(10px)']},
{ duration : 100 * MS_PER_SEC,
iterations : Infinity});
return animation.ready.then(function() {
// Seek to a time outside the active range so that play() will have to
// snap back to the start
animation.currentTime = -5 * MS_PER_SEC;
animation.playbackRate = -1;
assert_throws('InvalidStateError',
function () { animation.play(); },
'Expected InvalidStateError exception on calling play() ' +
'with a negative playbackRate and infinite-duration ' +
'animation');
});
}, 'play() throws when seeking an infinite-duration animation played in ' +
'reverse');
</script>
</body>

View File

@ -0,0 +1,54 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Animation.playState</title>
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animation-playstate">
<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';
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
assert_equals(animation.playState, 'pending');
return animation.ready.then(function() {
assert_equals(animation.playState, 'running');
});
}, 'Animation.playState reports \'pending\'->\'running\' when initially ' +
'played');
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
animation.pause();
assert_equals(animation.playState, 'pending');
return animation.ready.then(function() {
assert_equals(animation.playState, 'paused');
});
}, 'Animation.playState reports \'pending\'->\'paused\' when pausing');
test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
animation.cancel();
assert_equals(animation.playState, 'idle');
}, 'Animation.playState is \'idle\' when canceled.');
test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
animation.cancel();
animation.currentTime = 50 * MS_PER_SEC;
assert_equals(animation.playState, 'paused',
'After seeking an idle animation, it is effectively paused');
}, 'Animation.playState is \'paused\' after cancelling an animation, ' +
'seeking it makes it paused');
</script>
</body>