| <!doctype html><!-- webkit-test-runner [ enableCSSAnimationsAndCSSTransitionsBackedByWebAnimations=true ] --> |
| <meta charset=utf-8> |
| <script src="../../../resources/testharness.js"></script> |
| <script src="../../../resources/testharnessreport.js"></script> |
| <script src="../resources/testcommon.js"></script> |
| <style> |
| @keyframes moveAnimation { |
| from { margin-left: 100px } |
| to { margin-left: 200px } |
| } |
| </style> |
| <body> |
| <div id="log"></div> |
| <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, -10 * MS_PER_SEC, |
| '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, 10 * MS_PER_SEC, |
| '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, 100 * MS_PER_SEC, |
| '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, 100 * MS_PER_SEC, |
| '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 = (100 - 5) * MS_PER_SEC; |
| 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, 100 * MS_PER_SEC, |
| 'Initial value of endTime'); |
| }, 'endTime of an infinitely repeating zero-duration animation'); |
| |
| test(function(t) { |
| // Fill forwards so div.getAnimations()[0] won't return an |
| // 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 = 100 * MS_PER_SEC * 5; |
| 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 = 5 * MS_PER_SEC; |
| assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime, |
| 'current localTime after setting currentTime'); |
| }, 'localTime of an animation is always equal to currentTime'); |
| |
| promise_test(function(t) { |
| var div = addDiv(t, {style: 'animation: moveAnimation 100s'}); |
| |
| var anim = div.getAnimations()[0]; |
| anim.playbackRate = 2; // 2 times faster |
| |
| return anim.ready.then(function() { |
| assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime, |
| 'localTime is equal to currentTime'); |
| return waitForFrame(); |
| }).then(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 += 2.5 * MS_PER_SEC; |
| assert_equals(anim.effect.getComputedTiming().progress, 0.25, |
| 'Value of progress'); |
| anim.currentTime += 5 * MS_PER_SEC; |
| assert_equals(anim.effect.getComputedTiming().progress, 0.75, |
| 'Value of progress'); |
| anim.currentTime += 5 * MS_PER_SEC; |
| 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 -= 1 * MS_PER_SEC; |
| 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 -= 1 * MS_PER_SEC; |
| 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 += 2.5 * MS_PER_SEC; |
| assert_equals(anim.effect.getComputedTiming().progress, 0.25, |
| 'Value of progress'); |
| anim.currentTime += 5 * MS_PER_SEC; |
| assert_equals(anim.effect.getComputedTiming().progress, 0.75, |
| 'Value of progress'); |
| anim.currentTime += 5 * MS_PER_SEC; |
| 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 += 2.5 * MS_PER_SEC; |
| assert_equals(anim.effect.getComputedTiming().progress, 0.75, |
| 'Value of progress'); |
| anim.currentTime += 5 * MS_PER_SEC; |
| assert_equals(anim.effect.getComputedTiming().progress, 0.25, |
| 'Value of progress'); |
| anim.currentTime += 5 * MS_PER_SEC; |
| 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 += 2.5 * MS_PER_SEC; |
| assert_equals(anim.effect.getComputedTiming().progress, 0.25, |
| 'Value of progress'); |
| anim.currentTime -= 5 * MS_PER_SEC; |
| 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 += 2.5 * MS_PER_SEC; |
| assert_equals(anim.effect.getComputedTiming().progress, 0.75, |
| 'Value of progress'); |
| anim.currentTime -= 5 * MS_PER_SEC; |
| 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 -= 2 * MS_PER_SEC; |
| 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 -= 2 * MS_PER_SEC; |
| 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 = 250 * MS_PER_SEC; |
| 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. |
| |
| </script> |
| </body> |
