third_party/WebKit/LayoutTests/animations/animation-direction-reverse-timing-functions.html

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4   <title>Test of -webkit-animation-direction timing functions</title>
   5   <style>
   6     body {
   7       margin: 0;
   8     }
   9
  10     .box {
  11       position: relative;
  12       left: 20px;
  13       top: 10px;
  14       height: 50px;
  15       width: 250px;
  16       margin-bottom: 10px;
  17       -webkit-animation-duration: 2s;
  18       -webkit-animation-timing-function: ease; /* ease is good for testing because it is not symmetric */
  19       -webkit-animation-iteration-count: 4;
  20     }
  21
  22     .move1 {
  23       -webkit-animation-name: move1;
  24       background-color: blue;
  25       color: white;
  26     }
  27
  28     .normal {
  29       -webkit-animation-direction: normal;
  30     }
  31
  32     .alternate {
  33       -webkit-animation-direction: alternate;
  34     }
  35
  36     .reverse {
  37       -webkit-animation-direction: reverse;
  38     }
  39
  40     .alternate-reverse {
  41       -webkit-animation-direction: alternate-reverse;
  42     }
  43
  44     @-webkit-keyframes move1 {
  45       from { left: 0px; }
  46       to { left: 200px; }
  47     }
  48   </style>
  49   <script src="resources/animation-test-helpers.js"></script>
  50   <script>
  51     const expectedValues = [
  52       // [time, element-id, property, expected-value, tolerance]
  53       [0.2, "box1", "left",  18, 10],
  54       [0.2, "box2", "left",  18, 10],
  55       [0.2, "box3", "left",  198, 10],
  56       [0.2, "box4", "left",  198, 10],
  57       [2.2, "box1", "left",  18, 10],
  58       [2.2, "box2", "left",  198, 10],
  59       [2.2, "box3", "left",  198, 10],
  60       [2.2, "box4", "left",  18, 10],
  61     ];
  62
  63     runAnimationTest(expectedValues);
  64
  65   </script>
  66 </head>
  67 <body>
  68 <div id="box1" class="box move1 normal">normal</div>
  69 <div id="box2" class="box move1 alternate">alternate</div>
  70 <div id="box3" class="box move1 reverse">reverse</div>
  71 <div id="box4" class="box move1 alternate-reverse">alternate-reverse</div>
  72 <div id="result"></div>
  73 </div>
  74 </body>
  75 </html>