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