| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 | 2 |
| 3 <html> | 3 <html> |
| 4 <head> | 4 <head> |
| 5 <style> | 5 <style> |
| 6 #box { | 6 #box { |
| 7 height: 100px; | 7 height: 100px; |
| 8 width: 100px; | 8 width: 100px; |
| 9 background-color: blue; | 9 background-color: blue; |
| 10 -webkit-transition-property: -webkit-transform; | 10 -webkit-transition-property: transform; |
| 11 -webkit-transition-duration: 3s; | 11 -webkit-transition-duration: 3s; |
| 12 -webkit-transform: translate(0, 0) rotate(0); | 12 transform: translate(0, 0) rotate(0); |
| 13 } | 13 } |
| 14 | 14 |
| 15 </style> | 15 </style> |
| 16 <script> | 16 <script> |
| 17 if (window.testRunner) { | 17 if (window.testRunner) { |
| 18 testRunner.dumpAsText(); | 18 testRunner.dumpAsText(); |
| 19 testRunner.waitUntilDone(); | 19 testRunner.waitUntilDone(); |
| 20 } | 20 } |
| 21 | 21 |
| 22 function test() | 22 function test() |
| 23 { | 23 { |
| 24 var c = new WebKitCSSMatrix(window.getComputedStyle(document.getElementByI
d('box')).webkitTransform); | 24 var c = new WebKitCSSMatrix(window.getComputedStyle(document.getElementByI
d('box')).transform); |
| 25 var result = (c.f < 200) ? 'PASS' : 'FAIL: transition should still be runn
ing, so y < 200'; | 25 var result = (c.f < 200) ? 'PASS' : 'FAIL: transition should still be runn
ing, so y < 200'; |
| 26 document.getElementById('result').innerHTML = result; | 26 document.getElementById('result').innerHTML = result; |
| 27 | 27 |
| 28 if (window.testRunner) | 28 if (window.testRunner) |
| 29 testRunner.notifyDone(); | 29 testRunner.notifyDone(); |
| 30 } | 30 } |
| 31 | 31 |
| 32 function startTest() | 32 function startTest() |
| 33 { | 33 { |
| 34 var box = document.getElementById('box'); | 34 var box = document.getElementById('box'); |
| 35 box.style.webkitTransform = 'translate(100px, 0) rotate(0)'; | 35 box.style.transform = 'translate(100px, 0) rotate(0)'; |
| 36 | 36 |
| 37 window.setTimeout(function() { | 37 window.setTimeout(function() { |
| 38 box.style.webkitTransform = 'translate(0, 200px) rotate(10deg)'; | 38 box.style.transform = 'translate(0, 200px) rotate(10deg)'; |
| 39 window.setTimeout(function() { | 39 window.setTimeout(function() { |
| 40 test(); | 40 test(); |
| 41 }, 200); | 41 }, 200); |
| 42 }, 300); | 42 }, 300); |
| 43 } | 43 } |
| 44 window.addEventListener('load', startTest, false) | 44 window.addEventListener('load', startTest, false) |
| 45 </script> | 45 </script> |
| 46 </head> | 46 </head> |
| 47 <body> | 47 <body> |
| 48 <p>Box should start moving right, then move down</p> | 48 <p>Box should start moving right, then move down</p> |
| 49 <div id="box"> | 49 <div id="box"> |
| 50 </div> | 50 </div> |
| 51 | 51 |
| 52 <div id="result"> | 52 <div id="result"> |
| 53 </div> | 53 </div> |
| 54 </body> | 54 </body> |
| 55 </html> | 55 </html> |
| OLD | NEW |