| <html> |
| <style> |
| div { |
| position: relative; |
| height: 100px; |
| width: 100px; |
| background: blue; |
| will-change: transform; |
| left: 0px; |
| animation-duration: 2s; |
| animation-timing-function: linear; |
| animation-iteration-count: 2; |
| } |
| |
| .anim-left { |
| animation-name: anim-left; |
| z-index: 100; |
| } |
| |
| .anim-transform { |
| animation-name: anim-transform; |
| z-index: 200; |
| } |
| |
| @keyframes anim-left { |
| 100% { left: 300px; } |
| } |
| |
| @keyframes anim-transform { |
| 100% { transform: translateX(300px); } |
| } |
| </style> |
| <body> |
| <p> |
| The 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> |
| |
| <div id="target-left" class='anim-left'></div> |
| <div id="target-transform" class='anim-transform'></div> |
| |
| </body> |
| <script> |
| setTimeout(function() { document.getElementById('target-left').style.left = '500px'; }, 2000); |
| setTimeout(function() { document.getElementById('target-transform').style.transform = 'translateX(500px)'; }, 2000); |
| </script> |
| </html> |