| <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-fill-mode: both; |
| } |
| |
| .test0 { |
| animation-iteration-count: 0; |
| } |
| |
| .test1 { |
| animation-iteration-count: 0.5; |
| } |
| |
| .test2 { |
| animation-iteration-count: 1; |
| } |
| |
| .test3 { |
| animation-iteration-count: 1.5; |
| } |
| |
| .test4 { |
| animation-iteration-count: 2; |
| } |
| |
| .test5 { |
| animation-iteration-count: 2.5; |
| } |
| |
| .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> |
| |
| Iteration count 0 (should not animate) |
| <br> |
| <div class='test0 anim-left'></div> |
| <div class='test0 anim-transform'></div> |
| |
| Iteration count 0.5 (should finish first in the middle) |
| <br> |
| <div class='test1 anim-left'></div> |
| <div class='test1 anim-transform'></div> |
| |
| Iteration count 1 (should finish second at the end) |
| <br> |
| <div class='test2 anim-left'></div> |
| <div class='test2 anim-transform'></div> |
| |
| Iteration count 1.5 (should finish third in the middle) |
| <br> |
| <div class='test3 anim-left'></div> |
| <div class='test3 anim-transform'></div> |
| |
| Iteration count 2 (should finish fourth at the start) |
| <br> |
| <div class='test4 anim-left'></div> |
| <div class='test4 anim-transform'></div> |
| |
| Iteration count 2.5 (should finish last in the middle) |
| <br> |
| <div class='test5 anim-left'></div> |
| <div class='test5 anim-transform'></div> |
| </body> |
| </html> |