Index: third_party/WebKit/LayoutTests/external/wpt/web-animations/interfaces/KeyframeEffect/effect-easing.html |
diff --git a/third_party/WebKit/LayoutTests/external/wpt/web-animations/interfaces/KeyframeEffect/effect-easing.html b/third_party/WebKit/LayoutTests/external/wpt/web-animations/interfaces/KeyframeEffect/effect-easing.html |
deleted file mode 100644 |
index 05019cdf3e4a2bfb27991ea8985963e6d8b835dc..0000000000000000000000000000000000000000 |
--- a/third_party/WebKit/LayoutTests/external/wpt/web-animations/interfaces/KeyframeEffect/effect-easing.html |
+++ /dev/null |
@@ -1,683 +0,0 @@ |
-<!DOCTYPE html> |
-<meta charset=utf-8> |
-<title>Effect-level easing tests</title> |
-<link rel="help" href="http://w3c.github.io/web-animations/#calculating-the-transformed-time"> |
-<link rel="author" title="Hiroyuki Ikezoe" href="mailto:hiikezoe@mozilla-japan.org"> |
-<script src="/resources/testharness.js"></script> |
-<script src="/resources/testharnessreport.js"></script> |
-<script src="../../testcommon.js"></script> |
-<script src="../../resources/effect-easing-tests.js"></script> |
-<body> |
-<div id="log"></div> |
-<div id="target"></div> |
-<script> |
-"use strict"; |
- |
-function assert_style_left_at(animation, time, easingFunction) { |
- animation.currentTime = time; |
- var portion = time / animation.effect.timing.duration; |
- assert_approx_equals(pxToNum(getComputedStyle(animation.effect.target).left), |
- easingFunction(portion) * 100, |
- 0.01, |
- 'The left of the animation should be approximately ' + |
- easingFunction(portion) * 100 + ' at ' + time + 'ms'); |
-} |
- |
-gEffectEasingTests.forEach(function(options) { |
- test(function(t) { |
- var target = createDiv(t); |
- target.style.position = 'absolute'; |
- var anim = target.animate([ { left: '0px' }, { left: '100px' } ], |
- { duration: 1000, |
- fill: 'forwards', |
- easing: options.easing }); |
- var easing = options.easingFunction; |
- |
- anim.pause(); |
- |
- assert_style_left_at(anim, 0, easing); |
- assert_style_left_at(anim, 250, easing); |
- assert_style_left_at(anim, 500, easing); |
- assert_style_left_at(anim, 750, easing); |
- assert_style_left_at(anim, 1000, easing); |
- }, options.desc); |
-}); |
- |
-var gEffectEasingTestsWithKeyframeEasing = [ |
- { |
- desc: 'effect easing produces values greater than 1 with keyframe ' + |
- 'easing cubic-bezier(0, 0, 0, 0)', |
- easing: 'cubic-bezier(0, 1.5, 1, 1.5)', |
- keyframeEasing: 'cubic-bezier(0, 0, 0, 0)', // linear |
- easingFunction: cubicBezier(0, 1.5, 1, 1.5) |
- }, |
- { |
- desc: 'effect easing produces values greater than 1 with keyframe ' + |
- 'easing cubic-bezier(1, 1, 1, 1)', |
- easing: 'cubic-bezier(0, 1.5, 1, 1.5)', |
- keyframeEasing: 'cubic-bezier(1, 1, 1, 1)', // linear |
- easingFunction: cubicBezier(0, 1.5, 1, 1.5) |
- }, |
- { |
- desc: 'effect easing produces negative values 1 with keyframe ' + |
- 'easing cubic-bezier(0, 0, 0, 0)', |
- easing: 'cubic-bezier(0, -0.5, 1, -0.5)', |
- keyframeEasing: 'cubic-bezier(0, 0, 0, 0)', // linear |
- easingFunction: cubicBezier(0, -0.5, 1, -0.5) |
- }, |
- { |
- desc: 'effect easing produces negative values 1 with keyframe ' + |
- 'easing cubic-bezier(1, 1, 1, 1)', |
- easing: 'cubic-bezier(0, -0.5, 1, -0.5)', |
- keyframeEasing: 'cubic-bezier(1, 1, 1, 1)', // linear |
- easingFunction: cubicBezier(0, -0.5, 1, -0.5) |
- }, |
-]; |
- |
-gEffectEasingTestsWithKeyframeEasing.forEach(function(options) { |
- test(function(t) { |
- var target = createDiv(t); |
- target.style.position = 'absolute'; |
- var anim = target.animate( |
- [ { left: '0px', easing: options.keyframeEasing }, |
- { left: '100px' } ], |
- { duration: 1000, |
- fill: 'forwards', |
- easing: options.easing }); |
- var easing = options.easingFunction; |
- |
- anim.pause(); |
- |
- assert_style_left_at(anim, 0, easing); |
- assert_style_left_at(anim, 250, easing); |
- assert_style_left_at(anim, 500, easing); |
- assert_style_left_at(anim, 750, easing); |
- assert_style_left_at(anim, 1000, easing); |
- }, options.desc); |
-}); |
- |
-// Other test cases that effect easing produces values outside of [0,1]. |
-test(function(t) { |
- var target = createDiv(t); |
- target.style.position = 'absolute'; |
- var anim = target.animate([ { left: '0px', easing: 'step-start' }, |
- { left: '100px' } ], |
- { duration: 1000, |
- fill: 'forwards', |
- easing: 'cubic-bezier(0, 1.5, 1, 1.5)' }); |
- anim.pause(); |
- |
- // The bezier function produces values greater than 1 in (0.23368794, 1) |
- anim.currentTime = 0; |
- assert_equals(getComputedStyle(target).left, '100px'); |
- anim.currentTime = 230; |
- assert_equals(getComputedStyle(target).left, '100px'); |
- anim.currentTime = 250; |
- assert_equals(getComputedStyle(target).left, '100px'); |
- anim.currentTime = 1000; |
- assert_equals(getComputedStyle(target).left, '100px'); |
-}, 'effect easing produces values greater than 1 with step-start keyframe'); |
- |
-test(function(t) { |
- var target = createDiv(t); |
- target.style.position = 'absolute'; |
- var anim = target.animate([ { left: '0px', easing: 'step-end' }, |
- { left: '100px' } ], |
- { duration: 1000, |
- fill: 'forwards', |
- easing: 'cubic-bezier(0, 1.5, 1, 1.5)' }); |
- anim.pause(); |
- |
- // The bezier function produces values greater than 1 in (0.23368794, 1) |
- anim.currentTime = 0; |
- assert_equals(getComputedStyle(target).left, '0px'); |
- anim.currentTime = 230; |
- assert_equals(getComputedStyle(target).left, '0px'); |
- anim.currentTime = 250; |
- assert_equals(getComputedStyle(target).left, '100px'); |
- anim.currentTime = 1000; |
- assert_equals(getComputedStyle(target).left, '100px'); |
-}, 'effect easing produces values greater than 1 with step-end keyframe'); |
- |
-test(function(t) { |
- var target = createDiv(t); |
- target.style.position = 'absolute'; |
- var anim = target.animate([ { left: '0px', easing: 'step-start' }, |
- { left: '100px' } ], |
- { duration: 1000, |
- fill: 'forwards', |
- easing: 'cubic-bezier(0, -0.5, 1, -0.5)' }); |
- anim.pause(); |
- |
- // The bezier function produces negative values in (0, 0.766312060) |
- anim.currentTime = 0; |
- assert_equals(getComputedStyle(target).left, '100px'); |
- anim.currentTime = 750; |
- assert_equals(getComputedStyle(target).left, '0px'); |
- anim.currentTime = 800; |
- assert_equals(getComputedStyle(target).left, '100px'); |
- anim.currentTime = 1000; |
- assert_equals(getComputedStyle(target).left, '100px'); |
-}, 'effect easing produces negative values with step-start keyframe'); |
- |
-test(function(t) { |
- var target = createDiv(t); |
- target.style.position = 'absolute'; |
- var anim = target.animate([ { left: '0px', easing: 'step-end' }, |
- { left: '100px' } ], |
- { duration: 1000, |
- fill: 'forwards', |
- easing: 'cubic-bezier(0, -0.5, 1, -0.5)' }); |
- anim.pause(); |
- |
- // The bezier function produces negative values in (0, 0.766312060) |
- anim.currentTime = 0; |
- assert_equals(getComputedStyle(target).left, '0px'); |
- anim.currentTime = 750; |
- assert_equals(getComputedStyle(target).left, '0px'); |
- anim.currentTime = 800; |
- assert_equals(getComputedStyle(target).left, '0px'); |
- anim.currentTime = 1000; |
- assert_equals(getComputedStyle(target).left, '100px'); |
-}, 'effect easing produces negative values with step-end keyframe'); |
- |
-test(function(t) { |
- var target = createDiv(t); |
- target.style.position = 'absolute'; |
- var anim = target.animate( |
- // http://cubic-bezier.com/#.5,1,.5,0 |
- [ { left: '0px', easing: 'cubic-bezier(0.5, 1, 0.5, 0)' }, |
- { left: '100px' } ], |
- { duration: 1000, |
- fill: 'forwards', |
- easing: 'cubic-bezier(0, 1.5, 1, 1.5)' }); |
- var keyframeEasing = function(x) { |
- assert_greater_than_equal(x, 0.0, |
- 'This function should be called in [0, 1.0] range'); |
- assert_less_than_equal(x, 1.0, |
- 'This function should be called in [0, 1.0] range'); |
- return cubicBezier(0.5, 1, 0.5, 0)(x); |
- } |
- var keyframeEasingExtrapolated = function(x) { |
- assert_greater_than(x, 1.0, |
- 'This function should be called in (1.0, infinity) range'); |
- // p3x + (p2y - p3y) / (p2x - p3x) * (x - p3x) |
- return 1.0 + (0 - 1) / (0.5 - 1) * (x - 1.0); |
- } |
- var effectEasing = function(x) { |
- return cubicBezier(0, 1.5, 1, 1.5)(x); |
- } |
- |
- anim.pause(); |
- |
- // The effect-easing produces values greater than 1 in (0.23368794, 1) |
- assert_style_left_at(anim, 0, function(x) { |
- return keyframeEasing(effectEasing(x)); |
- }); |
- assert_style_left_at(anim, 230, function(x) { |
- return keyframeEasing(effectEasing(x)); |
- }); |
- assert_style_left_at(anim, 240, function(x) { |
- return keyframeEasingExtrapolated(effectEasing(x)); |
- }); |
- // Near the extreme point of the effect-easing function |
- assert_style_left_at(anim, 700, function(x) { |
- return keyframeEasingExtrapolated(effectEasing(x)); |
- }); |
- assert_style_left_at(anim, 990, function(x) { |
- return keyframeEasingExtrapolated(effectEasing(x)); |
- }); |
- assert_style_left_at(anim, 1000, function(x) { |
- return keyframeEasing(effectEasing(x)); |
- }); |
-}, 'effect easing produces values greater than 1 with keyframe easing ' + |
- 'producing values greater than 1'); |
- |
-test(function(t) { |
- var target = createDiv(t); |
- target.style.position = 'absolute'; |
- var anim = target.animate( |
- // http://cubic-bezier.com/#0,1.5,1,1.5 |
- [ { left: '0px', easing: 'cubic-bezier(0, 1.5, 1, 1.5)' }, |
- { left: '100px' } ], |
- { duration: 1000, |
- fill: 'forwards', |
- easing: 'cubic-bezier(0, 1.5, 1, 1.5)' }); |
- var easing = function(x) { |
- assert_greater_than_equal(x, 0.0, |
- 'This function should be called in [0, 1.0] range'); |
- assert_less_than_equal(x, 1.0, |
- 'This function should be called in [0, 1.0] range'); |
- return cubicBezier(0, 1.5, 1, 1.5)(x); |
- } |
- var easingExtrapolated = function(x) { |
- assert_greater_than(x, 1.0, |
- 'This function should be called in negative range'); |
- // For cubic-bezier(0, 1.5, 1, 1.5), the tangent at the |
- // endpoint (x = 1.0) is infinity so we should just return 1.0. |
- return 1.0; |
- } |
- |
- anim.pause(); |
- |
- // The effect-easing produces values greater than 1 in (0.23368794, 1) |
- assert_style_left_at(anim, 0, function(x) { |
- return easing(easing(x)) |
- }); |
- assert_style_left_at(anim, 230, function(x) { |
- return easing(easing(x)) |
- }); |
- assert_style_left_at(anim, 240, function(x) { |
- return easingExtrapolated(easing(x)); |
- }); |
- // Near the extreme point of the effect-easing function |
- assert_style_left_at(anim, 700, function(x) { |
- return easingExtrapolated(easing(x)); |
- }); |
- assert_style_left_at(anim, 990, function(x) { |
- return easingExtrapolated(easing(x)); |
- }); |
- assert_style_left_at(anim, 1000, function(x) { |
- return easing(easing(x)) |
- }); |
-}, 'effect easing which produces values greater than 1 and the tangent on ' + |
- 'the upper boundary is infinity with keyframe easing producing values ' + |
- 'greater than 1'); |
- |
-test(function(t) { |
- var target = createDiv(t); |
- target.style.position = 'absolute'; |
- var anim = target.animate( |
- // http://cubic-bezier.com/#.5,1,.5,0 |
- [ { left: '0px', easing: 'cubic-bezier(0.5, 1, 0.5, 0)' }, |
- { left: '100px' } ], |
- { duration: 1000, |
- fill: 'forwards', |
- easing: 'cubic-bezier(0, -0.5, 1, -0.5)' }); |
- var keyframeEasing = function(x) { |
- assert_greater_than_equal(x, 0.0, |
- 'This function should be called in [0, 1.0] range'); |
- assert_less_than_equal(x, 1.0, |
- 'This function should be called in [0, 1.0] range'); |
- return cubicBezier(0.5, 1, 0.5, 0)(x); |
- } |
- var keyframeEasingExtrapolated = function(x) { |
- assert_less_than(x, 0.0, |
- 'This function should be called in negative range'); |
- // p0x + (p1y - p0y) / (p1x - p0x) * (x - p0x) |
- return (1 / 0.5) * x; |
- } |
- var effectEasing = function(x) { |
- return cubicBezier(0, -0.5, 1, -0.5)(x); |
- } |
- |
- anim.pause(); |
- |
- // The effect-easing produces negative values in (0, 0.766312060) |
- assert_style_left_at(anim, 0, function(x) { |
- return keyframeEasing(effectEasing(x)); |
- }); |
- assert_style_left_at(anim, 10, function(x) { |
- return keyframeEasingExtrapolated(effectEasing(x)); |
- }); |
- // Near the extreme point of the effect-easing function |
- assert_style_left_at(anim, 300, function(x) { |
- return keyframeEasingExtrapolated(effectEasing(x)); |
- }); |
- assert_style_left_at(anim, 750, function(x) { |
- return keyframeEasingExtrapolated(effectEasing(x)); |
- }); |
- assert_style_left_at(anim, 770, function(x) { |
- return keyframeEasing(effectEasing(x)); |
- }); |
- assert_style_left_at(anim, 1000, function(x) { |
- return keyframeEasing(effectEasing(x)); |
- }); |
-}, 'effect easing produces negative values with keyframe easing ' + |
- 'producing negative values'); |
- |
-test(function(t) { |
- var target = createDiv(t); |
- target.style.position = 'absolute'; |
- var anim = target.animate( |
- // http://cubic-bezier.com/#0,-0.5,1,-0.5 |
- [ { left: '0px', easing: 'cubic-bezier(0, -0.5, 1, -0.5)' }, |
- { left: '100px' } ], |
- { duration: 1000, |
- fill: 'forwards', |
- easing: 'cubic-bezier(0, -0.5, 1, -0.5)' }); |
- var easing = function(x) { |
- assert_greater_than_equal(x, 0.0, |
- 'This function should be called in [0, 1.0] range'); |
- assert_less_than_equal(x, 1.0, |
- 'This function should be called in [0, 1.0] range'); |
- return cubicBezier(0, -0.5, 1, -0.5)(x); |
- } |
- var easingExtrapolated = function(x) { |
- assert_less_than(x, 0.0, |
- 'This function should be called in negative range'); |
- // For cubic-bezier(0, -0.5, 1, -0.5), the tangent at the |
- // endpoint (x = 0.0) is infinity so we should just return 0.0. |
- return 0.0; |
- } |
- |
- anim.pause(); |
- |
- // The effect-easing produces negative values in (0, 0.766312060) |
- assert_style_left_at(anim, 0, function(x) { |
- return easing(easing(x)) |
- }); |
- assert_style_left_at(anim, 10, function(x) { |
- return easingExtrapolated(easing(x)); |
- }); |
- // Near the extreme point of the effect-easing function |
- assert_style_left_at(anim, 300, function(x) { |
- return easingExtrapolated(easing(x)); |
- }); |
- assert_style_left_at(anim, 750, function(x) { |
- return easingExtrapolated(easing(x)); |
- }); |
- assert_style_left_at(anim, 770, function(x) { |
- return easing(easing(x)) |
- }); |
- assert_style_left_at(anim, 1000, function(x) { |
- return easing(easing(x)) |
- }); |
-}, 'effect easing which produces negative values and the tangent on ' + |
- 'the lower boundary is infinity with keyframe easing producing ' + |
- 'negative values'); |
- |
-var gStepTimingFunctionTests = [ |
- { |
- description: 'Test bounds point of step-start easing', |
- keyframe: [ { width: '0px' }, |
- { width: '100px' } ], |
- effect: { |
- delay: 1000, |
- duration: 1000, |
- fill: 'both', |
- easing: 'steps(2, start)' |
- }, |
- conditions: [ |
- { currentTime: 0, progress: 0 }, |
- { currentTime: 999, progress: 0 }, |
- { currentTime: 1000, progress: 0.5 }, |
- { currentTime: 1499, progress: 0.5 }, |
- { currentTime: 1500, progress: 1 }, |
- { currentTime: 2000, progress: 1 } |
- ] |
- }, |
- { |
- description: 'Test bounds point of step-start easing with compositor', |
- keyframe: [ { opacity: 0 }, |
- { opacity: 1 } ], |
- effect: { |
- delay: 1000, |
- duration: 1000, |
- fill: 'both', |
- easing: 'steps(2, start)' |
- }, |
- conditions: [ |
- { currentTime: 0, progress: 0 }, |
- { currentTime: 999, progress: 0 }, |
- { currentTime: 1000, progress: 0.5 }, |
- { currentTime: 1499, progress: 0.5 }, |
- { currentTime: 1500, progress: 1 }, |
- { currentTime: 2000, progress: 1 } |
- ] |
- }, |
- { |
- description: 'Test bounds point of step-start easing with reverse direction', |
- keyframe: [ { width: '0px' }, |
- { width: '100px' } ], |
- effect: { |
- delay: 1000, |
- duration: 1000, |
- fill: 'both', |
- direction: 'reverse', |
- easing: 'steps(2, start)' |
- }, |
- conditions: [ |
- { currentTime: 0, progress: 1 }, |
- { currentTime: 1001, progress: 1 }, |
- { currentTime: 1500, progress: 1 }, |
- { currentTime: 1501, progress: 0.5 }, |
- { currentTime: 2000, progress: 0 }, |
- { currentTime: 2500, progress: 0 } |
- ] |
- }, |
- { |
- description: 'Test bounds point of step-start easing ' + |
- 'with iterationStart not at a transition point', |
- keyframe: [ { width: '0px' }, |
- { width: '100px' } ], |
- effect: { |
- delay: 1000, |
- duration: 1000, |
- fill: 'both', |
- iterationStart: 0.25, |
- easing: 'steps(2, start)' |
- }, |
- conditions: [ |
- { currentTime: 0, progress: 0.5 }, |
- { currentTime: 999, progress: 0.5 }, |
- { currentTime: 1000, progress: 0.5 }, |
- { currentTime: 1249, progress: 0.5 }, |
- { currentTime: 1250, progress: 1 }, |
- { currentTime: 1749, progress: 1 }, |
- { currentTime: 1750, progress: 0.5 }, |
- { currentTime: 2000, progress: 0.5 }, |
- { currentTime: 2500, progress: 0.5 }, |
- ] |
- }, |
- { |
- description: 'Test bounds point of step-start easing ' + |
- 'with iterationStart and delay', |
- keyframe: [ { width: '0px' }, |
- { width: '100px' } ], |
- effect: { |
- delay: 1000, |
- duration: 1000, |
- fill: 'both', |
- iterationStart: 0.5, |
- easing: 'steps(2, start)' |
- }, |
- conditions: [ |
- { currentTime: 0, progress: 0.5 }, |
- { currentTime: 999, progress: 0.5 }, |
- { currentTime: 1000, progress: 1 }, |
- { currentTime: 1499, progress: 1 }, |
- { currentTime: 1500, progress: 0.5 }, |
- { currentTime: 2000, progress: 1 } |
- ] |
- }, |
- { |
- description: 'Test bounds point of step-start easing ' + |
- 'with iterationStart and reverse direction', |
- keyframe: [ { width: '0px' }, |
- { width: '100px' } ], |
- effect: { |
- delay: 1000, |
- duration: 1000, |
- fill: 'both', |
- iterationStart: 0.5, |
- direction: 'reverse', |
- easing: 'steps(2, start)' |
- }, |
- conditions: [ |
- { currentTime: 0, progress: 1 }, |
- { currentTime: 1000, progress: 1 }, |
- { currentTime: 1001, progress: 0.5 }, |
- { currentTime: 1499, progress: 0.5 }, |
- { currentTime: 1500, progress: 1 }, |
- { currentTime: 1999, progress: 1 }, |
- { currentTime: 2000, progress: 0.5 }, |
- { currentTime: 2500, progress: 0.5 } |
- ] |
- }, |
- { |
- description: 'Test bounds point of step(4, start) easing ' + |
- 'with iterationStart 0.75 and delay', |
- keyframe: [ { width: '0px' }, |
- { width: '100px' } ], |
- effect: { |
- duration: 1000, |
- fill: 'both', |
- delay: 1000, |
- iterationStart: 0.75, |
- easing: 'steps(4, start)' |
- }, |
- conditions: [ |
- { currentTime: 0, progress: 0.75 }, |
- { currentTime: 999, progress: 0.75 }, |
- { currentTime: 1000, progress: 1 }, |
- { currentTime: 2000, progress: 1 }, |
- { currentTime: 2500, progress: 1 } |
- ] |
- }, |
- { |
- description: 'Test bounds point of step-start easing ' + |
- 'with alternate direction', |
- keyframe: [ { width: '0px' }, |
- { width: '100px' } ], |
- effect: { |
- duration: 1000, |
- fill: 'both', |
- delay: 1000, |
- iterations: 2, |
- iterationStart: 1.5, |
- direction: 'alternate', |
- easing: 'steps(2, start)' |
- }, |
- conditions: [ |
- { currentTime: 0, progress: 1 }, |
- { currentTime: 1000, progress: 1 }, |
- { currentTime: 1001, progress: 0.5 }, |
- { currentTime: 2999, progress: 1 }, |
- { currentTime: 3000, progress: 0.5 }, |
- { currentTime: 3500, progress: 0.5 } |
- ] |
- }, |
- { |
- description: 'Test bounds point of step-start easing ' + |
- 'with alternate-reverse direction', |
- keyframe: [ { width: '0px' }, |
- { width: '100px' } ], |
- effect: { |
- duration: 1000, |
- fill: 'both', |
- delay: 1000, |
- iterations: 2, |
- iterationStart: 0.5, |
- direction: 'alternate-reverse', |
- easing: 'steps(2, start)' |
- }, |
- conditions: [ |
- { currentTime: 0, progress: 1 }, |
- { currentTime: 1000, progress: 1 }, |
- { currentTime: 1001, progress: 0.5 }, |
- { currentTime: 2999, progress: 1 }, |
- { currentTime: 3000, progress: 0.5 }, |
- { currentTime: 3500, progress: 0.5 } |
- ] |
- }, |
- { |
- description: 'Test bounds point of step-start easing in keyframe', |
- keyframe: [ { width: '0px', easing: 'steps(2, start)' }, |
- { width: '100px' } ], |
- effect: { |
- delay: 1000, |
- duration: 1000, |
- fill: 'both', |
- }, |
- conditions: [ |
- { currentTime: 0, progress: 0, width: '0px' }, |
- { currentTime: 999, progress: 0, width: '0px' }, |
- { currentTime: 1000, progress: 0, width: '50px' }, |
- { currentTime: 1499, progress: 0.499, width: '50px' }, |
- { currentTime: 1500, progress: 0.5, width: '100px' }, |
- { currentTime: 2000, progress: 1, width: '100px' }, |
- { currentTime: 2500, progress: 1, width: '100px' } |
- ] |
- }, |
- { |
- description: 'Test bounds point of step-end easing ' + |
- 'with iterationStart and delay', |
- keyframe: [ { width: '0px' }, |
- { width: '100px' } ], |
- effect: { |
- duration: 1000, |
- fill: 'both', |
- delay: 1000, |
- iterationStart: 0.5, |
- easing: 'steps(2, end)' |
- }, |
- conditions: [ |
- { currentTime: 0, progress: 0 }, |
- { currentTime: 999, progress: 0 }, |
- { currentTime: 1000, progress: 0.5 }, |
- { currentTime: 1499, progress: 0.5 }, |
- { currentTime: 1500, progress: 0 }, |
- { currentTime: 1999, progress: 0 }, |
- { currentTime: 2000, progress: 0.5 }, |
- { currentTime: 2500, progress: 0.5 } |
- ] |
- }, |
- { |
- description: 'Test bounds point of step-end easing ' + |
- 'with iterationStart not at a transition point', |
- keyframe: [ { width: '0px' }, |
- { width: '100px' } ], |
- effect: { |
- delay: 1000, |
- duration: 1000, |
- fill: 'both', |
- iterationStart: 0.75, |
- easing: 'steps(2, end)' |
- }, |
- conditions: [ |
- { currentTime: 0, progress: 0.5 }, |
- { currentTime: 999, progress: 0.5 }, |
- { currentTime: 1000, progress: 0.5 }, |
- { currentTime: 1249, progress: 0.5 }, |
- { currentTime: 1250, progress: 0 }, |
- { currentTime: 1749, progress: 0 }, |
- { currentTime: 1750, progress: 0.5 }, |
- { currentTime: 2000, progress: 0.5 }, |
- { currentTime: 2500, progress: 0.5 }, |
- ] |
- } |
-]; |
- |
-gStepTimingFunctionTests.forEach(function(options) { |
- test(function(t) { |
- var target = createDiv(t); |
- var animation = target.animate(options.keyframe, options.effect); |
- options.conditions.forEach(function(condition) { |
- animation.currentTime = condition.currentTime; |
- if (typeof condition.progress !== 'undefined') { |
- assert_equals(animation.effect.getComputedTiming().progress, |
- condition.progress, |
- 'Progress at ' + animation.currentTime + 'ms'); |
- } |
- if (typeof condition.width !== 'undefined') { |
- assert_equals(getComputedStyle(target).width, |
- condition.width, |
- 'Progress at ' + animation.currentTime + 'ms'); |
- } |
- }); |
- }, options.description); |
-}); |
- |
-gInvalidEasingTests.forEach(function(options) { |
- test(function(t) { |
- var div = createDiv(t); |
- assert_throws({ name: 'TypeError' }, |
- function() { |
- div.animate({ easing: options.easing }, 100 * MS_PER_SEC); |
- }); |
- }, 'Invalid keyframe easing value: \'' + options.easing + '\''); |
-}); |
- |
-</script> |
-</body> |