<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
    }

    #box {
      position: absolute;
      left: 0px;
      top: 100px;
      height: 100px;
      width: 100px;
      background-color: blue;
      animation: move1 linear 2s;
    }

    #box.paused {
        animation: move1 linear 2s paused;
    }

    @keyframes move1 {
      from { transform: translateX(0px); }
      to   { transform: translateX(300px); }
    }
  </style>
</head>
<body>
<div id="box"></div>
<div id="result"></div>
<script type="text/javascript">

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

    document.getElementById("box").addEventListener("animationstart", event => {
        const animation = event.target.getAnimations()[0];
        result.innerHTML += `${animation.playState == "running" ? "PASS" : "FAIL"} - animation is running upon receiving animationstart event<br>`;
        event.target.classList.add("paused");
        result.innerHTML += `${animation.playState == "paused" ? "PASS" : "FAIL"} - animation is paused after setting the animation-play-state property to paused through the shorthand`;

        if (window.testRunner)
            testRunner.notifyDone();
    });
</script>
</body>
</html>