Chromium Code Reviews Chromium Code Reviews
Issue 812013002:
Define step timing function for the cc animation framework. (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master| Index: ManualTests/animation/compositor-animation-steps.html |
| diff --git a/ManualTests/animation/compositor-animation-steps.html b/ManualTests/animation/compositor-animation-steps.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..9fbe926ea39f5c5933b7e5433ab6ffdcfbdb8915 |
| --- /dev/null |
| +++ b/ManualTests/animation/compositor-animation-steps.html |
| @@ -0,0 +1,71 @@ |
| +<html> |
| +<style> |
| +div { |
| + position: relative; |
| + height: 100px; |
| + width: 100px; |
| + background: blue; |
| +} |
| +</style> |
| +<body> |
| +<p> |
| +Each section below has two boxes, the top runs on the main thread, the bottom |
| +on the compositor. |
| +</p><p> |
| +This test is successful if the boxes are mostly in sync and all finish at the |
| +same time. |
| +</p> |
| +<hr> |
| + |
| +Steps for easing timing function is set to 9 |
| +<br> |
| +<div id="test1a">MT</div> |
| +<div id="test1b">CT</div> |
| +<hr> |
| + |
| +Per-keyframe steps easing function |
| +<br> |
| +<div id="test2a">MT</div> |
| +<div id="test2b">CT</div> |
| + |
| +<script> |
| + var transformKeyframes = [ |
|
dstockwell
2014/12/19 02:00:55
nit: no need to indent this script
loyso (OOO)
2014/12/19 02:50:23
Ok. That was inspired by compositor-animation-play
|
| + {transform: 'translateX(0px)'}, |
| + {transform: 'translateX(500px)'} |
| + ]; |
| + var leftKeyframes = [ |
| + {left: '0'}, |
| + {left: '500px'} |
| + ]; |
| + var player1a = test1a.animate(leftKeyframes, { |
| + duration: 6000, |
| + iterations: Infinity, |
| + easing: 'steps(9)' |
| + }); |
| + var player1b = test1b.animate(transformKeyframes, { |
| + duration: 6000, |
| + iterations: Infinity, |
| + easing: 'steps(9)' |
| + }); |
| + |
| + var transformKeyframesEasing = [ |
| + {transform: 'translateX(0px)', easing: 'steps(18)'}, |
| + {transform: 'translateX(250px)', easing: 'steps(9)'}, |
| + {transform: 'translateX(500px)'} |
| + ]; |
| + var leftKeyframesEasing = [ |
| + {left: '0', easing: 'steps(18)'}, |
| + {left: '250px', easing: 'steps(9)'}, |
| + {left: '500px'} |
| + ]; |
| + var player2a = test2a.animate(leftKeyframesEasing, { |
| + duration: 6000, |
| + iterations: Infinity |
| + }); |
| + var player2b = test2b.animate(transformKeyframesEasing, { |
| + duration: 6000, |
| + iterations: Infinity |
| + }); |
| +</script> |
| +</body> |
| +</html> |
