animation-shorthand-overriding.html

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

div > div {
    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;
    animation-name: inner-circle;
}
</style>
  <script src="../resources/testharness.js"></script>
  <script src="../resources/testharnessreport.js"></script>
  <script type="text/javascript" charset="utf-8">
    var test = async_test("Test animation shorthand property");
    const kProperties = [
      "animationName",
      "animationDuration",
      "animationTimingFunction",
      "animationDelay",
      "animationIterationCount",
      "animationDirection",
      "animationFillMode"
    ];
    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];
          assert_equals(computedValue, expectedValue, "Testing " + kProperties[i] + " on " + kExpectedResult.id + " expected " + expectedValue);
      }
    }

    window.addEventListener('load', test.step_func_done(start), false);
  </script>
</head>
<body>
<div><div id="a"></div></div>
</body>
</html>
chromium/third_party/blink/web_tests/animations/animation-shorthand-overriding.html
