| OLD | NEW |
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <style> | |
| 3 #target { | |
| 4 position: absolute; | |
| 5 width: 100px; | |
| 6 height: 100px; | |
| 7 background: blue; | |
| 8 } | |
| 9 </style> | |
| 10 This box should be located in the center of the page. | |
| 11 <div id="target"></div> | |
| 12 <script> | |
| 13 if (window.testRunner) { | |
| 14 testRunner.useUnfortunateSynchronousResizeMode(); | |
| 15 testRunner.waitUntilDone(); | |
| 16 } | |
| 17 function waitForCompositor() { | |
| 18 return document.body.animate({opacity: [1, 1]}, 1).finished; | |
| 19 } | |
| 20 | |
| 21 var position = 'translate(calc(50vw - 50px), calc(50vh - 50px))'; | |
| 22 var animation = target.animate({transform: [position, position]}, 1e10); | |
| 23 animation.ready.then(() => { | |
| 24 window.resizeTo(window.innerWidth / 2, window.innerHeight / 2); | |
| 25 }).then(waitForCompositor).then(() => { | |
| 26 if (window.testRunner) { | |
| 27 testRunner.notifyDone(); | |
| 28 } | |
| 29 }); | |
| 30 </script> | |
| OLD | NEW |