third_party/WebKit/LayoutTests/animations/animation-direction-reverse-hardware.html

   1 <!doctype html>
   2 <html>
   3 <head>
   4   <title>Test of -webkit-animation-direction on composited elements</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: linear;
  19       -webkit-animation-iteration-count: 8;
  20     }
  21
  22     .move1 {
  23       -webkit-animation-name: move1;
  24       background-color: blue;
  25       color: white;
  26     }
  27
  28     .move2 {
  29       -webkit-animation-name: move2;
  30       background-color: orange;
  31     }
  32
  33     .normal {
  34       -webkit-animation-direction: normal;
  35     }
  36
  37     .alternate {
  38       -webkit-animation-direction: alternate;
  39     }
  40
  41     .reverse {
  42       -webkit-animation-direction: reverse;
  43     }
  44
  45     .alternate-reverse {
  46       -webkit-animation-direction: alternate-reverse;
  47     }
  48
  49     @-webkit-keyframes move1 {
  50       from { transform: translateX(0px); }
  51       to { transform: translateX(200px); }
  52     }
  53
  54     @-webkit-keyframes move2 {
  55       0% { transform: translateX(0px); }
  56       40% { transform: translateX(160px); }
  57       60% { transform: translateX(120px); }
  58       100% { transform: translateX(200px); }
  59     }
  60   </style>
  61   <script src="resources/animation-test-helpers.js"></script>
  62   <script>
  63     const expectedValues = [
  64       // [time, element-id, property, expected-value, tolerance]
  65       [0.2, "box1", "webkitTransform", [1,0,0,1, 20,0], 20],
  66       [0.2, "box2", "webkitTransform", [1,0,0,1, 20,0], 20],
  67       [0.2, "box3", "webkitTransform", [1,0,0,1, 180,0], 20],
  68       [0.2, "box4", "webkitTransform", [1,0,0,1, 180,0], 20],
  69       [2.2, "box1", "webkitTransform", [1,0,0,1, 20,0], 20],
  70       [2.2, "box2", "webkitTransform", [1,0,0,1, 180,0], 20],
  71       [2.2, "box3", "webkitTransform", [1,0,0,1, 180,0], 20],
  72       [2.2, "box4", "webkitTransform", [1,0,0,1, 20,0], 20],
  73       [0.2, "box5", "webkitTransform", [1,0,0,1, 40,0], 20],
  74       [0.2, "box6", "webkitTransform", [1,0,0,1, 40,0], 20],
  75       [0.2, "box7", "webkitTransform", [1,0,0,1, 180,0], 20],
  76       [0.2, "box8", "webkitTransform", [1,0,0,1, 180,0], 20],
  77       [2.2, "box5", "webkitTransform", [1,0,0,1, 40,0], 20],
  78       [2.2, "box6", "webkitTransform", [1,0,0,1, 180,0], 20],
  79       [2.2, "box7", "webkitTransform", [1,0,0,1, 180,0], 20],
  80       [2.2, "box8", "webkitTransform", [1,0,0,1, 40,0], 20],
  81     ];
  82
  83     runAnimationTest(expectedValues);
  84
  85   </script>
  86 </head>
  87 <body>
  88 <div id="box1" class="box move1 normal">2 keyframes: normal</div>
  89 <div id="box2" class="box move1 alternate">2 keyframes: alternate</div>
  90 <div id="box3" class="box move1 reverse">2 keyframes: reverse</div>
  91 <div id="box4" class="box move1 alternate-reverse">2 keyframes: alternate-reverse</div>
  92 <div id="box5" class="box move2 normal">4 keyframes: normal</div>
  93 <div id="box6" class="box move2 alternate">4 keyframes: alternate</div>
  94 <div id="box7" class="box move2 reverse">4 keyframes: reverse</div>
  95 <div id="box8" class="box move2 alternate-reverse">4 keyframes: alternate-reverse</div>
  96 <div id="result"></div>
  97 </div>
  98 </body>
  99 </html>