| <html> |
| <style> |
| div { |
| position: relative; |
| height: 100px; |
| width: 100px; |
| background: yellow; |
| } |
| </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> |
| |
| Multiple iframes test. |
| <br> |
| <div id="test1_blink">BLINK THREAD</div> |
| <div id="test1_impl">IMPL THREAD</div> |
| <hr> |
| |
| <script> |
| var leftKeyframes = [ |
| {left: '100px'}, |
| {left: '600px'} |
| ]; |
| var translateKeyframes = [ |
| {transform: 'translateX(100px)'}, |
| {transform: 'translateX(600px)'} |
| ]; |
| |
| var player1_blink = test1_blink.animate(leftKeyframes, { |
| duration: 5000, |
| delay: 100, |
| }); |
| var player1_impl = test1_impl.animate(translateKeyframes, { |
| duration: 5000, |
| delay: 100, |
| }); |
| </script> |
| |
| <iframe src="compositor-animation-steps.html" style="border: 0; width: 100%; height: 50%">No iframe</iframe> |
| |
| <iframe src="compositor-animation-same-property.html" style="border: 0; width: 100%; height: 50%">No iframe</iframe> |
| |
| </body> |
| </html> |
