LayoutTests/animations/keyframe-timing-functions-transform.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style type="text/css" media="screen">
   6
   7     #container {
   8       position: relative;
   9       border: 1px solid black;
  10       height: 100px;
  11       width: 700px;
  12     }
  13
  14     #box {
  15       position: absolute;
  16       height: 100px;
  17       width: 100px;
  18       background-color: blue;
  19       -webkit-animation-name: move;
  20       -webkit-animation-duration: 1.5s;
  21     }
  22
  23     @-webkit-keyframes move {
  24       0%   {
  25         -webkit-transform: translateX(0);
  26         -webkit-animation-timing-function: ease-out;
  27       }
  28       10% {
  29         -webkit-transform: translateX(100px);
  30         -webkit-animation-timing-function: linear;
  31       }
  32       90% {
  33         -webkit-transform: translateX(500px);
  34         -webkit-animation-timing-function: ease-in;
  35       }
  36       100% {
  37         -webkit-transform: translateX(600px);
  38       }
  39     }
  40
  41   </style>
  42   <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  43   <script type="text/javascript" charset="utf-8">
  44
  45     const expectedValues = [
  46       // [animation-name, time, element-id, property, expected-value, tolerance]
  47       ["move", 0.75, "box", "webkitTransform.4", 300, 20],
  48     ];
  49
  50     runAnimationTest(expectedValues);
  51   </script>
  52 </head>
  53 <body>
  54
  55   Tests whether timing functions inside keyframes are respected.
  56 <div id="container">
  57   <div id="box"></div>
  58 </div>
  59 <div id="result">
  60 </div>
  61 </body>
  62 </html>