| <!DOCTYPE html> |
| <style> |
| #target { |
| position: absolute; |
| width: 100px; |
| height: 100px; |
| background: blue; |
| } |
| </style> |
| This box should be located in the center of the page. |
| <div id="target"></div> |
| <script src="../../resources/compositor-controls.js"></script> |
| <script> |
| setAnimationRequiresRaster(); |
| if (window.testRunner) { |
| testRunner.waitUntilDone(); |
| } |
| function waitForCompositor() { |
| return document.body.animate({opacity: [1, 1]}, 1).finished; |
| } |
| |
| var position = 'translate(calc(50vw - 50px), calc(50vh - 50px))'; |
| var animation = target.animate({transform: [position, position]}, 1e10); |
| animation.ready.then(() => { |
| window.resizeTo(window.innerWidth / 2, window.innerHeight / 2); |
| }).then(waitForCompositor).then(() => { |
| if (window.testRunner) { |
| testRunner.notifyDone(); |
| } |
| }); |
| </script> |
