<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Test simple animation with fill modes</title>
  <style type="text/css" media="screen">
    .box {
      position: relative;
      left: 100px;
      top: 10px;
      height: 30px;
      width: 200px;
      -webkit-animation-delay: 0.1s;
      -webkit-animation-duration: 0.1s;
      -webkit-animation-timing-function: linear;
    }

    .two-keyframes {
      -webkit-animation-name: anim1;
    }

    .three-keyframes {
      -webkit-animation-name: anim2;
    }

    @-webkit-keyframes anim1 {
        from { left: 200px; }
        to   { left: 300px; }
    }
    @-webkit-keyframes anim2 {
        from { left: 200px; }
        50% { left: 250px; }
        to   { left: 300px; }
    }

    #a, #f {
      background-color: blue;
      -webkit-animation-fill-mode: none;
    }
    #b, #g {
      background-color: red;
      -webkit-animation-fill-mode: backwards;
    }
    #c, #h {
      background-color: green;
      -webkit-animation-fill-mode: forwards;
    }
    #d, #i {
      background-color: yellow;
      -webkit-animation-fill-mode: both;
    }
    #e, #j {
      background-color: #999;
      -webkit-animation-fill-mode: both;
      -webkit-animation-iteration-count: 2;
      -webkit-animation-direction: alternate;
    }
  </style>
  <script type="text/javascript" charset="utf-8">
    const numAnims = 10;
    var animsFinished = 0;
    const allowance = 5;
    const expectedValues = [
      {id: "a", start: 100, end: 100},
      {id: "b", start: 200, end: 100},
      {id: "c", start: 100, end: 300},
      {id: "d", start: 200, end: 300},
      {id: "e", start: 200, end: 200},
      {id: "f", start: 100, end: 100},
      {id: "g", start: 200, end: 100},
      {id: "h", start: 100, end: 300},
      {id: "i", start: 200, end: 300},
      {id: "j", start: 200, end: 200}
    ];
    var result = "";

    if (window.testRunner) {
        testRunner.dumpAsText();
        testRunner.waitUntilDone();
    }

    function animationEnded(event) {
        if (++animsFinished == numAnims) {
            setTimeout(endTest, 0); // this set timeout should be ok in the test environment
                                    // since we're just giving style a chance to resolve
        }
    };

    function endTest() {

        for (var i=0; i < expectedValues.length; i++) {
            var el = document.getElementById(expectedValues[i].id);
            var expectedValue = expectedValues[i].end;
            var realValue = window.getComputedStyle(el).getPropertyCSSValue("left").getFloatValue(CSSPrimitiveValue.CSS_NUMBER);
            if (Math.abs(expectedValue - realValue) < allowance) {
              result += "PASS";
            } else {
              result += "FAIL";
            }
            result += " - end of animation - id: " + expectedValues[i].id + " expected: " + expectedValue + " actual: " + realValue + "<br>";
        }
        document.getElementById('result').innerHTML = result;

        if (window.testRunner)
            testRunner.notifyDone();
    }

    window.onload = function () {
        for (var i=0; i < expectedValues.length; i++) {
            var el = document.getElementById(expectedValues[i].id);
            var expectedValue = expectedValues[i].start;
            var realValue = window.getComputedStyle(el).getPropertyCSSValue("left").getFloatValue(CSSPrimitiveValue.CSS_NUMBER);
            if (Math.abs(expectedValue - realValue) < allowance) {
              result += "PASS";
            } else {
              result += "FAIL";
            }
            result += " - start of animation - id: " + expectedValues[i].id + " expected: " + expectedValue + " actual: " + realValue + "<br>";
        }
        document.addEventListener("webkitAnimationEnd", animationEnded, false);
    };

  </script>
</head>
<body>
This test performs an animation of the left property with four different
fill modes on two sets of objects. The first set has animations with
only from and to keyframes. The second set has animations with from, to and
a third keyframe at 50%. It animates over 0.1 second with a 0.1 second delay.
It takes snapshots at document load and the end of the animation.

<div id="a" class="box two-keyframes">
  None - 2 keyframes
</div>
<div id="b" class="box two-keyframes">
  Backwards - 2 keyframes
</div>
<div id="c" class="box two-keyframes">
  Forwards - 2 keyframes
</div>
<div id="d" class="box two-keyframes">
  Both - 2 keyframes
</div>
<div id="e" class="box two-keyframes">
  Both iterating - 2 keyframes
</div>

<div id="f" class="box three-keyframes">
  None - 3 keyframes
</div>
<div id="g" class="box three-keyframes">
  Backwards - 3 keyframes
</div>
<div id="h" class="box three-keyframes">
  Forwards - 3 keyframes
</div>
<div id="i" class="box three-keyframes">
  Both - 3 keyframes
</div>
<div id="j" class="box three-keyframes">
  Both iterating - 3 keyframes
</div>

<div id="result">
</div>
</body>
</html>