| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <style> | 2 <style> |
| 3 #box { | 3 #box { |
| 4 position: relative; | 4 position: relative; |
| 5 height: 100px; | 5 height: 100px; |
| 6 width: 100px; | 6 width: 100px; |
| 7 left: 0px; | 7 left: 0px; |
| 8 background-color: blue; | 8 background-color: blue; |
| 9 -webkit-transition-property: left; | 9 transition-property: left; |
| 10 -webkit-transition-duration: 2s; | 10 transition-duration: 2s; |
| 11 -webkit-transition-timing-function: linear; | 11 transition-timing-function: linear; |
| 12 } | 12 } |
| 13 </style> | 13 </style> |
| 14 <body> | 14 <body> |
| 15 <p> | 15 <p> |
| 16 This tests changing a transitioning property while running and resetting its dur
ation to 0. | 16 This tests changing a transitioning property while running and resetting its dur
ation to 0. |
| 17 The box should start moving left and after 600ms snap back to 0</p> | 17 The box should start moving left and after 600ms snap back to 0</p> |
| 18 <div id="box"> | 18 <div id="box"> |
| 19 </div> | 19 </div> |
| 20 <script src="../animations/resources/animation-test-helpers.js"></script> | 20 <script src="../animations/resources/animation-test-helpers.js"></script> |
| 21 <script> | 21 <script> |
| 22 function reset() | 22 function reset() |
| 23 { | 23 { |
| 24 document.getElementById('box').style.webkitTransitionDuration = "0s"; | 24 document.getElementById('box').style.transitionDuration = "0s"; |
| 25 document.getElementById('box').style.left = "0px"; | 25 document.getElementById('box').style.left = "0px"; |
| 26 } | 26 } |
| 27 | 27 |
| 28 function trigger() | 28 function trigger() |
| 29 { | 29 { |
| 30 document.getElementById('box').style.left = "400px"; | 30 document.getElementById('box').style.left = "400px"; |
| 31 } | 31 } |
| 32 | 32 |
| 33 var expectations = [ | 33 var expectations = [ |
| 34 [0.5, 'box', 'left', 100, 50], | 34 [0.5, 'box', 'left', 100, 50], |
| 35 [0.7, 'box', 'left', 0, 0], | 35 [0.7, 'box', 'left', 0, 0], |
| 36 ]; | 36 ]; |
| 37 | 37 |
| 38 var callbacks = { | 38 var callbacks = { |
| 39 0.6: reset | 39 0.6: reset |
| 40 }; | 40 }; |
| 41 | 41 |
| 42 runTransitionTest(expectations, trigger, callbacks); | 42 runTransitionTest(expectations, trigger, callbacks); |
| 43 </script> | 43 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2521493002:
CSS Transitions: Reduce usage of -webkit prefix in layout tests (Closed)
