| <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 checks that the compositor and main thread are performing identically |
| given the same input parameters. This test is successful if each pairing of boxes |
| are identical and all the boxes sync up and finish at the same time. |
| </p> |
| <hr> |
| |
| Iteration start is set to 0 |
| <br> |
| <div id="test1a">MT</div> |
| <div id="test1b">CT</div> |
| |
| Iteration start is set to 0.4 |
| <br> |
| <div id="test2a">MT</div> |
| <div id="test2b">CT</div> |
| |
| Iteration start is set to 0.8 |
| <br> |
| <div id="test3a">MT</div> |
| <div id="test3b">CT</div> |
| |
| Iteration start is set to 0, iterations is 3, direction is set to alternate |
| <br> |
| <div id="test4a">MT</div> |
| <div id="test4b">CT</div> |
| |
| Iteration start is set to 1, iterations is 3, direction is set to alternate-reverse |
| <br> |
| <div id="test5a">MT</div> |
| <div id="test5b">CT</div> |
| |
| Iteration start is set to 1, iterations is 3, direction is set to alternate, playback rate is set to -1 |
| <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 player1a = test1a.animate(leftKeyframes, { |
| duration: 1000, |
| iterations: 3, |
| fill: 'both', |
| }); |
| var player1b = test1b.animate(transformKeyframes, { |
| duration: 1000, |
| iterations: 3, |
| fill: 'both', |
| }); |
| var player2a = test2a.animate(leftKeyframes, { |
| duration: 1000, |
| iterations: 2.6, |
| fill: 'both', |
| iterationStart: 0.4, |
| delay: 400, |
| }); |
| var player2b = test2b.animate(transformKeyframes, { |
| duration: 1000, |
| iterations: 2.6, |
| fill: 'both', |
| iterationStart: 0.4, |
| delay: 400, |
| }); |
| var player3a = test3a.animate(leftKeyframes, { |
| duration: 1000, |
| iterations: 2.2, |
| fill: 'both', |
| iterationStart: 0.8, |
| delay: 800, |
| }); |
| var player3b = test3b.animate(transformKeyframes, { |
| duration: 1000, |
| iterations: 2.2, |
| fill: 'both', |
| iterationStart: 0.8, |
| delay: 800, |
| }); |
| var player4a = test4a.animate(leftKeyframes, { |
| duration: 1000, |
| iterations: 3, |
| fill: 'both', |
| direction: 'alternate', |
| }); |
| var player4b = test4b.animate(transformKeyframes, { |
| duration: 1000, |
| iterations: 3, |
| fill: 'both', |
| direction: 'alternate', |
| }); |
| var player5a = test5a.animate(leftKeyframes, { |
| duration: 1000, |
| iterations: 3, |
| fill: 'both', |
| iterationStart: 1, |
| direction: 'alternate-reverse', |
| }); |
| var player5b = test5b.animate(transformKeyframes, { |
| duration: 1000, |
| iterations: 3, |
| fill: 'both', |
| iterationStart: 1, |
| direction: 'alternate-reverse', |
| }); |
| var player6a = test6a.animate(leftKeyframes, { |
| duration: 1000, |
| iterations: 3, |
| fill: 'both', |
| iterationStart: 1, |
| direction: 'alternate', |
| playbackRate: -1, |
| }); |
| var player6b = test6b.animate(transformKeyframes, { |
| duration: 1000, |
| iterations: 3, |
| fill: 'both', |
| iterationStart: 1, |
| direction: 'alternate', |
| playbackRate: -1, |
| }); |
| </script> |
| </body> |
| </html> |
