<!DOCTYPE html>
<html>
<head>
  <title>Unprefixed keyframes test</title>
  <style>
    #box {
        position: absolute;
        left: 0;
        top: 100px;
        height: 100px;
        width: 100px;
        background-color: blue;
        animation-duration: 1s;
        animation-timing-function: linear;
        animation-name: anim;
    }
    @keyframes anim {
        from { left: 50px; }
        20%  { left: 100px; }
        40%  { left: 100px; }
        60%  { left: 200px; }
        80%  { left: 200px; }
        to   { left: 300px; }
    }
    </style>
    <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">

    var expectedValues = [
      // [animation-name, time, element-id, property, expected-value, tolerance]
      ["anim", 0.3, "box", "left", 100, 1],
      ["anim", 0.7, "box", "left", 200, 1],
    ];

    runAnimationTest(expectedValues);

  </script>
</head>
<body>
This test performs an animation of the left property. It should stop for 100ms at 100px and 200px
We test for those values 50ms after it has stopped at each position.
<div id="box">
</div>
<div id="result">
</div>
</body>
</html>