LayoutTests/animations/multiple-animations-timing-function.html

   1 <html>
   2 <head>
   3     <style>
   4         #box {
   5             position: relative;
   6             height: 100px;
   7             width: 100px;
   8             margin: 20px;
   9             background-color: red;
  10             -webkit-animation:
  11                 horizontal 2s ease-in 1 alternate,
  12                 vertical 2s ease-out 1 alternate;
  13         }
  14
  15         @-webkit-keyframes horizontal {
  16             from { left: 0px;   }
  17             to   { left: 200px; }
  18         }
  19
  20         @-webkit-keyframes vertical {
  21             from { top: 0px;   }
  22             to   { top: 200px; }
  23         }
  24     </style>
  25     <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  26     <script type="text/javascript" charset="utf-8">
  27         const expectedValues = [
  28           // [animation-name, time, element-id, property, expected-value, tolerance]
  29           ["horizontal", 0.5, "box", "left", 18, 10],
  30           ["horizontal", 1.5, "box", "left", 124, 10],
  31           ["vertical", 0.5, "box", "top", 75, 10],
  32           ["vertical", 1.5, "box", "top", 181, 10],
  33         ];
  34
  35         runAnimationTest(expectedValues);
  36     </script>
  37 </head>
  38 <body>
  39     <div id="box"></div>
  40     <div id="result"></div>
  41 </body>
  42 </html>