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 src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  38   <script type="text/javascript" charset="utf-8">
  39
  40     const expectedValues = [
  41       // [animation-name, time, element-id, property, expected-value, tolerance]
  42       ["move", 0.75, "box", "left", 300, 20],
  43     ];
  44
  45     runAnimationTest(expectedValues);
  46   </script>
  47 </head>
  48 <body>
  49
  50 <div id="container">
  51     This test should do a linear animation. The timing-function comes from the keyframe, so this is testing
  52     whether or not the timing function in keyframes is used.
  53   <div id="box"></div>
  54 </div>
  55 <div id="result">
  56 </div>
  57 </body>
  58 </html>