| OLD | NEW |
|---|
| 1 <html> | 1 <html> |
| 2 <head> | 2 <head> |
| 3 <style> | 3 <style> |
| 4 .box { | 4 .box { |
| 5 position: relative; | 5 position: relative; |
| 6 top: 0; | 6 top: 0; |
| 7 left: 0; | 7 left: 0; |
| 8 width: 100px; | 8 width: 100px; |
| 9 height: 100px; | 9 height: 100px; |
| 10 background-color: blue; | 10 background-color: blue; |
| 11 -webkit-transition-property: -webkit-transform; | 11 -webkit-transition-property: transform; |
| 12 -webkit-transition-duration: 2s; | 12 -webkit-transition-duration: 2s; |
| 13 -webkit-transform: translate(0, 0); | 13 transform: translate(0, 0); |
| 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 t = window.getComputedStyle(document.getElementById('box')).webkitTran
sform; | 24 var t = window.getComputedStyle(document.getElementById('box')).transform; |
| 25 // grab the x value from the matrix() | 25 // grab the x value from the matrix() |
| 26 var lastValueRE = /([\.\d]+),[^,]+\)$/; | 26 var lastValueRE = /([\.\d]+),[^,]+\)$/; |
| 27 var xTranslate = lastValueRE.exec(t)[1]; | 27 var xTranslate = lastValueRE.exec(t)[1]; |
| 28 var result = (xTranslate > 0) ? 'PASS' : 'FAIL: transition should be re-ta
rgeted from 200px in x, so x > 0'; | 28 var result = (xTranslate > 0) ? 'PASS' : 'FAIL: transition should be re-ta
rgeted from 200px in x, so x > 0'; |
| 29 document.getElementById('result').innerHTML = result; | 29 document.getElementById('result').innerHTML = result; |
| 30 | 30 |
| 31 if (window.testRunner) | 31 if (window.testRunner) |
| 32 testRunner.notifyDone(); | 32 testRunner.notifyDone(); |
| 33 } | 33 } |
| 34 | 34 |
| 35 function startTest() | 35 function startTest() |
| 36 { | 36 { |
| 37 var box = document.getElementById('box'); | 37 var box = document.getElementById('box'); |
| 38 box.style.webkitTransform = 'translate(200px, 0)'; | 38 box.style.transform = 'translate(200px, 0)'; |
| 39 | 39 |
| 40 window.setTimeout(function() { | 40 window.setTimeout(function() { |
| 41 box.style.webkitTransform = 'translate(0, 200px)'; | 41 box.style.transform = 'translate(0, 200px)'; |
| 42 window.setTimeout(test, 0); | 42 window.setTimeout(test, 0); |
| 43 }, 300); | 43 }, 300); |
| 44 | 44 |
| 45 } | 45 } |
| 46 </script> | 46 </script> |
| 47 </head> | 47 </head> |
| 48 <body onload="startTest()"> | 48 <body onload="startTest()"> |
| 49 <p>Interrupted transition should not jump back to pre-transition transform</p> | 49 <p>Interrupted transition should not jump back to pre-transition transform</p> |
| 50 <div id="box" class="box"> | 50 <div id="box" class="box"> |
| 51 </div> | 51 </div> |
| 52 <div id="result"> | 52 <div id="result"> |
| 53 </div> | 53 </div> |
| 54 </body> | 54 </body> |
| 55 </html> | 55 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 637763002:
Unprefix usage of -webkit-transform in tests (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master