step-timing-functions-output.html (13428B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <meta name="assert" 4 content="This test checks the output of step timing functions" /> 5 <title>Tests for the output of step timing functions</title> 6 <link rel="help" 7 href="https://drafts.csswg.org/css-easing/#step-timing-functions"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="testcommon.js"></script> 11 <body> 12 <div id="log"></div> 13 <script> 14 'use strict'; 15 16 test(function(t) { 17 var target = createDiv(t); 18 target.style.position = 'absolute'; 19 var anim = target.animate([ { left: '0px', easing: 'step-start' }, 20 { left: '100px' } ], 21 { duration: 1000, 22 fill: 'forwards', 23 easing: 'cubic-bezier(0, 1.5, 1, 1.5)' }); 24 25 // The bezier function produces values greater than 1 (but always less than 2) 26 // in (0.23368794, 1) 27 anim.currentTime = 0; 28 assert_equals(getComputedStyle(target).left, '100px'); 29 anim.currentTime = 230; 30 assert_equals(getComputedStyle(target).left, '100px'); 31 anim.currentTime = 250; 32 assert_equals(getComputedStyle(target).left, '200px'); 33 anim.currentTime = 1000; 34 assert_equals(getComputedStyle(target).left, '100px'); 35 }, 'step-start easing with input progress greater than 1'); 36 37 test(function(t) { 38 var target = createDiv(t); 39 target.style.position = 'absolute'; 40 var anim = target.animate([ { left: '0px', easing: 'step-start' }, 41 { left: '100px' } ], 42 { duration: 1000, 43 fill: 'forwards', 44 easing: 'cubic-bezier(0, 3, 1, 3)' }); 45 46 // The bezier function produces values: 47 // Input -> Output 48 // 0.0 0.0 49 // 0.114 ~ 0.245 1.5~2.0, so current step is 2, jumps is 1 => 2.0 50 // 0.245 ~ 0.6 2.0~2.4, so current step is 3, jumps is 1 => 3.0 51 // 0.6 ~ 0.882 2.4~2.0, so current step is 3, jumps is 1 => 3.0 52 // 0.882 ~ 0.976 2.0~1.5, so current step is 2, jumps is 1 => 2.0 53 // 1.0 1.0 54 anim.currentTime = 0; 55 assert_equals(getComputedStyle(target).left, '100px'); 56 anim.currentTime = 114; 57 assert_equals(getComputedStyle(target).left, '200px'); 58 anim.currentTime = 500; 59 assert_equals(getComputedStyle(target).left, '300px'); 60 anim.currentTime = 900; 61 assert_equals(getComputedStyle(target).left, '200px'); 62 }, 'step-start easing with input progress greater than 2'); 63 64 test(function(t) { 65 var target = createDiv(t); 66 target.style.position = 'absolute'; 67 var anim = target.animate([ { left: '0px', easing: 'step-start' }, 68 { left: '100px' } ], 69 { duration: 1000, 70 fill: 'forwards', 71 easing: 'cubic-bezier(0, -0.5, 1, -0.5)' }); 72 73 // The bezier function produces negative values (but always greater than -1) 74 // in (0, 0.766312060) 75 anim.currentTime = 0; 76 assert_equals(getComputedStyle(target).left, '100px'); 77 anim.currentTime = 750; 78 assert_equals(getComputedStyle(target).left, '0px'); 79 anim.currentTime = 800; 80 assert_equals(getComputedStyle(target).left, '100px'); 81 anim.currentTime = 1000; 82 assert_equals(getComputedStyle(target).left, '100px'); 83 }, 'step-start easing with input progress less than 0'); 84 85 test(function(t) { 86 var target = createDiv(t); 87 target.style.position = 'absolute'; 88 var anim = target.animate([ { left: '0px', easing: 'step-start' }, 89 { left: '100px' } ], 90 { duration: 1000, 91 fill: 'forwards', 92 easing: 'cubic-bezier(0, -2, 1, -2)' }); 93 94 // The bezier function produces values less than -1 (but always greater than 95 // -2) in the range (~0.118, ~0.755) 96 anim.currentTime = 0; 97 assert_equals(getComputedStyle(target).left, '100px'); 98 anim.currentTime = 100; 99 assert_equals(getComputedStyle(target).left, '0px'); 100 anim.currentTime = 500; 101 assert_equals(getComputedStyle(target).left, '-100px'); 102 anim.currentTime = 1000; 103 assert_equals(getComputedStyle(target).left, '100px'); 104 }, 'step-start easing with input progress less than -1'); 105 106 test(function(t) { 107 var target = createDiv(t); 108 target.style.position = 'absolute'; 109 var anim = target.animate([ { left: '0px', easing: 'step-end' }, 110 { left: '100px' } ], 111 { duration: 1000, 112 fill: 'forwards', 113 easing: 'cubic-bezier(0, 1.5, 1, 1.5)' }); 114 115 // The bezier function produces values greater than 1 (but always less than 2) 116 // in (0.23368794, 1) 117 anim.currentTime = 0; 118 assert_equals(getComputedStyle(target).left, '0px'); 119 anim.currentTime = 230; 120 assert_equals(getComputedStyle(target).left, '0px'); 121 anim.currentTime = 250; 122 assert_equals(getComputedStyle(target).left, '100px'); 123 anim.currentTime = 1000; 124 assert_equals(getComputedStyle(target).left, '100px'); 125 }, 'step-end easing with input progress greater than 1'); 126 127 test(function(t) { 128 var target = createDiv(t); 129 target.style.position = 'absolute'; 130 var anim = target.animate([ { left: '0px', easing: 'step-end' }, 131 { left: '100px' } ], 132 { duration: 1000, 133 fill: 'forwards', 134 easing: 'cubic-bezier(0, 3, 1, 3)' }); 135 136 // The bezier function produces values: 137 // Input -> Output 138 // 0.0 0.0 139 // 0.114 ~ 0.245 1.5~2.0, so current step is 1, jumps is 1 => 1.0 140 // 0.245 ~ 0.6 2.0~2.4, so current step is 2, jumps is 1 => 2.0 141 // 0.6 ~ 0.882 2.4~2.0, so current step is 2, jumps is 1 => 2.0 142 // 0.882 ~ 0.976 2.0~1.5, so current step is 1, jumps is 1 => 1.0 143 // 1.0 1.0 144 anim.currentTime = 0; 145 assert_equals(getComputedStyle(target).left, '0px'); 146 anim.currentTime = 114; 147 assert_equals(getComputedStyle(target).left, '100px'); 148 anim.currentTime = 500; 149 assert_equals(getComputedStyle(target).left, '200px'); 150 anim.currentTime = 900; 151 assert_equals(getComputedStyle(target).left, '100px'); 152 }, 'step-end easing with input progress greater than 2'); 153 154 test(function(t) { 155 var target = createDiv(t); 156 target.style.position = 'absolute'; 157 var anim = target.animate([ { left: '0px', easing: 'step-end' }, 158 { left: '100px' } ], 159 { duration: 1000, 160 fill: 'forwards', 161 easing: 'cubic-bezier(0, -0.5, 1, -0.5)' }); 162 163 // The bezier function produces negative values (but always greater than -1) 164 // in (0, 0.766312060) 165 anim.currentTime = 0; 166 assert_equals(getComputedStyle(target).left, '0px'); 167 anim.currentTime = 750; 168 assert_equals(getComputedStyle(target).left, '-100px'); 169 anim.currentTime = 800; 170 assert_equals(getComputedStyle(target).left, '0px'); 171 anim.currentTime = 1000; 172 assert_equals(getComputedStyle(target).left, '100px'); 173 }, 'step-end easing with input progress less than 0'); 174 175 test(function(t) { 176 var target = createDiv(t); 177 target.style.position = 'absolute'; 178 var anim = target.animate([ { left: '0px', easing: 'steps(1, jump-both)' }, 179 { left: '100px' } ], 180 { duration: 1000, 181 fill: 'forwards', 182 easing: 'cubic-bezier(0, 1.5, 1, 1.5)' }); 183 184 // The bezier function produces values greater than 1 (but always less than 2) 185 // in (0.23368794, 1) 186 anim.currentTime = 0; 187 assert_equals(getComputedStyle(target).left, '50px'); 188 anim.currentTime = 230; 189 assert_equals(getComputedStyle(target).left, '50px'); 190 anim.currentTime = 250; 191 assert_equals(getComputedStyle(target).left, '100px'); 192 anim.currentTime = 1000; 193 assert_equals(getComputedStyle(target).left, '100px'); 194 }, 'steps(1, jump-both) easing with input progress greater than 1'); 195 196 test(function(t) { 197 var target = createDiv(t); 198 target.style.position = 'absolute'; 199 var anim = target.animate([ { left: '0px', easing: 'steps(1, jump-both)' }, 200 { left: '100px' } ], 201 { duration: 1000, 202 fill: 'forwards', 203 easing: 'cubic-bezier(0, 3, 1, 3)' }); 204 205 // The bezier function produces values: 206 // Input -> Output 207 // 0.0 0.0, so current step is 1, jumps is 2 => 0.5 208 // 0.114 ~ 0.245 1.5~2.0, so current step is 2, jumps is 2 => 1.0 209 // 0.245 ~ 0.6 2.0~2.4, so current step is 3, jumps is 2 => 1.5 210 // 0.6 ~ 0.882 2.4~2.0, so current step is 3, jumps is 2 => 1.5 211 // 0.882 ~ 0.976 2.0~1.5, so current step is 2, jumps is 2 => 1.0 212 // 1.0 1.0 213 anim.currentTime = 0; 214 assert_equals(getComputedStyle(target).left, '50px'); 215 anim.currentTime = 114; 216 assert_equals(getComputedStyle(target).left, '100px'); 217 anim.currentTime = 500; 218 assert_equals(getComputedStyle(target).left, '150px'); 219 anim.currentTime = 900; 220 assert_equals(getComputedStyle(target).left, '100px'); 221 }, 'steps(1, jump-both) easing with input progress greater than 2'); 222 223 test(function(t) { 224 var target = createDiv(t); 225 target.style.position = 'absolute'; 226 var anim = target.animate([ { left: '0px', easing: 'steps(1, jump-both)' }, 227 { left: '100px' } ], 228 { duration: 1000, 229 fill: 'forwards', 230 easing: 'cubic-bezier(0, -0.5, 1, -0.5)' }); 231 232 // The bezier function produces negative values (but always greater than -0.5) 233 // in (0, 0.766312060). 234 anim.currentTime = 0; 235 assert_equals(getComputedStyle(target).left, '50px'); 236 anim.currentTime = 750; 237 // current step is 0, jumps is 2. 238 assert_equals(getComputedStyle(target).left, '0px'); 239 anim.currentTime = 800; 240 assert_equals(getComputedStyle(target).left, '50px'); 241 anim.currentTime = 1000; 242 assert_equals(getComputedStyle(target).left, '100px'); 243 }, 'steps(1, jump-both) easing with input progress less than 0'); 244 245 test(function(t) { 246 var target = createDiv(t); 247 target.style.position = 'absolute'; 248 var anim = target.animate([ { left: '0px', easing: 'steps(2, jump-none)' }, 249 { left: '100px' } ], 250 { duration: 1000, 251 fill: 'forwards', 252 easing: 'cubic-bezier(0, 1.5, 1, 1.5)' }); 253 254 // The bezier function produces values between 0.5 and 1 in 255 // (~0.0442, 0.23368), and values between 1 and 2 in (0.23368794, 1). 256 anim.currentTime = 0; 257 assert_equals(getComputedStyle(target).left, '0px'); 258 anim.currentTime = 45; 259 assert_equals(getComputedStyle(target).left, '100px'); 260 anim.currentTime = 230; 261 assert_equals(getComputedStyle(target).left, '100px'); 262 anim.currentTime = 250; 263 assert_equals(getComputedStyle(target).left, '200px'); 264 anim.currentTime = 1000; 265 assert_equals(getComputedStyle(target).left, '100px'); 266 }, 'steps(2, jump-none) easing with input progress greater than 1'); 267 268 test(function(t) { 269 var target = createDiv(t); 270 target.style.position = 'absolute'; 271 var anim = target.animate([ { left: '0px', easing: 'steps(2, jump-none)' }, 272 { left: '100px' } ], 273 { duration: 1000, 274 fill: 'forwards', 275 easing: 'cubic-bezier(0, 3, 1, 3)' }); 276 277 // The bezier function produces values: 278 // Input -> Output 279 // 0.0 0.0, so current step is 0, jumps is 1 => 0.0 280 // 0.114 ~ 0.245 1.5~2.0, so current step is 3, jumps is 1 => 3.0 281 // 0.245 ~ 0.6 2.0~2.4, so current step is 4, jumps is 1 => 4.0 282 // 0.6 ~ 0.882 2.4~2.0, so current step is 4, jumps is 1 => 4.0 283 // 0.882 ~ 0.976 2.0~1.5, so current step is 3, jumps is 1 => 3.0 284 // 1.0 1.0 285 anim.currentTime = 0; 286 assert_equals(getComputedStyle(target).left, '0px'); 287 anim.currentTime = 114; 288 assert_equals(getComputedStyle(target).left, '300px'); 289 anim.currentTime = 500; 290 assert_equals(getComputedStyle(target).left, '400px'); 291 anim.currentTime = 900; 292 assert_equals(getComputedStyle(target).left, '300px'); 293 }, 'steps(2, jump-none) easing with input progress greater than 2'); 294 295 test(function(t) { 296 var target = createDiv(t); 297 target.style.position = 'absolute'; 298 var anim = target.animate([ { left: '0px', easing: 'steps(2, jump-none)' }, 299 { left: '100px' } ], 300 { duration: 1000, 301 fill: 'forwards', 302 easing: 'cubic-bezier(0, -0.5, 1, -0.5)' }); 303 304 // The bezier function produces negative values (but always greater than -0.5) 305 // in (0, 0.766312060). 306 anim.currentTime = 0; 307 assert_equals(getComputedStyle(target).left, '0px'); 308 anim.currentTime = 750; 309 // current step is -1, jumps is 1. 310 assert_equals(getComputedStyle(target).left, '-100px'); 311 anim.currentTime = 800; 312 assert_equals(getComputedStyle(target).left, '0px'); 313 anim.currentTime = 1000; 314 assert_equals(getComputedStyle(target).left, '100px'); 315 }, 'steps(2, jump-none) easing with input progress less than 0'); 316 317 </script> 318 </body>