| <!DOCTYPE html> |
| <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 src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script type="text/javascript" charset="utf-8"> |
| const kProperties = [ |
| "webkitAnimationName", |
| "webkitAnimationDuration", |
| "webkitAnimationTimingFunction", |
| "webkitAnimationDelay", |
| "webkitAnimationIterationCount", |
| "webkitAnimationDirection", |
| "webkitAnimationFillMode" |
| ]; |
| const kExpectedResults = [ |
| { id: 'a', values: [ "none", "0s", "ease", "0s", "1", "normal", "none" ] }, |
| { id: 'b', values: [ "none", "0s", "ease", "0s", "1", "normal", "none" ] }, |
| { id: 'c', values: [ "anim1", "10s", "ease", "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, ease, ease", "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]; |
| assert_equals(computedValue, expectedValue); |
| } |
| }); |
| } |
| |
| async_test(t => { |
| window.addEventListener("load", t.step_func_done(start)); |
| }, "Test animation shorthand property prefixed"); |
| </script> |
| <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> |
