| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <div class="target">-webkit-transform 10ms</div><br> |
| 3 <div class="target">transform 10ms</div><br> |
| 4 <div class="target">transform 10ms, -webkit-transform 10ms</div><br> |
| 5 <div class="target">-webkit-transform 10ms, transform 10ms</div><br> |
| 2 <div class="target">all 10ms</div><br> | 6 <div class="target">all 10ms</div><br> |
| 3 <div class="target">perspective 10ms</div><br> | 7 <div class="target">all 10ms, -webkit-transform 10ms</div><br> |
| 4 <div class="target">-webkit-perspective 10ms</div><br> | 8 <div class="target">-webkit-transform 10ms, all 10ms</div> |
| 5 <script> | 9 <script> |
| 6 if (window.testRunner) { | 10 if (window.testRunner) { |
| 7 testRunner.dumpAsText(); | 11 testRunner.dumpAsText(); |
| 8 testRunner.waitUntilDone(); | 12 testRunner.waitUntilDone(); |
| 9 } | 13 } |
| 10 | 14 |
| 11 document.addEventListener('transitionend', function(e) { | 15 document.addEventListener('transitionend', function(e) { |
| 12 var result = document.createElement('div'); | 16 var result = document.createElement('div'); |
| 13 result.textContent = 'fired transitionend with propertyName: ' + e.propertyNam
e; | 17 result.textContent = 'fired transitionend with propertyName: ' + e.propertyNam
e; |
| 14 e.target.appendChild(result); | 18 e.target.appendChild(result); |
| 15 if (window.testRunner) { | 19 if (window.testRunner) { |
| 16 // All events should be fired by next frame. | 20 // All events should be fired by next frame. |
| 17 requestAnimationFrame(function() { | 21 requestAnimationFrame(function() { |
| 18 testRunner.notifyDone(); | 22 testRunner.notifyDone(); |
| 19 }); | 23 }); |
| 20 } | 24 } |
| 21 }); | 25 }); |
| 22 | 26 |
| 23 onload = function() { | 27 onload = function() { |
| 24 var targets = document.querySelectorAll('.target'); | 28 var targets = document.querySelectorAll('.target'); |
| 25 for (var i = 0; i < targets.length; i++) { | 29 for (var i = 0; i < targets.length; i++) { |
| 26 targets[i].offsetTop; | 30 targets[i].offsetTop; |
| 27 targets[i].style.transition = targets[i].textContent; | 31 targets[i].style.transition = targets[i].textContent; |
| 28 targets[i].style.webkitPerspective = '10px'; | 32 targets[i].style.webkitTransform = 'rotate(360deg)'; |
| 29 targets[i].style.perspective = '10px'; | 33 targets[i].style.transform = 'rotate(360deg)'; |
| 30 } | 34 } |
| 31 }; | 35 }; |
| 32 </script> | 36 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 212543003:
CSS Transforms: Implement transform (Closed)
Base URL: svn://svn.chromium.org/blink/trunk