cancel-handle-manual.html | Explore in Territory

<!DOCTYPE html>
<meta charset="utf-8">
<title>AnimationTiming Test: cancelAnimationFrame used to cancel request callback</title>
<link rel="author" title="Intel" href="http://www.intel.com">
<link rel="help" href="https://html.spec.whatwg.org/multipage/#animation-frames">

<style>
  #animated {
    background: blue;
    color: white;
    height: 100px;
    width: 100px;
    position: absolute;
  }
</style>

<p>
  Test passes if there is a filled blue square with 'Filler Text',
  which moves from left to right repeatly, when click the 'stop' button,
  the square stops.
</p>
<button onclick="stop()">stop</button>
<div id="animated">Filler Text</div>

<script>

let requestId = 0;
let requestAnimation = window.requestAnimationFrame;
let cancelAnimation = window.cancelAnimationFrame;

function animate(time) {
  let div = document.getElementById("animated");
  div.style.left = (time - animationStartTime) % 2000 / 4 + "px";
  requestId = requestAnimation(animate);
}

function start() {
  animationStartTime = window.performance.now();
  requestId = requestAnimation(animate);
}

function stop() {
  if (requestId) {
    cancelAnimation(requestId);
    requestId = 0;
  }
}

start();

</script>

chromium/third_party/blink/web_tests/external/wpt/html/webappapis/animation-frames/cancel-handle-manual.html