| 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 <script> | 17 <script> |
| 18 [ | 18 [ |
| 19 'perspective(200px) translate3D(10px, 10px, 10px)', | 19 'perspective(200px) translate3D(10px, 10px, 10px)', |
| 20 'matrix(0, 1, 1, 0, 10, 10)', | 20 'matrix(0, 1, 1, 0, 10, 10)', |
| 21 'matrix3d(' + | 21 'matrix3d(' + |
| 22 '0, 1, 0, 0, ' + | 22 '0, 1, 0, 0, ' + |
| 23 '1, 0, 0, 0, ' + | 23 '1, 0, 0, 0, ' + |
| 24 '0, 0, 1, 0, ' + | 24 '0, 0, 1, 0, ' + |
| 25 '10, 10, 10, 1)', | 25 '10, 10, 10, 1)', |
| 26 'matrix3d(' + |
| 27 '0.707106781186548, 0.000000000000000, -0.707106781186547, 0.003535533905933
,' + |
| 28 '0.000000000000000, 1.000000000000000, 0.000000000000000, 0.000000000000000,
' + |
| 29 '0.707106781186547, 0.000000000000000, 0.707106781186548, -0.003535533905933
,' + |
| 30 '0.000000000000000, 0.000000000000000, 0.000000000000000, 1.000000000000000)
', |
| 26 'perspective(200px) rotateY(45deg)', | 31 'perspective(200px) rotateY(45deg)', |
| 27 'none', | 32 'none', |
| 28 ].forEach(transform => { | 33 ].forEach(transform => { |
| 29 var text = document.createElement('div'); | 34 var text = document.createElement('div'); |
| 30 text.textContent = transform; | 35 text.textContent = transform; |
| 31 container.appendChild(text); | 36 container.appendChild(text); |
| 32 | 37 |
| 33 var target = document.createElement('div'); | 38 var target = document.createElement('div'); |
| 34 target.classList.add('target'); | 39 target.classList.add('target'); |
| 35 container.appendChild(target); | 40 container.appendChild(target); |
| 36 target.animate([ | 41 target.animate([ |
| 37 {transform: transform}, | 42 {transform: transform}, |
| 38 {transform: transform}, | 43 {transform: transform}, |
| 39 ], 1e8); | 44 ], 1e8); |
| 40 }); | 45 }); |
| 41 | 46 |
| 42 if (window.testRunner) | 47 if (window.testRunner) |
| 43 testRunner.waitUntilDone(); | 48 testRunner.waitUntilDone(); |
| 44 | 49 |
| 45 requestAnimationFrame(() => { | 50 requestAnimationFrame(() => { |
| 46 requestAnimationFrame(() => { | 51 requestAnimationFrame(() => { |
| 47 internals.setZoomFactor(2); | 52 internals.setZoomFactor(2); |
| 48 requestAnimationFrame(() => { | 53 requestAnimationFrame(() => { |
| 49 if (window.testRunner) | 54 if (window.testRunner) |
| 50 testRunner.notifyDone(); | 55 testRunner.notifyDone(); |
| 51 }); | 56 }); |
| 52 }); | 57 }); |
| 53 }); | 58 }); |
| 54 </script> | 59 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2482753002:
Fix matrix3d transform under page zoom (Closed)
