| OLD | NEW |
|---|
| 1 <html> | 1 <html> |
| 2 <head> | 2 <head> |
| 3 <title>Test animation shorthand property</title> | 3 <title>Test animation shorthand property</title> |
| 4 <style type="text/css"> | 4 <style type="text/css"> |
| 5 @-webkit-keyframes circle { | 5 @keyframes circle { |
| 6 from { transform:rotate(0deg); } | 6 from { transform:rotate(0deg); } |
| 7 to { transform:rotate(360deg); } | 7 to { transform:rotate(360deg); } |
| 8 } | 8 } |
| 9 @-webkit-keyframes inner-circle { | 9 @keyframes inner-circle { |
| 10 from { transform:rotate(0deg); } | 10 from { transform:rotate(0deg); } |
| 11 to { transform:rotate(-360deg); } | 11 to { transform:rotate(-360deg); } |
| 12 } | 12 } |
| 13 | 13 |
| 14 div > div { | 14 div > div { |
| 15 -webkit-animation: 5s linear normal none; | 15 animation: 5s linear normal none; |
| 16 } | 16 } |
| 17 | 17 |
| 18 div { | 18 div { |
| 19 margin: 20px auto 0; | 19 margin: 20px auto 0; |
| 20 } | 20 } |
| 21 | 21 |
| 22 div > div { | 22 div > div { |
| 23 width:100px; | 23 width:100px; |
| 24 height:100px; | 24 height:100px; |
| 25 background-color:black; | 25 background-color:black; |
| 26 font-size:100px; | 26 font-size:100px; |
| 27 line-height:1; | 27 line-height:1; |
| 28 -webkit-animation-name: inner-circle; | 28 animation-name: inner-circle; |
| 29 } | 29 } |
| 30 </style> | 30 </style> |
| 31 <script type="text/javascript" charset="utf-8"> | 31 <script type="text/javascript" charset="utf-8"> |
| 32 if (window.testRunner) | 32 if (window.testRunner) |
| 33 testRunner.dumpAsText(); | 33 testRunner.dumpAsText(); |
| 34 | 34 |
| 35 const kProperties = [ | 35 const kProperties = [ |
| 36 "webkitAnimationName", | 36 "animationName", |
| 37 "webkitAnimationDuration", | 37 "animationDuration", |
| 38 "webkitAnimationTimingFunction", | 38 "animationTimingFunction", |
| 39 "webkitAnimationDelay", | 39 "animationDelay", |
| 40 "webkitAnimationIterationCount", | 40 "animationIterationCount", |
| 41 "webkitAnimationDirection", | 41 "animationDirection", |
| 42 "webkitAnimationFillMode" | 42 "animationFillMode" |
| 43 ]; | 43 ]; |
| 44 const kExpectedResult = { id: 'a', values: [ "inner-circle", "5s", "linear
", "0s", "1", "normal", "none" ] }; | 44 const kExpectedResult = { id: 'a', values: [ "inner-circle", "5s", "linear
", "0s", "1", "normal", "none" ] }; |
| 45 | 45 |
| 46 function start() | 46 function start() |
| 47 { | 47 { |
| 48 var resultsString = " "; | 48 var resultsString = " "; |
| 49 var el = document.getElementById(kExpectedResult.id); | 49 var el = document.getElementById(kExpectedResult.id); |
| 50 var elStyle = window.getComputedStyle(el); | 50 var elStyle = window.getComputedStyle(el); |
| 51 | 51 |
| 52 for (var i=0; i < kProperties.length; i++) { | 52 for (var i=0; i < kProperties.length; i++) { |
| (...skipping 10 matching lines...) Expand all Loading... |
| 63 } | 63 } |
| 64 | 64 |
| 65 window.addEventListener('load', start, false); | 65 window.addEventListener('load', start, false); |
| 66 </script> | 66 </script> |
| 67 </head> | 67 </head> |
| 68 <body> | 68 <body> |
| 69 <div><div id="a"></div></div> | 69 <div><div id="a"></div></div> |
| 70 <div id="result"/> | 70 <div id="result"/> |
| 71 </body> | 71 </body> |
| 72 </html> | 72 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2513343006:
CSS Animations: Remove unnecessary webkit prefixes from layout tests (Closed)
