LayoutTests/animations/multiple-keyframes.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: linear;
  18       -webkit-animation-name: anim;
  19     }
  20     @-webkit-keyframes anim {
  21         from { left: 10px; }
  22         40% { left: 30px; }
  23         60% { left: 10px; }
  24         to   { left: 20px; }
  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
  30     const expectedValues = [
  31       // [animation-name, time, element-id, property, expected-value, tolerance]
  32       ["anim", 0.4, "box", "left", 20, 2],
  33       ["anim", 1.2, "box", "left", 10, 2],
  34       ["anim", 1.6, "box", "left", 15, 2],
  35     ];
  36
  37     runAnimationTest(expectedValues);
  38
  39   </script>
  40 </head>
  41 <body>
  42 This test performs a keyframed animation of the left property. It animates over 2 seconds.
  43 It takes 3 snapshots and expects each result to be within a specified range.
  44 <div id="box">
  45 </div>
  46 <div id="result">
  47 </div>
  48 </body>
  49 </html>