| <html> |
| <head> |
| <title>Test animation shorthand property</title> |
| <style type="text/css"> |
| @-webkit-keyframes circle { |
| from { -webkit-transform:rotate(0deg); } |
| to { -webkit-transform:rotate(360deg); } |
| } |
| @-webkit-keyframes inner-circle { |
| from { -webkit-transform:rotate(0deg); } |
| to { -webkit-transform:rotate(-360deg); } |
| } |
| |
| div > div { |
| -webkit-animation: 5s linear normal none; |
| } |
| |
| div { |
| margin: 20px auto 0; |
| } |
| |
| div > div { |
| width:100px; |
| height:100px; |
| background-color:black; |
| font-size:100px; |
| line-height:1; |
| -webkit-animation-name: inner-circle; |
| } |
| </style> |
| <script type="text/javascript" charset="utf-8"> |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| const kProperties = [ |
| "webkitAnimationName", |
| "webkitAnimationDuration", |
| "webkitAnimationTimingFunction", |
| "webkitAnimationDelay", |
| "webkitAnimationIterationCount", |
| "webkitAnimationDirection", |
| "webkitAnimationFillMode" |
| ]; |
| const kExpectedResult = { id: 'a', values: [ "inner-circle", "5s", "linear", "0s", "1", "normal", "none" ] }; |
| |
| function start() |
| { |
| var resultsString = " "; |
| var el = document.getElementById(kExpectedResult.id); |
| var elStyle = window.getComputedStyle(el); |
| |
| for (var i=0; i < kProperties.length; i++) { |
| var computedValue = elStyle[kProperties[i]]; |
| var expectedValue = kExpectedResult.values[i]; |
| if (computedValue == expectedValue) |
| resultsString += "Testing " + kProperties[i] + " on " + kExpectedResult.id + ": PASS" + "<br>"; |
| else |
| resultsString += "Testing " + kProperties[i] + " on " + kExpectedResult.id + " expected <code>" + expectedValue + "</code> got <code>" + computedValue + "</code>: FAIL" + "<br>"; |
| } |
| |
| var results = document.getElementById('result'); |
| results.innerHTML = resultsString; |
| } |
| |
| window.addEventListener('load', start, false); |
| </script> |
| </head> |
| <body> |
| <div><div id="a"></div></div> |
| <div id="result"/> |
| </body> |
| </html> |
