mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-12-02 10:00:54 +00:00
Bug 1259344 - Move play()/cancel()/playstate tests to web platform tests. r=birtles
This commit is contained in:
parent
e44580c5fd
commit
bbda165351
@ -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>
|
|
@ -73,17 +73,6 @@ test(function(t) {
|
|||||||
assert_equals(animation.playState, 'idle');
|
assert_equals(animation.playState, 'idle');
|
||||||
}, 'Animation returns correct playState when cancelled');
|
}, '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();
|
done();
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</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-play.html");
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</html>
|
|
@ -12,7 +12,6 @@ support-files =
|
|||||||
css-animations/file_animation-oncancel.html
|
css-animations/file_animation-oncancel.html
|
||||||
css-animations/file_animation-onfinish.html
|
css-animations/file_animation-onfinish.html
|
||||||
css-animations/file_animation-pausing.html
|
css-animations/file_animation-pausing.html
|
||||||
css-animations/file_animation-play.html
|
|
||||||
css-animations/file_animation-playstate.html
|
css-animations/file_animation-playstate.html
|
||||||
css-animations/file_animation-ready.html
|
css-animations/file_animation-ready.html
|
||||||
css-animations/file_animation-reverse.html
|
css-animations/file_animation-reverse.html
|
||||||
@ -53,7 +52,6 @@ support-files =
|
|||||||
[css-animations/test_animation-oncancel.html]
|
[css-animations/test_animation-oncancel.html]
|
||||||
[css-animations/test_animation-onfinish.html]
|
[css-animations/test_animation-onfinish.html]
|
||||||
[css-animations/test_animation-pausing.html]
|
[css-animations/test_animation-pausing.html]
|
||||||
[css-animations/test_animation-play.html]
|
|
||||||
[css-animations/test_animation-playstate.html]
|
[css-animations/test_animation-playstate.html]
|
||||||
[css-animations/test_animation-ready.html]
|
[css-animations/test_animation-ready.html]
|
||||||
[css-animations/test_animation-reverse.html]
|
[css-animations/test_animation-reverse.html]
|
||||||
|
@ -28429,6 +28429,10 @@
|
|||||||
"path": "web-animations/animation-timeline/idlharness.html",
|
"path": "web-animations/animation-timeline/idlharness.html",
|
||||||
"url": "/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",
|
"path": "web-animations/animation/constructor.html",
|
||||||
"url": "/web-animations/animation/constructor.html"
|
"url": "/web-animations/animation/constructor.html"
|
||||||
@ -28437,10 +28441,18 @@
|
|||||||
"path": "web-animations/animation/finish.html",
|
"path": "web-animations/animation/finish.html",
|
||||||
"url": "/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",
|
"path": "web-animations/animation/playbackRate.html",
|
||||||
"url": "/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",
|
"path": "web-animations/keyframe-effect/constructor.html",
|
||||||
"url": "/web-animations/keyframe-effect/constructor.html"
|
"url": "/web-animations/keyframe-effect/constructor.html"
|
||||||
|
@ -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>
|
@ -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>
|
@ -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>
|
Loading…
Reference in New Issue
Block a user