| |
| <!DOCTYPE html> |
| <html class="reftest-wait"> |
| <meta charset="UTF-8"> |
| <title>sync start times</title> |
| <link rel="match" href="sync-start-times-ref.html"> |
| <script src="/common/reftest-wait.js"></script> |
| <style> |
| #box-1, #box-2 { |
| border: 1px solid white; |
| height: 40px; |
| left: 40px; |
| position: absolute; |
| top: 40px; |
| width: 40px; |
| /* To ensure Chrome to render the two boxes (one actively |
| animating and the other not) with the same subpixel offset |
| when there is subpixel translation during animation. */ |
| will-change: transform; |
| } |
| #box-1 { |
| background: blue; |
| z-index: 1; |
| } |
| #box-2 { |
| background: white; |
| z-index: 2; |
| } |
| #notes { |
| position: absolute; |
| left: 0px; |
| top: 100px; |
| } |
| </style> |
| |
| <body> |
| <div id="box-1"></div> |
| <div id="box-2"></div> |
| <p id="notes"> |
| This test creates a pair of animations, starts the first animation and then |
| syncs the second animation to align with the first. The test passes if the |
| box associated with the first animation is completely occluded by the |
| second. |
| </p> |
| </body> |
| <script> |
| onload = function() { |
| function createAnimation(elementId) { |
| const elem = document.getElementById(elementId); |
| const keyframes = [ |
| { transform: 'translateX(0px)' }, |
| { transform: 'translateX(200px)' } |
| ]; |
| const anim = elem.animate(keyframes, { duration: 1000 }); |
| anim.pause(); |
| return anim; |
| }; |
| |
| const anim1 = createAnimation('box-1'); |
| const anim2 = createAnimation('box-2'); |
| |
| anim1.currentTime = 500; |
| anim1.play(); |
| |
| anim1.ready.then(() => { |
| anim2.startTime = anim1.startTime; |
| requestAnimationFrame(() => { |
| takeScreenshot(); |
| }); |
| }); |
| }; |
| </script> |
