| <html> |
| <style> |
| div { |
| position: relative; |
| height: 100px; |
| width: 100px; |
| background: blue; |
| transform: translateZ(0); |
| animation-duration: 2s; |
| animation-timing-function: linear; |
| animation-fill-mode: both; |
| animation-iteration-count: 2; |
| } |
| |
| .normal { |
| animation-direction: normal; |
| } |
| |
| .reverse { |
| animation-direction: reverse; |
| } |
| |
| .alternate { |
| animation-direction: alternate; |
| } |
| |
| .alternate-reverse { |
| animation-direction: alternate-reverse; |
| } |
| |
| .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 each pair of boxes are mostly in sync (there |
| might be a small offset between them). |
| </p> |
| <hr> |
| |
| Direction normal - forwards twice |
| <br> |
| <div class='normal anim-left'></div> |
| <div class='normal anim-transform'></div> |
| |
| Direction reverse - backwards twice |
| <br> |
| <div class='reverse anim-left'></div> |
| <div class='reverse anim-transform'></div> |
| |
| Direction alternate - forwards then backwards |
| <br> |
| <div class='alternate anim-left'></div> |
| <div class='alternate anim-transform'></div> |
| |
| Direction alternate-reverse - backwards then forwards |
| <br> |
| <div class='alternate-reverse anim-left'></div> |
| <div class='alternate-reverse anim-transform'></div> |
| |
| </body> |
| </html> |
