| <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> |
| |
| Playback rate is set to -0.5 |
| <br> |
| <div id="test0a">MT</div> |
| <div id="test0b">CT</div> |
| |
| Playback rate is set to -1 |
| <br> |
| <div id="test1a">MT</div> |
| <div id="test1b">CT</div> |
| |
| Playback rate is set to -2 |
| <br> |
| <div id="test2a">MT</div> |
| <div id="test2b">CT</div> |
| |
| Playback rate is set to -1, direction is alternate |
| <br> |
| <div id="test3a">MT</div> |
| <div id="test3b">CT</div> |
| |
| Playback rate is set to -1, direction is alternate, iterations is 5 - should finish a second later. |
| <br> |
| <div id="test4a">MT</div> |
| <div id="test4b">CT</div> |
| |
| Playback rate is set to -1, direction is alternate-reverse |
| <br> |
| <div id="test5a">MT</div> |
| <div id="test5b">CT</div> |
| |
| Playback rate is set to -1, direction is alternate-reverse, iterations is 5 - should finish a second later. |
| <br> |
| <div id="test6a">MT</div> |
| <div id="test6b">CT</div> |
| |
| <script> |
| var transformKeyframes = [ |
| {transform: 'translateX(0px)'}, |
| {transform: 'translateX(500px)'} |
| ]; |
| var leftKeyframes = [ |
| {left: '0'}, |
| {left: '500px'} |
| ]; |
| var player0a = test0a.animate(leftKeyframes, { |
| duration: 1000, |
| iterations: 2, |
| fill: 'forwards', |
| playbackRate: -0.5 |
| }); |
| var player0b = test0b.animate(transformKeyframes, { |
| duration: 1000, |
| iterations: 2, |
| fill: 'forwards', |
| playbackRate: -0.5 |
| }); |
| var player1a = test1a.animate(leftKeyframes, { |
| duration: 1000, |
| iterations: 4, |
| fill: 'forwards', |
| playbackRate: -1 |
| }); |
| var player1b = test1b.animate(transformKeyframes, { |
| duration: 1000, |
| iterations: 4, |
| fill: 'forwards', |
| playbackRate: -1 |
| }); |
| var player2a = test2a.animate(leftKeyframes, { |
| duration: 1000, |
| iterations: 8, |
| fill: 'forwards', |
| playbackRate: -2 |
| }); |
| var player2b = test2b.animate(transformKeyframes, { |
| duration: 1000, |
| iterations: 8, |
| fill: 'forwards', |
| playbackRate: -2 |
| }); |
| var player3a = test3a.animate(leftKeyframes, { |
| duration: 1000, |
| iterations: 4, |
| fill: 'both', |
| playbackRate: -1, |
| direction: 'alternate' |
| }); |
| var player3b = test3b.animate(transformKeyframes, { |
| duration: 1000, |
| iterations: 4, |
| fill: 'both', |
| playbackRate: -1, |
| direction: 'alternate' |
| }); |
| var player4a = test4a.animate(leftKeyframes, { |
| duration: 1000, |
| iterations: 5, |
| fill: 'both', |
| playbackRate: -1, |
| direction: 'alternate' |
| }); |
| var player4b = test4b.animate(transformKeyframes, { |
| duration: 1000, |
| iterations: 5, |
| fill: 'both', |
| playbackRate: -1, |
| direction: 'alternate' |
| }); |
| var player5a = test5a.animate(leftKeyframes, { |
| duration: 1000, |
| iterations: 4, |
| fill: 'both', |
| playbackRate: -1, |
| direction: 'alternate-reverse' |
| }); |
| var player5b = test5b.animate(transformKeyframes, { |
| duration: 1000, |
| iterations: 4, |
| fill: 'both', |
| playbackRate: -1, |
| direction: 'alternate-reverse' |
| }); |
| var player6a = test6a.animate(leftKeyframes, { |
| duration: 1000, |
| iterations: 5, |
| fill: 'both', |
| playbackRate: -1, |
| direction: 'alternate-reverse' |
| }); |
| var player6b = test6b.animate(transformKeyframes, { |
| duration: 1000, |
| iterations: 5, |
| fill: 'both', |
| playbackRate: -1, |
| direction: 'alternate-reverse' |
| }); |
| </script> |
| </body> |
| </html> |
