| <html> |
| <style> |
| div { |
| position: relative; |
| height: 100px; |
| width: 100px; |
| background: blue; |
| transition: left, transform 2s, 2s; |
| left: 0px; |
| transform: translateX(0); |
| } |
| |
| .transform-transition { |
| transform: translateX(500px); |
| } |
| |
| .left-transition { |
| left: 500px; |
| } |
| |
| .delay1 { |
| transition-delay: 0.5s; |
| } |
| |
| .delay2 { |
| transition-delay: 1s; |
| } |
| </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> |
| |
| No delay |
| <br> |
| <div class="main-thread"></div> |
| <div class="compositor"></div> |
| |
| Delay - 0.5s |
| <br> |
| <div class="main-thread delay1"></div> |
| <div class="compositor delay1"></div> |
| |
| Delay - 1s |
| <br> |
| <div class="main-thread delay2"></div> |
| <div class="compositor delay2"></div> |
| |
| <script> |
| window.onload = function() |
| { |
| function toggleTransition() { |
| var mainThread = document.querySelectorAll(".main-thread"); |
| for (var i = 0; i < mainThread.length; i++) |
| mainThread[i].classList.toggle("left-transition"); |
| var compositor = document.querySelectorAll(".compositor"); |
| for (var i = 0; i < compositor.length; i++) |
| compositor[i].classList.toggle("transform-transition"); |
| } |
| |
| toggleTransition(); |
| setTimeout(toggleTransition, 300); |
| setTimeout(toggleTransition, 1000); |
| setTimeout(toggleTransition, 2500); |
| } |
| </script> |
| |
| </body> |
| </html> |
