LayoutTests/animations/keyframe-timing-functions.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>Keyframe Timing Functions</title>
   8   <style type="text/css" media="screen">
   9
  10     #container {
  11       position: relative;
  12       border: 1px solid black;
  13       height: 100px;
  14       width: 700px;
  15     }
  16
  17     #box {
  18       position: absolute;
  19       height: 100px;
  20       width: 100px;
  21       background-color: blue;
  22       -webkit-animation-name: move;
  23       -webkit-animation-duration: 1.5s;
  24     }
  25
  26     @-webkit-keyframes move {
  27       0%   {
  28         left: 0;
  29         -webkit-animation-timing-function: linear;
  30       }
  31       100% {
  32         left: 600px;
  33       }
  34     }
  35
  36   </style>
  37   <script type="text/javascript" charset="utf-8">
  38
  39     if (window.layoutTestController) {
  40         layoutTestController.dumpAsText();
  41         layoutTestController.waitUntilDone();
  42     }
  43
  44     result = "PASS";
  45     const kDefaultTolerance = 20;
  46
  47     function isEqual(actual, desired, tolerance)
  48     {
  49         if (tolerance == undefined || tolerance == 0)
  50             tolerance = kDefaultTolerance;
  51         var diff = Math.abs(actual - desired);
  52         return diff < tolerance;
  53     }
  54
  55     function snapshot()
  56     {
  57         var left = parseInt(window.getComputedStyle(document.getElementById('box')).left);
  58         var expected = 300;
  59         if (!isEqual(left, expected))
  60             result = "FAIL (was: " + left + ", expected: " + expected + ")";
  61
  62         document.getElementById('result').innerHTML = result;
  63         if (window.layoutTestController)
  64             layoutTestController.notifyDone();
  65     }
  66
  67     function start()
  68     {
  69         window.setTimeout(snapshot, 750);
  70     }
  71
  72     document.addEventListener('webkitAnimationStart', start, false);
  73   </script>
  74 </head>
  75 <body>
  76
  77 <div id="container">
  78     This test should do a linear animation. The timing-function comes from the keyframe, so this is testing
  79     whether or not the timing function in keyframes is used.
  80   <div id="box"></div>
  81 </div>
  82 <div id="result">
  83 </div>
  84 </body>
  85 </html>