third_party/WebKit/LayoutTests/animations/change-one-anim.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   2    "http://www.w3.org/TR/html4/loose.dtd">
   3
   4 <html lang="en">
   5 <head>
   6     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   7     <title>Animation using matrix()</title>
   8     <style type="text/css" media="screen">
   9         #box {
  10             position: relative;
  11             height: 20px;
  12             width: 20px;
  13             background-color: #9bb;
  14             -webkit-animation-name: horiz, vert;
  15             -webkit-animation-duration: 1s;
  16             -webkit-animation-iteration-count: infinite;
  17             -webkit-animation-direction: alternate;
  18             -webkit-animation-timing-function: linear;
  19          }
  20
  21          @-webkit-keyframes horiz {
  22             from { left: 0px; }
  23             to { left:300px; }
  24          }
  25          @-webkit-keyframes vert {
  26             from { top: 0px; }
  27             to { top: 300px; }
  28          }
  29     </style>
  30     <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  31     <script type="text/javascript" charset="utf-8">
  32
  33         const expectedValues = [
  34           // [time, element-id, property, expected-value, tolerance]
  35           [0.75, "box", "left", 150, 40],
  36           [0.75, "box", "top", 225, 40],
  37         ];
  38
  39         function removeAnim()
  40         {
  41             var target = document.getElementById("box");
  42             var left = window.getComputedStyle(target).left;
  43             target.style.webkitAnimationName = "vert";
  44             target.style.left = left;
  45         }
  46
  47         function setup()
  48         {
  49             setTimeout("removeAnim()", 500);
  50         }
  51
  52         runAnimationTest(expectedValues, setup, undefined, 'do-not-use-pause-api');
  53     </script>
  54 </head>
  55 <body>
  56 This test performs two animations, left and top. It animates over 1 second.
  57 At 0.5 second it removes the left animation and the top animation should continue
  58 from where it left off.
  59 <div id="box">
  60 </div>
  61 <div id="result">
  62 </div>
  63 </body>
  64 </html>