third_party/WebKit/LayoutTests/animations/missing-keyframe-properties-timing-function.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style type="text/css" media="screen">
   5     .box {
   6       position: relative;
   7       margin: 10px;
   8       left: 0;
   9       width: 100px;
  10       height: 100px;
  11       background-color: blue;
  12       -webkit-animation-duration: 2s;
  13       -webkit-animation-timing-function: ease-in;
  14     }
  15
  16     #box1 {
  17       -webkit-animation-name: move;
  18     }
  19     @-webkit-keyframes move {
  20         from {
  21           opacity: 0;
  22           left: 100px;
  23         }
  24         25% {
  25           opacity: 0.25;
  26         }
  27         50% {
  28           left: 200px;
  29           -webkit-animation-timing-function: linear;
  30         }
  31         to {
  32           left: 400px;
  33         }
  34     }
  35
  36     #box2 {
  37       -webkit-animation-name: move2;
  38     }
  39     @-webkit-keyframes move2 {
  40         from {
  41           opacity: 0;
  42           transform: translateX(100px);
  43         }
  44         25% {
  45           opacity: 0.25;
  46         }
  47         50% {
  48           transform: translateX(200px);
  49           -webkit-animation-timing-function: linear;
  50         }
  51         to {
  52           transform: translateX(400px);
  53         }
  54     }
  55
  56   </style>
  57   <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  58   <script type="text/javascript" charset="utf-8">
  59
  60     const expectedValues = [
  61       // [time, element-id, property, expected-value, tolerance]
  62       [0.5, "box1", "left", 132, 15],
  63       [0.5, "box2", "webkitTransform.4", 132, 15],
  64       [1.5, "box1", "left", 300, 15],
  65       [1.5, "box2", "webkitTransform.4", 300, 15],
  66     ];
  67
  68     runAnimationTest(expectedValues);
  69   </script>
  70 </head>
  71 <body>
  72 <div id="box1" class="box"></div>
  73 <div id="box2" class="box"></div>
  74 <div id="result">
  75 </div>
  76 </body>
  77 </html>