| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <style type="text/css"> | 4 <style type="text/css"> |
| 5 .target { | 5 .target { |
| 6 position: relative; | 6 position: relative; |
| 7 height: 100px; | 7 height: 100px; |
| 8 width: 100px; | 8 width: 100px; |
| 9 background-color: red; | 9 background-color: red; |
| 10 margin-bottom: 10px; | 10 margin-bottom: 10px; |
| 11 } | 11 } |
| 12 .animated { | 12 .animated { |
| 13 -webkit-animation: test 1s linear; | 13 animation: test 1s linear; |
| 14 animation: test 1s linear; | 14 animation: test 1s linear; |
| 15 } | 15 } |
| 16 #negative-delay { | 16 #negative-delay { |
| 17 -webkit-animation-delay: -500ms; | 17 animation-delay: -500ms; |
| 18 animation-delay: -500ms; | 18 animation-delay: -500ms; |
| 19 } | 19 } |
| 20 #zero-delay { | 20 #zero-delay { |
| 21 -webkit-animation-delay: 0ms; | 21 animation-delay: 0ms; |
| 22 animation-delay: 0ms; | 22 animation-delay: 0ms; |
| 23 } | 23 } |
| 24 #positive-delay { | 24 #positive-delay { |
| 25 -webkit-animation-delay: 500ms; | 25 animation-delay: 500ms; |
| 26 animation-delay: 500ms; | 26 animation-delay: 500ms; |
| 27 } | 27 } |
| 28 @-webkit-keyframes test { | 28 @keyframes test { |
| 29 from { left: 100px; } | 29 from { left: 100px; } |
| 30 to { left: 300px; } | 30 to { left: 300px; } |
| 31 } | 31 } |
| 32 @keyframes test { | 32 @keyframes test { |
| 33 from { left: 100px; } | 33 from { left: 100px; } |
| 34 to { left: 300px; } | 34 to { left: 300px; } |
| 35 } | 35 } |
| 36 </style> | 36 </style> |
| 37 <script type="text/javascript"> | 37 <script type="text/javascript"> |
| 38 if (window.testRunner) { | 38 if (window.testRunner) { |
| 39 testRunner.dumpAsText(); | 39 testRunner.dumpAsText(); |
| 40 testRunner.waitUntilDone(); | 40 testRunner.waitUntilDone(); |
| 41 } | 41 } |
| 42 | 42 |
| 43 var immediate = true; | 43 var immediate = true; |
| 44 onload = function() { | 44 onload = function() { |
| 45 requestAnimationFrame(function(t) { | 45 requestAnimationFrame(function(t) { |
| 46 ['negative-delay', 'zero-delay', 'positive-delay'].forEach(function(id)
{ | 46 ['negative-delay', 'zero-delay', 'positive-delay'].forEach(function(id)
{ |
| 47 var target = document.getElementById(id); | 47 var target = document.getElementById(id); |
| 48 target.addEventListener('webkitAnimationStart', onStartEventFired); | 48 target.addEventListener('animationstart', onStartEventFired); |
| 49 target.classList.add('animated'); | 49 target.classList.add('animated'); |
| 50 }); | 50 }); |
| 51 requestAnimationFrame(function() { | 51 requestAnimationFrame(function() { |
| 52 immediate = false; | 52 immediate = false; |
| 53 }); | 53 }); |
| 54 }); | 54 }); |
| 55 }; | 55 }; |
| 56 | 56 |
| 57 function log(message) { | 57 function log(message) { |
| 58 var div = document.createElement('div'); | 58 var div = document.createElement('div'); |
| (...skipping 12 matching lines...) Expand all Loading... |
| 71 </script> | 71 </script> |
| 72 </head> | 72 </head> |
| 73 <body> | 73 <body> |
| 74 <p>Tests that the start event is fired at the correct time with different star
t delays.</p> | 74 <p>Tests that the start event is fired at the correct time with different star
t delays.</p> |
| 75 <div class="target" id="negative-delay"></div> | 75 <div class="target" id="negative-delay"></div> |
| 76 <div class="target" id="zero-delay"></div> | 76 <div class="target" id="zero-delay"></div> |
| 77 <div class="target" id="positive-delay"></div> | 77 <div class="target" id="positive-delay"></div> |
| 78 <div id="result"></div> | 78 <div id="result"></div> |
| 79 </body> | 79 </body> |
| 80 </html> | 80 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2523543004:
CSS Animations: Remove unnecessary webkit prefixes from layout tests (Closed)
