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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style type="text/css" media="screen">
   5     div#target {
   6         -webkit-animation-name: animation1, animation2;
   7         -webkit-animation-duration: 2s;
   8         -webkit-animation-timing-function: steps(2);
   9         background-color: red;
  10         position: relative;
  11         width: 100px;
  12         height: 100px;
  13     }
  14     @-webkit-keyframes animation1 {
  15         from {
  16             left: 0px;
  17             -webkit-animation-timing-function: linear;
  18         }
  19         to {
  20             left: 200px;
  21         }
  22     }
  23     @-webkit-keyframes animation2 {
  24         from {
  25             top: 0px;
  26             -webkit-animation-timing-function: linear;
  27         }
  28         to {
  29             top: 200px;
  30         }
  31     }
  32   </style>
  33   <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  34   <script type="text/javascript" charset="utf-8">
  35
  36     const expectedValues = [
  37       // [time, element-id, property, expected-value, tolerance]
  38       [0.5, "target", "left", 50, 5],
  39       [0.5, "target", "top", 50, 5],
  40       [1.5, "target", "left", 150, 5],
  41       [1.5, "target", "top", 150, 5],
  42     ];
  43
  44     runAnimationTest(expectedValues);
  45   </script>
  46 </head>
  47 <body>
  48 <p>Tests that per-keyframe timing functions are applied correctly when an element is targeted by multiple animations. The red block should move smoothly from top-left to bottom-right. See <a href="http://crbug.com/288540">crbug.com/288540</a>.</p>
  49 <div id="target"></div>
  50 <div id="result"></div>
  51 </body>
  52 </html>