| <html> |
| <style> |
| div { |
| position: relative; |
| height: 100px; |
| width: 100px; |
| background: blue; |
| transform: translateZ(0); |
| animation-direction: alternate; |
| animation-duration: 2s; |
| animation-timing-function: linear; |
| animation-iteration-count: 6; |
| } |
| |
| .test0 { |
| animation-delay: -30s; |
| } |
| |
| .test1 { |
| animation-delay: -3s; |
| } |
| |
| .test2 { |
| animation-delay: 0s; |
| } |
| |
| .test3 { |
| animation-delay: 3s; |
| } |
| |
| .anim-left { |
| animation-name: anim-left; |
| z-index: 100; |
| } |
| |
| .anim-transform { |
| animation-name: anim-transform; |
| z-index: 200; |
| } |
| |
| @keyframes anim-left { |
| 0% { |
| left: 0px; |
| } |
| 100% { |
| left: 300px; |
| } |
| } |
| |
| @keyframes anim-transform { |
| 0% { |
| transform: translateX(0px); |
| } |
| 100% { |
| transform: translateX(300px); |
| } |
| } |
| </style> |
| <body> |
| <p> |
| Each section below has two boxes, the top runs on the main thread, the bottom |
| on the compositor. The animations should be identical but start at different |
| times. |
| </p><p> |
| This test is successful if the boxes are mostly in sync (there might be a small |
| offset between them). |
| </p> |
| <hr> |
| |
| Start delay -30s (starts 30 seconds into animation by which the animation has finished, hence no animation) |
| <br> |
| <div class='test0 anim-left'></div> |
| <div class='test0 anim-transform'></div> |
| |
| Start delay -3s (starts 3 seconds into the animation, should finish first.) |
| <br> |
| <div class='test1 anim-left'></div> |
| <div class='test1 anim-transform'></div> |
| |
| Start delay 0s (no start delay, should finish second.) |
| <br> |
| <div class='test2 anim-left'></div> |
| <div class='test2 anim-transform'></div> |
| |
| Start delay 3s (starts 3 seconds after page load, should finish last.) |
| <br> |
| <div class='test3 anim-left'></div> |
| <div class='test3 anim-transform'></div> |
| </body> |
| </html> |
