<!DOCTYPE html>

<html>
<head>
  <style>
    #target {
      position: relative;
      top: 100px;
      left: 100px;
      width: 100px;
      height: 100px;
      background-color: blue;
      transition-property: left;
      transition-duration: 0s;
      transition-delay: 0.5s;
    }
    
    #target.moved {
      left: 200px;
    }
   </style>
   <script src="../animations/resources/animation-test-helpers.js"></script>
   <script>
    const expectedValues = [
      // Times are relative to document load for transitions.
      // [time, element-id, property, expected-value, tolerance]
      [0.0, "target", "left", 100, 0],
      [0.4, "target", "left", 100, 0],
      [0.6, "target", "left", 200, 0],
    ];

    function setupTest()
    {
      document.getElementById('target').className = 'moved';
    }

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

  <div id="target"></div>
  <div id="result"></div>

</body>
</html>