| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <meta charset=utf-8> |
| 3 <title>Keyframe spacing tests</title> |
| 4 <link rel="help" href="https://w3c.github.io/web-animations/#spacing-keyframes"> |
| 5 <script src="/resources/testharness.js"></script> |
| 6 <script src="/resources/testharnessreport.js"></script> |
| 7 <script src="../../testcommon.js"></script> |
| 8 <body> |
| 9 <div id="log"></div> |
| 10 <script> |
| 11 "use strict"; |
| 12 |
| 13 test(function(t) { |
| 14 var anim = createDiv(t).animate([ { marginLeft: '0px' }, |
| 15 { marginLeft: '-20px' }, |
| 16 { marginLeft: '100px' }, |
| 17 { marginLeft: '50px' } ], |
| 18 { duration: 100 * MS_PER_SEC }); |
| 19 |
| 20 var frames = anim.effect.getKeyframes(); |
| 21 var slots = frames.length - 1; |
| 22 assert_equals(frames[0].computedOffset, 0.0, '1st frame offset'); |
| 23 assert_equals(frames[1].computedOffset, 1.0 / slots, '2nd frame offset'); |
| 24 assert_equals(frames[2].computedOffset, 2.0 / slots, '3rd frame offset'); |
| 25 assert_equals(frames[3].computedOffset, 1.0, 'last frame offset'); |
| 26 }, 'Test distribute spacing'); |
| 27 |
| 28 test(function(t) { |
| 29 var anim = createDiv(t).animate([ { marginLeft: '0px' }, |
| 30 { marginLeft: '-20px' }, |
| 31 { marginLeft: '100px', offset: 0.5 }, |
| 32 { marginLeft: '50px' } ], |
| 33 { duration: 100 * MS_PER_SEC, |
| 34 spacing: 'distribute' }); |
| 35 |
| 36 var frames = anim.effect.getKeyframes(); |
| 37 assert_equals(frames[0].computedOffset, 0.0, '1st frame offset'); |
| 38 assert_equals(frames[1].computedOffset, 0.5 * 1 / 2, '2nd frame offset'); |
| 39 assert_equals(frames[2].computedOffset, 0.5, '3rd frame offset'); |
| 40 assert_equals(frames[3].computedOffset, 1.0, 'last frame offset'); |
| 41 }, 'Test distribute spacing with specific offsets'); |
| 42 |
| 43 test(function(t) { |
| 44 var anim = createDiv(t).animate(null, |
| 45 { duration: 100 * MS_PER_SEC, |
| 46 spacing: 'paced(margin-left)' }); |
| 47 |
| 48 var frames = anim.effect.getKeyframes(); |
| 49 assert_equals(frames.length, 0, "empty keyframe list"); |
| 50 }, 'Test paced spacing without any keyframe'); |
| 51 |
| 52 |
| 53 test(function(t) { |
| 54 var anim = createDiv(t).animate([ { marginLeft: '0px' }, |
| 55 { marginLeft: '-20px' }, |
| 56 { marginLeft: '100px' }, |
| 57 { marginLeft: '50px' } ], |
| 58 { duration: 100 * MS_PER_SEC, |
| 59 spacing: 'paced(margin-left)' }); |
| 60 |
| 61 var frames = anim.effect.getKeyframes(); |
| 62 var cumDist = [0, 20, 140, 190]; |
| 63 assert_equals(frames[0].computedOffset, 0.0, |
| 64 '1st frame offset'); |
| 65 assert_equals(frames[1].computedOffset, cumDist[1] / cumDist[3], |
| 66 '2nd frame offset'); |
| 67 assert_equals(frames[2].computedOffset, cumDist[2] / cumDist[3], |
| 68 '3rd frame offset'); |
| 69 assert_equals(frames[3].computedOffset, 1.0, |
| 70 'last frame offset'); |
| 71 }, 'Test paced spacing'); |
| 72 |
| 73 test(function(t) { |
| 74 var anim = createDiv(t).animate([ { marginLeft: '0px' }, |
| 75 { marginLeft: '-20px' }, |
| 76 { marginLeft: '100px', offset: 0.5 }, |
| 77 { marginLeft: '120px' }, |
| 78 { marginLeft: '50px' } ], |
| 79 { duration: 100 * MS_PER_SEC, |
| 80 spacing: 'paced(margin-left)' }); |
| 81 |
| 82 var frames = anim.effect.getKeyframes(); |
| 83 var cumDist1 = [ 0, 20, 140 ]; |
| 84 var cumDist2 = [ 0, 20, 90 ]; |
| 85 assert_equals(frames[1].computedOffset, 0.5 * cumDist1[1] / cumDist1[2], |
| 86 '2nd frame offset'); |
| 87 assert_equals(frames[2].computedOffset, 0.5, |
| 88 '3rd frame offset'); |
| 89 assert_equals(frames[3].computedOffset, 0.5 + 0.5 * cumDist2[1] / cumDist2[2], |
| 90 '4th frame offset'); |
| 91 }, 'Test paced spacing with specific offsets'); |
| 92 |
| 93 test(function(t) { |
| 94 var anim = createDiv(t).animate([ { marginLeft: '0px' }, |
| 95 { marginLeft: '0px' }, |
| 96 { marginLeft: '100px' }, |
| 97 { marginLeft: '50px' } ], |
| 98 { duration: 100 * MS_PER_SEC, |
| 99 spacing: 'paced(margin-left)' }); |
| 100 |
| 101 var frames = anim.effect.getKeyframes(); |
| 102 var cumDist = [0, 0, 100, 150]; |
| 103 assert_equals(frames[1].computedOffset, cumDist[1] / cumDist[3], |
| 104 '2nd frame offset'); |
| 105 assert_equals(frames[2].computedOffset, cumDist[2] / cumDist[3], |
| 106 '3rd frame offset'); |
| 107 }, 'Test paced spacing if some paced property values are equal'); |
| 108 |
| 109 test(function(t) { |
| 110 var anim = createDiv(t).animate([ { marginLeft: '0px' }, |
| 111 { marginLeft: '0px' }, |
| 112 { marginLeft: '0px' }, |
| 113 { marginLeft: '0px' } ], |
| 114 { duration: 100 * MS_PER_SEC, |
| 115 spacing: 'paced(margin-left)' }); |
| 116 |
| 117 var frames = anim.effect.getKeyframes(); |
| 118 var slots = frames.length - 1; |
| 119 assert_equals(frames[1].computedOffset, 1.0 / slots, '2nd frame offset'); |
| 120 assert_equals(frames[2].computedOffset, 2.0 / slots, '3rd frame offset'); |
| 121 }, 'Test falling back to distribute spacing if all paced property value ' + |
| 122 'are equal'); |
| 123 |
| 124 test(function(t) { |
| 125 var anim = createDiv(t).animate([ { margin: '0px' }, |
| 126 { marginTop: '-20px' }, |
| 127 { marginLeft: '100px' }, |
| 128 { margin: '50px' } ], |
| 129 { duration: 100 * MS_PER_SEC, |
| 130 spacing: 'paced(margin-left)' }); |
| 131 |
| 132 var frames = anim.effect.getKeyframes(); |
| 133 assert_equals(frames[1].computedOffset, frames[2].computedOffset * 1 / 2, |
| 134 '2nd frame offset using distribute spacing'); |
| 135 assert_equals(frames[2].computedOffset, 100 / 150, |
| 136 '3rd frame offset using paced spacing'); |
| 137 }, 'Test paced spacing if there a keyframe without the paced property'); |
| 138 |
| 139 test(function(t) { |
| 140 var anim = createDiv(t).animate([ { margin: '0px' }, |
| 141 { marginTop: '40px' }, |
| 142 { marginTop: '-20px' }, |
| 143 { marginLeft: '40px' }, |
| 144 { marginTop: '60px' }, |
| 145 { margin: '10px' } ], |
| 146 { duration: 100 * MS_PER_SEC, |
| 147 spacing: 'paced(margin-left)' }); |
| 148 |
| 149 var frames = anim.effect.getKeyframes(); |
| 150 var cumDist = [0, 0, 0, 40, 40, 70]; |
| 151 assert_equals(frames[1].computedOffset, frames[3].computedOffset * 1 / 3, |
| 152 '2nd frame offset using distribute spacing'); |
| 153 assert_equals(frames[2].computedOffset, frames[3].computedOffset * 2 / 3, |
| 154 '3rd frame offset using distribute spacing'); |
| 155 assert_equals(frames[3].computedOffset, cumDist[3] / cumDist[5], |
| 156 '4th frame offset using paced spacing'); |
| 157 assert_equals(frames[4].computedOffset, |
| 158 frames[3].computedOffset + |
| 159 (1 - frames[3].computedOffset) * 1 / 2, |
| 160 '5th frame offset using distribute spacing'); |
| 161 }, 'Test paced spacing if a paced property that appears on only some ' + |
| 162 'keyframes'); |
| 163 |
| 164 test(function(t) { |
| 165 var anim = createDiv(t).animate([ { margin: '0px' }, |
| 166 { marginTop: '-20px', offset: 0.5 }, |
| 167 { marginLeft: '40px' }, |
| 168 { marginLeft: '100px' }, |
| 169 { margin: '50px' } ], |
| 170 { duration: 100 * MS_PER_SEC, |
| 171 spacing: 'paced(margin-left)' }); |
| 172 |
| 173 var frames = anim.effect.getKeyframes(); |
| 174 assert_equals(frames[2].computedOffset, 0.5 + 0.5 * 1 / 3, |
| 175 '3rd frame offset using distribute spacing because it is the ' + |
| 176 'first paceable keyframe'); |
| 177 assert_equals(frames[3].computedOffset, |
| 178 frames[2].computedOffset + |
| 179 (1.0 - frames[2].computedOffset) * 60 / 110, |
| 180 '4th frame offset using paced spacing'); |
| 181 }, 'Test paced spacing if a paced property that appears on only some ' + |
| 182 'keyframes and there is a specific offset'); |
| 183 |
| 184 test(function(t) { |
| 185 var anim = createDiv(t).animate([ { margin: '0px' }, |
| 186 { marginTop: '20px', offset: 0.2 }, |
| 187 { marginTop: '40px' }, |
| 188 { marginTop: '-20px' }, |
| 189 { marginLeft: '-20px' }, |
| 190 { marginLeft: '40px' }, |
| 191 { marginTop: '60px' }, |
| 192 { marginLeft: '100px' }, |
| 193 { marginTop: '50px' }, |
| 194 { marginTop: '100px', offset: 0.8 }, |
| 195 { margin: '0px' } ], |
| 196 { duration: 100 * MS_PER_SEC, |
| 197 spacing: 'paced(margin-left)' }); |
| 198 var frames = anim.effect.getKeyframes(); |
| 199 // Test distribute spacing in (A, Paced A] and [Paced B, frame B). |
| 200 var slots = frames.length - 3; |
| 201 var start = 0.2; |
| 202 var diff = 0.8 - start; |
| 203 assert_equals(frames[2].computedOffset, start + diff * 1.0 / slots, |
| 204 '3nd frame offset using distribute spacing'); |
| 205 assert_equals(frames[3].computedOffset, start + diff * 2.0 / slots, |
| 206 '4rd frame offset using distribute spacing'); |
| 207 assert_equals(frames[4].computedOffset, start + diff * 3.0 / slots, |
| 208 '5th frame offset using distribute spacing because it is ' + |
| 209 'the first paceable keyframe'); |
| 210 assert_equals(frames[7].computedOffset, start + diff * 6.0 / slots, |
| 211 '8th frame offset using distribute spacing because it is ' + |
| 212 'the last paceable keyframe'); |
| 213 assert_equals(frames[8].computedOffset, start + diff * 7.0 / slots, |
| 214 '9th frame offset using distribute spacing'); |
| 215 // Test paced spacing and other null computed offsets in (Paced A, Paced B). |
| 216 var cumDist = [0, 60, 60, 120]; |
| 217 assert_equals(frames[5].computedOffset, |
| 218 frames[4].computedOffset + cumDist[2] / cumDist[3] * |
| 219 (frames[7].computedOffset - frames[4].computedOffset), |
| 220 '6th frame offset using paced spacing'); |
| 221 assert_equals(frames[6].computedOffset, |
| 222 frames[5].computedOffset + 1.0 / 2.0 * |
| 223 (frames[7].computedOffset - frames[5].computedOffset), |
| 224 '7th frame offset using distribute spacing'); |
| 225 }, 'Test paced spacing where there are some keyframes without offsets and ' + |
| 226 'without the paced property before the first paceable keyframe and ' + |
| 227 'after the last paceable keyframe'); |
| 228 |
| 229 test(function(t) { |
| 230 var anim = createDiv(t).animate([ { margin: '0px' }, |
| 231 { margin: '-20px' }, |
| 232 { margin: '100px' }, |
| 233 { margin: '50px' } ], |
| 234 { duration: 100 * MS_PER_SEC, |
| 235 spacing: 'paced(margin)' }); |
| 236 |
| 237 var frames = anim.effect.getKeyframes(); |
| 238 var cumDist = [0, 20, 140, 190]; |
| 239 assert_equals(frames[1].computedOffset, cumDist[1] / cumDist[3], |
| 240 '2nd frame offset'); |
| 241 assert_equals(frames[2].computedOffset, cumDist[2] / cumDist[3], |
| 242 '3rd frame offset'); |
| 243 }, 'Test paced spacing for using shorthand property'); |
| 244 |
| 245 test(function(t) { |
| 246 var anim = |
| 247 createDiv(t).animate([ { marginLeft: '0px', marginRight: '0px', |
| 248 marginTop: '10px', marginBottom: '10px' }, |
| 249 { marginLeft: '-20px', marginRight: '-20px', |
| 250 marginTop: '0px', marginBottom: '0px' }, |
| 251 { marginLeft: '100px', marginRight: '100px', |
| 252 marginTop: '-50px', marginBottom: '-50px' }, |
| 253 { marginLeft: '50px', marginRight: '50px', |
| 254 marginTop: '80px', marginBottom: '80px' } ], |
| 255 { duration: 100 * MS_PER_SEC, |
| 256 spacing: 'paced(margin)' }); |
| 257 |
| 258 var frames = anim.effect.getKeyframes(); |
| 259 var dist = [ 0, |
| 260 Math.sqrt(20 * 20 * 2 + 10 * 10 * 2), |
| 261 Math.sqrt(120 * 120 * 2 + 50 * 50 * 2), |
| 262 Math.sqrt(50 * 50 * 2 + 130 * 130 * 2) ]; |
| 263 var cumDist = []; |
| 264 dist.reduce(function(prev, curr, i) { return cumDist[i] = prev + curr; }, 0); |
| 265 assert_approx_equals(frames[1].computedOffset, cumDist[1] / cumDist[3], |
| 266 0.0001, '2nd frame offset'); |
| 267 assert_approx_equals(frames[2].computedOffset, cumDist[2] / cumDist[3], |
| 268 0.0001, '3rd frame offset'); |
| 269 }, 'Test paced spacing using shorthand property where only the longhand ' + |
| 270 'components are specified'); |
| 271 |
| 272 test(function(t) { |
| 273 var anim = createDiv(t).animate([ { marginLeft: '0px', marginTop: '0px' }, |
| 274 { marginLeft: '-20px', marginTop: '-20px' }, |
| 275 { marginLeft: '100px', marginTop: '100px' }, |
| 276 { marginLeft: '50px', marginTop: '50px' } ], |
| 277 { duration: 100 * MS_PER_SEC, |
| 278 spacing: 'paced(margin)' }); |
| 279 |
| 280 var frames = anim.effect.getKeyframes(); |
| 281 var slots = frames.length - 1; |
| 282 assert_equals(frames[1].computedOffset, 1 / slots, '2nd frame offset'); |
| 283 assert_equals(frames[2].computedOffset, 2 / slots, '3rd frame offset'); |
| 284 }, 'Test falling back to distribute spacing if all keyframe miss some ' + |
| 285 'components'); |
| 286 |
| 287 test(function(t) { |
| 288 var anim = createDiv(t).animate([ { margin: '0px' }, |
| 289 { marginLeft: '-20px' }, |
| 290 { marginTop: '40px' }, |
| 291 { margin: '100px' }, |
| 292 { margin: '50px' } ], |
| 293 { duration: 100 * MS_PER_SEC, |
| 294 spacing: 'paced(margin)' }); |
| 295 |
| 296 var frames = anim.effect.getKeyframes(); |
| 297 assert_equals(frames[1].computedOffset, frames[3].computedOffset * 1 / 3, |
| 298 '2nd frame offset using distribute spacing'); |
| 299 assert_equals(frames[2].computedOffset, frames[3].computedOffset * 2 / 3, |
| 300 '3rd frame offset using distribute spacing'); |
| 301 assert_equals(frames[3].computedOffset, 100 / 150, |
| 302 '4th frame offset using paced spacing'); |
| 303 }, 'Test paced spacing only for keyframes specifying all longhand ' + |
| 304 'components, and falling back to distribute spacing for the reset'); |
| 305 |
| 306 test(function(t) { |
| 307 var anim = createDiv(t).animate([ { margin: '0px' }, |
| 308 { marginLeft: '-20px' }, |
| 309 { marginTop: '40px', offset: 0.5 }, |
| 310 { margin: '100px' }, |
| 311 { margin: '50px' } ], |
| 312 { duration: 100 * MS_PER_SEC, |
| 313 spacing: 'paced(margin)' }); |
| 314 |
| 315 var frames = anim.effect.getKeyframes(); |
| 316 assert_equals(frames[1].computedOffset, 0.5 * 1 / 2, |
| 317 '2nd frame offset using distribute spacing'); |
| 318 assert_equals(frames[3].computedOffset, 0.5 + 0.5 * 1 / 2, |
| 319 '4th frame offset using distribute spacing because it is the ' + |
| 320 'first paceable keyframe from a non-null offset keyframe'); |
| 321 }, 'Test paced spacing only for keyframes specifying all some components, ' + |
| 322 'and falling back to distribute spacing for the reset with some specific ' + |
| 323 'offsets'); |
| 324 |
| 325 // Bug 1276193: Test for mixing percent and pixel values. |
| 326 |
| 327 </script> |
| 328 </body> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2143653006:
Import wpt@c875b4212a473363afe8c09f012edf201386cb5b (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master