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

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   2    "http://www.w3.org/TR/html4/loose.dtd">
   3
   4 <html lang="en">
   5 <head>
   6   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   7   <title>Test animation with multiple keyframes</title>
   8   <style type="text/css" media="screen">
   9     #box {
  10       position: relative;
  11       left: 10px;
  12       top: 10px;
  13       height: 100px;
  14       width: 100px;
  15       background-color: blue;
  16       -webkit-animation-duration: 2s;
  17       -webkit-animation-timing-function: ease-in;
  18       -webkit-animation-name: anim;
  19     }
  20     @-webkit-keyframes anim {
  21         from { left: 10px; top: 10px; }
  22         40% { left: 30px; width: 300px; -webkit-animation-timing-function: ease-out; }
  23         60% { top: 40px; height: 400px; -webkit-animation-timing-function: ease-in-out; }
  24         to  { left: 20px; top: 0px; }
  25     }
  26   </style>
  27   <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8">
  28   </script>
  29   <script type="text/javascript" charset="utf-8">
  30
  31     const expectedValues = [
  32       // [time, element-id, property, expected-value, tolerance]
  33       [ 0.2, "box", "left", 11.87, 2],
  34       [ 0.2, "box", "top", 11.34, 2],
  35       [ 0.2, "box", "width", 118.7, 20],
  36       [ 0.2, "box", "height", 113.4, 20],
  37       [ 1.4, "box", "left", 23.15, 2],
  38       [ 1.4, "box", "top", 34.84, 2],
  39       [ 1.4, "box", "width", 163.1, 20],
  40       [ 1.4, "box", "height", 361.3, 20],
  41     ];
  42
  43     runAnimationTest(expectedValues);
  44
  45   </script>
  46 </head>
  47 <body>
  48 This test performs a keyframed animation of multiple properties, with their values supplied in different groups of keyframes.
  49 It animates over 2 seconds.
  50 <div id="box">
  51 </div>
  52 <div id="result">
  53 </div>
  54 </body>
  55 </html>