third_party/WebKit/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       -webkit-animation-fill-mode: forwards;
  25     }
  26
  27     @-webkit-keyframes move {
  28       0%   {
  29         left: 0;
  30       }
  31       100% {
  32         left: 400px;
  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       // [time, element-id, property, expected-value, tolerance]
  42       [1.0, "box", "left", 200, 20],
  43       [2.0, "box", "left", 0, 20],
  44
  45       [3.0, "box", "left", 200, 20],
  46       [4.0, "box", "left", 400, 20],
  47     ];
  48
  49     runAnimationTest(expectedValues);
  50   </script>
  51 </head>
  52 <body>
  53
  54 <!-- Test animation-direction: alternate-reverse -->
  55 <div id="container">
  56   <div id="box"></div>
  57 </div>
  58
  59 <div id="result"></div>
  60
  61 </body>
  62 </html>