08b54f6f2c
Having created composite ordering methods for the different kinds of animations this patch adds a Comparator class so that they can be used to sort an array of such animations. This patch uses this Comparator object to sort the results returned by Element.getAnimations. For this case, the order in which we create animations and transitions happens to almost perfectly correspond with the composite ordering defined so that no sorting is necessary. One exception is that some -moz-* transitions may be created after transitions that they should sort before when sorting by transition property. In this case the sorting added in this patch should ensure they are returned in the correct sequence. Unfortunately, we can't easily test this since the test files we have are intended to be cross-browser (where -moz-* properties won't be supported). Once we implement AnimationTimeline.getAnimations (bug 1150810) we'll have a better opportunity to test this sorting. For now, the added tests in this patch just serve as a regression test that the sorting hasn't upset the already correct order (and an interop test in future once we move them to web-platform-tests).
148 lines
5.2 KiB
HTML
148 lines
5.2 KiB
HTML
<!doctype html>
|
|
<meta charset=utf-8>
|
|
<script src="../testcommon.js"></script>
|
|
<body>
|
|
<script>
|
|
'use strict';
|
|
|
|
async_test(function(t) {
|
|
var div = addDiv(t);
|
|
|
|
// FIXME: This test does too many things. It should be split up.
|
|
|
|
// Add a couple of transitions
|
|
div.style.left = '0px';
|
|
div.style.top = '0px';
|
|
window.getComputedStyle(div).transitionProperty;
|
|
|
|
div.style.transition = 'all 100s';
|
|
div.style.left = '100px';
|
|
div.style.top = '100px';
|
|
|
|
var animations = div.getAnimations();
|
|
assert_equals(animations.length, 2,
|
|
'getAnimations() returns one Animation per transitioning property');
|
|
waitForAllAnimations(animations).then(t.step_func(function() {
|
|
var startTime = animations[0].startTime;
|
|
assert_true(startTime > 0 && startTime <= document.timeline.currentTime,
|
|
'CSS transitions have sensible start times');
|
|
assert_equals(animations[0].startTime, animations[1].startTime,
|
|
'CSS transitions started together have the same start time');
|
|
// Wait a moment then add a third transition
|
|
return waitForFrame();
|
|
})).then(t.step_func(function() {
|
|
div.style.backgroundColor = 'green';
|
|
animations = div.getAnimations();
|
|
assert_equals(animations.length, 3,
|
|
'getAnimations returns Animations for all running CSS Transitions');
|
|
return waitForAllAnimations(animations);
|
|
})).then(t.step_func(function() {
|
|
assert_less_than(animations[1].startTime, animations[2].startTime,
|
|
'Animation for additional CSS transition starts after the original'
|
|
+ ' transitions and appears later in the list');
|
|
t.done();
|
|
}));
|
|
}, 'getAnimations for CSS Transitions');
|
|
|
|
test(function(t) {
|
|
var div = addDiv(t, { style: 'left: 0px; transition: all 100s' });
|
|
|
|
flushComputedStyle(div);
|
|
div.style.left = '100px';
|
|
|
|
assert_class_string(div.getAnimations()[0], 'CSSTransition',
|
|
'Interface of returned animation is CSSTransition');
|
|
}, 'getAnimations returns CSSTransition objects for CSS Transitions');
|
|
|
|
async_test(function(t) {
|
|
var div = addDiv(t);
|
|
|
|
// Set up event listener
|
|
div.addEventListener('transitionend', t.step_func(function() {
|
|
assert_equals(div.getAnimations().length, 0,
|
|
'getAnimations does not return finished CSS Transitions');
|
|
t.done();
|
|
}));
|
|
|
|
// Add a very short transition
|
|
div.style.left = '0px';
|
|
window.getComputedStyle(div).left;
|
|
|
|
div.style.transition = 'all 0.01s';
|
|
div.style.left = '100px';
|
|
window.getComputedStyle(div).left;
|
|
}, 'getAnimations for CSS Transitions that have finished');
|
|
|
|
test(function(t) {
|
|
var div = addDiv(t);
|
|
|
|
// Try to transition non-animatable property animation-duration
|
|
div.style.animationDuration = '10s';
|
|
window.getComputedStyle(div).animationDuration;
|
|
|
|
div.style.transition = 'all 100s';
|
|
div.style.animationDuration = '100s';
|
|
|
|
assert_equals(div.getAnimations().length, 0,
|
|
'getAnimations returns an empty sequence for a transition'
|
|
+ ' of a non-animatable property');
|
|
}, 'getAnimations for transition on non-animatable property');
|
|
|
|
test(function(t) {
|
|
var div = addDiv(t);
|
|
|
|
div.style.setProperty('-vendor-unsupported', '0px', '');
|
|
window.getComputedStyle(div).transitionProperty;
|
|
div.style.transition = 'all 100s';
|
|
div.style.setProperty('-vendor-unsupported', '100px', '');
|
|
|
|
assert_equals(div.getAnimations().length, 0,
|
|
'getAnimations returns an empty sequence for a transition'
|
|
+ ' of an unsupported property');
|
|
}, 'getAnimations for transition on unsupported property');
|
|
|
|
test(function(t) {
|
|
var div = addDiv(t, { style: 'transform: translate(0px); ' +
|
|
'opacity: 0; ' +
|
|
'border-width: 0px; ' + // Shorthand
|
|
'border-style: solid' });
|
|
getComputedStyle(div).transform;
|
|
|
|
div.style.transition = 'all 100s';
|
|
div.style.transform = 'translate(100px)';
|
|
div.style.opacity = '1';
|
|
div.style.borderWidth = '1px';
|
|
|
|
var animations = div.getAnimations();
|
|
assert_equals(animations.length, 6,
|
|
'Generated expected number of transitions');
|
|
assert_equals(animations[0].transitionProperty, 'border-bottom-width');
|
|
assert_equals(animations[1].transitionProperty, 'border-left-width');
|
|
assert_equals(animations[2].transitionProperty, 'border-right-width');
|
|
assert_equals(animations[3].transitionProperty, 'border-top-width');
|
|
assert_equals(animations[4].transitionProperty, 'opacity');
|
|
assert_equals(animations[5].transitionProperty, 'transform');
|
|
}, 'getAnimations sorts simultaneous transitions by name');
|
|
|
|
test(function(t) {
|
|
var div = addDiv(t, { style: 'transform: translate(0px); ' +
|
|
'opacity: 0' });
|
|
getComputedStyle(div).transform;
|
|
|
|
div.style.transition = 'all 100s';
|
|
div.style.transform = 'translate(100px)';
|
|
assert_equals(div.getAnimations().length, 1,
|
|
'Initially there is only one (transform) transition');
|
|
div.style.opacity = '1';
|
|
assert_equals(div.getAnimations().length, 2,
|
|
'Then a second (opacity) transition is added');
|
|
|
|
var animations = div.getAnimations();
|
|
assert_equals(animations[0].transitionProperty, 'transform');
|
|
assert_equals(animations[1].transitionProperty, 'opacity');
|
|
}, 'getAnimations sorts transitions by when they were generated');
|
|
|
|
done();
|
|
</script>
|
|
</body>
|