<!DOCTYPE html>
<html>
<head>
    <style>
        #box {
            position: relative;
            height: 100px;
            width: 100px;
            margin: 20px;
            background-color: red;
            -webkit-animation:
                horizontal 2s linear 1 alternate,
                fade 2s steps(2) 1 alternate;
        }

        @-webkit-keyframes horizontal {
            from { -webkit-transform: translateX(0px); }
            to   { -webkit-transform: translateX(200px); }
        }

        @-webkit-keyframes fade {
            from { opacity: 1.0; }
            to { opacity: 0.0; }
        }
    </style>
    <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
        const expectedValues = [
          // [animation-name, time, element-id, property, expected-value, tolerance]
          ["horizontal", 0.5, "box", "webkitTransform", [1,0,0,1, 50,0], 20],
          ["horizontal", 1.0, "box", "webkitTransform", [1,0,0,1,100,0], 20],
          ["horizontal", 1.5, "box", "webkitTransform", [1,0,0,1,150,0], 20],
          ["fade", 0.5, "box", "opacity", 1.0, 0.15],
          ["fade", 0.9, "box", "opacity", 1.0, 0.15],
          ["fade", 1.5, "box", "opacity", 0.5, 0.15],
        ];

        runAnimationTest(expectedValues);
    </script>
</head>
<body>
    <div id="box"></div>
    <div id="result"></div>
</body>
</html>