LayoutTests/animations/suspend-resume-animation.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
   2 <html lang="en">
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   5   <title>Test suspendAnimations()/resumeAnimations() for animations</title>
   6   <style type="text/css" media="screen">
   7     #box {
   8       height: 100px;
   9       width: 100px;
  10       background-color: blue;
  11       -webkit-animation-duration: 1.25s;
  12       -webkit-animation-timing-function: linear;
  13       -webkit-animation-name: "move";
  14     }
  15     @-webkit-keyframes "move" {
  16         from { -webkit-transform: translateX(0); }
  17         to   { -webkit-transform: translateX(500px); }
  18     }
  19   </style>
  20   <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  21   <script type="text/javascript" charset="utf-8">
  22
  23     const expectedValues = [
  24       // [animation-name, time, element-id, property, expected-value, tolerance]
  25       ["rotate", 0.6, "box", "webkitTransform", [1,0,0,1, 200, 0], 30],
  26       ["rotate", 0.9, "box", "webkitTransform", [1,0,0,1, 200, 0], 30],
  27       ["rotate", 1.5, "box", "webkitTransform", [1,0,0,1, 400, 0], 30],
  28     ];
  29
  30     function suspend()
  31     {
  32         if (window.internals)
  33             internals.suspendAnimations(document);
  34     }
  35
  36     function resume()
  37     {
  38         if (window.internals)
  39             internals.resumeAnimations(document);
  40     }
  41
  42     function setTimers()
  43     {
  44         setTimeout(suspend, 500);
  45         setTimeout(resume, 1000);
  46     }
  47
  48     runAnimationTest(expectedValues, setTimers, undefined, true);
  49
  50   </script>
  51 </head>
  52 <body>
  53 <p>
  54 This test shows suspend and resume of a box moving to the right 500px. If running inside DumpRenderTest the box should stop at 200px
  55 after 500ms and then continue to complete the move in another 750ms
  56 <div id="box">
  57 </div>
  58 <div id="result">
  59 </div>
  60 </body>
  61 </html>