| <html> |
| <head> |
| <title>Test animation shorthand property</title> |
| <style type="text/css" media="screen"> |
| .box { |
| height: 10px; |
| width: 10px; |
| background-color: blue; |
| } |
| #a { |
| } |
| #b { |
| -webkit-animation: none; |
| } |
| #c { |
| -webkit-animation: anim1 10s; |
| } |
| #d { |
| -webkit-animation: anim1 10s linear; |
| } |
| #e { |
| -webkit-animation: anim1 10s linear 5s; |
| } |
| #f { |
| -webkit-animation: anim1 10s linear 5s 3; |
| } |
| #g { |
| -webkit-animation: anim1 10s linear 5s infinite alternate; |
| } |
| #h { |
| -webkit-animation: anim1 10s linear 5s infinite alternate forwards; |
| } |
| #i { |
| -webkit-animation: anim1 10s linear normal none; |
| } |
| #j { |
| -webkit-animation: anim1 10s linear infinite backwards, anim2 3s none, anim3 5s both; |
| } |
| |
| @-webkit-keyframes anim1 { } |
| @-webkit-keyframes anim2 { } |
| </style> |
| <script type="text/javascript" charset="utf-8"> |
| if (window.layoutTestController) |
| layoutTestController.dumpAsText(); |
| |
| const kProperties = [ |
| "webkitAnimationName", |
| "webkitAnimationDuration", |
| "webkitAnimationTimingFunction", |
| "webkitAnimationDelay", |
| "webkitAnimationIterationCount", |
| "webkitAnimationDirection", |
| "webkitAnimationFillMode" |
| ]; |
| const kExpectedResults = [ |
| { id: 'a', values: [ "none", "0s", "cubic-bezier(0.25, 0.1, 0.25, 1)", "0s", "1", "normal", "none" ] }, |
| { id: 'b', values: [ "none", "0s", "cubic-bezier(0.25, 0.1, 0.25, 1)", "0s", "1", "normal", "none" ] }, |
| { id: 'c', values: [ "anim1", "10s", "cubic-bezier(0.25, 0.1, 0.25, 1)", "0s", "1", "normal", "none" ] }, |
| { id: 'd', values: [ "anim1", "10s", "linear", "0s", "1", "normal", "none" ] }, |
| { id: 'e', values: [ "anim1", "10s", "linear", "5s", "1", "normal", "none" ] }, |
| { id: 'f', values: [ "anim1", "10s", "linear", "5s", "3", "normal", "none" ] }, |
| { id: 'g', values: [ "anim1", "10s", "linear", "5s", "infinite", "alternate", "none" ] }, |
| { id: 'h', values: [ "anim1", "10s", "linear", "5s", "infinite", "alternate", "forwards" ] }, |
| { id: 'i', values: [ "anim1", "10s", "linear", "0s", "1", "normal", "none" ] }, |
| { id: 'j', values: [ "anim1, anim2, anim3", "10s, 3s, 5s", "linear, cubic-bezier(0.25, 0.1, 0.25, 1), cubic-bezier(0.25, 0.1, 0.25, 1)", "0s, 0s, 0s", "infinite, 1, 1", "normal, normal, normal", "backwards, none, both" ] } |
| ]; |
| |
| function start() |
| { |
| var resultsString = ""; |
| kExpectedResults.forEach(function(curItem) { |
| var el = document.getElementById(curItem.id); |
| var elStyle = window.getComputedStyle(el); |
| |
| for (var i=0; i < kProperties.length; i++) { |
| var computedValue = elStyle[kProperties[i]]; |
| var expectedValue = curItem.values[i]; |
| if (computedValue == expectedValue) |
| resultsString += "Testing " + kProperties[i] + " on " + curItem.id + ": PASS" + "<br>"; |
| else |
| resultsString += "Testing " + kProperties[i] + " on " + curItem.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 id="a" class="box"></div> |
| <div id="b" class="box"></div> |
| <div id="c" class="box"></div> |
| <div id="d" class="box"></div> |
| <div id="e" class="box"></div> |
| <div id="f" class="box"></div> |
| <div id="g" class="box"></div> |
| <div id="h" class="box"></div> |
| <div id="i" class="box"></div> |
| <div id="j" class="box"></div> |
| <div id="result"> |
| </div> |
| </body> |
| </html> |
