<!DOCTYPE html>
<html>
<head>
  <style type="text/css" media="screen">
    body {
      margin: 0;
    }

    .box {
      position: relative;
      width: 100px;
      height: 100px;
      left: 0;
      background-color: green;
    }
    
    .indicator {
      position: absolute;
      width: 100px;
      height: 100px;
      left: 100px;
      background-color: red;
    }
    #indicator1 {
      top: 0;
    }
    #indicator2 {
      top: 100px;
    }
    
    #box1 {
      left: 200px;
      animation: move-left 2s linear;
    }
    
    #box2 {
      transform: translateX(200px);
      animation: move-transform 2s linear;
    }
    
    @keyframes move-left {
      0% {
        opacity: 1;
      }
      25% {
        opacity: 1;
      }
      50% {
        left: 0;
        opacity: 1;
      }
      100% {
        left: 0;
        opacity: 0;
      }
    }

    @keyframes move-transform {
      0% {
        opacity: 1;
      }
      25% {
        opacity: 1;
      }
      50% {
        transform: translateX(0);
        opacity: 1;
      }
      100% {
        transform: translateX(0);
        opacity: 0;
      }
    }
  </style>
  <script src="resources/animation-test-helpers.js" type="text/javascript"></script>
  <script type="text/javascript">
    
    const expectedValues = [
      // [time, element-id, property, expected-value, tolerance]
      [0.5, "box1", "left", 100, 15],
      [0.5, "box2", "transform.4", 100, 15],
    ];
    
    var doPixelTest = true;
    var disablePauseAPI = false;
    runAnimationTest(expectedValues, null, undefined, disablePauseAPI, doPixelTest);
  </script>
</head>
<body>
  <!-- In the pixel result, you should see two vertically adjacent green squares. There should be no red.
  Test is only reliable when run in DRT. -->
  <div class="indicator" id="indicator1"></div>
  <div class="indicator" id="indicator2"></div>

  <div class="box" id="box1"></div>
  <div class="box" id="box2"></div>

  <div id="result"></div>
</body>
</html>