<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Keyframes with invalid keys</title>
  <style type="text/css" media="screen">
    @-webkit-keyframes "anim" {
        50% { left: 3px; }

        /* Out-of-range percentage values */
        -10% { left: 100px; }
        -10%, from { left: 100px; }
        from, 110% { left: 100px; }
        110% { left: 100px; }

        /* Invalid keys (numbers and identifiers) */
        0, from { left: 100px; }
        fromto { left: 100px; }
        60%, unknown { left: 100px; }
        100 { left: 100px; }
    }
    #box {
        position: absolute;
        left: 3px;
        top: 100px;
        height: 100px;
        width: 100px;
        background-color: blue;
        -webkit-animation-duration: 1s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-name: "anim";
    }

    </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]
      ["anim", 0.2, "box", "left", 3, 1],
      ["anim", 0.8, "box", "left", 3, 1],
    ];

    runAnimationTest(expectedValues);

  </script>
</head>
<body>
This test performs an animation of the left property. It should always remain 3px, unless there are
errors during parsing, resulting in other values in keyframes with bad keys.
Four of the keyframes contain invalid keys, and should be discarded altogether
("If a keyframe selector specifies negative percentage values or values higher than 100%, then the keyframe will be ignored", see <a href="http://www.w3.org/TR/css3-animations/#keyframes">http://www.w3.org/TR/css3-animations/#keyframes</a>).
<div id="box">
</div>
<div id="result">
</div>
</body>
</html>