mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-29 07:42:04 +00:00
Bug 1212720 - Part 2: Tests for document.getAnimations. r=heycam
--HG-- rename : dom/animation/test/css-animations/file_timeline-get-animations.html => dom/animation/test/css-animations/file_document-get-animations.html rename : dom/animation/test/css-animations/test_timeline-get-animations.html => dom/animation/test/css-animations/test_document-get-animations.html rename : dom/animation/test/css-transitions/file_timeline-get-animations.html => dom/animation/test/css-transitions/file_document-get-animations.html rename : dom/animation/test/css-transitions/test_timeline-get-animations.html => dom/animation/test/css-transitions/test_document-get-animations.html
This commit is contained in:
parent
df09492fe4
commit
cd2f747a36
@ -24,7 +24,7 @@
|
||||
'use strict';
|
||||
|
||||
test(function(t) {
|
||||
assert_equals(document.timeline.getAnimations().length, 0,
|
||||
assert_equals(document.getAnimations().length, 0,
|
||||
'getAnimations returns an empty sequence for a document'
|
||||
+ ' with no animations');
|
||||
}, 'getAnimations for non-animated content');
|
||||
@ -34,17 +34,17 @@ test(function(t) {
|
||||
|
||||
// Add an animation
|
||||
div.style.animation = 'animLeft 100s';
|
||||
assert_equals(document.timeline.getAnimations().length, 1,
|
||||
assert_equals(document.getAnimations().length, 1,
|
||||
'getAnimations returns a running CSS Animation');
|
||||
|
||||
// Add another animation
|
||||
div.style.animation = 'animLeft 100s, animTop 100s';
|
||||
assert_equals(document.timeline.getAnimations().length, 2,
|
||||
assert_equals(document.getAnimations().length, 2,
|
||||
'getAnimations returns two running CSS Animations');
|
||||
|
||||
// Remove both
|
||||
div.style.animation = '';
|
||||
assert_equals(document.timeline.getAnimations().length, 0,
|
||||
assert_equals(document.getAnimations().length, 0,
|
||||
'getAnimations returns no running CSS Animations');
|
||||
}, 'getAnimations for CSS Animations');
|
||||
|
||||
@ -53,7 +53,7 @@ test(function(t) {
|
||||
div.style.animation = 'animLeft 100s, animTop 100s, animRight 100s, ' +
|
||||
'animBottom 100s';
|
||||
|
||||
var animations = document.timeline.getAnimations();
|
||||
var animations = document.getAnimations();
|
||||
assert_equals(animations.length, 4,
|
||||
'getAnimations returns all running CSS Animations');
|
||||
assert_equals(animations[0].animationName, 'animLeft',
|
||||
@ -72,7 +72,7 @@ test(function(t) {
|
||||
var div3 = addDiv(t, { style: 'animation: animLeft 100s' });
|
||||
var div4 = addDiv(t, { style: 'animation: animLeft 100s' });
|
||||
|
||||
var animations = document.timeline.getAnimations();
|
||||
var animations = document.getAnimations();
|
||||
assert_equals(animations.length, 4,
|
||||
'getAnimations returns all running CSS Animations');
|
||||
assert_equals(animations[0].effect.target, div1,
|
||||
@ -95,7 +95,7 @@ test(function(t) {
|
||||
// Which should give: 2, 1, 4, 3
|
||||
div2.appendChild(div1);
|
||||
div2.appendChild(div4);
|
||||
animations = document.timeline.getAnimations();
|
||||
animations = document.getAnimations();
|
||||
assert_equals(animations[0].effect.target, div2,
|
||||
'Order of first animation returned after tree surgery');
|
||||
assert_equals(animations[1].effect.target, div1,
|
||||
@ -114,7 +114,7 @@ test(function(t) {
|
||||
var expectedResults = [ [ div1, 'animLeft' ],
|
||||
[ div1, 'animTop' ],
|
||||
[ div2, 'animBottom' ] ];
|
||||
var animations = document.timeline.getAnimations();
|
||||
var animations = document.getAnimations();
|
||||
assert_equals(animations.length, expectedResults.length,
|
||||
'getAnimations returns all running CSS Animations');
|
||||
animations.forEach(function(anim, i) {
|
||||
@ -132,7 +132,7 @@ test(function(t) {
|
||||
[ div1, 'animLeft' ],
|
||||
[ div1, 'animRight' ],
|
||||
[ div1, 'animTop' ] ];
|
||||
animations = document.timeline.getAnimations();
|
||||
animations = document.getAnimations();
|
||||
assert_equals(animations.length, expectedResults.length,
|
||||
'getAnimations returns all running CSS Animations after ' +
|
||||
'making changes');
|
||||
@ -148,7 +148,7 @@ test(function(t) {
|
||||
cancelAllAnimationsOnEnd(t);
|
||||
|
||||
var div = addDiv(t, { style: 'animation: animLeft 100s, animTop 100s' });
|
||||
var animLeft = document.timeline.getAnimations()[0];
|
||||
var animLeft = document.getAnimations()[0];
|
||||
assert_equals(animLeft.animationName, 'animLeft',
|
||||
'Originally, animLeft animation comes first');
|
||||
|
||||
@ -156,7 +156,7 @@ test(function(t) {
|
||||
div.style.animation = 'animTop 100s';
|
||||
animLeft.play();
|
||||
|
||||
var animations = document.timeline.getAnimations();
|
||||
var animations = document.getAnimations();
|
||||
assert_equals(animations.length, 2,
|
||||
'getAnimations returns markup-bound and free animations');
|
||||
assert_equals(animations[0].animationName, 'animTop',
|
||||
@ -168,15 +168,15 @@ test(function(t) {
|
||||
cancelAllAnimationsOnEnd(t);
|
||||
|
||||
var div = addDiv(t, { style: 'animation: animLeft 100s, animTop 100s' });
|
||||
var animLeft = document.timeline.getAnimations()[0];
|
||||
var animTop = document.timeline.getAnimations()[1];
|
||||
var animLeft = document.getAnimations()[0];
|
||||
var animTop = document.getAnimations()[1];
|
||||
|
||||
// Disassociate both animations from markup and restart in opposite order
|
||||
div.style.animation = '';
|
||||
animTop.play();
|
||||
animLeft.play();
|
||||
|
||||
var animations = document.timeline.getAnimations();
|
||||
var animations = document.getAnimations();
|
||||
assert_equals(animations.length, 2,
|
||||
'getAnimations returns free animations');
|
||||
assert_equals(animations[0], animTop,
|
||||
@ -187,7 +187,7 @@ test(function(t) {
|
||||
// Restarting an animation should have no effect
|
||||
animTop.cancel();
|
||||
animTop.play();
|
||||
assert_equals(document.timeline.getAnimations()[0], animTop,
|
||||
assert_equals(document.getAnimations()[0], animTop,
|
||||
'After restarting, the ordering of free animations' +
|
||||
' does not change');
|
||||
}, 'Order of CSS Animations - free animations');
|
||||
@ -204,7 +204,7 @@ test(function(t) {
|
||||
flushComputedStyle(div);
|
||||
|
||||
// Although the transition was added later, it should come first in the list
|
||||
var animations = document.timeline.getAnimations();
|
||||
var animations = document.getAnimations();
|
||||
assert_equals(animations.length, 2,
|
||||
'Both CSS animations and transitions are returned');
|
||||
assert_class_string(animations[0], 'CSSTransition', 'Transition comes first');
|
||||
@ -214,27 +214,27 @@ test(function(t) {
|
||||
test(function(t) {
|
||||
var div = addDiv(t, { style: 'animation: animLeft 100s forwards' });
|
||||
div.getAnimations()[0].finish();
|
||||
assert_equals(document.timeline.getAnimations().length, 1,
|
||||
assert_equals(document.getAnimations().length, 1,
|
||||
'Forwards-filling CSS animations are returned');
|
||||
}, 'Finished but filling CSS Animations are returned');
|
||||
|
||||
test(function(t) {
|
||||
var div = addDiv(t, { style: 'animation: animLeft 100s' });
|
||||
div.getAnimations()[0].finish();
|
||||
assert_equals(document.timeline.getAnimations().length, 0,
|
||||
assert_equals(document.getAnimations().length, 0,
|
||||
'Non-filling finished CSS animations are not returned');
|
||||
}, 'Finished but not filling CSS Animations are not returned');
|
||||
|
||||
test(function(t) {
|
||||
var div = addDiv(t, { style: 'animation: animLeft 100s 100s' });
|
||||
assert_equals(document.timeline.getAnimations().length, 1,
|
||||
assert_equals(document.getAnimations().length, 1,
|
||||
'Yet-to-start CSS animations are returned');
|
||||
}, 'Yet-to-start CSS Animations are returned');
|
||||
|
||||
test(function(t) {
|
||||
var div = addDiv(t, { style: 'animation: animLeft 100s' });
|
||||
div.getAnimations()[0].cancel();
|
||||
assert_equals(document.timeline.getAnimations().length, 0,
|
||||
assert_equals(document.getAnimations().length, 0,
|
||||
'CSS animations cancelled by the API are not returned');
|
||||
}, 'CSS Animations cancelled via the API are not returned');
|
||||
|
||||
@ -245,7 +245,7 @@ test(function(t) {
|
||||
var anim = div.getAnimations()[0];
|
||||
anim.cancel();
|
||||
anim.play();
|
||||
assert_equals(document.timeline.getAnimations().length, 1,
|
||||
assert_equals(document.getAnimations().length, 1,
|
||||
'CSS animations cancelled and restarted by the API are ' +
|
||||
'returned');
|
||||
}, 'CSS Animations cancelled and restarted via the API are returned');
|
||||
@ -256,7 +256,7 @@ test(function(t) {
|
||||
// but we haven't implemented a PseudoElement interface to use as
|
||||
// animation's target (bug 1174575) so we simply don't return these animations
|
||||
// until we can support them properly.
|
||||
assert_equals(document.timeline.getAnimations().length, 0,
|
||||
assert_equals(document.getAnimations().length, 0,
|
||||
'CSS animations on pseudo elements are not returned');
|
||||
}, 'CSS Animations targetting pseudo-elements are not returned');
|
||||
|
@ -9,7 +9,7 @@ setup({explicit_done: true});
|
||||
SpecialPowers.pushPrefEnv(
|
||||
{ "set": [["dom.animations-api.core.enabled", true]]},
|
||||
function() {
|
||||
window.open("file_timeline-get-animations.html");
|
||||
window.open("file_document-get-animations.html");
|
||||
});
|
||||
</script>
|
||||
</html>
|
@ -6,7 +6,7 @@
|
||||
'use strict';
|
||||
|
||||
test(function(t) {
|
||||
assert_equals(document.timeline.getAnimations().length, 0,
|
||||
assert_equals(document.getAnimations().length, 0,
|
||||
'getAnimations returns an empty sequence for a document'
|
||||
+ ' with no animations');
|
||||
}, 'getAnimations for non-animated content');
|
||||
@ -22,12 +22,12 @@ test(function(t) {
|
||||
div.style.transition = 'all 100s';
|
||||
div.style.left = '100px';
|
||||
div.style.top = '100px';
|
||||
assert_equals(document.timeline.getAnimations().length, 2,
|
||||
assert_equals(document.getAnimations().length, 2,
|
||||
'getAnimations returns two running CSS Transitions');
|
||||
|
||||
// Remove both
|
||||
div.style.transitionProperty = 'none';
|
||||
assert_equals(document.timeline.getAnimations().length, 0,
|
||||
assert_equals(document.getAnimations().length, 0,
|
||||
'getAnimations returns no running CSS Transitions');
|
||||
}, 'getAnimations for CSS Transitions');
|
||||
|
||||
@ -39,7 +39,7 @@ async_test(function(t) {
|
||||
var animations = div.getAnimations();
|
||||
assert_equals(animations.length, 1, 'Got transition');
|
||||
animations[0].finished.then(t.step_func(function() {
|
||||
assert_equals(document.timeline.getAnimations().length, 0,
|
||||
assert_equals(document.getAnimations().length, 0,
|
||||
'No animations returned');
|
||||
t.done();
|
||||
}));
|
@ -9,7 +9,7 @@ setup({explicit_done: true});
|
||||
SpecialPowers.pushPrefEnv(
|
||||
{ "set": [["dom.animations-api.core.enabled", true]]},
|
||||
function() {
|
||||
window.open("file_timeline-get-animations.html");
|
||||
window.open("file_document-get-animations.html");
|
||||
});
|
||||
</script>
|
||||
</html>
|
@ -34,15 +34,15 @@ support-files = css-animations/file_animation-reverse.html
|
||||
support-files = css-animations/file_animation-starttime.html
|
||||
[css-animations/test_cssanimation-animationname.html]
|
||||
support-files = css-animations/file_cssanimation-animationname.html
|
||||
[css-animations/test_keyframeeffect-getframes.html]
|
||||
support-files = css-animations/file_keyframeeffect-getframes.html
|
||||
[css-animations/test_document-get-animations.html]
|
||||
support-files = css-animations/file_document-get-animations.html
|
||||
[css-animations/test_effect-target.html]
|
||||
support-files = css-animations/file_effect-target.html
|
||||
[css-animations/test_element-get-animations.html]
|
||||
skip-if = buildapp == 'mulet'
|
||||
support-files = css-animations/file_element-get-animations.html
|
||||
[css-animations/test_timeline-get-animations.html]
|
||||
support-files = css-animations/file_timeline-get-animations.html
|
||||
[css-animations/test_keyframeeffect-getframes.html]
|
||||
support-files = css-animations/file_keyframeeffect-getframes.html
|
||||
[css-transitions/test_animation-cancel.html]
|
||||
support-files = css-transitions/file_animation-cancel.html
|
||||
[css-transitions/test_animation-computed-timing.html]
|
||||
@ -59,15 +59,15 @@ support-files = css-transitions/file_animation-ready.html
|
||||
support-files = css-transitions/file_animation-starttime.html
|
||||
[css-transitions/test_csstransition-transitionproperty.html]
|
||||
support-files = css-transitions/file_csstransition-transitionproperty.html
|
||||
[css-transitions/test_keyframeeffect-getframes.html]
|
||||
support-files = css-transitions/file_keyframeeffect-getframes.html
|
||||
[css-transitions/test_document-get-animations.html]
|
||||
support-files = css-transitions/file_document-get-animations.html
|
||||
[css-transitions/test_effect-target.html]
|
||||
support-files = css-transitions/file_effect-target.html
|
||||
[css-transitions/test_element-get-animations.html]
|
||||
skip-if = buildapp == 'mulet'
|
||||
support-files = css-transitions/file_element-get-animations.html
|
||||
[css-transitions/test_timeline-get-animations.html]
|
||||
support-files = css-transitions/file_timeline-get-animations.html
|
||||
[css-transitions/test_keyframeeffect-getframes.html]
|
||||
support-files = css-transitions/file_keyframeeffect-getframes.html
|
||||
[document-timeline/test_document-timeline.html]
|
||||
support-files = document-timeline/file_document-timeline.html
|
||||
[document-timeline/test_request_animation_frame.html]
|
||||
|
@ -37,7 +37,7 @@ function addDiv(t, attrs) {
|
||||
*/
|
||||
function cancelAllAnimationsOnEnd(t) {
|
||||
t.add_cleanup(function() {
|
||||
document.timeline.getAnimations().forEach(animation => animation.cancel());
|
||||
document.getAnimations().forEach(animation => animation.cancel());
|
||||
});
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user