mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
Bug 1150810 part 16 - Add tests for AnimationTimeline.getAnimations(); r=jwatt
This commit is contained in:
Brian Birtles
parent
728332e869
commit
df99d6e31d
@ -0,0 +1,215 @@
|
||||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<script src="../testcommon.js"></script>
|
||||
<style>
|
||||
@keyframes animLeft {
|
||||
to { left: 100px }
|
||||
}
|
||||
@keyframes animTop {
|
||||
to { top: 100px }
|
||||
}
|
||||
@keyframes animBottom {
|
||||
to { bottom: 100px }
|
||||
}
|
||||
@keyframes animRight {
|
||||
to { right: 100px }
|
||||
}
|
||||
.with-before-animation::before {
|
||||
content: " ";
|
||||
animation: animLeft 100s;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
test(function(t) {
|
||||
assert_equals(document.timeline.getAnimations().length, 0,
|
||||
'getAnimations returns an empty sequence for a document'
|
||||
+ ' with no animations');
|
||||
}, 'getAnimations for non-animated content');
|
||||
|
||||
test(function(t) {
|
||||
var div = addDiv(t);
|
||||
|
||||
// Add an animation
|
||||
div.style.animation = 'animLeft 100s';
|
||||
assert_equals(document.timeline.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,
|
||||
'getAnimations returns two running CSS Animations');
|
||||
|
||||
// Remove both
|
||||
div.style.animation = '';
|
||||
assert_equals(document.timeline.getAnimations().length, 0,
|
||||
'getAnimations returns no running CSS Animations');
|
||||
}, 'getAnimations for CSS Animations');
|
||||
|
||||
test(function(t) {
|
||||
var div = addDiv(t);
|
||||
div.style.animation = 'animLeft 100s, animTop 100s, animRight 100s, ' +
|
||||
'animBottom 100s';
|
||||
|
||||
var animations = document.timeline.getAnimations();
|
||||
assert_equals(animations.length, 4,
|
||||
'getAnimations returns all running CSS Animations');
|
||||
assert_equals(animations[0].animationName, 'animLeft',
|
||||
'Order of first animation returned');
|
||||
assert_equals(animations[1].animationName, 'animTop',
|
||||
'Order of second animation returned');
|
||||
assert_equals(animations[2].animationName, 'animRight',
|
||||
'Order of third animation returned');
|
||||
assert_equals(animations[3].animationName, 'animBottom',
|
||||
'Order of fourth animation returned');
|
||||
}, 'Order of CSS Animations - within an element');
|
||||
|
||||
test(function(t) {
|
||||
var div1 = addDiv(t, { style: 'animation: animLeft 100s' });
|
||||
var div2 = addDiv(t, { style: 'animation: animLeft 100s' });
|
||||
var div3 = addDiv(t, { style: 'animation: animLeft 100s' });
|
||||
var div4 = addDiv(t, { style: 'animation: animLeft 100s' });
|
||||
|
||||
var animations = document.timeline.getAnimations();
|
||||
assert_equals(animations.length, 4,
|
||||
'getAnimations returns all running CSS Animations');
|
||||
assert_equals(animations[0].effect.target, div1,
|
||||
'Order of first animation returned');
|
||||
assert_equals(animations[1].effect.target, div2,
|
||||
'Order of second animation returned');
|
||||
assert_equals(animations[2].effect.target, div3,
|
||||
'Order of third animation returned');
|
||||
assert_equals(animations[3].effect.target, div4,
|
||||
'Order of fourth animation returned');
|
||||
|
||||
// Order should be depth-first pre-order so add some depth as follows:
|
||||
//
|
||||
// <parent>
|
||||
// / |
|
||||
// 2 3
|
||||
// / \
|
||||
// 1 4
|
||||
//
|
||||
// Which should give: 2, 1, 4, 3
|
||||
div2.appendChild(div1);
|
||||
div2.appendChild(div4);
|
||||
animations = document.timeline.getAnimations();
|
||||
assert_equals(animations[0].effect.target, div2,
|
||||
'Order of first animation returned after tree surgery');
|
||||
assert_equals(animations[1].effect.target, div1,
|
||||
'Order of second animation returned after tree surgery');
|
||||
assert_equals(animations[2].effect.target, div4,
|
||||
'Order of third animation returned after tree surgery');
|
||||
assert_equals(animations[3].effect.target, div3,
|
||||
'Order of fourth animation returned after tree surgery');
|
||||
|
||||
}, 'Order of CSS Animations - across elements');
|
||||
|
||||
test(function(t) {
|
||||
var div1 = addDiv(t, { style: 'animation: animLeft 100s, animTop 100s' });
|
||||
var div2 = addDiv(t, { style: 'animation: animBottom 100s' });
|
||||
|
||||
var expectedResults = [ [ div1, 'animLeft' ],
|
||||
[ div1, 'animTop' ],
|
||||
[ div2, 'animBottom' ] ];
|
||||
var animations = document.timeline.getAnimations();
|
||||
assert_equals(animations.length, expectedResults.length,
|
||||
'getAnimations returns all running CSS Animations');
|
||||
animations.forEach(function(anim, i) {
|
||||
assert_equals(anim.effect.target, expectedResults[i][0],
|
||||
'Target of animation in position ' + i);
|
||||
assert_equals(anim.animationName, expectedResults[i][1],
|
||||
'Name of animation in position ' + i);
|
||||
});
|
||||
|
||||
// Modify tree structure and animation list
|
||||
div2.appendChild(div1);
|
||||
div1.style.animation = 'animLeft 100s, animRight 100s, animTop 100s';
|
||||
|
||||
expectedResults = [ [ div2, 'animBottom' ],
|
||||
[ div1, 'animLeft' ],
|
||||
[ div1, 'animRight' ],
|
||||
[ div1, 'animTop' ] ];
|
||||
animations = document.timeline.getAnimations();
|
||||
assert_equals(animations.length, expectedResults.length,
|
||||
'getAnimations returns all running CSS Animations after ' +
|
||||
'making changes');
|
||||
animations.forEach(function(anim, i) {
|
||||
assert_equals(anim.effect.target, expectedResults[i][0],
|
||||
'Target of animation in position ' + i + ' after changes');
|
||||
assert_equals(anim.animationName, expectedResults[i][1],
|
||||
'Name of animation in position ' + i + ' after changes');
|
||||
});
|
||||
}, 'Order of CSS Animations - across and within elements');
|
||||
|
||||
test(function(t) {
|
||||
// Add an animation first
|
||||
var div = addDiv(t, { style: 'animation: animLeft 100s' });
|
||||
div.style.top = '0px';
|
||||
div.style.transition = 'all 100s';
|
||||
flushComputedStyle(div);
|
||||
|
||||
// *Then* add a transition
|
||||
div.style.top = '100px';
|
||||
flushComputedStyle(div);
|
||||
|
||||
// Although the transition was added later, it should come first in the list
|
||||
var animations = document.timeline.getAnimations();
|
||||
assert_equals(animations.length, 2,
|
||||
'Both CSS animations and transitions are returned');
|
||||
assert_class_string(animations[0], 'CSSTransition', 'Transition comes first');
|
||||
assert_class_string(animations[1], 'CSSAnimation', 'Animation comes second');
|
||||
}, 'Order of CSS Animations and CSS Transitions');
|
||||
|
||||
test(function(t) {
|
||||
var div = addDiv(t, { style: 'animation: animLeft 100s forwards' });
|
||||
div.getAnimations()[0].finish();
|
||||
assert_equals(document.timeline.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,
|
||||
'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,
|
||||
'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,
|
||||
'CSS animations cancelled by the API are not returned');
|
||||
}, 'CSS Animations cancelled via the API are not returned');
|
||||
|
||||
test(function(t) {
|
||||
var div = addDiv(t, { style: 'animation: animLeft 100s' });
|
||||
var anim = div.getAnimations()[0];
|
||||
anim.cancel();
|
||||
anim.play();
|
||||
assert_equals(document.timeline.getAnimations().length, 1,
|
||||
'CSS animations cancelled and restarted by the API are ' +
|
||||
'returned');
|
||||
}, 'CSS Animations cancelled and restarted via the API are returned');
|
||||
|
||||
test(function(t) {
|
||||
var div = addDiv(t, { class: 'with-before-animation' });
|
||||
// FIXME: This should actually return the animation on the pseudo element
|
||||
// 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,
|
||||
'CSS animations on pseudo elements are not returned');
|
||||
}, 'CSS Animations targetting pseudo-elements are not returned');
|
||||
|
||||
done();
|
||||
</script>
|
||||
</body>
|
||||
@ -0,0 +1,15 @@
|
||||
<!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_timeline-get-animations.html");
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
@ -0,0 +1,50 @@
|
||||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<script src="../testcommon.js"></script>
|
||||
<body>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
test(function(t) {
|
||||
assert_equals(document.timeline.getAnimations().length, 0,
|
||||
'getAnimations returns an empty sequence for a document'
|
||||
+ ' with no animations');
|
||||
}, 'getAnimations for non-animated content');
|
||||
|
||||
test(function(t) {
|
||||
var div = addDiv(t);
|
||||
|
||||
// Add a couple of transitions
|
||||
div.style.left = '0px';
|
||||
div.style.top = '0px';
|
||||
getComputedStyle(div).transitionProperty;
|
||||
|
||||
div.style.transition = 'all 100s';
|
||||
div.style.left = '100px';
|
||||
div.style.top = '100px';
|
||||
assert_equals(document.timeline.getAnimations().length, 2,
|
||||
'getAnimations returns two running CSS Transitions');
|
||||
|
||||
// Remove both
|
||||
div.style.transitionProperty = 'none';
|
||||
assert_equals(document.timeline.getAnimations().length, 0,
|
||||
'getAnimations returns no running CSS Transitions');
|
||||
}, 'getAnimations for CSS Transitions');
|
||||
|
||||
async_test(function(t) {
|
||||
var div = addDiv(t, { style: 'left: 0px; transition: all 50ms' });
|
||||
flushComputedStyle(div);
|
||||
|
||||
div.style.left = '100px';
|
||||
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,
|
||||
'No animations returned');
|
||||
t.done();
|
||||
}));
|
||||
}, 'Transitions are not returned after they have finished');
|
||||
|
||||
done();
|
||||
</script>
|
||||
</body>
|
||||
@ -0,0 +1,15 @@
|
||||
<!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_timeline-get-animations.html");
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
@ -31,6 +31,8 @@ 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-transitions/test_animation-cancel.html]
|
||||
support-files = css-transitions/file_animation-cancel.html
|
||||
[css-transitions/test_animation-currenttime.html]
|
||||
@ -50,6 +52,8 @@ 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
|
||||
[document-timeline/test_document-timeline.html]
|
||||
support-files = document-timeline/file_document-timeline.html
|
||||
[document-timeline/test_request_animation_frame.html]
|
||||
|
||||
Loading…
Reference in New Issue
Block a user