LayoutTests/animations/timing-functions.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 timing functions</title>
   8   <style type="text/css" media="screen">
   9     .box {
  10       position: relative;
  11       left: 100px;
  12       top: 0px;
  13       height: 5px;
  14       width: 5px;
  15       background-color: blue;
  16       -webkit-animation-duration: 1s;
  17       -webkit-animation-name: anim;
  18     }
  19     @-webkit-keyframes anim {
  20         from { left: 100px; }
  21         to   { left: 200px; }
  22     }
  23     #box1 {
  24     }
  25     #box2 {
  26       -webkit-animation-timing-function: ease;
  27     }
  28     #box3 {
  29       -webkit-animation-timing-function: linear;
  30     }
  31     #box4 {
  32       -webkit-animation-timing-function: step-start;
  33     }
  34     #box5 {
  35       -webkit-animation-timing-function: step-end;
  36     }
  37     #box6 {
  38       -webkit-animation-timing-function: steps(3);
  39     }
  40     #box7 {
  41       -webkit-animation-timing-function: steps(3, start);
  42     }
  43     #box8 {
  44       -webkit-animation-timing-function: steps(3, end);
  45     }
  46
  47   </style>
  48   <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  49   <script type="text/javascript" charset="utf-8">
  50
  51     const expectedValues = [
  52       // [animation-name, time, element-id, property, expected-value, tolerance]
  53       ["anim", 0.25, "box1", "left", 141, 5],
  54       ["anim", 0.50, "box1", "left", 180, 5],
  55       ["anim", 0.75, "box1", "left", 196, 5],
  56       ["anim", 0.25, "box2", "left", 141, 5],
  57       ["anim", 0.50, "box2", "left", 180, 5],
  58       ["anim", 0.75, "box2", "left", 196, 5],
  59       ["anim", 0.25, "box3", "left", 125, 5],
  60       ["anim", 0.50, "box3", "left", 150, 5],
  61       ["anim", 0.75, "box3", "left", 175, 5],
  62       ["anim", 0.25, "box4", "left", 200, 5],
  63       ["anim", 0.50, "box4", "left", 200, 5],
  64       ["anim", 0.75, "box4", "left", 200, 5],
  65       ["anim", 0.25, "box5", "left", 100, 5],
  66       ["anim", 0.50, "box5", "left", 100, 5],
  67       ["anim", 0.75, "box5", "left", 100, 5],
  68       ["anim", 0.25, "box6", "left", 100, 5],
  69       ["anim", 0.50, "box6", "left", 133, 5],
  70       ["anim", 0.75, "box6", "left", 166, 5],
  71       ["anim", 0.25, "box7", "left", 133, 5],
  72       ["anim", 0.50, "box7", "left", 166, 5],
  73       ["anim", 0.75, "box7", "left", 200, 5],
  74       ["anim", 0.25, "box8", "left", 100, 5],
  75       ["anim", 0.50, "box8", "left", 133, 5],
  76       ["anim", 0.75, "box8", "left", 166, 5],
  77     ];
  78
  79     runAnimationTest(expectedValues);
  80
  81   </script>
  82 </head>
  83 <body>
  84 This test performs an animation of the left property. It animates over 1 second.
  85 It takes 3 snapshots and expects each result to be within a specified range.
  86 <div class="box" id="box1">
  87 </div>
  88 <div class="box" id="box2">
  89 </div>
  90 <div class="box" id="box3">
  91 </div>
  92 <div class="box" id="box4">
  93 </div>
  94 <div class="box" id="box5">
  95 </div>
  96 <div class="box" id="box6">
  97 </div>
  98 <div class="box" id="box7">
  99 </div>
 100 <div class="box" id="box8">
 101 </div>
 102 <div id="result">
 103 </div>
 104 </body>
 105 </html>