| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <style> | 2 <style> |
| 3 #container { | 3 #container { |
| 4 position: absolute; | 4 position: absolute; |
| 5 top: 0; | 5 top: 0; |
| 6 font-size: 10px; | 6 font-size: 10px; |
| 7 } | 7 } |
| 8 .target { | 8 .target { |
| 9 width: 40px; | 9 width: 40px; |
| 10 height: 40px; | 10 height: 40px; |
| 11 border-top: solid; | 11 border-top: solid; |
| 12 border-left: solid; | 12 border-left: solid; |
| 13 margin-bottom: 20px; | 13 margin-bottom: 20px; |
| 14 } | 14 } |
| 15 </style> | 15 </style> |
| 16 <div id="container"></div> | 16 <div id="container"></div> |
| 17 <div id="footer"></div> |
| 17 <script> | 18 <script> |
| 19 'use strict'; |
| 18 internals.setZoomFactor(2); | 20 internals.setZoomFactor(2); |
| 19 | 21 |
| 20 [ | 22 [ |
| 21 'perspective(200px) translate3D(10px, 10px, 10px)', | 23 'perspective(200px) translate3D(10px, 10px, 10px)', |
| 22 'matrix(0, 1, 1, 0, 10, 10)', | 24 'matrix(0, 1, 1, 0, 10, 10)', |
| 23 'matrix3d(' + | 25 'matrix3d(' + |
| 24 '0, 1, 0, 0, ' + | 26 '0, 1, 0, 0, ' + |
| 25 '1, 0, 0, 0, ' + | 27 '1, 0, 0, 0, ' + |
| 26 '0, 0, 1, 0, ' + | 28 '0, 0, 1, 0, ' + |
| 27 '10, 10, 10, 1)', | 29 '10, 10, 10, 1)', |
| (...skipping 15 matching lines...) Expand all Loading... |
| 43 target.animate([ | 45 target.animate([ |
| 44 {transform: transform}, | 46 {transform: transform}, |
| 45 {transform: transform}, | 47 {transform: transform}, |
| 46 ], 1e8); | 48 ], 1e8); |
| 47 }); | 49 }); |
| 48 | 50 |
| 49 // We must wait a frame to let compositor animations render. | 51 // We must wait a frame to let compositor animations render. |
| 50 if (window.testRunner) | 52 if (window.testRunner) |
| 51 testRunner.waitUntilDone(); | 53 testRunner.waitUntilDone(); |
| 52 | 54 |
| 55 function waitForCompositor() { |
| 56 return footer.animate({opacity: ['1', '1']}, 1).ready; |
| 57 } |
| 58 |
| 53 requestAnimationFrame(() => { | 59 requestAnimationFrame(() => { |
| 54 requestAnimationFrame(() => { | 60 requestAnimationFrame(() => { |
| 55 if (window.testRunner) | 61 waitForCompositor().then(() => { |
| 56 testRunner.notifyDone(); | 62 if (window.testRunner) |
| 63 testRunner.notifyDone(); |
| 64 }); |
| 57 }); | 65 }); |
| 58 }); | 66 }); |
| 59 </script> | 67 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2601103003:
CSS Animations: fix flaky zoom-responsive-transform-animation.html (Closed)
