| <html> |
| <head> |
| <title>Test animation shorthand property</title> |
| <style type="text/css"> |
| @keyframes circle { |
| from { transform:rotate(0deg); } |
| to { transform:rotate(360deg); } |
| } |
| @keyframes inner-circle { |
| from { transform:rotate(0deg); } |
| to { transform:rotate(-360deg); } |
| } |
| |
| div > div { |
| 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; |
| animation-name: inner-circle; |
| } |
| </style> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <script type="text/javascript" charset="utf-8"> |
| var test = async_test("Test animation shorthand property"); |
| const kProperties = [ |
| "animationName", |
| "animationDuration", |
| "animationTimingFunction", |
| "animationDelay", |
| "animationIterationCount", |
| "animationDirection", |
| "animationFillMode" |
| ]; |
| 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]; |
| assert_equals(computedValue, expectedValue, "Testing " + kProperties[i] + " on " + kExpectedResult.id + " expected " + expectedValue); |
| } |
| } |
| |
| window.addEventListener('load', test.step_func_done(start), false); |
| </script> |
| </head> |
| <body> |
| <div><div id="a"></div></div> |
| </body> |
| </html> |
