<html> 
<head>
<title>Test animation shorthand property</title> 
<style type="text/css">
@-webkit-keyframes circle {    
    from { transform:rotate(0deg); }    
    to { transform:rotate(360deg); }
}
@-webkit-keyframes inner-circle {
    from { transform:rotate(0deg); }
    to { transform:rotate(-360deg); }
}

div > div {
    -webkit-animation: 5s linear normal none;
}

div {
    margin: 20px auto 0;
}

div > div {
    width:100px;
    height:100px;
    background-color:black;
    font-size:100px;
    line-height:1;
    -webkit-animation-name: inner-circle;
}
</style>
  <script type="text/javascript" charset="utf-8">
    if (window.testRunner)
        testRunner.dumpAsText();
  
    const kProperties = [
      "webkitAnimationName",
      "webkitAnimationDuration",
      "webkitAnimationTimingFunction",
      "webkitAnimationDelay",
      "webkitAnimationIterationCount",
      "webkitAnimationDirection",
      "webkitAnimationFillMode"
    ];
    const kExpectedResult =  { id: 'a',  values: [ "inner-circle", "5s", "linear", "0s", "1", "normal", "none" ] };
    
    function start()
    {
      var resultsString = " ";
      var el = document.getElementById(kExpectedResult.id);
      var elStyle = window.getComputedStyle(el);
        
      for (var i=0; i < kProperties.length; i++) {
          var computedValue = elStyle[kProperties[i]];
          var expectedValue = kExpectedResult.values[i];
          if (computedValue == expectedValue)
            resultsString += "Testing " + kProperties[i] + " on " + kExpectedResult.id + ": PASS" + "<br>";
          else
            resultsString += "Testing " + kProperties[i] + " on " + kExpectedResult.id + " expected <code>" + expectedValue + "</code> got <code>" + computedValue + "</code>: FAIL" + "<br>";
      }

      var results = document.getElementById('result');
      results.innerHTML = resultsString;
    }
    
    window.addEventListener('load', start, false);
  </script>
</head> 
<body>
<div><div id="a"></div></div>
<div id="result"/>
</body>
</html>