| <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 (18 and 9 steps). |
| <br> |
| <div id="test2a">MT</div> |
| <div id="test2b">CT</div> |
| |
| Cubic-bezier easing function combined with a step keyframe. |
| <br> |
| <div id="test3a">MT</div> |
| <div id="test3b">CT</div> |
| |
| Steps easing function combined with a cubic-bezier keyframe. |
| <br> |
| <div id="test4a">MT</div> |
| <div id="test4b">CT</div> |
| |
| <script> |
| var transformKeyframes = [ |
| {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 |
| }); |
| |
| var transformKeyframesWithStepsKeyframe = [ |
| {transform: 'translateX(0px)', easing: 'steps(9)'}, |
| {transform: 'translateX(500px)'} |
| ]; |
| var leftKeyframesWithStepsKeyframe = [ |
| {left: '0', easing: 'steps(9)'}, |
| {left: '500px'} |
| ]; |
| var player3a = test3a.animate(leftKeyframesWithStepsKeyframe, { |
| duration: 6000, |
| iterations: Infinity, |
| easing: 'cubic-bezier(.5, -1, .5, 2)' |
| }); |
| var player3b = test3b.animate(transformKeyframesWithStepsKeyframe, { |
| duration: 6000, |
| iterations: Infinity, |
| easing: 'cubic-bezier(.5, -1, .5, 2)' |
| }); |
| |
| var transformKeyframesWithCubicKeyframe = [ |
| {transform: 'translateX(0px)', easing: 'cubic-bezier(.5, -1, .5, 2)'}, |
| {transform: 'translateX(500px)'} |
| ]; |
| var leftKeyframesWithCubicKeyframe = [ |
| {left: '0', easing: 'cubic-bezier(.5, -1, .5, 2)'}, |
| {left: '500px'} |
| ]; |
| var player4a = test4a.animate(leftKeyframesWithCubicKeyframe, { |
| duration: 6000, |
| iterations: Infinity, |
| easing: 'steps(9)' |
| }); |
| var player4b = test4b.animate(transformKeyframesWithCubicKeyframe, { |
| duration: 6000, |
| iterations: Infinity, |
| easing: 'steps(9)' |
| }); |
| </script> |
| </body> |
| </html> |
