third_party/WebKit/LayoutTests/animations/keyframe-multiple-timing-functions-transform.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <style type="text/css">
   5         #box {
   6             position: relative;
   7             height: 100px;
   8             width: 100px;
   9             margin: 20px;
  10             background-color: red;
  11             transform: translateZ(0);
  12             -webkit-animation:
  13                 horizontal 2s linear 1 alternate,
  14                 fade 2s steps(1, end) 1 alternate;
  15         }
  16
  17         @-webkit-keyframes horizontal {
  18             from { transform: translateX(0px); }
  19             to   { transform: translateX(200px); }
  20         }
  21
  22         @-webkit-keyframes fade {
  23             from { opacity: 1.0; }
  24             to { opacity: 0.0; }
  25         }
  26     </style>
  27     <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  28     <script type="text/javascript" charset="utf-8">
  29         const expectedValues = [
  30           // [time, element-id, property, expected-value, tolerance]
  31           [0.5, "box", "webkitTransform", [1,0,0,1, 50,0], 20],
  32           [1.0, "box", "webkitTransform", [1,0,0,1,100,0], 20],
  33           [1.5, "box", "webkitTransform", [1,0,0,1,150,0], 20],
  34           [0.5, "box", "opacity", 1.0, 0.15],
  35           [0.9, "box", "opacity", 1.0, 0.15],
  36           [1.5, "box", "opacity", 1.0, 0.15],
  37         ];
  38
  39         // pixel test image has to have 1.0 opacity.
  40         var doPixelTest = true;
  41         runAnimationTest(expectedValues, null, null, null, doPixelTest);
  42     </script>
  43 </head>
  44 <body>
  45     <div id="box"></div>
  46     <div id="result"></div>
  47 </body>
  48 </html>