<!DOCTYPE>

<html>
<head>
  <style>
    #test {
      color: #00F;
      -webkit-transition: color 1s linear;
    }
    
    #test.changed {
      color: #F00;
    }
  </style>
  <script src="resources/transition-test-helpers.js"></script>
  <script type="text/javascript">
    const expectedValues = [
      // [time, element-id, property, expected-value, tolerance, post-completion callback, should-be-transitioning]
      [0.4998, 'test', 'color', [127, 0, 128], 0],
      [0.5000, 'test', 'color', [128, 0, 128], 0],
      [0.5002, 'test', 'color', [128, 0, 127], 0],
    ];

    function setupTest()
    {
      document.getElementById('test').className = 'changed';
    }

    runTransitionTest(expectedValues, setupTest, usePauseAPI);
  </script>
</head>
<body>

  <div id="test">
    This test will probably fail when run manually; it requires the pause API for accurate results.
  </div>
  
  <div id="result"></div>
</body>
</html>