| OLD | NEW |
|---|
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <style> | |
| 3 #container { | |
| 4 position: absolute; | |
| 5 top: 0; | |
| 6 font-size: 10px; | |
| 7 } | |
| 8 .target { | |
| 9 width: 40px; | |
| 10 height: 40px; | |
| 11 border-top: solid; | |
| 12 border-left: solid; | |
| 13 margin-bottom: 20px; | |
| 14 } | |
| 15 </style> | |
| 16 <div id="container"></div> | |
| 17 <div id="footer"></div> | |
| 18 <script> | |
| 19 'use strict'; | |
| 20 internals.setZoomFactor(2); | |
| 21 | |
| 22 [ | |
| 23 'perspective(200px) translate3D(10px, 10px, 10px)', | |
| 24 'matrix(0, 1, 1, 0, 10, 10)', | |
| 25 'matrix3d(' + | |
| 26 '0, 1, 0, 0, ' + | |
| 27 '1, 0, 0, 0, ' + | |
| 28 '0, 0, 1, 0, ' + | |
| 29 '10, 10, 10, 1)', | |
| 30 'matrix3d(' + | |
| 31 '0.707106781186548, 0.000000000000000, -0.707106781186547, 0.003535533905933
,' + | |
| 32 '0.000000000000000, 1.000000000000000, 0.000000000000000, 0.000000000000000,
' + | |
| 33 '0.707106781186547, 0.000000000000000, 0.707106781186548, -0.003535533905933
,' + | |
| 34 '0.000000000000000, 0.000000000000000, 0.000000000000000, 1.000000000000000)
', // Equivalent to perspective(200px) rotateY(45deg) | |
| 35 'perspective(200px) rotateY(45deg)', | |
| 36 'none', // Composited animations fail to zoom the last expectation correctly.
): | |
| 37 ].forEach(transform => { | |
| 38 var text = document.createElement('div'); | |
| 39 text.textContent = transform; | |
| 40 container.appendChild(text); | |
| 41 | |
| 42 var target = document.createElement('div'); | |
| 43 target.classList.add('target'); | |
| 44 container.appendChild(target); | |
| 45 target.animate([ | |
| 46 {transform: transform}, | |
| 47 {transform: transform}, | |
| 48 ], 1e8); | |
| 49 }); | |
| 50 | |
| 51 // We must wait a frame to let compositor animations render. | |
| 52 if (window.testRunner) | |
| 53 testRunner.waitUntilDone(); | |
| 54 | |
| 55 function waitForCompositor() { | |
| 56 return footer.animate({opacity: ['1', '1']}, 1).ready; | |
| 57 } | |
| 58 | |
| 59 requestAnimationFrame(() => { | |
| 60 requestAnimationFrame(() => { | |
| 61 waitForCompositor().then(() => { | |
| 62 if (window.testRunner) | |
| 63 testRunner.notifyDone(); | |
| 64 }); | |
| 65 }); | |
| 66 }); | |
| 67 </script> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2973013002:
Group all responsive animation tests together (Closed)
