third_party/WebKit/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
  24     .box-step-middle {
  25       position: relative;
  26       left: 100px;
  27       top: 0px;
  28       height: 5px;
  29       width: 5px;
  30       background-color: blue;
  31       -webkit-animation-duration: 1s;
  32       -webkit-animation-name: anim-step-middle;
  33       /*
  34        * Set initial timing function to something other than the default (ease)
  35        * to check that attempts to set easing to step-middle result in the
  36        * default, not the initial, being used.
  37        */
  38       -webkit-animation-timing-function: linear;
  39     }
  40     @-webkit-keyframes anim-step-middle {
  41         from { left: 100px; }
  42         to   { left: 200px; }
  43     }
  44
  45     #box1 {
  46     }
  47     #box2 {
  48       -webkit-animation-timing-function: ease;
  49     }
  50     #box3 {
  51       -webkit-animation-timing-function: linear;
  52     }
  53     #box4 {
  54       -webkit-animation-timing-function: step-start;
  55     }
  56     #box5 {
  57       -webkit-animation-timing-function: step-end;
  58     }
  59     #box6 {
  60       -webkit-animation-timing-function: steps(3);
  61     }
  62     #box7 {
  63       -webkit-animation-timing-function: steps(3, start);
  64     }
  65     #box8 {
  66       -webkit-animation-timing-function: steps(3, end);
  67     }
  68     /*
  69      * The step-middle functions are invalid except through the Web Animations API
  70      * and should behave like 'ease', unless step-middle has been added to the CSS specification.
  71      */
  72     #box9 {
  73       -webkit-animation-timing-function: steps(3, middle);
  74     }
  75     #box10 {
  76       -webkit-animation-timing-function: step-middle;
  77     }
  78
  79   </style>
  80   <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  81   <script type="text/javascript" charset="utf-8">
  82
  83     const expectedValues = [
  84       // [time, element-id, property, expected-value, tolerance]
  85       [0.25, "box1", "left", 141, 5],
  86       [0.50, "box1", "left", 180, 5],
  87       [0.75, "box1", "left", 196, 5],
  88       [0.25, "box2", "left", 141, 5],
  89       [0.50, "box2", "left", 180, 5],
  90       [0.75, "box2", "left", 196, 5],
  91       [0.25, "box3", "left", 125, 5],
  92       [0.50, "box3", "left", 150, 5],
  93       [0.75, "box3", "left", 175, 5],
  94       [0.25, "box4", "left", 200, 5],
  95       [0.50, "box4", "left", 200, 5],
  96       [0.75, "box4", "left", 200, 5],
  97       [0.25, "box5", "left", 100, 5],
  98       [0.50, "box5", "left", 100, 5],
  99       [0.75, "box5", "left", 100, 5],
 100       [0.25, "box6", "left", 100, 5],
 101       [0.50, "box6", "left", 133, 5],
 102       [0.75, "box6", "left", 166, 5],
 103       [0.25, "box7", "left", 133, 5],
 104       [0.50, "box7", "left", 166, 5],
 105       [0.75, "box7", "left", 200, 5],
 106       [0.25, "box8", "left", 100, 5],
 107       [0.50, "box8", "left", 133, 5],
 108       [0.75, "box8", "left", 166, 5],
 109       [0.25, "box9", "left", 141, 5],
 110       [0.50, "box9", "left", 180, 5],
 111       [0.75, "box9", "left", 196, 5],
 112       [0.25, "box10", "left", 141, 5],
 113       [0.50, "box10", "left", 180, 5],
 114       [0.75, "box10", "left", 196, 5],
 115     ];
 116
 117     runAnimationTest(expectedValues);
 118
 119   </script>
 120 </head>
 121 <body>
 122 This test performs an animation of the left property. It animates over 1 second.
 123 It takes 3 snapshots and expects each result to be within a specified range.
 124 <div class="box" id="box1">
 125 </div>
 126 <div class="box" id="box2">
 127 </div>
 128 <div class="box" id="box3">
 129 </div>
 130 <div class="box" id="box4">
 131 </div>
 132 <div class="box" id="box5">
 133 </div>
 134 <div class="box" id="box6">
 135 </div>
 136 <div class="box" id="box7">
 137 </div>
 138 <div class="box" id="box8">
 139 </div>
 140 <div class="box-step-middle" id="box9">
 141 </div>
 142 <div class="box-step-middle" id="box10">
 143 </div>
 144 <div id="result">
 145 </div>
 146 </body>
 147 </html>