<!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>