mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-02-18 14:56:07 +00:00
Bug 1108055 - Part 4: Add ComputedTiming mochitests. r=birtles
Add test_animation-computed-timing.html in css-animations and css-transitions. --HG-- extra : rebase_source : 7bfee6909c7d929399cbdb2a2c462000b6215228
This commit is contained in:
Boris Chiou
parent
2c0d38d0d8
commit
61c4d08674
@ -0,0 +1,566 @@
|
||||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<script src="../testcommon.js"></script>
|
||||
<style>
|
||||
@keyframes moveAnimation {
|
||||
from { margin-left: 100px }
|
||||
to { margin-left: 200px }
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<script>
|
||||
|
||||
'use strict';
|
||||
|
||||
// --------------------
|
||||
// delay
|
||||
// --------------------
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {style: 'animation: moveAnimation 100s'});
|
||||
var effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().delay, 0,
|
||||
'Initial value of delay');
|
||||
}, 'delay of a new animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {style: 'animation: moveAnimation 100s -10s'});
|
||||
var effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().delay, -10000,
|
||||
'Initial value of delay');
|
||||
}, 'Negative delay of a new animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {style: 'animation: moveAnimation 100s 10s'});
|
||||
var effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().delay, 10000,
|
||||
'Initial value of delay');
|
||||
}, 'Positive delay of a new animation');
|
||||
|
||||
|
||||
// --------------------
|
||||
// endDelay
|
||||
// --------------------
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {style: 'animation: moveAnimation 100s'});
|
||||
var effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().endDelay, 0,
|
||||
'Initial value of endDelay');
|
||||
}, 'endDelay of a new animation');
|
||||
|
||||
|
||||
// --------------------
|
||||
// fill
|
||||
// --------------------
|
||||
test(function(t) {
|
||||
var getEffectWithFill = function(fill) {
|
||||
var div = addDiv(t, {style: 'animation: moveAnimation 100s ' + fill});
|
||||
return div.getAnimations()[0].effect;
|
||||
};
|
||||
|
||||
var effect = getEffectWithFill('');
|
||||
assert_equals(effect.getComputedTiming().fill, 'none',
|
||||
'Initial value of fill');
|
||||
effect = getEffectWithFill('forwards');
|
||||
assert_equals(effect.getComputedTiming().fill, 'forwards',
|
||||
'Fill forwards');
|
||||
effect = getEffectWithFill('backwards');
|
||||
assert_equals(effect.getComputedTiming().fill, 'backwards',
|
||||
'Fill backwards');
|
||||
effect = getEffectWithFill('both');
|
||||
assert_equals(effect.getComputedTiming().fill, 'both',
|
||||
'Fill forwards and backwards');
|
||||
}, 'fill of a new animation');
|
||||
|
||||
|
||||
// --------------------
|
||||
// iterationStart
|
||||
// --------------------
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {style: 'animation: moveAnimation 100s'});
|
||||
var effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().iterationStart, 0,
|
||||
'Initial value of iterationStart');
|
||||
}, 'iterationStart of a new animation');
|
||||
|
||||
|
||||
// --------------------
|
||||
// iterations
|
||||
// --------------------
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {style: 'animation: moveAnimation 100s'});
|
||||
var effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().iterations, 1,
|
||||
'Initial value of iterations');
|
||||
}, 'iterations of a new animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {style: 'animation: moveAnimation 100s 2016.5'});
|
||||
var effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().iterations, 2016.5,
|
||||
'Initial value of iterations');
|
||||
}, 'iterations of a finitely repeating animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {style: 'animation: moveAnimation 100s infinite'});
|
||||
var effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().iterations, Infinity,
|
||||
'Initial value of iterations');
|
||||
}, 'iterations of an infinitely repeating animation');
|
||||
|
||||
|
||||
// --------------------
|
||||
// duration
|
||||
// --------------------
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {style: 'animation: moveAnimation 100s -10s infinite'});
|
||||
var effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().duration, 100000,
|
||||
'Initial value of duration');
|
||||
}, 'duration of a new animation');
|
||||
|
||||
|
||||
// --------------------
|
||||
// direction
|
||||
// --------------------
|
||||
test(function(t) {
|
||||
var getEffectWithDir = function(dir) {
|
||||
var div = addDiv(t, {style: 'animation: moveAnimation 100s ' + dir});
|
||||
return div.getAnimations()[0].effect;
|
||||
};
|
||||
|
||||
var effect = getEffectWithDir('');
|
||||
assert_equals(effect.getComputedTiming().direction, 'normal',
|
||||
'Initial value of normal direction');
|
||||
effect = getEffectWithDir('reverse');
|
||||
assert_equals(effect.getComputedTiming().direction, 'reverse',
|
||||
'Initial value of reverse direction');
|
||||
effect = getEffectWithDir('alternate');
|
||||
assert_equals(effect.getComputedTiming().direction, 'alternate',
|
||||
'Initial value of alternate direction');
|
||||
effect = getEffectWithDir('alternate-reverse');
|
||||
assert_equals(effect.getComputedTiming().direction, 'alternate-reverse',
|
||||
'Initial value of alternate-reverse direction');
|
||||
}, 'direction of a new animation');
|
||||
|
||||
|
||||
// --------------------
|
||||
// easing
|
||||
// --------------------
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {style: 'animation: moveAnimation 100s'});
|
||||
var effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().easing, 'linear',
|
||||
'Initial value of easing');
|
||||
}, 'easing of a new animation');
|
||||
|
||||
|
||||
// ------------------------------
|
||||
// endTime
|
||||
// = max(start delay + active duration + end delay, 0)
|
||||
// --------------------
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {style: 'animation: moveAnimation 100s'});
|
||||
var effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().endTime, 100000,
|
||||
'Initial value of endTime');
|
||||
}, 'endTime of an new animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {style: 'animation: moveAnimation 100s -5s'});
|
||||
var effect = div.getAnimations()[0].effect;
|
||||
var answer = 100000 - 5000; // ms
|
||||
assert_equals(effect.getComputedTiming().endTime, answer,
|
||||
'Initial value of endTime');
|
||||
}, 'endTime of an animation with a negative delay');
|
||||
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {style: 'animation: moveAnimation 10s -100s infinite'});
|
||||
var effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().endTime, Infinity,
|
||||
'Initial value of endTime');
|
||||
}, 'endTime of an infinitely repeating animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {style: 'animation: moveAnimation 0s 100s infinite'});
|
||||
var effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().endTime, 100000,
|
||||
'Initial value of endTime');
|
||||
}, 'endTime of an infinitely repeating zero-duration animation');
|
||||
|
||||
test(function(t) {
|
||||
// Fill forwards so div.getAnimations()[0] wouldn't return
|
||||
// undefined value.
|
||||
var div = addDiv(t, {style: 'animation: moveAnimation 10s -100s forwards'});
|
||||
var effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().endTime, 0,
|
||||
'Initial value of endTime');
|
||||
}, 'endTime of an animation that finishes before its startTime');
|
||||
|
||||
|
||||
// --------------------
|
||||
// activeDuration
|
||||
// = iteration duration * iteration count
|
||||
// --------------------
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {style: 'animation: moveAnimation 100s 5'});
|
||||
var effect = div.getAnimations()[0].effect;
|
||||
var answer = 100000 * 5; // ms
|
||||
assert_equals(effect.getComputedTiming().activeDuration, answer,
|
||||
'Initial value of activeDuration');
|
||||
}, 'activeDuration of a new animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {style: 'animation: moveAnimation 100s infinite'});
|
||||
var effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().activeDuration, Infinity,
|
||||
'Initial value of activeDuration');
|
||||
}, 'activeDuration of an infinitely repeating animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {style: 'animation: moveAnimation 0s 1s infinite'});
|
||||
var effect = div.getAnimations()[0].effect;
|
||||
// If either the iteration duration or iteration count are zero,
|
||||
// the active duration is zero.
|
||||
assert_equals(effect.getComputedTiming().activeDuration, 0,
|
||||
'Initial value of activeDuration');
|
||||
}, 'activeDuration of an infinitely repeating zero-duration animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {style: 'animation: moveAnimation 100s 1s 0'});
|
||||
var effect = div.getAnimations()[0].effect;
|
||||
// If either the iteration duration or iteration count are zero,
|
||||
// the active duration is zero.
|
||||
assert_equals(effect.getComputedTiming().activeDuration, 0,
|
||||
'Initial value of activeDuration');
|
||||
}, 'activeDuration of an animation with zero iterations');
|
||||
|
||||
|
||||
// --------------------
|
||||
// localTime
|
||||
// --------------------
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {style: 'animation: moveAnimation 100s'});
|
||||
var effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().localTime, 0,
|
||||
'Initial value of localTime');
|
||||
}, 'localTime of a new animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {style: 'animation: moveAnimation 100s'});
|
||||
var anim = div.getAnimations()[0];
|
||||
anim.currentTime = 5000;
|
||||
assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
|
||||
'current localTime after setting currentTime');
|
||||
}, 'localTime of an animation is always equal to currentTime');
|
||||
|
||||
async_test(function(t) {
|
||||
var div = addDiv(t, {style: 'animation: moveAnimation 100s'});
|
||||
|
||||
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');
|
||||
|
||||
test(function(t) {
|
||||
var div = addDiv(t);
|
||||
var effect = new KeyframeEffectReadOnly(div, {left: ["0px", "100px"]});
|
||||
|
||||
assert_equals(effect.getComputedTiming().localTime, null,
|
||||
'localTime for orphaned effect');
|
||||
}, 'localTime of an AnimationEffect without an Animation');
|
||||
|
||||
|
||||
// --------------------
|
||||
// progress
|
||||
// Note: Default timing function is linear.
|
||||
// --------------------
|
||||
test(function(t) {
|
||||
[{fill: '', progress: [ null, null ]},
|
||||
{fill: 'none', progress: [ null, null ]},
|
||||
{fill: 'forwards', progress: [ null, 1.0 ]},
|
||||
{fill: 'backwards', progress: [ 0.0, null ]},
|
||||
{fill: 'both', progress: [ 0.0, 1.0 ]}]
|
||||
.forEach(function(test) {
|
||||
var div =
|
||||
addDiv(t, {style: 'animation: moveAnimation 100s 10s ' + test.fill});
|
||||
var anim = div.getAnimations()[0];
|
||||
assert_true(anim.effect.getComputedTiming().progress === test.progress[0],
|
||||
'initial progress with "' + test.fill + '" fill');
|
||||
anim.finish();
|
||||
assert_true(anim.effect.getComputedTiming().progress === test.progress[1],
|
||||
'finished progress with "' + test.fill + '" fill');
|
||||
});
|
||||
}, 'progress of an animation with different fill modes');
|
||||
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {style: 'animation: moveAnimation 10s 10 both'});
|
||||
var anim = div.getAnimations()[0];
|
||||
|
||||
assert_equals(anim.effect.getComputedTiming().progress, 0.0,
|
||||
'Initial value of progress');
|
||||
anim.currentTime += 2500;
|
||||
assert_equals(anim.effect.getComputedTiming().progress, 0.25,
|
||||
'Value of progress');
|
||||
anim.currentTime += 5000;
|
||||
assert_equals(anim.effect.getComputedTiming().progress, 0.75,
|
||||
'Value of progress');
|
||||
anim.currentTime += 5000;
|
||||
assert_equals(anim.effect.getComputedTiming().progress, 0.25,
|
||||
'Value of progress');
|
||||
anim.finish()
|
||||
assert_equals(anim.effect.getComputedTiming().progress, 1.0,
|
||||
'Value of progress');
|
||||
}, 'progress of an integral repeating animation with normal direction');
|
||||
|
||||
test(function(t) {
|
||||
var div = addDiv(t);
|
||||
// Note: FillMode here is "both" because
|
||||
// 1. Since this a zero-duration animation, it will already have finished
|
||||
// so it won't be returned by getAnimations() unless it fills forwards.
|
||||
// 2. Fill backwards, so the progress before phase wouldn't be
|
||||
// unresolved (null value).
|
||||
var div = addDiv(t, {style: 'animation: moveAnimation 0s infinite both'});
|
||||
var anim = div.getAnimations()[0];
|
||||
|
||||
assert_equals(anim.effect.getComputedTiming().progress, 1.0,
|
||||
'Initial value of progress in after phase');
|
||||
|
||||
// Seek backwards
|
||||
anim.currentTime -= 1000;
|
||||
assert_equals(anim.effect.getComputedTiming().progress, 0.0,
|
||||
'Value of progress before phase');
|
||||
}, 'progress of an infinitely repeating zero-duration animation');
|
||||
|
||||
test(function(t) {
|
||||
// Default iterations = 1
|
||||
var div = addDiv(t, {style: 'animation: moveAnimation 0s both'});
|
||||
var anim = div.getAnimations()[0];
|
||||
|
||||
assert_equals(anim.effect.getComputedTiming().progress, 1.0,
|
||||
'Initial value of progress in after phase');
|
||||
|
||||
// Seek backwards
|
||||
anim.currentTime -= 1000;
|
||||
assert_equals(anim.effect.getComputedTiming().progress, 0.0,
|
||||
'Value of progress before phase');
|
||||
}, 'progress of a finitely repeating zero-duration animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {style: 'animation: moveAnimation 0s 5s 10.25 both'});
|
||||
var anim = div.getAnimations()[0];
|
||||
|
||||
assert_equals(anim.effect.getComputedTiming().progress, 0.0,
|
||||
'Initial value of progress (before phase)');
|
||||
|
||||
// Using iteration duration of 1 now.
|
||||
// currentIteration now is floor(10.25) = 10, so progress should be 25%.
|
||||
anim.finish();
|
||||
assert_equals(anim.effect.getComputedTiming().progress, 0.25,
|
||||
'Value of progress in after phase');
|
||||
}, 'progress of a non-integral repeating zero-duration animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {style: 'animation: moveAnimation 0s 5s 10.25 both reverse'});
|
||||
var anim = div.getAnimations()[0];
|
||||
|
||||
assert_equals(anim.effect.getComputedTiming().progress, 1.0,
|
||||
'Initial value of progress (before phase)');
|
||||
|
||||
// Seek forwards
|
||||
anim.finish();
|
||||
assert_equals(anim.effect.getComputedTiming().progress, 0.75,
|
||||
'Value of progress in after phase');
|
||||
}, 'Progress of a non-integral repeating zero-duration animation ' +
|
||||
'with reversing direction');
|
||||
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {style: 'animation: moveAnimation 10s 10.25 both alternate'});
|
||||
var anim = div.getAnimations()[0];
|
||||
|
||||
assert_equals(anim.effect.getComputedTiming().progress, 0.0,
|
||||
'Initial value of progress');
|
||||
anim.currentTime += 2500;
|
||||
assert_equals(anim.effect.getComputedTiming().progress, 0.25,
|
||||
'Value of progress');
|
||||
anim.currentTime += 5000;
|
||||
assert_equals(anim.effect.getComputedTiming().progress, 0.75,
|
||||
'Value of progress');
|
||||
anim.currentTime += 5000;
|
||||
assert_equals(anim.effect.getComputedTiming().progress, 0.75,
|
||||
'Value of progress');
|
||||
anim.finish()
|
||||
assert_equals(anim.effect.getComputedTiming().progress, 0.25,
|
||||
'Value of progress');
|
||||
}, 'progress of a non-integral repeating animation ' +
|
||||
'with alternate direction');
|
||||
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {style: 'animation: moveAnimation 10s 10.25 both alternate-reverse'});
|
||||
var anim = div.getAnimations()[0];
|
||||
|
||||
assert_equals(anim.effect.getComputedTiming().progress, 1.0,
|
||||
'Initial value of progress');
|
||||
anim.currentTime += 2500;
|
||||
assert_equals(anim.effect.getComputedTiming().progress, 0.75,
|
||||
'Value of progress');
|
||||
anim.currentTime += 5000;
|
||||
assert_equals(anim.effect.getComputedTiming().progress, 0.25,
|
||||
'Value of progress');
|
||||
anim.currentTime += 5000;
|
||||
assert_equals(anim.effect.getComputedTiming().progress, 0.25,
|
||||
'Value of progress');
|
||||
anim.finish()
|
||||
assert_equals(anim.effect.getComputedTiming().progress, 0.75,
|
||||
'Value of progress');
|
||||
}, 'progress of a non-integral repeating animation ' +
|
||||
'with alternate-reversing direction');
|
||||
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {style: 'animation: moveAnimation 0s 10.25 both alternate'});
|
||||
var anim = div.getAnimations()[0];
|
||||
|
||||
assert_equals(anim.effect.getComputedTiming().progress, 0.25,
|
||||
'Initial value of progress');
|
||||
anim.currentTime += 2500;
|
||||
assert_equals(anim.effect.getComputedTiming().progress, 0.25,
|
||||
'Value of progress');
|
||||
anim.currentTime -= 5000;
|
||||
assert_equals(anim.effect.getComputedTiming().progress, 0.0,
|
||||
'Value of progress');
|
||||
anim.finish()
|
||||
assert_equals(anim.effect.getComputedTiming().progress, 0.25,
|
||||
'Value of progress');
|
||||
}, 'progress of a non-integral repeating zero-duration animation ' +
|
||||
'with alternate direction');
|
||||
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {style: 'animation: moveAnimation 0s 10.25 both alternate-reverse'});
|
||||
var anim = div.getAnimations()[0];
|
||||
|
||||
assert_equals(anim.effect.getComputedTiming().progress, 0.75,
|
||||
'Initial value of progress');
|
||||
anim.currentTime += 2500;
|
||||
assert_equals(anim.effect.getComputedTiming().progress, 0.75,
|
||||
'Value of progress');
|
||||
anim.currentTime -= 5000;
|
||||
assert_equals(anim.effect.getComputedTiming().progress, 1.0,
|
||||
'Value of progress');
|
||||
anim.finish()
|
||||
assert_equals(anim.effect.getComputedTiming().progress, 0.75,
|
||||
'Value of progress');
|
||||
}, 'progress of a non-integral repeating zero-duration animation ' +
|
||||
'with alternate-reverse direction');
|
||||
|
||||
|
||||
// --------------------
|
||||
// currentIteration
|
||||
// --------------------
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {style: 'animation: moveAnimation 100s 2s'});
|
||||
var effect = div.getAnimations()[0].effect;
|
||||
assert_equals(effect.getComputedTiming().currentIteration, null,
|
||||
'Initial value of currentIteration before phase');
|
||||
}, 'currentIteration of a new animation with no backwards fill is unresolved ' +
|
||||
'in before phase');
|
||||
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {style: 'animation: moveAnimation 100s'});
|
||||
var anim = div.getAnimations()[0];
|
||||
assert_equals(anim.effect.getComputedTiming().currentIteration, 0,
|
||||
'Initial value of currentIteration');
|
||||
}, 'currentIteration of a new animation is zero');
|
||||
|
||||
test(function(t) {
|
||||
// Note: FillMode here is "both" because
|
||||
// 1. Since this a zero-duration animation, it will already have finished
|
||||
// so it won't be returned by getAnimations() unless it fills forwards.
|
||||
// 2. Fill backwards, so the currentIteration (before phase) wouldn't be
|
||||
// unresolved (null value).
|
||||
var div = addDiv(t, {style: 'animation: moveAnimation 0s infinite both'});
|
||||
var anim = div.getAnimations()[0];
|
||||
|
||||
assert_equals(anim.effect.getComputedTiming().currentIteration, Infinity,
|
||||
'Initial value of currentIteration in after phase');
|
||||
|
||||
// Seek backwards
|
||||
anim.currentTime -= 2000;
|
||||
assert_equals(anim.effect.getComputedTiming().currentIteration, 0,
|
||||
'Value of currentIteration count during before phase');
|
||||
}, 'currentIteration of an infinitely repeating zero-duration animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {style: 'animation: moveAnimation 0s 10.5 both'});
|
||||
var anim = div.getAnimations()[0];
|
||||
|
||||
// Note: currentIteration = ceil(iteration start + iteration count) - 1
|
||||
assert_equals(anim.effect.getComputedTiming().currentIteration, 10,
|
||||
'Initial value of currentIteration');
|
||||
|
||||
// Seek backwards
|
||||
anim.currentTime -= 2000;
|
||||
assert_equals(anim.effect.getComputedTiming().currentIteration, 0,
|
||||
'Value of currentIteration count during before phase');
|
||||
}, 'currentIteration of a finitely repeating zero-duration animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {style: 'animation: moveAnimation 100s 5.5 forwards'});
|
||||
var anim = div.getAnimations()[0];
|
||||
|
||||
assert_equals(anim.effect.getComputedTiming().currentIteration, 0,
|
||||
'Initial value of currentIteration');
|
||||
// The 3rd iteration
|
||||
// Note: currentIteration = floor(scaled active time / iteration duration)
|
||||
anim.currentTime = 250000; // ms
|
||||
assert_equals(anim.effect.getComputedTiming().currentIteration, 2,
|
||||
'Value of currentIteration during the 3rd iteration');
|
||||
// Finish
|
||||
anim.finish();
|
||||
assert_equals(anim.effect.getComputedTiming().currentIteration, 5,
|
||||
'Value of currentIteration in after phase');
|
||||
}, 'currentIteration of an animation with a non-integral iteration count');
|
||||
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {style: 'animation: moveAnimation 100s 2 forwards'});
|
||||
var anim = div.getAnimations()[0];
|
||||
|
||||
assert_equals(anim.effect.getComputedTiming().currentIteration, 0,
|
||||
'Initial value of currentIteration');
|
||||
// Finish
|
||||
anim.finish();
|
||||
assert_equals(anim.effect.getComputedTiming().currentIteration, 1,
|
||||
'Value of currentIteration in after phase');
|
||||
}, 'currentIteration of an animation with an integral iteration count');
|
||||
|
||||
test(function(t) {
|
||||
var div = addDiv(t, {style: 'animation: moveAnimation 100s forwards'});
|
||||
var anim = div.getAnimations()[0];
|
||||
assert_equals(anim.effect.getComputedTiming().currentIteration, 0,
|
||||
'Initial value of currentIteration');
|
||||
// Finish
|
||||
anim.finish();
|
||||
assert_equals(anim.effect.getComputedTiming().currentIteration, 0,
|
||||
'Value of currentIteration in after phase');
|
||||
}, 'currentIteration of an animation with a default iteration count');
|
||||
|
||||
test(function(t) {
|
||||
var div = addDiv(t);
|
||||
var effect = new KeyframeEffectReadOnly(div, {left: ["0px", "100px"]});
|
||||
|
||||
assert_equals(effect.getComputedTiming().currentIteration, null,
|
||||
'currentIteration for orphaned effect');
|
||||
}, 'currentIteration of an AnimationEffect without an Animation');
|
||||
|
||||
// TODO: If iteration duration is Infinity, currentIteration is 0.
|
||||
// However, we cannot set iteration duration to Infinity in CSS Animation now.
|
||||
|
||||
done();
|
||||
</script>
|
||||
</body>
|
||||
@ -0,0 +1,16 @@
|
||||
<!doctype html>
|
||||
<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_animation-computed-timing.html");
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
@ -0,0 +1,315 @@
|
||||
<!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>
|
||||
@ -0,0 +1,16 @@
|
||||
<!doctype html>
|
||||
<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_animation-computed-timing.html");
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
@ -6,6 +6,8 @@ support-files =
|
||||
support-files = css-animations/file_animations-dynamic-changes.html
|
||||
[css-animations/test_animation-cancel.html]
|
||||
support-files = css-animations/file_animation-cancel.html
|
||||
[css-animations/test_animation-computed-timing.html]
|
||||
support-files = css-animations/file_animation-computed-timing.html
|
||||
[css-animations/test_animation-currenttime.html]
|
||||
support-files = css-animations/file_animation-currenttime.html
|
||||
[css-animations/test_animation-finish.html]
|
||||
@ -43,6 +45,8 @@ support-files = css-animations/file_element-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-computed-timing.html]
|
||||
support-files = css-transitions/file_animation-computed-timing.html
|
||||
[css-transitions/test_animation-currenttime.html]
|
||||
support-files = css-transitions/file_animation-currenttime.html
|
||||
[css-transitions/test_animation-finished.html]
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user