| <html> |
| <head> |
| <title>Test removal of animation shorthand property</title> |
| <style type="text/css" media="screen"> |
| .box { |
| height: 10px; |
| width: 10px; |
| background-color: blue; |
| } |
| |
| @-webkit-keyframes anim1 { } |
| </style> |
| <script type="text/javascript" charset="utf-8"> |
| if (window.testRunner) { |
| testRunner.dumpAsText(); |
| testRunner.waitUntilDone(); |
| } |
| |
| const kProperties = [ |
| "webkitAnimationName", |
| "webkitAnimationDuration", |
| "webkitAnimationTimingFunction", |
| "webkitAnimationDelay", |
| "webkitAnimationIterationCount", |
| "webkitAnimationDirection", |
| "webkitAnimationFillMode" |
| ]; |
| const kElements = [ |
| { id: "a", |
| values: [ ] |
| }, |
| { id: "b", |
| values: [ "none", "0s", "ease", "0s", "1", "normal", "none" ] |
| }, |
| { id: "c", |
| values: [ "anim1", "10s" ] |
| }, |
| { id: "d", |
| values: [ "anim1", "10s", "linear" ] |
| }, |
| { id: "e", |
| values: [ "anim1", "10s", "linear", "5s" ] |
| }, |
| { id: "f", |
| values: [ "anim1", "10s", "linear", "5s", "3" ] |
| }, |
| { id: "g", |
| values: [ "anim1", "10s", "linear", "5s", "infinite", "alternate" ] |
| }, |
| { id: "h", |
| values: [ "anim1", "10s", "linear", "5s", "infinite", "alternate", "forwards" ] |
| } |
| ]; |
| const kExpectedResults = [ "none", "0s", "ease", "0s", "1", "normal", "none" ]; |
| |
| function start() { |
| kElements.forEach(function(curEl) { |
| var el = document.getElementById(curEl.id); |
| for (var i=0; i < curEl.values.length; i++) { |
| el.style[kProperties[i]] = curEl.values[i]; |
| } |
| }); |
| setTimeout(remove, 0); |
| } |
| |
| function remove() { |
| kElements.forEach(function(curEl) { |
| var el = document.getElementById(curEl.id); |
| el.style.removeProperty("-webkit-animation"); |
| }); |
| setTimeout(test, 0); |
| } |
| |
| function test() { |
| var resultsString = ""; |
| kElements.forEach(function(curEl) { |
| var el = document.getElementById(curEl.id); |
| var elStyle = window.getComputedStyle(el); |
| |
| for (var i=0; i < kProperties.length; i++) { |
| var computedValue = elStyle[kProperties[i]]; |
| var expectedValue = kExpectedResults[i]; |
| if (computedValue == expectedValue) |
| resultsString += "Testing " + kProperties[i] + " on " + curEl.id + ": PASS" + "<br>"; |
| else |
| resultsString += "Testing " + kProperties[i] + " on " + curEl.id + " expected <code>" + expectedValue + "</code> got <code>" + computedValue + "</code>: FAIL" + "<br>"; |
| |
| } |
| }); |
| |
| var results = document.getElementById('result'); |
| results.innerHTML = resultsString; |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| } |
| |
| 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="result"> |
| </div> |
| </body> |
| </html> |
