<!DOCTYPE html>
<!--
 | Test case which ensures that simple use of animations works correctly and
 | that we see the right thing at the right time.
 -->
<html>
<head>
  <style>
    @keyframes testAnimation{
      0% { transform: translate(0, 0); }
      50% { transform: translate(100px,0); }
      100% { transform: translate(100px,100px); }
    }
    .block {
      position: absolute;
      width: 100px;
      height: 100px;
      font-size: 30px;
    }
    #block1 {
      background-color: red;
      animation: testAnimation 1s forwards;
    }
    #block2 {
      background-color: green;
      animation: testAnimation 2s forwards;
    }
  </style>
</head>
<body>
  <div id="block1" class="block"></div>
  <div id="block2" class="block"></div>

  <script>

    if (window.testRunner) {
      window.testRunner.waitUntilDone();
    }

    window.addEventListener('load', function() {
      if (window.testRunner) {
        // Do another layout to start the animations.
        window.testRunner.DoNonMeasuredLayout();

        // Run the transition to the half-way point and then measure the result.
        window.testRunner.AdvanceClockByMs(1000);
        window.testRunner.notifyDone();
      }
    });
  </script>

</body>
</html>