316 lines
9.1 KiB
HTML
316 lines
9.1 KiB
HTML
<!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>
|