| <html> |
| <head> |
| <title>Test removal of animation shorthand property</title> |
| <style type="text/css" media="screen"> |
| .box { |
| height: 10px; |
| width: 10px; |
| background-color: blue; |
| } |
| |
| @keyframes anim1 { } |
| </style> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <script type="text/javascript" charset="utf-8"> |
| var asyncHandle = async_test("Test removal of animation shorthand property"); |
| const kProperties = [ |
| "animationName", |
| "animationDuration", |
| "animationTimingFunction", |
| "animationDelay", |
| "animationIterationCount", |
| "animationDirection", |
| "animationFillMode" |
| ]; |
| 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]; |
| } |
| }); |
| asyncHandle.step_timeout(asyncHandle.step_func(remove), 0); |
| } |
| |
| function remove() { |
| kElements.forEach(function(curEl) { |
| var el = document.getElementById(curEl.id); |
| el.style.removeProperty("animation"); |
| }); |
| asyncHandle.step_timeout(asyncHandle.step_func_done(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]; |
| assert_equals(computedValue, expectedValue, "Testing " + kProperties[i] + " on " + curEl.id + " expected " + expectedValue); |
| } |
| }); |
| } |
| |
| window.addEventListener('load', asyncHandle.step_func(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> |
| </body> |
| </html> |
