Index: third_party/WebKit/LayoutTests/imported/web-platform-tests/web-animations/keyframe-effect/effect-easing.html |
diff --git a/third_party/WebKit/LayoutTests/imported/web-platform-tests/web-animations/keyframe-effect/effect-easing.html b/third_party/WebKit/LayoutTests/imported/web-platform-tests/web-animations/keyframe-effect/effect-easing.html |
index 9e518efb976cda9fe0109979d2d8bfc87e05a21e..76a9bd0691788870f0907114ff7b60f5868f7bef 100644 |
--- a/third_party/WebKit/LayoutTests/imported/web-platform-tests/web-animations/keyframe-effect/effect-easing.html |
+++ b/third_party/WebKit/LayoutTests/imported/web-platform-tests/web-animations/keyframe-effect/effect-easing.html |
@@ -434,5 +434,287 @@ test(function(t) { |
'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); |
+}); |
+ |
</script> |
</body> |