third_party/WebKit/LayoutTests/animations/missing-keyframe-properties.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: linear;
  14     }
  15
  16     #box1 {
  17       -webkit-animation-name: move;
  18     }
  19     @-webkit-keyframes move {
  20         from {
  21           left: 0px;
  22         }
  23         50% {
  24           opacity: 0;
  25         }
  26         to {
  27           left: 400px;
  28         }
  29     }
  30
  31     #box2 {
  32       -webkit-animation-name: move2;
  33     }
  34     @-webkit-keyframes move2 {
  35         from {
  36           transform: translateX(0);
  37         }
  38         50% {
  39           opacity: 0;
  40         }
  41         to {
  42           transform: translateX(400px);
  43         }
  44     }
  45
  46   </style>
  47   <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  48   <script type="text/javascript" charset="utf-8">
  49
  50     const expectedValues = [
  51       // [time, element-id, property, expected-value, tolerance]
  52       [1, "box1", "left", 200, 15],
  53       [1, "box2", "webkitTransform.4", 200, 15],
  54       [0.5, "box1", "opacity", 0.5, 0.1],
  55       [1, "box1", "opacity", 0, 0.1],
  56       [1.5, "box1", "left", 300, 15],
  57       [1.5, "box2", "webkitTransform.4", 300, 15],
  58       [1.5, "box1", "opacity", 0.5, 0.1],
  59     ];
  60
  61     runAnimationTest(expectedValues);
  62   </script>
  63 </head>
  64 <body>
  65 <div id="box1" class="box"></div>
  66 <div id="box2" class="box"></div>
  67 <div id="result">
  68 </div>
  69 </body>
  70 </html>