<!doctype html>
<meta charset=utf-8>
<script src="../testcommon.js"></script>
<style>
.animated-div {
margin-left: 100px;
}
</style>
<body>
<script>
'use strict';
// --------------------
// delay
// --------------------
test(function(t) {
var div = addDiv(t, {'class': 'animated-div'});
div.style.transition = 'margin-left 10s';
flushComputedStyle(div);
div.style.marginLeft = '10px';
var effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().delay, 0,
'Initial value of delay');
}, 'delay of a new tranisition');
test(function(t) {
var div = addDiv(t, {'class': 'animated-div'});
div.style.transition = 'margin-left 10s 10s';
flushComputedStyle(div);
div.style.marginLeft = '10px';
var effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().delay, 10000,
'Initial value of delay');
}, 'Positive delay of a new transition');
test(function(t) {
var div = addDiv(t, {'class': 'animated-div'});
div.style.transition = 'margin-left 10s -5s';
flushComputedStyle(div);
div.style.marginLeft = '10px';
var effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().delay, -5000,
'Initial value of delay');
}, 'Negative delay of a new transition');
// --------------------
// endDelay
// --------------------
test(function(t) {
var div = addDiv(t, {'class': 'animated-div'});
div.style.transition = 'margin-left 10s';
flushComputedStyle(div);
div.style.marginLeft = '10px';
var effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().endDelay, 0,
'Initial value of endDelay');
}, 'endDelay of a new transition');
// --------------------
// fill
// --------------------
test(function(t) {
var div = addDiv(t, {'class': 'animated-div'});
div.style.transition = 'margin-left 10s';
flushComputedStyle(div);
div.style.marginLeft = '10px';
var effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().fill, 'backwards',
'Fill backwards');
}, 'fill of a new transition');
// --------------------
// iterationStart
// --------------------
test(function(t) {
var div = addDiv(t, {'class': 'animated-div'});
div.style.transition = 'margin-left 10s';
flushComputedStyle(div);
div.style.marginLeft = '10px';
var effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().iterationStart, 0,
'Initial value of iterationStart');
}, 'iterationStart of a new transition');
// --------------------
// iterations
// --------------------
test(function(t) {
var div = addDiv(t, {'class': 'animated-div'});
div.style.transition = 'margin-left 10s';
flushComputedStyle(div);
div.style.marginLeft = '10px';
var effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().iterations, 1,
'Initial value of iterations');
}, 'iterations of a new transition');
// --------------------
// duration
// --------------------
test(function(t) {
var div = addDiv(t, {'class': 'animated-div'});
div.style.transition = 'margin-left 10s';
flushComputedStyle(div);
div.style.marginLeft = '10px';
var effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().duration, 10000,
'Initial value of duration');
}, 'duration of a new transition');
// --------------------
// direction
// --------------------
test(function(t) {
var div = addDiv(t, {'class': 'animated-div'});
div.style.transition = 'margin-left 10s';
flushComputedStyle(div);
div.style.marginLeft = '10px';
var effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().direction, 'normal',
'Initial value of direction');
}, 'direction of a new transition');
// --------------------
// easing
// --------------------
test(function(t) {
var div = addDiv(t, {'class': 'animated-div'});
div.style.transition = 'margin-left 10s';
flushComputedStyle(div);
div.style.marginLeft = '10px';
var effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().easing, 'linear',
'Initial value of easing');
}, 'easing of a new transition');
// ------------------------------
// endTime
// = max(start delay + active duration + end delay, 0)
// --------------------
test(function(t) {
var div = addDiv(t, {'class': 'animated-div'});
div.style.transition = 'margin-left 100s -5s';
flushComputedStyle(div);
div.style.marginLeft = '10px';
var effect = div.getAnimations()[0].effect;
var answer = 100000 - 5000; // ms
assert_equals(effect.getComputedTiming().endTime, answer,
'Initial value of endTime');
}, 'endTime of a new transition');
// --------------------
// activeDuration
// = iteration duration * iteration count(==1)
// --------------------
test(function(t) {
var div = addDiv(t, {'class': 'animated-div'});
div.style.transition = 'margin-left 100s -5s';
flushComputedStyle(div);
div.style.marginLeft = '10px';
var effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().activeDuration, 100000,
'Initial value of activeDuration');
}, 'activeDuration of a new transition');
// --------------------
// localTime
// --------------------
test(function(t) {
var div = addDiv(t, {'class': 'animated-div'});
div.style.transition = 'margin-left 100s';
flushComputedStyle(div);
div.style.marginLeft = '10px';
var effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().localTime, 0,
'Initial value of localTime');
}, 'localTime of a new transition');
test(function(t) {
var div = addDiv(t, {'class': 'animated-div'});
div.style.transition = 'margin-left 100s';
flushComputedStyle(div);
div.style.marginLeft = '10px';
var anim = div.getAnimations()[0];
anim.currentTime = 5000;
assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
'current localTime after setting currentTime');
}, 'localTime is always equal to currentTime');
async_test(function(t) {
var div = addDiv(t, {'class': 'animated-div'});
div.style.transition = 'margin-left 100s';
flushComputedStyle(div);
div.style.marginLeft = '10px';
var anim = div.getAnimations()[0];
anim.playbackRate = 2; // 2 times faster
anim.ready.then(t.step_func(function() {
assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
'localTime is equal to currentTime');
return waitForFrame();
})).then(t.step_func_done(function() {
assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
'localTime is equal to currentTime');
}));
}, 'localTime reflects playbackRate immediately');
// --------------------
// progress
// --------------------
test(function(t) {
var div = addDiv(t, {'class': 'animated-div'});
div.style.transition = 'margin-left 10.5s';
flushComputedStyle(div);
div.style.marginLeft = '10px';
var effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().progress, 0.0,
'Initial value of progress');
}, 'progress of a new transition');
test(function(t) {
var div = addDiv(t, {'class': 'animated-div'});
div.style.transition = 'margin-left 10.5s 2s';
flushComputedStyle(div);
div.style.marginLeft = '10px';
var effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().progress, 0.0,
'Initial value of progress');
}, 'progress of a new transition with positive delay in before phase');
test(function(t) {
var div = addDiv(t, {'class': 'animated-div'});
div.style.transition = 'margin-left 10.5s';
flushComputedStyle(div);
div.style.marginLeft = '10px';
var anim = div.getAnimations()[0];
anim.finish()
assert_equals(anim.effect.getComputedTiming().progress, null,
'finished progress');
}, 'progress of a finished transition');
// --------------------
// currentIteration
// --------------------
test(function(t) {
var div = addDiv(t, {'class': 'animated-div'});
div.style.transition = 'margin-left 10s';
flushComputedStyle(div);
div.style.marginLeft = '10px';
var effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().currentIteration, 0,
'Initial value of currentIteration');
}, 'currentIteration of a new transition');
test(function(t) {
var div = addDiv(t, {'class': 'animated-div'});
div.style.transition = 'margin-left 10s 2s';
flushComputedStyle(div);
div.style.marginLeft = '10px';
var effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().currentIteration, 0,
'Initial value of currentIteration');
}, 'currentIteration of a new transition with positive delay in before phase');
test(function(t) {
var div = addDiv(t, {'class': 'animated-div'});
div.style.transition = 'margin-left 10s';
flushComputedStyle(div);
div.style.marginLeft = '10px';
var anim = div.getAnimations()[0];
anim.finish();
assert_equals(anim.effect.getComputedTiming().currentIteration, null,
'finished currentIteration');
}, 'currentIteration of a finished transition');
done();
</script>
</body>