pause-crash.html | Explore in Territory

<head>
  <title>Pause and resume animation should not crash</title>
  <style type="text/css" media="screen">
    .box {
      height: 100px;
      width: 100px;
      margin: 10px;
      background-color: blue;
      animation-duration: 2s;
      animation-direction: alternate;
      animation-iteration-count: infinite;
    }

    @keyframes anim {
        from { transform: matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1); }
        to   { transform: matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, 400,0,0,1); }
    }
  </style>
  <script src="../../resources/testharness.js"></script>
  <script src="../../resources/testharnessreport.js"></script>
  <script type="text/javascript" charset="utf-8">
    var test = async_test("Tests pause and resume animation. Should not crash. (https://bugs.webkit.org/show_bug.cgi?id=67510)");
    function animationStarted()
    {
        test.step_timeout(test.step_func(() => {
            document.getElementById('box1').style.animationPlayState = "paused";
            test.step_timeout(test.step_func(() => {
                document.getElementById('box1').style.animationPlayState = "running";
                test.step_timeout(test.step_func_done(() => {}, 50));
            }, 50));
        }, 50));
    }

    function startTest()
    {
        document.getElementById('box1').addEventListener('animationstart', animationStarted);
        document.getElementById('box1').style.animationName = "anim";
    }

    window.addEventListener('load', test.step_func(startTest), false);
  </script>
</head>
<div id="container">
  <div id="box1" class="box"></div>
</div>
chromium/third_party/blink/web_tests/animations/stability/pause-crash.html
