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

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