зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1467344 - Use arrow functions in dom/animation/test/css-transitions/; r=hiro
This patch also drops the checkStateOnSettingCurrentTimeToZero function since it is no longer used. --HG-- extra : rebase_source : bd4fdb9368d55b120c839330dbd90a0a89464370
This commit is contained in:
Brian Birtles
Родитель
1856a6c679
Коммит
58054bc030
|
|
@ -8,7 +8,7 @@
|
|||
<script>
|
||||
'use strict';
|
||||
|
||||
promise_test(function(t) {
|
||||
promise_test(t => {
|
||||
var div = addDiv(t, { style: 'margin-left: 0px' });
|
||||
flushComputedStyle(div);
|
||||
|
||||
|
|
@ -16,7 +16,7 @@ promise_test(function(t) {
|
|||
div.style.marginLeft = '1000px';
|
||||
|
||||
var transition = div.getAnimations()[0];
|
||||
return transition.ready.then(waitForFrame).then(function() {
|
||||
return transition.ready.then(waitForFrame).then(() => {
|
||||
assert_not_equals(getComputedStyle(div).marginLeft, '1000px',
|
||||
'transform style is animated before cancelling');
|
||||
transition.cancel();
|
||||
|
|
@ -25,7 +25,7 @@ promise_test(function(t) {
|
|||
});
|
||||
}, 'Animated style is cleared after cancelling a running CSS transition');
|
||||
|
||||
promise_test(function(t) {
|
||||
promise_test(t => {
|
||||
var div = addDiv(t, { style: 'margin-left: 0px' });
|
||||
flushComputedStyle(div);
|
||||
|
||||
|
|
@ -33,7 +33,7 @@ promise_test(function(t) {
|
|||
div.style.marginLeft = '1000px';
|
||||
|
||||
var transition = div.getAnimations()[0];
|
||||
return transition.ready.then(function() {
|
||||
return transition.ready.then(() => {
|
||||
transition.cancel();
|
||||
assert_equals(getComputedStyle(div).marginLeft, '1000px',
|
||||
'margin-left style is not animated after cancelling');
|
||||
|
|
@ -41,13 +41,13 @@ promise_test(function(t) {
|
|||
assert_equals(getComputedStyle(div).marginLeft, '0px',
|
||||
'margin-left style is animated after re-starting transition');
|
||||
return transition.ready;
|
||||
}).then(function() {
|
||||
}).then(() => {
|
||||
assert_equals(transition.playState, 'running',
|
||||
'Transition succeeds in running after being re-started');
|
||||
});
|
||||
}, 'After canceling a transition, it can still be re-used');
|
||||
|
||||
promise_test(function(t) {
|
||||
promise_test(t => {
|
||||
var div = addDiv(t, { style: 'margin-left: 0px' });
|
||||
flushComputedStyle(div);
|
||||
|
||||
|
|
@ -55,7 +55,7 @@ promise_test(function(t) {
|
|||
div.style.marginLeft = '1000px';
|
||||
|
||||
var transition = div.getAnimations()[0];
|
||||
return transition.ready.then(function() {
|
||||
return transition.ready.then(() => {
|
||||
transition.finish();
|
||||
transition.cancel();
|
||||
assert_equals(getComputedStyle(div).marginLeft, '1000px',
|
||||
|
|
@ -64,13 +64,13 @@ promise_test(function(t) {
|
|||
assert_equals(getComputedStyle(div).marginLeft, '0px',
|
||||
'margin-left style is animated after re-starting transition');
|
||||
return transition.ready;
|
||||
}).then(function() {
|
||||
}).then(() => {
|
||||
assert_equals(transition.playState, 'running',
|
||||
'Transition succeeds in running after being re-started');
|
||||
});
|
||||
}, 'After cancelling a finished transition, it can still be re-used');
|
||||
|
||||
test(function(t) {
|
||||
test(t => {
|
||||
var div = addDiv(t, { style: 'margin-left: 0px' });
|
||||
flushComputedStyle(div);
|
||||
|
||||
|
|
@ -94,7 +94,7 @@ test(function(t) {
|
|||
}, 'After cancelling a transition, updating transition properties doesn\'t make'
|
||||
+ ' it live again');
|
||||
|
||||
promise_test(function(t) {
|
||||
promise_test(t => {
|
||||
var div = addDiv(t, { style: 'margin-left: 0px' });
|
||||
flushComputedStyle(div);
|
||||
|
||||
|
|
@ -102,17 +102,17 @@ promise_test(function(t) {
|
|||
div.style.marginLeft = '1000px';
|
||||
|
||||
var transition = div.getAnimations()[0];
|
||||
return transition.ready.then(function() {
|
||||
return transition.ready.then(() => {
|
||||
assert_equals(transition.playState, 'running');
|
||||
div.style.display = 'none';
|
||||
return waitForFrame();
|
||||
}).then(function() {
|
||||
}).then(() => {
|
||||
assert_equals(transition.playState, 'idle');
|
||||
assert_equals(getComputedStyle(div).marginLeft, '1000px');
|
||||
});
|
||||
}, 'Setting display:none on an element cancels its transitions');
|
||||
|
||||
promise_test(function(t) {
|
||||
promise_test(t => {
|
||||
var parentDiv = addDiv(t);
|
||||
var childDiv = document.createElement('div');
|
||||
parentDiv.appendChild(childDiv);
|
||||
|
|
@ -124,17 +124,17 @@ promise_test(function(t) {
|
|||
childDiv.style.marginLeft = '1000px';
|
||||
|
||||
var transition = childDiv.getAnimations()[0];
|
||||
return transition.ready.then(function() {
|
||||
return transition.ready.then(() => {
|
||||
assert_equals(transition.playState, 'running');
|
||||
parentDiv.style.display = 'none';
|
||||
return waitForFrame();
|
||||
}).then(function() {
|
||||
}).then(() => {
|
||||
assert_equals(transition.playState, 'idle');
|
||||
assert_equals(getComputedStyle(childDiv).marginLeft, '1000px');
|
||||
});
|
||||
}, 'Setting display:none cancels transitions on a child element');
|
||||
|
||||
promise_test(function(t) {
|
||||
promise_test(t => {
|
||||
var div = addDiv(t, { style: 'margin-left: 0px' });
|
||||
flushComputedStyle(div);
|
||||
|
||||
|
|
@ -142,20 +142,20 @@ promise_test(function(t) {
|
|||
div.style.marginLeft = '1000px';
|
||||
|
||||
var transition = div.getAnimations()[0];
|
||||
return transition.ready.then(function() {
|
||||
return transition.ready.then(() => {
|
||||
assert_equals(transition.playState, 'running');
|
||||
// Set an unrecognized property value
|
||||
div.style.transitionProperty = 'none';
|
||||
flushComputedStyle(div);
|
||||
return waitForFrame();
|
||||
}).then(function() {
|
||||
}).then(() => {
|
||||
assert_equals(transition.playState, 'idle');
|
||||
assert_equals(getComputedStyle(div).marginLeft, '1000px');
|
||||
});
|
||||
}, 'Removing a property from transition-property cancels transitions on that '+
|
||||
'property');
|
||||
|
||||
promise_test(function(t) {
|
||||
promise_test(t => {
|
||||
var div = addDiv(t, { style: 'margin-left: 0px' });
|
||||
flushComputedStyle(div);
|
||||
|
||||
|
|
@ -163,18 +163,18 @@ promise_test(function(t) {
|
|||
div.style.marginLeft = '1000px';
|
||||
|
||||
var transition = div.getAnimations()[0];
|
||||
return transition.ready.then(function() {
|
||||
return transition.ready.then(() => {
|
||||
assert_equals(transition.playState, 'running');
|
||||
div.style.transition = 'margin-top 10s -10s'; // combined duration is zero
|
||||
flushComputedStyle(div);
|
||||
return waitForFrame();
|
||||
}).then(function() {
|
||||
}).then(() => {
|
||||
assert_equals(transition.playState, 'idle');
|
||||
assert_equals(getComputedStyle(div).marginLeft, '1000px');
|
||||
});
|
||||
}, 'Setting zero combined duration');
|
||||
|
||||
promise_test(function(t) {
|
||||
promise_test(t => {
|
||||
var div = addDiv(t, { style: 'margin-left: 0px' });
|
||||
flushComputedStyle(div);
|
||||
|
||||
|
|
@ -182,18 +182,18 @@ promise_test(function(t) {
|
|||
div.style.marginLeft = '1000px';
|
||||
|
||||
var transition = div.getAnimations()[0];
|
||||
return transition.ready.then(function() {
|
||||
return transition.ready.then(() => {
|
||||
assert_equals(transition.playState, 'running');
|
||||
div.style.marginLeft = '2000px';
|
||||
flushComputedStyle(div);
|
||||
return waitForFrame();
|
||||
}).then(function() {
|
||||
}).then(() => {
|
||||
assert_equals(transition.playState, 'idle');
|
||||
});
|
||||
}, 'Changing style to another interpolable value cancels the original ' +
|
||||
'transition');
|
||||
|
||||
promise_test(function(t) {
|
||||
promise_test(t => {
|
||||
var div = addDiv(t, { style: 'margin-left: 0px' });
|
||||
flushComputedStyle(div);
|
||||
|
||||
|
|
@ -201,19 +201,19 @@ promise_test(function(t) {
|
|||
div.style.marginLeft = '1000px';
|
||||
|
||||
var transition = div.getAnimations()[0];
|
||||
return transition.ready.then(function() {
|
||||
return transition.ready.then(() => {
|
||||
assert_equals(transition.playState, 'running');
|
||||
div.style.marginLeft = 'auto';
|
||||
flushComputedStyle(div);
|
||||
return waitForFrame();
|
||||
}).then(function() {
|
||||
}).then(() => {
|
||||
assert_equals(div.getAnimations().length, 0,
|
||||
'There should be no transitions');
|
||||
assert_equals(transition.playState, 'idle');
|
||||
});
|
||||
}, 'An after-change style value can\'t be interpolated');
|
||||
|
||||
promise_test(function(t) {
|
||||
promise_test(t => {
|
||||
var div = addDiv(t, { style: 'margin-left: 0px' });
|
||||
flushComputedStyle(div);
|
||||
|
||||
|
|
@ -221,12 +221,12 @@ promise_test(function(t) {
|
|||
div.style.marginLeft = '1000px';
|
||||
|
||||
var transition = div.getAnimations()[0];
|
||||
return transition.ready.then(function() {
|
||||
return transition.ready.then(() => {
|
||||
assert_equals(transition.playState, 'running');
|
||||
div.style.marginLeft = '0px';
|
||||
flushComputedStyle(div);
|
||||
return waitForFrame();
|
||||
}).then(function() {
|
||||
}).then(() => {
|
||||
assert_equals(transition.playState, 'idle');
|
||||
});
|
||||
}, 'Reversing a running transition cancels the original transition');
|
||||
|
|
|
|||
|
|
@ -19,7 +19,8 @@
|
|||
// --------------------
|
||||
// delay
|
||||
// --------------------
|
||||
test(function(t) {
|
||||
|
||||
test(t => {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
div.style.transition = 'margin-left 10s';
|
||||
flushComputedStyle(div);
|
||||
|
|
@ -31,7 +32,7 @@ test(function(t) {
|
|||
'Initial value of delay');
|
||||
}, 'delay of a new tranisition');
|
||||
|
||||
test(function(t) {
|
||||
test(t => {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
div.style.transition = 'margin-left 10s 10s';
|
||||
flushComputedStyle(div);
|
||||
|
|
@ -42,7 +43,7 @@ test(function(t) {
|
|||
'Initial value of delay');
|
||||
}, 'Positive delay of a new transition');
|
||||
|
||||
test(function(t) {
|
||||
test(t => {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
div.style.transition = 'margin-left 10s -5s';
|
||||
flushComputedStyle(div);
|
||||
|
|
@ -57,7 +58,8 @@ test(function(t) {
|
|||
// --------------------
|
||||
// endDelay
|
||||
// --------------------
|
||||
test(function(t) {
|
||||
|
||||
test(t => {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
div.style.transition = 'margin-left 10s';
|
||||
flushComputedStyle(div);
|
||||
|
|
@ -72,7 +74,8 @@ test(function(t) {
|
|||
// --------------------
|
||||
// fill
|
||||
// --------------------
|
||||
test(function(t) {
|
||||
|
||||
test(t => {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
div.style.transition = 'margin-left 10s';
|
||||
flushComputedStyle(div);
|
||||
|
|
@ -87,7 +90,8 @@ test(function(t) {
|
|||
// --------------------
|
||||
// iterationStart
|
||||
// --------------------
|
||||
test(function(t) {
|
||||
|
||||
test(t => {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
div.style.transition = 'margin-left 10s';
|
||||
flushComputedStyle(div);
|
||||
|
|
@ -102,7 +106,8 @@ test(function(t) {
|
|||
// --------------------
|
||||
// iterations
|
||||
// --------------------
|
||||
test(function(t) {
|
||||
|
||||
test(t => {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
div.style.transition = 'margin-left 10s';
|
||||
flushComputedStyle(div);
|
||||
|
|
@ -117,7 +122,8 @@ test(function(t) {
|
|||
// --------------------
|
||||
// duration
|
||||
// --------------------
|
||||
test(function(t) {
|
||||
|
||||
test(t => {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
div.style.transition = 'margin-left 10s';
|
||||
flushComputedStyle(div);
|
||||
|
|
@ -132,7 +138,8 @@ test(function(t) {
|
|||
// --------------------
|
||||
// direction
|
||||
// --------------------
|
||||
test(function(t) {
|
||||
|
||||
test(t => {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
div.style.transition = 'margin-left 10s';
|
||||
flushComputedStyle(div);
|
||||
|
|
@ -147,7 +154,8 @@ test(function(t) {
|
|||
// --------------------
|
||||
// easing
|
||||
// --------------------
|
||||
test(function(t) {
|
||||
|
||||
test(t => {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
div.style.transition = 'margin-left 10s';
|
||||
flushComputedStyle(div);
|
||||
|
|
@ -163,7 +171,8 @@ test(function(t) {
|
|||
// endTime
|
||||
// = max(start delay + active duration + end delay, 0)
|
||||
// --------------------
|
||||
test(function(t) {
|
||||
|
||||
test(t => {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
div.style.transition = 'margin-left 100s -5s';
|
||||
flushComputedStyle(div);
|
||||
|
|
@ -180,7 +189,8 @@ test(function(t) {
|
|||
// activeDuration
|
||||
// = iteration duration * iteration count(==1)
|
||||
// --------------------
|
||||
test(function(t) {
|
||||
|
||||
test(t => {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
div.style.transition = 'margin-left 100s -5s';
|
||||
flushComputedStyle(div);
|
||||
|
|
@ -195,7 +205,8 @@ test(function(t) {
|
|||
// --------------------
|
||||
// localTime
|
||||
// --------------------
|
||||
test(function(t) {
|
||||
|
||||
test(t => {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
div.style.transition = 'margin-left 100s';
|
||||
flushComputedStyle(div);
|
||||
|
|
@ -206,7 +217,7 @@ test(function(t) {
|
|||
'Initial value of localTime');
|
||||
}, 'localTime of a new transition');
|
||||
|
||||
test(function(t) {
|
||||
test(t => {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
div.style.transition = 'margin-left 100s';
|
||||
flushComputedStyle(div);
|
||||
|
|
@ -218,7 +229,7 @@ test(function(t) {
|
|||
'current localTime after setting currentTime');
|
||||
}, 'localTime is always equal to currentTime');
|
||||
|
||||
async_test(function(t) {
|
||||
async_test(t => {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
div.style.transition = 'margin-left 100s';
|
||||
flushComputedStyle(div);
|
||||
|
|
@ -227,11 +238,11 @@ async_test(function(t) {
|
|||
var anim = div.getAnimations()[0];
|
||||
anim.playbackRate = 2; // 2 times faster
|
||||
|
||||
anim.ready.then(t.step_func(function() {
|
||||
anim.ready.then(t.step_func(() => {
|
||||
assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
|
||||
'localTime is equal to currentTime');
|
||||
return waitForFrame();
|
||||
})).then(t.step_func_done(function() {
|
||||
})).then(t.step_func_done(() => {
|
||||
assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
|
||||
'localTime is equal to currentTime');
|
||||
}));
|
||||
|
|
@ -241,7 +252,8 @@ async_test(function(t) {
|
|||
// --------------------
|
||||
// progress
|
||||
// --------------------
|
||||
test(function(t) {
|
||||
|
||||
test(t => {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
div.style.transition = 'margin-left 10.5s';
|
||||
flushComputedStyle(div);
|
||||
|
|
@ -252,7 +264,7 @@ test(function(t) {
|
|||
'Initial value of progress');
|
||||
}, 'progress of a new transition');
|
||||
|
||||
test(function(t) {
|
||||
test(t => {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
div.style.transition = 'margin-left 10.5s 2s';
|
||||
flushComputedStyle(div);
|
||||
|
|
@ -263,7 +275,7 @@ test(function(t) {
|
|||
'Initial value of progress');
|
||||
}, 'progress of a new transition with positive delay in before phase');
|
||||
|
||||
test(function(t) {
|
||||
test(t => {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
div.style.transition = 'margin-left 10.5s';
|
||||
flushComputedStyle(div);
|
||||
|
|
@ -279,7 +291,8 @@ test(function(t) {
|
|||
// --------------------
|
||||
// currentIteration
|
||||
// --------------------
|
||||
test(function(t) {
|
||||
|
||||
test(t => {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
div.style.transition = 'margin-left 10s';
|
||||
flushComputedStyle(div);
|
||||
|
|
@ -290,7 +303,7 @@ test(function(t) {
|
|||
'Initial value of currentIteration');
|
||||
}, 'currentIteration of a new transition');
|
||||
|
||||
test(function(t) {
|
||||
test(t => {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
div.style.transition = 'margin-left 10s 2s';
|
||||
flushComputedStyle(div);
|
||||
|
|
@ -301,7 +314,7 @@ test(function(t) {
|
|||
'Initial value of currentIteration');
|
||||
}, 'currentIteration of a new transition with positive delay in before phase');
|
||||
|
||||
test(function(t) {
|
||||
test(t => {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
div.style.transition = 'margin-left 10s';
|
||||
flushComputedStyle(div);
|
||||
|
|
|
|||
|
|
@ -36,24 +36,15 @@ const ANIM_DUR_MS = 1000000; // 1000s
|
|||
* an animation that uses the above ANIM_DELAY_MS and ANIM_DUR_MS values into
|
||||
* the middle of various phases or points through the active duration.
|
||||
*/
|
||||
function currentTimeForBeforePhase() {
|
||||
return ANIM_DELAY_MS / 2;
|
||||
}
|
||||
function currentTimeForActivePhase() {
|
||||
return ANIM_DELAY_MS + ANIM_DUR_MS / 2;
|
||||
}
|
||||
function currentTimeForAfterPhase() {
|
||||
return ANIM_DELAY_MS + ANIM_DUR_MS + ANIM_DELAY_MS / 2;
|
||||
}
|
||||
function currentTimeForStartOfActiveInterval() {
|
||||
const currentTimeForStartOfActiveInterval = () => {
|
||||
return ANIM_DELAY_MS;
|
||||
}
|
||||
function currentTimeForFiftyPercentThroughActiveInterval() {
|
||||
};
|
||||
const currentTimeForFiftyPercentThroughActiveInterval = () => {
|
||||
return ANIM_DELAY_MS + ANIM_DUR_MS * 0.5;
|
||||
}
|
||||
function currentTimeForEndOfActiveInterval() {
|
||||
};
|
||||
const currentTimeForEndOfActiveInterval = () => {
|
||||
return ANIM_DELAY_MS + ANIM_DUR_MS;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// Expected computed 'margin-left' values at points during the active interval:
|
||||
|
|
@ -74,29 +65,8 @@ const END_POSITION = 200;
|
|||
//
|
||||
// http://drafts.csswg.org/web-animations/#animation-effect-phases-and-states
|
||||
|
||||
// Called when currentTime is set to zero (the beginning of the start delay).
|
||||
function checkStateOnSettingCurrentTimeToZero(animation)
|
||||
{
|
||||
// We don't test animation.currentTime since our caller just set it.
|
||||
|
||||
assert_equals(animation.playState, 'running',
|
||||
'Animation.playState should be "running" at the start of ' +
|
||||
'the start delay');
|
||||
|
||||
assert_equals(animation.effect.target.style.animationPlayState, 'running',
|
||||
'Animation.effect.target.style.animationPlayState should be ' +
|
||||
'"running" at the start of the start delay');
|
||||
|
||||
var div = animation.effect.target;
|
||||
var marginLeft = parseFloat(getComputedStyle(div).marginLeft);
|
||||
assert_equals(marginLeft, UNANIMATED_POSITION,
|
||||
'the computed value of margin-left should be unaffected ' +
|
||||
'at the beginning of the start delay');
|
||||
}
|
||||
|
||||
// Called when the ready Promise's callbacks should happen
|
||||
function checkStateOnReadyPromiseResolved(animation)
|
||||
{
|
||||
const checkStateOnReadyPromiseResolved = animation => {
|
||||
// the 0.0001 here is for rounding error
|
||||
assert_less_than_equal(animation.currentTime,
|
||||
animation.timeline.currentTime - animation.startTime + 0.0001,
|
||||
|
|
@ -113,11 +83,10 @@ function checkStateOnReadyPromiseResolved(animation)
|
|||
assert_equals(marginLeft, INITIAL_POSITION,
|
||||
'the computed value of margin-left should be unaffected ' +
|
||||
'by an animation with a delay on ready Promise resolve');
|
||||
}
|
||||
};
|
||||
|
||||
// Called when currentTime is set to the time the active interval starts.
|
||||
function checkStateAtActiveIntervalStartTime(animation)
|
||||
{
|
||||
const checkStateAtActiveIntervalStartTime = animation => {
|
||||
// We don't test animation.currentTime since our caller just set it.
|
||||
|
||||
assert_equals(animation.playState, 'running',
|
||||
|
|
@ -129,10 +98,9 @@ function checkStateAtActiveIntervalStartTime(animation)
|
|||
assert_between_inclusive(marginLeft, INITIAL_POSITION, TEN_PCT_POSITION,
|
||||
'the computed value of margin-left should be close to the value at the ' +
|
||||
'beginning of the animation');
|
||||
}
|
||||
};
|
||||
|
||||
function checkStateAtFiftyPctOfActiveInterval(animation)
|
||||
{
|
||||
const checkStateAtFiftyPctOfActiveInterval = animation => {
|
||||
// We don't test animation.currentTime since our caller just set it.
|
||||
|
||||
var div = animation.effect.target;
|
||||
|
|
@ -140,11 +108,10 @@ function checkStateAtFiftyPctOfActiveInterval(animation)
|
|||
assert_equals(marginLeft, FIFTY_PCT_POSITION,
|
||||
'the computed value of margin-left should be half way through the ' +
|
||||
'animation at the midpoint of the active interval');
|
||||
}
|
||||
};
|
||||
|
||||
// Called when currentTime is set to the time the active interval ends.
|
||||
function checkStateAtActiveIntervalEndTime(animation)
|
||||
{
|
||||
const checkStateAtActiveIntervalEndTime = animation => {
|
||||
// We don't test animation.currentTime since our caller just set it.
|
||||
|
||||
assert_equals(animation.playState, 'finished',
|
||||
|
|
@ -156,10 +123,9 @@ function checkStateAtActiveIntervalEndTime(animation)
|
|||
assert_equals(marginLeft, END_POSITION,
|
||||
'the computed value of margin-left should be the final transitioned-to ' +
|
||||
'value at the end of the active duration');
|
||||
}
|
||||
};
|
||||
|
||||
test(function(t)
|
||||
{
|
||||
test(t => {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
flushComputedStyle(div);
|
||||
div.style.marginLeft = '200px'; // initiate transition
|
||||
|
|
@ -168,9 +134,7 @@ test(function(t)
|
|||
assert_equals(animation.currentTime, 0, 'currentTime should be zero');
|
||||
}, 'currentTime of a newly created transition is zero');
|
||||
|
||||
|
||||
test(function(t)
|
||||
{
|
||||
test(t => {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
flushComputedStyle(div);
|
||||
div.style.marginLeft = '200px'; // initiate transition
|
||||
|
|
@ -187,7 +151,7 @@ test(function(t)
|
|||
'currentTime');
|
||||
|
||||
|
||||
async_test(function(t) {
|
||||
async_test(t => {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
var eventWatcher = new EventWatcher(t, div, 'transitionend');
|
||||
|
||||
|
|
@ -196,7 +160,7 @@ async_test(function(t) {
|
|||
|
||||
var animation = div.getAnimations()[0];
|
||||
|
||||
animation.ready.then(t.step_func(function() {
|
||||
animation.ready.then(t.step_func(() => {
|
||||
checkStateOnReadyPromiseResolved(animation);
|
||||
|
||||
animation.currentTime = currentTimeForStartOfActiveInterval();
|
||||
|
|
@ -207,17 +171,17 @@ async_test(function(t) {
|
|||
|
||||
animation.currentTime = currentTimeForEndOfActiveInterval();
|
||||
return eventWatcher.wait_for('transitionend');
|
||||
})).then(t.step_func(function() {
|
||||
})).then(t.step_func(() => {
|
||||
checkStateAtActiveIntervalEndTime(animation);
|
||||
})).catch(t.step_func(function(reason) {
|
||||
})).catch(t.step_func(reason => {
|
||||
assert_unreached(reason);
|
||||
})).then(function() {
|
||||
})).then(() => {
|
||||
t.done();
|
||||
});
|
||||
}, 'Skipping forward through transition');
|
||||
|
||||
|
||||
test(function(t) {
|
||||
test(t => {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
var eventWatcher = new EventWatcher(t, div, 'transitionend');
|
||||
|
||||
|
|
@ -231,7 +195,7 @@ test(function(t) {
|
|||
// changes to the Animation object no longer affect the element. For
|
||||
// this reason we only skip forwards as far as the 50% through point.
|
||||
|
||||
animation.ready.then(t.step_func(function() {
|
||||
animation.ready.then(t.step_func(() => {
|
||||
animation.currentTime = currentTimeForFiftyPercentThroughActiveInterval();
|
||||
checkStateAtFiftyPctOfActiveInterval(animation);
|
||||
|
||||
|
|
@ -245,7 +209,7 @@ test(function(t) {
|
|||
// causing computed style to be updated and the 'transitionend' event to
|
||||
// be dispatched synchronously. We need to call wait_for first
|
||||
// otherwise eventWatcher will assert that the event was unexpected.
|
||||
eventWatcher.wait_for('transitionend').then(function() {
|
||||
eventWatcher.wait_for('transitionend').then(() => {
|
||||
t.done();
|
||||
});
|
||||
checkStateAtActiveIntervalStartTime(animation);
|
||||
|
|
@ -253,14 +217,14 @@ test(function(t) {
|
|||
}, 'Skipping backwards through transition');
|
||||
|
||||
|
||||
async_test(function(t) {
|
||||
async_test(t => {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
flushComputedStyle(div);
|
||||
div.style.marginLeft = '200px'; // initiate transition
|
||||
|
||||
var animation = div.getAnimations()[0];
|
||||
|
||||
animation.ready.then(t.step_func(function() {
|
||||
animation.ready.then(t.step_func(() => {
|
||||
var exception;
|
||||
try {
|
||||
animation.currentTime = null;
|
||||
|
|
@ -270,15 +234,15 @@ async_test(function(t) {
|
|||
assert_equals(exception.name, 'TypeError',
|
||||
'Expect TypeError exception on trying to set ' +
|
||||
'Animation.currentTime to null');
|
||||
})).catch(t.step_func(function(reason) {
|
||||
})).catch(t.step_func(reason => {
|
||||
assert_unreached(reason);
|
||||
})).then(function() {
|
||||
})).then(() => {
|
||||
t.done();
|
||||
});
|
||||
}, 'Setting currentTime to null');
|
||||
|
||||
|
||||
async_test(function(t) {
|
||||
async_test(t => {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
flushComputedStyle(div);
|
||||
div.style.marginLeft = '200px'; // initiate transition
|
||||
|
|
@ -286,20 +250,20 @@ async_test(function(t) {
|
|||
var animation = div.getAnimations()[0];
|
||||
var pauseTime;
|
||||
|
||||
animation.ready.then(t.step_func(function() {
|
||||
animation.ready.then(t.step_func(() => {
|
||||
assert_not_equals(animation.currentTime, null,
|
||||
'Animation.currentTime not null on ready Promise resolve');
|
||||
animation.pause();
|
||||
return animation.ready;
|
||||
})).then(t.step_func(function() {
|
||||
})).then(t.step_func(() => {
|
||||
pauseTime = animation.currentTime;
|
||||
return waitForFrame();
|
||||
})).then(t.step_func(function() {
|
||||
})).then(t.step_func(() => {
|
||||
assert_equals(animation.currentTime, pauseTime,
|
||||
'Animation.currentTime is unchanged after pausing');
|
||||
})).catch(t.step_func(function(reason) {
|
||||
})).catch(t.step_func(reason => {
|
||||
assert_unreached(reason);
|
||||
})).then(function() {
|
||||
})).then(() => {
|
||||
t.done();
|
||||
});
|
||||
}, 'Animation.currentTime after pausing');
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
const ANIM_DELAY_MS = 1000000; // 1000s
|
||||
const ANIM_DUR_MS = 1000000; // 1000s
|
||||
|
||||
async_test(function(t) {
|
||||
async_test(t => {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
flushComputedStyle(div);
|
||||
div.style.marginLeft = '200px'; // initiate transition
|
||||
|
|
@ -29,7 +29,7 @@ async_test(function(t) {
|
|||
|
||||
animation.finish();
|
||||
|
||||
animation.finished.then(t.step_func(function() {
|
||||
animation.finished.then(t.step_func(() => {
|
||||
animation.play();
|
||||
assert_equals(animation.currentTime, 0,
|
||||
'Replaying a finished transition should reset its ' +
|
||||
|
|
@ -38,17 +38,17 @@ async_test(function(t) {
|
|||
}));
|
||||
}, 'Test restarting a finished transition');
|
||||
|
||||
async_test(function(t) {
|
||||
async_test(t => {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
flushComputedStyle(div);
|
||||
div.style.marginLeft = '200px'; // initiate transition
|
||||
|
||||
var animation = div.getAnimations()[0];
|
||||
|
||||
animation.ready.then(function() {
|
||||
animation.ready.then(() => {
|
||||
animation.playbackRate = -1;
|
||||
return animation.finished;
|
||||
}).then(t.step_func(function() {
|
||||
}).then(t.step_func(() => {
|
||||
animation.play();
|
||||
// FIXME: once animation.effect.computedTiming.endTime is available (bug
|
||||
// 1108055) we should use that here.
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<script>
|
||||
'use strict';
|
||||
|
||||
async_test(function(t) {
|
||||
async_test(t => {
|
||||
var div = addDiv(t);
|
||||
var cs = getComputedStyle(div);
|
||||
|
||||
|
|
@ -22,23 +22,23 @@ async_test(function(t) {
|
|||
var previousProgress = animation.effect.getComputedTiming().progress;
|
||||
assert_equals(previousProgress, 0, 'Initial value of progress is zero');
|
||||
|
||||
animation.ready.then(waitForNextFrame).then(t.step_func(function() {
|
||||
animation.ready.then(waitForNextFrame).then(t.step_func(() => {
|
||||
assert_greater_than(animation.effect.getComputedTiming().progress,
|
||||
previousProgress,
|
||||
'Iteration progress is initially increasing');
|
||||
animation.pause();
|
||||
return animation.ready;
|
||||
})).then(t.step_func(function() {
|
||||
})).then(t.step_func(() => {
|
||||
previousProgress = animation.effect.getComputedTiming().progress;
|
||||
return waitForNextFrame();
|
||||
})).then(t.step_func(function() {
|
||||
})).then(t.step_func(() => {
|
||||
assert_equals(animation.effect.getComputedTiming().progress,
|
||||
previousProgress,
|
||||
'Iteration progress does not increase after calling pause()');
|
||||
previousProgress = animation.effect.getComputedTiming().progress;
|
||||
animation.play();
|
||||
return animation.ready.then(waitForNextFrame);
|
||||
})).then(t.step_func(function() {
|
||||
})).then(t.step_func(() => {
|
||||
assert_greater_than(animation.effect.getComputedTiming().progress,
|
||||
previousProgress,
|
||||
'Iteration progress increases after calling play()');
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<script>
|
||||
'use strict';
|
||||
|
||||
async_test(function(t) {
|
||||
async_test(t => {
|
||||
var div = addDiv(t);
|
||||
div.style.transform = 'translate(0px)';
|
||||
getComputedStyle(div).transform;
|
||||
|
|
@ -19,7 +19,7 @@ async_test(function(t) {
|
|||
var animation = div.getAnimations()[0];
|
||||
var originalReadyPromise = animation.ready;
|
||||
|
||||
animation.ready.then(t.step_func(function() {
|
||||
animation.ready.then(t.step_func(() => {
|
||||
assert_equals(animation.ready, originalReadyPromise,
|
||||
'Ready promise is the same object when playing completes');
|
||||
animation.pause();
|
||||
|
|
@ -30,7 +30,7 @@ async_test(function(t) {
|
|||
}, 'A new ready promise is created each time play() is called'
|
||||
+ ' the animation property');
|
||||
|
||||
async_test(function(t) {
|
||||
async_test(t => {
|
||||
var div = addDiv(t);
|
||||
|
||||
// Set up pending transition
|
||||
|
|
@ -44,14 +44,14 @@ async_test(function(t) {
|
|||
assert_true(animation.pending, 'Animation is initially pending');
|
||||
|
||||
// Set up listeners on ready promise
|
||||
animation.ready.then(t.step_func(function() {
|
||||
animation.ready.then(t.step_func(() => {
|
||||
assert_unreached('ready promise was fulfilled');
|
||||
})).catch(t.step_func(function(err) {
|
||||
})).catch(t.step_func(err => {
|
||||
assert_equals(err.name, 'AbortError',
|
||||
'ready promise is rejected with AbortError');
|
||||
assert_equals(animation.playState, 'idle',
|
||||
'Animation is idle after transition was cancelled');
|
||||
})).then(t.step_func(function() {
|
||||
})).then(t.step_func(() => {
|
||||
t.done();
|
||||
}));
|
||||
|
||||
|
|
@ -62,7 +62,7 @@ async_test(function(t) {
|
|||
}, 'ready promise is rejected when a transition is cancelled by updating'
|
||||
+ ' transition-property');
|
||||
|
||||
async_test(function(t) {
|
||||
async_test(t => {
|
||||
var div = addDiv(t);
|
||||
|
||||
// Set up pending transition
|
||||
|
|
@ -76,14 +76,14 @@ async_test(function(t) {
|
|||
assert_true(animation.pending, 'Animation is initially pending');
|
||||
|
||||
// Set up listeners on ready promise
|
||||
animation.ready.then(t.step_func(function() {
|
||||
animation.ready.then(t.step_func(() => {
|
||||
assert_unreached('ready promise was fulfilled');
|
||||
})).catch(t.step_func(function(err) {
|
||||
})).catch(t.step_func(err => {
|
||||
assert_equals(err.name, 'AbortError',
|
||||
'ready promise is rejected with AbortError');
|
||||
assert_equals(animation.playState, 'idle',
|
||||
'Animation is idle after transition was cancelled');
|
||||
})).then(t.step_func(function() {
|
||||
})).then(t.step_func(() => {
|
||||
t.done();
|
||||
}));
|
||||
|
||||
|
|
|
|||
|
|
@ -36,24 +36,15 @@ const ANIM_DUR_MS = 1000000; // 1000s
|
|||
* animation that uses the above ANIM_DELAY_MS and ANIM_DUR_MS values into the
|
||||
* middle of various phases or points through the active duration.
|
||||
*/
|
||||
function startTimeForBeforePhase(timeline) {
|
||||
return timeline.currentTime - ANIM_DELAY_MS / 2;
|
||||
}
|
||||
function startTimeForActivePhase(timeline) {
|
||||
return timeline.currentTime - ANIM_DELAY_MS - ANIM_DUR_MS / 2;
|
||||
}
|
||||
function startTimeForAfterPhase(timeline) {
|
||||
return timeline.currentTime - ANIM_DELAY_MS - ANIM_DUR_MS - ANIM_DELAY_MS / 2;
|
||||
}
|
||||
function startTimeForStartOfActiveInterval(timeline) {
|
||||
const startTimeForStartOfActiveInterval = timeline => {
|
||||
return timeline.currentTime - ANIM_DELAY_MS;
|
||||
}
|
||||
function startTimeForFiftyPercentThroughActiveInterval(timeline) {
|
||||
};
|
||||
const startTimeForFiftyPercentThroughActiveInterval = timeline => {
|
||||
return timeline.currentTime - ANIM_DELAY_MS - ANIM_DUR_MS * 0.5;
|
||||
}
|
||||
function startTimeForEndOfActiveInterval(timeline) {
|
||||
};
|
||||
const startTimeForEndOfActiveInterval = timeline => {
|
||||
return timeline.currentTime - ANIM_DELAY_MS - ANIM_DUR_MS;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// Expected computed 'margin-left' values at points during the active interval:
|
||||
|
|
@ -77,8 +68,7 @@ const END_POSITION = 200;
|
|||
// the start delay and the start of the active interval which occurs after it.
|
||||
|
||||
// Called when the ready Promise's callbacks should happen
|
||||
function checkStateOnReadyPromiseResolved(animation)
|
||||
{
|
||||
const checkStateOnReadyPromiseResolved = animation => {
|
||||
assert_less_than_equal(animation.startTime, animation.timeline.currentTime,
|
||||
'Animation.startTime should be less than the timeline\'s ' +
|
||||
'currentTime on the first paint tick after animation creation');
|
||||
|
|
@ -92,11 +82,10 @@ function checkStateOnReadyPromiseResolved(animation)
|
|||
assert_equals(marginLeft, INITIAL_POSITION,
|
||||
'the computed value of margin-left should be unaffected ' +
|
||||
'by an animation with a delay on ready Promise resolve');
|
||||
}
|
||||
};
|
||||
|
||||
// Called when startTime is set to the time the active interval starts.
|
||||
function checkStateAtActiveIntervalStartTime(animation)
|
||||
{
|
||||
const checkStateAtActiveIntervalStartTime = animation => {
|
||||
// We don't test animation.startTime since our caller just set it.
|
||||
|
||||
assert_equals(animation.playState, 'running',
|
||||
|
|
@ -108,10 +97,9 @@ function checkStateAtActiveIntervalStartTime(animation)
|
|||
assert_between_inclusive(marginLeft, INITIAL_POSITION, TEN_PCT_POSITION,
|
||||
'the computed value of margin-left should be close to the value at the ' +
|
||||
'beginning of the animation');
|
||||
}
|
||||
};
|
||||
|
||||
function checkStateAtFiftyPctOfActiveInterval(animation)
|
||||
{
|
||||
const checkStateAtFiftyPctOfActiveInterval = animation => {
|
||||
// We don't test animation.startTime since our caller just set it.
|
||||
|
||||
var div = animation.effect.target;
|
||||
|
|
@ -119,11 +107,10 @@ function checkStateAtFiftyPctOfActiveInterval(animation)
|
|||
assert_equals(marginLeft, FIFTY_PCT_POSITION,
|
||||
'the computed value of margin-left should be half way through the ' +
|
||||
'animation at the midpoint of the active interval');
|
||||
}
|
||||
};
|
||||
|
||||
// Called when startTime is set to the time the active interval ends.
|
||||
function checkStateAtActiveIntervalEndTime(animation)
|
||||
{
|
||||
const checkStateAtActiveIntervalEndTime = animation => {
|
||||
// We don't test animation.startTime since our caller just set it.
|
||||
|
||||
assert_equals(animation.playState, 'finished',
|
||||
|
|
@ -135,10 +122,9 @@ function checkStateAtActiveIntervalEndTime(animation)
|
|||
assert_equals(marginLeft, END_POSITION,
|
||||
'the computed value of margin-left should be the final transitioned-to ' +
|
||||
'value at the end of the active duration');
|
||||
}
|
||||
};
|
||||
|
||||
test(function(t)
|
||||
{
|
||||
test(t => {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
flushComputedStyle(div);
|
||||
div.style.marginLeft = '200px'; // initiate transition
|
||||
|
|
@ -148,8 +134,7 @@ test(function(t)
|
|||
}, 'startTime of a newly created transition is unresolved');
|
||||
|
||||
|
||||
test(function(t)
|
||||
{
|
||||
test(t => {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
flushComputedStyle(div);
|
||||
div.style.marginLeft = '200px'; // initiate transition
|
||||
|
|
@ -163,7 +148,7 @@ test(function(t)
|
|||
'startTime');
|
||||
|
||||
|
||||
async_test(function(t) {
|
||||
async_test(t => {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
var eventWatcher = new EventWatcher(t, div, 'transitionend');
|
||||
|
||||
|
|
@ -172,7 +157,7 @@ async_test(function(t) {
|
|||
|
||||
var animation = div.getAnimations()[0];
|
||||
|
||||
animation.ready.then(t.step_func(function() {
|
||||
animation.ready.then(t.step_func(() => {
|
||||
checkStateOnReadyPromiseResolved(animation);
|
||||
|
||||
animation.startTime = startTimeForStartOfActiveInterval(animation.timeline);
|
||||
|
|
@ -184,17 +169,17 @@ async_test(function(t) {
|
|||
|
||||
animation.startTime = startTimeForEndOfActiveInterval(animation.timeline);
|
||||
return eventWatcher.wait_for('transitionend');
|
||||
})).then(t.step_func(function() {
|
||||
})).then(t.step_func(() => {
|
||||
checkStateAtActiveIntervalEndTime(animation);
|
||||
})).catch(t.step_func(function(reason) {
|
||||
})).catch(t.step_func(reason => {
|
||||
assert_unreached(reason);
|
||||
})).then(function() {
|
||||
})).then(() => {
|
||||
t.done();
|
||||
});
|
||||
}, 'Skipping forward through animation');
|
||||
|
||||
|
||||
test(function(t) {
|
||||
test(t => {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
var eventWatcher = new EventWatcher(t, div, 'transitionend');
|
||||
|
||||
|
|
@ -222,14 +207,14 @@ test(function(t) {
|
|||
// causing computed style to be updated and the 'transitionend' event to
|
||||
// be dispatched synchronously. We need to call waitForEvent first
|
||||
// otherwise eventWatcher will assert that the event was unexpected.
|
||||
eventWatcher.wait_for('transitionend').then(function() {
|
||||
eventWatcher.wait_for('transitionend').then(() => {
|
||||
t.done();
|
||||
});
|
||||
checkStateAtActiveIntervalStartTime(animation);
|
||||
}, 'Skipping backwards through transition');
|
||||
|
||||
|
||||
async_test(function(t) {
|
||||
async_test(t => {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
|
||||
flushComputedStyle(div);
|
||||
|
|
@ -239,13 +224,13 @@ async_test(function(t) {
|
|||
|
||||
var storedCurrentTime;
|
||||
|
||||
animation.ready.then(t.step_func(function() {
|
||||
animation.ready.then(t.step_func(() => {
|
||||
storedCurrentTime = animation.currentTime;
|
||||
animation.startTime = null;
|
||||
return animation.ready;
|
||||
})).catch(t.step_func(function(reason) {
|
||||
})).catch(t.step_func(reason => {
|
||||
assert_unreached(reason);
|
||||
})).then(t.step_func(function() {
|
||||
})).then(t.step_func(() => {
|
||||
assert_equals(animation.currentTime, storedCurrentTime,
|
||||
'Test that hold time is correct');
|
||||
t.done();
|
||||
|
|
@ -253,7 +238,7 @@ async_test(function(t) {
|
|||
}, 'Setting startTime to null');
|
||||
|
||||
|
||||
async_test(function(t) {
|
||||
async_test(t => {
|
||||
var div = addDiv(t, {'class': 'animated-div'});
|
||||
|
||||
flushComputedStyle(div);
|
||||
|
|
@ -261,7 +246,7 @@ async_test(function(t) {
|
|||
|
||||
var animation = div.getAnimations()[0];
|
||||
|
||||
animation.ready.then(t.step_func(function() {
|
||||
animation.ready.then(t.step_func(() => {
|
||||
var savedStartTime = animation.startTime;
|
||||
|
||||
assert_not_equals(animation.startTime, null,
|
||||
|
|
@ -269,14 +254,14 @@ async_test(function(t) {
|
|||
|
||||
animation.pause();
|
||||
return animation.ready;
|
||||
})).then(t.step_func(function() {
|
||||
})).then(t.step_func(() => {
|
||||
assert_equals(animation.startTime, null,
|
||||
'Animation.startTime is null after paused');
|
||||
assert_equals(animation.playState, 'paused',
|
||||
'Animation.playState is "paused" after pause() call');
|
||||
})).catch(t.step_func(function(reason) {
|
||||
})).catch(t.step_func(reason => {
|
||||
assert_unreached(reason);
|
||||
})).then(function() {
|
||||
})).then(() => {
|
||||
t.done();
|
||||
});
|
||||
}, 'Animation.startTime after paused');
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<script>
|
||||
'use strict';
|
||||
|
||||
test(function(t) {
|
||||
test(t => {
|
||||
var div = addDiv(t);
|
||||
|
||||
// Add a transition
|
||||
|
|
|
|||
|
|
@ -8,13 +8,13 @@
|
|||
<script>
|
||||
'use strict';
|
||||
|
||||
test(function(t) {
|
||||
test(t => {
|
||||
assert_equals(document.getAnimations().length, 0,
|
||||
'getAnimations returns an empty sequence for a document'
|
||||
+ ' with no animations');
|
||||
}, 'getAnimations for non-animated content');
|
||||
|
||||
test(function(t) {
|
||||
test(t => {
|
||||
var div = addDiv(t);
|
||||
|
||||
// Add a couple of transitions
|
||||
|
|
@ -34,7 +34,7 @@ test(function(t) {
|
|||
'getAnimations returns no running CSS Transitions');
|
||||
}, 'getAnimations for CSS Transitions');
|
||||
|
||||
test(function(t) {
|
||||
test(t => {
|
||||
addStyle(t, { '.init::after': 'content: ""; width: 0px; ' +
|
||||
'transition: all 100s;',
|
||||
'.init::before': 'content: ""; width: 0px; ' +
|
||||
|
|
@ -77,14 +77,14 @@ test(function(t) {
|
|||
}, 'CSS Transitions targetting (pseudo-)elements should have correct order ' +
|
||||
'after sorting');
|
||||
|
||||
async_test(function(t) {
|
||||
async_test(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() {
|
||||
animations[0].finished.then(t.step_func(() => {
|
||||
assert_equals(document.getAnimations().length, 0,
|
||||
'No animations returned');
|
||||
t.done();
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<script>
|
||||
'use strict';
|
||||
|
||||
test(function(t) {
|
||||
test(t => {
|
||||
var div = addDiv(t);
|
||||
|
||||
div.style.left = '0px';
|
||||
|
|
@ -21,7 +21,7 @@ test(function(t) {
|
|||
'Animation.target is the animatable div');
|
||||
}, 'Returned CSS transitions have the correct Animation.target');
|
||||
|
||||
test(function(t) {
|
||||
test(t => {
|
||||
addStyle(t, { '.init::after': 'content: ""; width: 0px; height: 0px; ' +
|
||||
'transition: all 10s;',
|
||||
'.change::after': 'width: 100px; height: 100px;' });
|
||||
|
|
@ -36,7 +36,7 @@ test(function(t) {
|
|||
'Both transitions return the same target object');
|
||||
}, 'effect.target should return the same CSSPseudoElement object each time');
|
||||
|
||||
test(function(t) {
|
||||
test(t => {
|
||||
addStyle(t, { '.init::after': 'content: ""; width: 0px; transition: all 10s;',
|
||||
'.change::after': 'width: 100px;' });
|
||||
var div = addDiv(t, { class: 'init' });
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<script>
|
||||
'use strict';
|
||||
|
||||
async_test(function(t) {
|
||||
async_test(t => {
|
||||
var div = addDiv(t);
|
||||
|
||||
// FIXME: This test does too many things. It should be split up.
|
||||
|
|
@ -25,7 +25,7 @@ async_test(function(t) {
|
|||
var animations = div.getAnimations();
|
||||
assert_equals(animations.length, 2,
|
||||
'getAnimations() returns one Animation per transitioning property');
|
||||
waitForAllAnimations(animations).then(t.step_func(function() {
|
||||
waitForAllAnimations(animations).then(t.step_func(() => {
|
||||
var startTime = animations[0].startTime;
|
||||
assert_true(startTime > 0 && startTime <= document.timeline.currentTime,
|
||||
'CSS transitions have sensible start times');
|
||||
|
|
@ -33,13 +33,13 @@ async_test(function(t) {
|
|||
'CSS transitions started together have the same start time');
|
||||
// Wait a moment then add a third transition
|
||||
return waitForFrame();
|
||||
})).then(t.step_func(function() {
|
||||
})).then(t.step_func(() => {
|
||||
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() {
|
||||
})).then(t.step_func(() => {
|
||||
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');
|
||||
|
|
@ -47,7 +47,7 @@ async_test(function(t) {
|
|||
}));
|
||||
}, 'getAnimations for CSS Transitions');
|
||||
|
||||
test(function(t) {
|
||||
test(t => {
|
||||
var div = addDiv(t, { style: 'left: 0px; transition: all 100s' });
|
||||
|
||||
flushComputedStyle(div);
|
||||
|
|
@ -57,11 +57,11 @@ test(function(t) {
|
|||
'Interface of returned animation is CSSTransition');
|
||||
}, 'getAnimations returns CSSTransition objects for CSS Transitions');
|
||||
|
||||
async_test(function(t) {
|
||||
async_test(t => {
|
||||
var div = addDiv(t);
|
||||
|
||||
// Set up event listener
|
||||
div.addEventListener('transitionend', t.step_func(function() {
|
||||
div.addEventListener('transitionend', t.step_func(() => {
|
||||
assert_equals(div.getAnimations().length, 0,
|
||||
'getAnimations does not return finished CSS Transitions');
|
||||
t.done();
|
||||
|
|
@ -76,7 +76,7 @@ async_test(function(t) {
|
|||
getComputedStyle(div).left;
|
||||
}, 'getAnimations for CSS Transitions that have finished');
|
||||
|
||||
test(function(t) {
|
||||
test(t => {
|
||||
var div = addDiv(t);
|
||||
|
||||
// Try to transition non-animatable property animation-duration
|
||||
|
|
@ -91,7 +91,7 @@ test(function(t) {
|
|||
+ ' of a non-animatable property');
|
||||
}, 'getAnimations for transition on non-animatable property');
|
||||
|
||||
test(function(t) {
|
||||
test(t => {
|
||||
var div = addDiv(t);
|
||||
|
||||
div.style.setProperty('-vendor-unsupported', '0px', '');
|
||||
|
|
@ -104,7 +104,7 @@ test(function(t) {
|
|||
+ ' of an unsupported property');
|
||||
}, 'getAnimations for transition on unsupported property');
|
||||
|
||||
test(function(t) {
|
||||
test(t => {
|
||||
var div = addDiv(t, { style: 'transform: translate(0px); ' +
|
||||
'opacity: 0; ' +
|
||||
'border-width: 0px; ' + // Shorthand
|
||||
|
|
@ -127,7 +127,7 @@ test(function(t) {
|
|||
assert_equals(animations[5].transitionProperty, 'transform');
|
||||
}, 'getAnimations sorts simultaneous transitions by name');
|
||||
|
||||
test(function(t) {
|
||||
test(t => {
|
||||
var div = addDiv(t, { style: 'transform: translate(0px); ' +
|
||||
'opacity: 0' });
|
||||
getComputedStyle(div).transform;
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ TransitionEventHandler.prototype.clear = () => {
|
|||
this.transitioncancel = undefined;
|
||||
};
|
||||
|
||||
function setupTransition(t, transitionStyle) {
|
||||
const setupTransition = (t, transitionStyle) => {
|
||||
const div = addDiv(t, { style: 'transition: ' + transitionStyle });
|
||||
// Note that this TransitionEventHandler should be created before EventWatcher
|
||||
// to capture all events in the handler prior to the EventWatcher since
|
||||
|
|
@ -55,7 +55,7 @@ function setupTransition(t, transitionStyle) {
|
|||
const transition = div.getAnimations()[0];
|
||||
|
||||
return { transition, watcher, div, handler };
|
||||
}
|
||||
};
|
||||
|
||||
// On the next frame (i.e. when events are queued), whether or not the
|
||||
// transition is still pending depends on the implementation.
|
||||
|
|
|
|||
|
|
@ -13,20 +13,20 @@
|
|||
<script>
|
||||
'use strict';
|
||||
|
||||
function getKeyframes(e) {
|
||||
const getKeyframes = e => {
|
||||
return e.getAnimations()[0].effect.getKeyframes();
|
||||
}
|
||||
};
|
||||
|
||||
function assert_frames_equal(a, b, name) {
|
||||
const assert_frames_equal = (a, b, name) => {
|
||||
assert_equals(Object.keys(a).sort().toString(),
|
||||
Object.keys(b).sort().toString(),
|
||||
"properties on " + name);
|
||||
for (var p in a) {
|
||||
assert_equals(a[p], b[p], "value for '" + p + "' on " + name);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
test(function(t) {
|
||||
test(t => {
|
||||
var div = addDiv(t);
|
||||
|
||||
div.style.left = '0px';
|
||||
|
|
@ -51,7 +51,7 @@ test(function(t) {
|
|||
}, 'KeyframeEffect.getKeyframes() returns expected frames for a simple'
|
||||
+ ' transition');
|
||||
|
||||
test(function(t) {
|
||||
test(t => {
|
||||
var div = addDiv(t);
|
||||
|
||||
div.style.left = '0px';
|
||||
|
|
@ -76,7 +76,7 @@ test(function(t) {
|
|||
}, 'KeyframeEffect.getKeyframes() returns expected frames for a simple'
|
||||
+ ' transition with a non-default easing function');
|
||||
|
||||
test(function(t) {
|
||||
test(t => {
|
||||
var div = addDiv(t);
|
||||
div.style.left = '0px';
|
||||
getComputedStyle(div).transitionProperty;
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
<script>
|
||||
'use strict';
|
||||
|
||||
test(function(t) {
|
||||
test(t => {
|
||||
var div = addDiv(t, { class: 'init' });
|
||||
flushComputedStyle(div);
|
||||
div.classList.add('change');
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<script>
|
||||
'use strict';
|
||||
|
||||
promise_test(function(t) {
|
||||
promise_test(t => {
|
||||
var div = addDiv(t);
|
||||
var watcher = new EventWatcher(t, div, [ 'transitionend',
|
||||
'transitioncancel' ]);
|
||||
|
|
@ -19,7 +19,7 @@ promise_test(function(t) {
|
|||
div.style.left = '100px';
|
||||
|
||||
var transition = div.getAnimations()[0];
|
||||
return transition.ready.then(function() {
|
||||
return transition.ready.then(() => {
|
||||
transition.currentTime = 50 * MS_PER_SEC;
|
||||
transition.effect = null;
|
||||
assert_equals(transition.transitionProperty, 'left');
|
||||
|
|
@ -29,7 +29,7 @@ promise_test(function(t) {
|
|||
});
|
||||
}, 'Test for removing a transition effect');
|
||||
|
||||
promise_test(function(t) {
|
||||
promise_test(t => {
|
||||
var div = addDiv(t);
|
||||
var watcher = new EventWatcher(t, div, [ 'transitionend',
|
||||
'transitioncancel' ]);
|
||||
|
|
@ -40,7 +40,7 @@ promise_test(function(t) {
|
|||
div.style.left = '100px';
|
||||
|
||||
var transition = div.getAnimations()[0];
|
||||
return transition.ready.then(function() {
|
||||
return transition.ready.then(() => {
|
||||
transition.currentTime = 50 * MS_PER_SEC;
|
||||
transition.effect = new KeyframeEffect(div,
|
||||
{ marginLeft: [ '0px' , '100px'] },
|
||||
|
|
@ -52,7 +52,7 @@ promise_test(function(t) {
|
|||
});
|
||||
}, 'Test for replacing the transition effect by a new keyframe effect');
|
||||
|
||||
promise_test(function(t) {
|
||||
promise_test(t => {
|
||||
var div = addDiv(t);
|
||||
var watcher = new EventWatcher(t, div, [ 'transitionend',
|
||||
'transitioncancel' ]);
|
||||
|
|
@ -64,7 +64,7 @@ promise_test(function(t) {
|
|||
div.style.left = '100px';
|
||||
|
||||
var transition = div.getAnimations()[0];
|
||||
return transition.ready.then(function() {
|
||||
return transition.ready.then(() => {
|
||||
transition.currentTime = 50 * MS_PER_SEC;
|
||||
transition.effect = new KeyframeEffect(div,
|
||||
{ marginLeft: [ '0px' , '100px'] },
|
||||
|
|
@ -73,7 +73,7 @@ promise_test(function(t) {
|
|||
});
|
||||
}, 'Test for setting a new keyframe effect with a shorter duration');
|
||||
|
||||
promise_test(function(t) {
|
||||
promise_test(t => {
|
||||
var div = addDiv(t);
|
||||
var watcher = new EventWatcher(t, div, [ 'transitionend',
|
||||
'transitioncancel' ]);
|
||||
|
|
@ -93,7 +93,7 @@ promise_test(function(t) {
|
|||
assert_equals(transition.transitionProperty, 'left');
|
||||
assert_true(transition.pending);
|
||||
|
||||
return transition.ready.then(function() {
|
||||
return transition.ready.then(() => {
|
||||
assert_false(transition.pending);
|
||||
});
|
||||
}, 'Test for setting a new keyframe effect to a pending transition');
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче