<!DOCTYPE html>
<html>
<head>
  <style type="text/css" media="screen">
    #test {
      width: 100px;
      height: 100px;
      animation: test 10s forwards;
    }
    @keyframes test {
        0% { background-color: green; }
        50% { background-color: red !important; }
        100% { background-color: green; }
    }
  </style>
  <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" charset="utf-8">
    const expectedValues = [
      // [time, element-id, property, expected-value, tolerance]
      [0, "test", "background-color", "rgb(0, 128, 0)", 0],
      [5, "test", "background-color", "rgb(0, 128, 0)", 0],
      [10, "test", "background-color", "rgb(0, 128, 0)", 0],
    ];
    runAnimationTest(expectedValues);
  </script>
</head>
<body>
<p>Tests that !important properties are ignored in keyframes.</p>
<div id="test"></div>
<div id="result">
</div>
</body>
</html>