LayoutTests/animations/animation-direction-alternate-reverse.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: 500px;
  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: 2s;
  21       -webkit-animation-direction: alternate-reverse;
  22       -webkit-animation-iteration-count: 2;
  23       -webkit-animation-timing-function: linear;
  24     }
  25
  26     @-webkit-keyframes move {
  27       0%   {
  28         left: 0;
  29       }
  30       100% {
  31         left: 400px;
  32       }
  33     }
  34
  35   </style>
  36   <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  37   <script type="text/javascript" charset="utf-8">
  38
  39     const expectedValues = [
  40       // [animation-name, time, element-id, property, expected-value, tolerance]
  41       ["move", 1.0, "box", "left", 200, 20],
  42       ["move", 2.0, "box", "left", 0, 20],
  43
  44       ["move", 3.0, "box", "left", 200, 20],
  45       ["move", 4.0, "box", "left", 400, 20],
  46     ];
  47
  48     runAnimationTest(expectedValues);
  49   </script>
  50 </head>
  51 <body>
  52
  53 <!-- Test animation-direction: alternate-reverse -->
  54 <div id="container">
  55   <div id="box"></div>
  56 </div>
  57
  58 <div id="result"></div>
  59
  60 </body>
  61 </html>