1 files changed, 51 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/webappapis/animation-frames/cancel-handle-manual.html b/testing/web-platform/tests/html/webappapis/animation-frames/cancel-handle-manual.html
new file mode 100644
index 0000000000..0328272522
--- /dev/null
+++ b/testing/web-platform/tests/html/webappapis/animation-frames/cancel-handle-manual.html
@@ -0,0 +1,51 @@
+<!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>