KaneAI - World’s First E2E Software Testing Agent.Book a Demo 
How to use createTestElement method in wpt
Best JavaScript code snippet using wpt
property-types.js
Source:property-types.js 
...3 options.forEach(function(keyframes) {4 var [ from, to ] = keyframes;5 test(function(t) {6 var idlName = propertyToIDL(property);7 var target = createTestElement(t, setup);8 var animation = target.animate({ [idlName]: [from, to] },9 { duration: 1000, fill: 'both' });10 testAnimationSamples(animation, idlName,11 [{ time: 0, expected: from.toLowerCase() },12 { time: 499, expected: from.toLowerCase() },13 { time: 500, expected: to.toLowerCase() },14 { time: 1000, expected: to.toLowerCase() }]);15 }, property + ' uses discrete animation when animating between "'16 + from + '" and "' + to + '" with linear easing');17 test(function(t) {18 // Easing: http://cubic-bezier.com/#.68,0,1,.0119 // With this curve, we don't reach the 50% point until about 95% of20 // the time has expired.21 var idlName = propertyToIDL(property);22 var keyframes = {};23 var target = createTestElement(t, setup);24 var animation = target.animate({ [idlName]: [from, to] },25 { duration: 1000, fill: 'both',26 easing: 'cubic-bezier(0.68,0,1,0.01)' });27 testAnimationSamples(animation, idlName,28 [{ time: 0, expected: from.toLowerCase() },29 { time: 940, expected: from.toLowerCase() },30 { time: 960, expected: to.toLowerCase() }]);31 }, property + ' uses discrete animation when animating between "'32 + from + '" and "' + to + '" with effect easing');33 test(function(t) {34 // Easing: http://cubic-bezier.com/#.68,0,1,.0135 // With this curve, we don't reach the 50% point until about 95% of36 // the time has expired.37 var idlName = propertyToIDL(property);38 var target = createTestElement(t, setup);39 var animation = target.animate({ [idlName]: [from, to],40 easing: 'cubic-bezier(0.68,0,1,0.01)' },41 { duration: 1000, fill: 'both' });42 testAnimationSamples(animation, idlName,43 [{ time: 0, expected: from.toLowerCase() },44 { time: 940, expected: from.toLowerCase() },45 { time: 960, expected: to.toLowerCase() }]);46 }, property + ' uses discrete animation when animating between "'47 + from + '" and "' + to + '" with keyframe easing');48 });49 },50 testAdditionOrAccumulation: function(property, setup, options, composite) {51 options.forEach(function(keyframes) {52 var [ from, to ] = keyframes;53 test(function(t) {54 var idlName = propertyToIDL(property);55 var target = createTestElement(t, setup);56 target.animate({ [idlName]: [from, from] }, 1000);57 var animation = target.animate({ [idlName]: [to, to] },58 { duration: 1000, composite: composite });59 testAnimationSamples(animation, idlName,60 [{ time: 0, expected: to.toLowerCase() }]);61 }, property + ': "' + to + '" onto "' + from + '"');62 test(function(t) {63 var idlName = propertyToIDL(property);64 var target = createTestElement(t, setup);65 target.animate({ [idlName]: [to, to] }, 1000);66 var animation = target.animate({ [idlName]: [from, from] },67 { duration: 1000, composite: composite });68 testAnimationSamples(animation, idlName,69 [{ time: 0, expected: from.toLowerCase() }]);70 }, property + ': "' + from + '" onto "' + to + '"');71 });72 },73 testAddition: function(property, setup, options) {74 this.testAdditionOrAccumulation(property, setup, options, 'add');75 },76 testAccumulation: function(property, setup, options) {77 this.testAdditionOrAccumulation(property, setup, options, 'accumulate');78 },79};80const lengthType = {81 testInterpolation: function(property, setup) {82 test(function(t) {83 var idlName = propertyToIDL(property);84 var target = createTestElement(t, setup);85 var animation = target.animate({ [idlName]: ['10px', '50px'] },86 { duration: 1000, fill: 'both' });87 testAnimationSamples(animation, idlName,88 [{ time: 500, expected: '30px' }]);89 }, property + ' supports animating as a length');90 test(function(t) {91 var idlName = propertyToIDL(property);92 var target = createTestElement(t, setup);93 var animation = target.animate({ [idlName]: ['1rem', '5rem'] },94 { duration: 1000, fill: 'both' });95 testAnimationSamples(animation, idlName,96 [{ time: 500, expected: '30px' }]);97 }, property + ' supports animating as a length of rem');98 },99 testAdditionOrAccumulation: function(property, setup, composite) {100 test(function(t) {101 var idlName = propertyToIDL(property);102 var target = createTestElement(t, setup);103 target.style[idlName] = '10px';104 var animation = target.animate({ [idlName]: ['10px', '50px'] },105 { duration: 1000, composite: composite});106 testAnimationSamples(animation, idlName, [{ time: 0, expected: '20px' }]);107 }, property + ': length');108 test(function(t) {109 var idlName = propertyToIDL(property);110 var target = createTestElement(t, setup);111 target.style[idlName] = '1rem';112 var animation = target.animate({ [idlName]: ['1rem', '5rem'] },113 { duration: 1000, composite: composite });114 testAnimationSamples(animation, idlName, [{ time: 0, expected: '20px' }]);115 }, property + ': length of rem');116 },117 testAddition: function(property, setup) {118 this.testAdditionOrAccumulation(property, setup, 'add');119 },120 testAccumulation: function(property, setup) {121 this.testAdditionOrAccumulation(property, setup, 'accumulate');122 },123};124const lengthPairType = {125 testInterpolation: function(property, setup) {126 test(function(t) {127 var idlName = propertyToIDL(property);128 var target = createTestElement(t, setup);129 var animation = target.animate({ [idlName]: ['10px 10px', '50px 50px'] },130 { duration: 1000, fill: 'both' });131 testAnimationSamples(animation, idlName,132 [{ time: 500, expected: '30px 30px' }]);133 }, property + ' supports animating as a length pair');134 test(function(t) {135 var idlName = propertyToIDL(property);136 var target = createTestElement(t, setup);137 var animation = target.animate({ [idlName]: ['1rem 1rem', '5rem 5rem'] },138 { duration: 1000, fill: 'both' });139 testAnimationSamples(animation, idlName,140 [{ time: 500, expected: '30px 30px' }]);141 }, property + ' supports animating as a length pair of rem');142 },143 testAdditionOrAccumulation: function(property, setup, composite) {144 test(function(t) {145 var idlName = propertyToIDL(property);146 var target = createTestElement(t, setup);147 target.style[idlName] = '10px 10px';148 var animation = target.animate({ [idlName]: ['10px 10px', '50px 50px'] },149 { duration: 1000, composite: composite });150 testAnimationSamples(animation, idlName, [{ time: 0, expected: '20px 20px' }]);151 }, property + ': length pair');152 test(function(t) {153 var idlName = propertyToIDL(property);154 var target = createTestElement(t, setup);155 target.style[idlName] = '1rem 1rem';156 var animation = target.animate({ [idlName]: ['1rem 1rem', '5rem 5rem'] },157 { duration: 1000, composite: composite });158 testAnimationSamples(animation, idlName, [{ time: 0, expected: '20px 20px' }]);159 }, property + ': length pair of rem');160 },161 testAddition: function(property, setup) {162 this.testAdditionOrAccumulation(property, setup, 'add');163 },164 testAccumulation: function(property, setup) {165 this.testAdditionOrAccumulation(property, setup, 'accumulate');166 },167};168const percentageType = {169 testInterpolation: function(property, setup) {170 test(function(t) {171 var idlName = propertyToIDL(property);172 var target = createTestElement(t, setup);173 var animation = target.animate({ [idlName]: ['10%', '50%'] },174 { duration: 1000, fill: 'both' });175 testAnimationSamples(animation, idlName,176 [{ time: 500, expected: '30%' }]);177 }, property + ' supports animating as a percentage');178 },179 testAdditionOrAccumulation: function(property, setup, composite) {180 test(function(t) {181 var idlName = propertyToIDL(property);182 var target = createTestElement(t, setup);183 target.style[idlName] = '60%';184 var animation = target.animate({ [idlName]: ['70%', '100%'] },185 { duration: 1000, composite: composite });186 testAnimationSamples(animation, idlName, [{ time: 0, expected: '130%' }]);187 }, property + ': percentage');188 },189 testAddition: function(property, setup) {190 this.testAdditionOrAccumulation(property, setup, 'add');191 },192 testAccumulation: function(property, setup) {193 this.testAdditionOrAccumulation(property, setup, 'accumulate');194 },195};196const integerType = {197 testInterpolation: function(property, setup) {198 test(function(t) {199 var idlName = propertyToIDL(property);200 var target = createTestElement(t, setup);201 var animation = target.animate({ [idlName]: [-2, 2] },202 { duration: 1000, fill: 'both' });203 testAnimationSamples(animation, idlName,204 [{ time: 500, expected: '0' }]);205 }, property + ' supports animating as an integer');206 },207 testAdditionOrAccumulation: function(property, setup, composite) {208 test(function(t) {209 var idlName = propertyToIDL(property);210 var target = createTestElement(t, setup);211 target.style[idlName] = -1;212 var animation = target.animate({ [idlName]: [-2, 2] },213 { duration: 1000, composite: composite });214 testAnimationSamples(animation, idlName,215 [{ time: 0, expected: '-3' }]);216 }, property + ': integer');217 },218 testAddition: function(property, setup) {219 this.testAdditionOrAccumulation(property, setup, 'add');220 },221 testAccumulation: function(property, setup) {222 this.testAdditionOrAccumulation(property, setup, 'accumulate');223 },224};225const positiveIntegerType = {226 testInterpolation: function(property, setup) {227 test(function(t) {228 var idlName = propertyToIDL(property);229 var target = createTestElement(t, setup);230 var animation = target.animate({ [idlName]: [1, 3] },231 { duration: 1000, fill: 'both' });232 testAnimationSamples(animation, idlName,233 [ { time: 500, expected: '2' } ]);234 }, property + ' supports animating as a positive integer');235 },236 testAdditionOrAccumulation: function(property, setup, composite) {237 test(function(t) {238 var idlName = propertyToIDL(property);239 var target = createTestElement(t, setup);240 target.style[idlName] = 1;241 var animation = target.animate({ [idlName]: [2, 5] },242 { duration: 1000, composite: composite });243 testAnimationSamples(animation, idlName,244 [{ time: 0, expected: '3' }]);245 }, property + ': positive integer');246 },247 testAddition: function(property, setup) {248 this.testAdditionOrAccumulation(property, setup, 'add');249 },250 testAccumulation: function(property, setup) {251 this.testAdditionOrAccumulation(property, setup, 'accumulate');252 },253};254const lengthPercentageOrCalcType = {255 testInterpolation: function(property, setup) {256 lengthType.testInterpolation(property, setup);257 percentageType.testInterpolation(property, setup);258 test(function(t) {259 var idlName = propertyToIDL(property);260 var target = createTestElement(t, setup);261 var animation = target.animate({ [idlName]: ['10px', '20%'] },262 { duration: 1000, fill: 'both' });263 testAnimationSamples(animation, idlName,264 [{ time: 500, expected: 'calc(5px + 10%)' }]);265 }, property + ' supports animating as combination units "px" and "%"');266 test(function(t) {267 var idlName = propertyToIDL(property);268 var target = createTestElement(t, setup);269 var animation = target.animate({ [idlName]: ['10%', '2em'] },270 { duration: 1000, fill: 'both' });271 testAnimationSamples(animation, idlName,272 [{ time: 500, expected: 'calc(10px + 5%)' }]);273 }, property + ' supports animating as combination units "%" and "em"');274 test(function(t) {275 var idlName = propertyToIDL(property);276 var target = createTestElement(t, setup);277 var animation = target.animate({ [idlName]: ['1em', '2rem'] },278 { duration: 1000, fill: 'both' });279 testAnimationSamples(animation, idlName,280 [{ time: 500, expected: '15px' }]);281 }, property + ' supports animating as combination units "em" and "rem"');282 test(function(t) {283 var idlName = propertyToIDL(property);284 var target = createTestElement(t, setup);285 var animation = target.animate({ [idlName]: ['10px', 'calc(1em + 20%)'] },286 { duration: 1000, fill: 'both' });287 testAnimationSamples(animation, idlName,288 [{ time: 500, expected: 'calc(10px + 10%)' }]);289 }, property + ' supports animating as combination units "px" and "calc"');290 test(function(t) {291 var idlName = propertyToIDL(property);292 var target = createTestElement(t, setup);293 var animation = target.animate(294 { [idlName]: ['calc(10px + 10%)', 'calc(1em + 1rem + 20%)'] },295 { duration: 1000, fill: 'both' });296 testAnimationSamples(animation, idlName,297 [{ time: 500,298 expected: 'calc(15px + 15%)' }]);299 }, property + ' supports animating as a calc');300 },301 testAdditionOrAccumulation: function(property, setup, composite) {302 lengthType.testAddition(property, setup);303 percentageType.testAddition(property, setup);304 test(function(t) {305 var idlName = propertyToIDL(property);306 var target = createTestElement(t, setup);307 target.style[idlName] = '10px';308 var animation = target.animate({ [idlName]: ['10%', '50%'] },309 { duration: 1000, composite: composite });310 testAnimationSamples(animation, idlName,311 [{ time: 0, expected: 'calc(10px + 10%)' }]);312 }, property + ': units "%" onto "px"');313 test(function(t) {314 var idlName = propertyToIDL(property);315 var target = createTestElement(t, setup);316 target.style[idlName] = '10%';317 var animation = target.animate({ [idlName]: ['10px', '50px'] },318 { duration: 1000, composite: composite });319 testAnimationSamples(animation, idlName,320 [{ time: 0, expected: 'calc(10px + 10%)' }]);321 }, property + ': units "px" onto "%"');322 test(function(t) {323 var idlName = propertyToIDL(property);324 var target = createTestElement(t, setup);325 target.style[idlName] = '10%';326 var animation = target.animate({ [idlName]: ['2rem', '5rem'] },327 { duration: 1000, composite: composite });328 testAnimationSamples(animation, idlName,329 [{ time: 0, expected: 'calc(20px + 10%)' }]);330 }, property + ': units "rem" onto "%"');331 test(function(t) {332 var idlName = propertyToIDL(property);333 var target = createTestElement(t, setup);334 target.style[idlName] = '2rem';335 var animation = target.animate({ [idlName]: ['10%', '50%'] },336 { duration: 1000, composite: composite });337 testAnimationSamples(animation, idlName,338 [{ time: 0, expected: 'calc(20px + 10%)' }]);339 }, property + ': units "%" onto "rem"');340 test(function(t) {341 var idlName = propertyToIDL(property);342 var target = createTestElement(t, setup);343 target.style[idlName] = '2em';344 var animation = target.animate({ [idlName]: ['2rem', '5rem'] },345 { duration: 1000, composite: composite });346 testAnimationSamples(animation, idlName, [{ time: 0, expected: '40px' }]);347 }, property + ': units "rem" onto "em"');348 test(function(t) {349 var idlName = propertyToIDL(property);350 var target = createTestElement(t, setup);351 target.style[idlName] = '2rem';352 var animation = target.animate({ [idlName]: ['2em', '5em'] },353 { duration: 1000, composite: composite });354 testAnimationSamples(animation, idlName, [{ time: 0, expected: '40px' }]);355 }, property + ': units "em" onto "rem"');356 test(function(t) {357 var idlName = propertyToIDL(property);358 var target = createTestElement(t, setup);359 target.style[idlName] = '10px';360 var animation = target.animate({ [idlName]: ['calc(2em + 20%)',361 'calc(5rem + 50%)'] },362 { duration: 1000, composite: composite });363 testAnimationSamples(animation, idlName,364 [{ time: 0, expected: 'calc(30px + 20%)' }]);365 }, property + ': units "calc" onto "px"');366 test(function(t) {367 var idlName = propertyToIDL(property);368 var target = createTestElement(t, setup);369 target.style[idlName] = 'calc(10px + 10%)';370 var animation = target.animate({ [idlName]: ['calc(20px + 20%)',371 'calc(2em + 3rem + 40%)'] },372 { duration: 1000, composite: composite });373 testAnimationSamples(animation, idlName,374 [{ time: 0, expected: 'calc(30px + 30%)' }]);375 }, property + ': calc');376 },377 testAddition: function(property, setup) {378 this.testAdditionOrAccumulation(property, setup, 'add');379 },380 testAccumulation: function(property, setup) {381 this.testAdditionOrAccumulation(property, setup, 'accumulate');382 },383};384const positiveNumberType = {385 testInterpolation: function(property, setup) {386 test(function(t) {387 var idlName = propertyToIDL(property);388 var target = createTestElement(t, setup);389 var animation = target.animate({ [idlName]: [1.1, 1.5] },390 { duration: 1000, fill: 'both' });391 testAnimationSamples(animation, idlName,392 [{ time: 500, expected: '1.3' }]);393 }, property + ' supports animating as a positive number');394 },395 testAdditionOrAccumulation: function(property, setup, composite) {396 test(function(t) {397 var idlName = propertyToIDL(property);398 var target = createTestElement(t, setup);399 target.style[idlName] = 1.1;400 var animation = target.animate({ [idlName]: [1.1, 1.5] },401 { duration: 1000, composite: composite });402 testAnimationSamples(animation, idlName, [{ time: 0, expected: '2.2' }]);403 }, property + ': positive number');404 },405 testAddition: function(property, setup) {406 this.testAdditionOrAccumulation(property, setup, 'add');407 },408 testAccumulation: function(property, setup) {409 this.testAdditionOrAccumulation(property, setup, 'accumulate');410 },411};412// Test using float values in the range [0, 1]413const opacityType = {414 testInterpolation: function(property, setup) {415 test(function(t) {416 var idlName = propertyToIDL(property);417 var target = createTestElement(t, setup);418 var animation = target.animate({ [idlName]: [0.3, 0.8] },419 { duration: 1000, fill: 'both' });420 testAnimationSamples(animation, idlName,421 [{ time: 500, expected: '0.55' }]);422 }, property + ' supports animating as a [0, 1] number');423 },424 testAdditionOrAccumulation: function(property, setup, composite) {425 test(function(t) {426 var idlName = propertyToIDL(property);427 var target = createTestElement(t, setup);428 target.style[idlName] = 0.3;429 var animation = target.animate({ [idlName]: [0.3, 0.8] },430 { duration: 1000, composite: composite });431 testAnimationSamples(animation, idlName, [{ time: 0, expected: '0.6' }]);432 }, property + ': [0, 1] number');433 test(function(t) {434 var idlName = propertyToIDL(property);435 var target = createTestElement(t, setup);436 target.style[idlName] = 0.8;437 var animation = target.animate({ [idlName]: [0.3, 0.8] },438 { duration: 1000, composite: composite });439 testAnimationSamples(animation, idlName, [{ time: 0, expected: '1' }]);440 }, property + ': [0, 1] number (clamped)');441 },442 testAddition: function(property, setup) {443 this.testAdditionOrAccumulation(property, setup, 'add');444 },445 testAccumulation: function(property, setup) {446 this.testAdditionOrAccumulation(property, setup, 'accumulate');447 },448};449const visibilityType = {450 testInterpolation: function(property, setup) {451 test(function(t) {452 var idlName = propertyToIDL(property);453 var target = createTestElement(t, setup);454 var animation = target.animate({ [idlName]: ['visible', 'hidden'] },455 { duration: 1000, fill: 'both' });456 testAnimationSamples(animation, idlName,457 [{ time: 0, expected: 'visible' },458 { time: 999, expected: 'visible' },459 { time: 1000, expected: 'hidden' }]);460 }, property + ' uses visibility animation when animating '461 + 'from "visible" to "hidden"');462 test(function(t) {463 var idlName = propertyToIDL(property);464 var target = createTestElement(t, setup);465 var animation = target.animate({ [idlName]: ['hidden', 'visible'] },466 { duration: 1000, fill: 'both' });467 testAnimationSamples(animation, idlName,468 [{ time: 0, expected: 'hidden' },469 { time: 1, expected: 'visible' },470 { time: 1000, expected: 'visible' }]);471 }, property + ' uses visibility animation when animating '472 + 'from "hidden" to "visible"');473 test(function(t) {474 var idlName = propertyToIDL(property);475 var target = createTestElement(t, setup);476 var animation = target.animate({ [idlName]: ['hidden', 'collapse'] },477 { duration: 1000, fill: 'both' });478 testAnimationSamples(animation, idlName,479 [{ time: 0, expected: 'hidden' },480 { time: 499, expected: 'hidden' },481 { time: 500, expected: 'collapse' },482 { time: 1000, expected: 'collapse' }]);483 }, property + ' uses visibility animation when animating '484 + 'from "hidden" to "collapse"');485 test(function(t) {486 // Easing: http://cubic-bezier.com/#.68,-.55,.26,1.55487 // With this curve, the value is less than 0 till about 34%488 // also more than 1 since about 63%489 var idlName = propertyToIDL(property);490 var target = createTestElement(t, setup);491 var animation =492 target.animate({ [idlName]: ['visible', 'hidden'] },493 { duration: 1000, fill: 'both',494 easing: 'cubic-bezier(0.68, -0.55, 0.26, 1.55)' });495 testAnimationSamples(animation, idlName,496 [{ time: 0, expected: 'visible' },497 { time: 1, expected: 'visible' },498 { time: 330, expected: 'visible' },499 { time: 340, expected: 'visible' },500 { time: 620, expected: 'visible' },501 { time: 630, expected: 'hidden' },502 { time: 1000, expected: 'hidden' }]);503 }, property + ' uses visibility animation when animating '504 + 'from "visible" to "hidden" with easeInOutBack easing');505 },506 testAdditionOrAccumulation: function(property, setup, composite) {507 test(function(t) {508 var idlName = propertyToIDL(property);509 var target = createTestElement(t, setup);510 target.style[idlName] = 'visible';511 var animation = target.animate({ [idlName]: ['visible', 'hidden'] },512 { duration: 1000, fill: 'both',513 composite: composite });514 testAnimationSamples(animation, idlName,515 [{ time: 0, expected: 'visible' },516 { time: 1000, expected: 'visible' }]);517 }, property + ': onto "visible"');518 test(function(t) {519 var idlName = propertyToIDL(property);520 var target = createTestElement(t, setup);521 target.style[idlName] = 'hidden';522 var animation = target.animate({ [idlName]: ['hidden', 'visible'] },523 { duration: 1000, fill: 'both',524 composite: composite });525 testAnimationSamples(animation, idlName,526 [{ time: 0, expected: 'hidden' },527 { time: 1000, expected: 'visible' }]);528 }, property + ': onto "hidden"');529 },530 testAddition: function(property, setup) {531 this.testAdditionOrAccumulation(property, setup, 'add');532 },533 testAccumulation: function(property, setup) {534 this.testAdditionOrAccumulation(property, setup, 'accumulate');535 },536};537const colorType = {538 testInterpolation: function(property, setup) {539 test(function(t) {540 var idlName = propertyToIDL(property);541 var target = createTestElement(t, setup);542 var animation = target.animate({ [idlName]: ['rgb(255, 0, 0)',543 'rgb(0, 0, 255)'] },544 1000);545 testAnimationSamples(animation, idlName,546 [{ time: 500, expected: 'rgb(128, 0, 128)' }]);547 }, property + ' supports animating as color of rgb()');548 test(function(t) {549 var idlName = propertyToIDL(property);550 var target = createTestElement(t, setup);551 var animation = target.animate({ [idlName]: ['#ff0000', '#0000ff'] },552 1000);553 testAnimationSamples(animation, idlName,554 [{ time: 500, expected: 'rgb(128, 0, 128)' }]);555 }, property + ' supports animating as color of #RGB');556 test(function(t) {557 var idlName = propertyToIDL(property);558 var target = createTestElement(t, setup);559 var animation = target.animate({ [idlName]: ['hsl(0, 100%, 50%)',560 'hsl(240, 100%, 50%)'] },561 1000);562 testAnimationSamples(animation, idlName,563 [{ time: 500, expected: 'rgb(128, 0, 128)' }]);564 }, property + ' supports animating as color of hsl()');565 test(function(t) {566 var idlName = propertyToIDL(property);567 var target = createTestElement(t, setup);568 var animation = target.animate({ [idlName]: ['#ff000066', '#0000ffcc'] },569 1000);570 // R: 255 * (0.4 * 0.5) / 0.6 = 85571 // G: 255 * (0.8 * 0.5) / 0.6 = 170572 testAnimationSamples(animation, idlName,573 [{ time: 500, expected: 'rgba(85, 0, 170, 0.6)' }]);574 }, property + ' supports animating as color of #RGBa');575 test(function(t) {576 var idlName = propertyToIDL(property);577 var target = createTestElement(t, setup);578 var animation = target.animate({ [idlName]: ['rgba(255, 0, 0, 0.4)',579 'rgba(0, 0, 255, 0.8)'] },580 1000);581 testAnimationSamples(animation, idlName, // Same as above.582 [{ time: 500, expected: 'rgba(85, 0, 170, 0.6)' }]);583 }, property + ' supports animating as color of rgba()');584 test(function(t) {585 var idlName = propertyToIDL(property);586 var target = createTestElement(t, setup);587 var animation = target.animate({ [idlName]: ['hsla(0, 100%, 50%, 0.4)',588 'hsla(240, 100%, 50%, 0.8)'] },589 1000);590 testAnimationSamples(animation, idlName, // Same as above.591 [{ time: 500, expected: 'rgba(85, 0, 170, 0.6)' }]);592 }, property + ' supports animating as color of hsla()');593 },594 testAdditionOrAccumulation: function(property, setup, composite) {595 test(function(t) {596 var idlName = propertyToIDL(property);597 var target = createTestElement(t, setup);598 target.style[idlName] = 'rgb(128, 128, 128)';599 var animation = target.animate({ [idlName]: ['rgb(255, 0, 0)',600 'rgb(0, 0, 255)'] },601 { duration: 1000, composite: composite });602 testAnimationSamples(animation, idlName,603 [{ time: 0, expected: 'rgb(255, 128, 128)' },604 // The value at 50% is interpolated605 // from 'rgb(128+255, 128, 128)'606 // to 'rgb(128, 128, 128+255)'.607 { time: 500, expected: 'rgb(255, 128, 255)' }]);608 }, property + ' supports animating as color of rgb() with overflowed ' +609 'from and to values');610 test(function(t) {611 var idlName = propertyToIDL(property);612 var target = createTestElement(t, setup);613 target.style[idlName] = 'rgb(128, 128, 128)';614 var animation = target.animate({ [idlName]: ['#ff0000', '#0000ff'] },615 { duration: 1000, composite: composite });616 testAnimationSamples(animation, idlName,617 [{ time: 0, expected: 'rgb(255, 128, 128)' }]);618 }, property + ' supports animating as color of #RGB');619 test(function(t) {620 var idlName = propertyToIDL(property);621 var target = createTestElement(t, setup);622 target.style[idlName] = 'rgb(128, 128, 128)';623 var animation = target.animate({ [idlName]: ['hsl(0, 100%, 50%)',624 'hsl(240, 100%, 50%)'] },625 { duration: 1000, composite: composite });626 testAnimationSamples(animation, idlName,627 [{ time: 0, expected: 'rgb(255, 128, 128)' }]);628 }, property + ' supports animating as color of hsl()');629 test(function(t) {630 var idlName = propertyToIDL(property);631 var target = createTestElement(t, setup);632 target.style[idlName] = 'rgb(128, 128, 128)';633 var animation = target.animate({ [idlName]: ['#ff000066', '#0000ffcc'] },634 { duration: 1000, composite: composite });635 testAnimationSamples(animation, idlName,636 [{ time: 0, expected: 'rgb(230, 128, 128)' }]);637 }, property + ' supports animating as color of #RGBa');638 test(function(t) {639 var idlName = propertyToIDL(property);640 var target = createTestElement(t, setup);641 target.style[idlName] = 'rgb(128, 128, 128)';642 var animation = target.animate({ [idlName]: ['rgba(255, 0, 0, 0.4)',643 'rgba(0, 0, 255, 0.8)'] },644 { duration: 1000, composite: composite });645 testAnimationSamples(animation, idlName, // Same as above.646 [{ time: 0, expected: 'rgb(230, 128, 128)' }]);647 }, property + ' supports animating as color of rgba()');648 test(function(t) {649 var idlName = propertyToIDL(property);650 var target = createTestElement(t, setup);651 target.style[idlName] = 'rgb(128, 128, 128)';652 var animation = target.animate({ [idlName]: ['hsla(0, 100%, 50%, 0.4)',653 'hsla(240, 100%, 50%, 0.8)'] },654 { duration: 1000, composite: composite });655 testAnimationSamples(animation, idlName, // Same as above.656 [{ time: 0, expected: 'rgb(230, 128, 128)' }]);657 }, property + ' supports animating as color of hsla()');658 },659 testAddition: function(property, setup) {660 this.testAdditionOrAccumulation(property, setup, 'add');661 },662 testAccumulation: function(property, setup) {663 this.testAdditionOrAccumulation(property, setup, 'accumulate');664 },665};666const transformListType = {667 testInterpolation: function(property, setup) {668 test(function(t) {669 var idlName = propertyToIDL(property);670 var target = createTestElement(t, setup);671 var animation = target.animate({ [idlName]: ['translate(200px, -200px)',672 'translate(400px, 400px)'] },673 1000);674 testAnimationSampleMatrices(animation, idlName,675 [{ time: 500, expected: [ 1, 0, 0, 1, 300, 100 ] }]);676 }, property + ': translate');677 test(function(t) {678 var idlName = propertyToIDL(property);679 var target = createTestElement(t, setup);680 var animation = target.animate({ [idlName]: ['rotate(45deg)',681 'rotate(135deg)'] },682 1000);683 testAnimationSampleMatrices(animation, idlName,684 [{ time: 500, expected: [ Math.cos(Math.PI / 2),685 Math.sin(Math.PI / 2),686 -Math.sin(Math.PI / 2),687 Math.cos(Math.PI / 2),688 0, 0] }]);689 }, property + ': rotate');690 test(function(t) {691 var idlName = propertyToIDL(property);692 var target = createTestElement(t, setup);693 var animation = target.animate({ [idlName]: ['scale(3)', 'scale(5)'] },694 1000);695 testAnimationSampleMatrices(animation, idlName,696 [{ time: 500, expected: [ 4, 0, 0, 4, 0, 0 ] }]);697 }, property + ': scale');698 test(function(t) {699 var idlName = propertyToIDL(property);700 var target = createTestElement(t, setup);701 var animation = target.animate({ [idlName]: ['skew(30deg, 60deg)',702 'skew(60deg, 30deg)'] },703 1000);704 testAnimationSampleMatrices(animation, idlName,705 [{ time: 500, expected: [ 1, Math.tan(Math.PI / 4),706 Math.tan(Math.PI / 4), 1,707 0, 0] }]);708 }, property + ': skew');709 test(function(t) {710 var idlName = propertyToIDL(property);711 var target = createTestElement(t, setup);712 var animation =713 target.animate({ [idlName]: ['translateX(100px) rotate(45deg)',714 'translateX(200px) rotate(135deg)'] },715 1000);716 testAnimationSampleMatrices(animation, idlName,717 [{ time: 500, expected: [ Math.cos(Math.PI / 2),718 Math.sin(Math.PI / 2),719 -Math.sin(Math.PI / 2),720 Math.cos(Math.PI / 2),721 150, 0 ] }]);722 }, property + ': rotate and translate');723 test(function(t) {724 var idlName = propertyToIDL(property);725 var target = createTestElement(t, setup);726 var animation =727 target.animate({ [idlName]: ['rotate(45deg) translateX(100px)',728 'rotate(135deg) translateX(200px)'] },729 1000);730 testAnimationSampleMatrices(animation, idlName,731 [{ time: 500, expected: [ Math.cos(Math.PI / 2),732 Math.sin(Math.PI / 2),733 -Math.sin(Math.PI / 2),734 Math.cos(Math.PI / 2),735 150 * Math.cos(Math.PI / 2),736 150 * Math.sin(Math.PI / 2) ] }]);737 }, property + ': translate and rotate');738 test(function(t) {739 var idlName = propertyToIDL(property);740 var target = createTestElement(t, setup);741 var animation = // matrix(0, 1, -1, 0, 0, 100)742 target.animate({ [idlName]: ['rotate(90deg) translateX(100px)',743 // matrix(-1, 0, 0, -1, 200, 0)744 'translateX(200px) rotate(180deg)'] },745 1000);746 testAnimationSampleMatrices(animation, idlName,747 [{ time: 500, expected: [ Math.cos(Math.PI * 3 / 4),748 Math.sin(Math.PI * 3 / 4),749 -Math.sin(Math.PI * 3 / 4),750 Math.cos(Math.PI * 3 / 4),751 100, 50 ] }]);752 }, property + ': mismatch order of translate and rotate');753 test(function(t) {754 var idlName = propertyToIDL(property);755 var target = createTestElement(t, setup);756 var animation = // Same matrices as above.757 target.animate({ [idlName]: [ 'matrix(0, 1, -1, 0, 0, 100)',758 'matrix(-1, 0, 0, -1, 200, 0)' ] },759 1000);760 testAnimationSampleMatrices(animation, idlName,761 [{ time: 500, expected: [ Math.cos(Math.PI * 3 / 4),762 Math.sin(Math.PI * 3 / 4),763 -Math.sin(Math.PI * 3 / 4),764 Math.cos(Math.PI * 3 / 4),765 100, 50 ] }]);766 }, property + ': matrix');767 test(function(t) {768 var idlName = propertyToIDL(property);769 var target = createTestElement(t, setup);770 var animation =771 target.animate({ [idlName]: [ 'rotate3d(1, 1, 0, 0deg)',772 'rotate3d(1, 1, 0, 90deg)'] },773 1000);774 testAnimationSampleMatrices(animation, idlName,775 [{ time: 500, expected: rotate3dToMatrix(1, 1, 0, Math.PI / 4) }]);776 }, property + ': rotate3d');777 test(function(t) {778 var idlName = propertyToIDL(property);779 var target = createTestElement(t, setup);780 // To calculate expected matrices easily, generate input matrices from781 // rotate3d.782 var from = rotate3dToMatrix3d(1, 1, 0, Math.PI / 4);783 var to = rotate3dToMatrix3d(1, 1, 0, Math.PI * 3 / 4);784 var animation =785 target.animate({ [idlName]: [ from, to ] }, 1000);786 testAnimationSampleMatrices(animation, idlName,787 [{ time: 500, expected: rotate3dToMatrix(1, 1, 0, Math.PI * 2 / 4) }]);788 }, property + ': matrix3d');789 // This test aims for forcing the two mismatched transforms to be790 // decomposed into matrix3d before interpolation. Therefore, we not only791 // test the interpolation, but also test the 3D matrix decomposition.792 test(function(t) {793 var idlName = propertyToIDL(property);794 var target = createTestElement(t, setup);795 var animation =796 target.animate({ [idlName]: ['scale(0.3)',797 // scale(0.5) translateZ(1px)798 'matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1)'] },799 1000);800 testAnimationSampleMatrices(animation, idlName,801 [{ time: 500, expected: [ 0.4, 0, 0, 0,802 0, 0.4, 0, 0,803 0, 0, 1, 0,804 0, 0, 0.5, 1] }]);805 }, property + ': mismatched 3D transforms');806 test(function(t) {807 var idlName = propertyToIDL(property);808 var target = createTestElement(t, setup);809 var animation =810 target.animate({ [idlName]: ['rotateY(60deg)', 'none' ] }, 1000);811 testAnimationSampleMatrices(animation, idlName,812 // rotateY(30deg) == rotate3D(0, 1, 0, 30deg)813 [{ time: 500, expected: rotate3dToMatrix(0, 1, 0, Math.PI / 6) }]);814 }, property + ': rotateY');815 },816 testAddition: function(property, setup) {817 test(function(t) {818 var idlName = propertyToIDL(property);819 var target = createTestElement(t, setup);820 target.style[idlName] = 'translateX(100px)';821 var animation = target.animate({ [idlName]: ['translateX(-200px)',822 'translateX(500px)'] },823 { duration: 1000, fill: 'both',824 composite: 'add' });825 testAnimationSampleMatrices(animation, idlName,826 [ { time: 0, expected: [ 1, 0, 0, 1, -100, 0 ] },827 { time: 1000, expected: [ 1, 0, 0, 1, 600, 0 ] }]);828 }, property + ': translate');829 test(function(t) {830 var idlName = propertyToIDL(property);831 var target = createTestElement(t, setup);832 target.style[idlName] = 'rotate(45deg)';833 var animation = target.animate({ [idlName]: ['rotate(-90deg)',834 'rotate(90deg)'] },835 { duration: 1000, fill: 'both',836 composite: 'add' });837 testAnimationSampleMatrices(animation, idlName,838 [{ time: 0, expected: [ Math.cos(-Math.PI / 4),839 Math.sin(-Math.PI / 4),840 -Math.sin(-Math.PI / 4),841 Math.cos(-Math.PI / 4),842 0, 0] },843 { time: 1000, expected: [ Math.cos(Math.PI * 3 / 4),844 Math.sin(Math.PI * 3 / 4),845 -Math.sin(Math.PI * 3 / 4),846 Math.cos(Math.PI * 3 / 4),847 0, 0] }]);848 }, property + ': rotate');849 test(function(t) {850 var idlName = propertyToIDL(property);851 var target = createTestElement(t, setup);852 target.style[idlName] = 'scale(2)';853 var animation = target.animate({ [idlName]: ['scale(-3)', 'scale(5)'] },854 { duration: 1000, fill: 'both',855 composite: 'add' });856 testAnimationSampleMatrices(animation, idlName,857 [{ time: 0, expected: [ -6, 0, 0, -6, 0, 0 ] }, // scale(-3) scale(2)858 { time: 1000, expected: [ 10, 0, 0, 10, 0, 0 ] }]); // scale(5) scale(2)859 }, property + ': scale');860 test(function(t) {861 var idlName = propertyToIDL(property);862 var target = createTestElement(t, setup);863 // matrix(1, tan(10deg), tan(10deg), 1)864 target.style[idlName] = 'skew(10deg, 10deg)';865 var animation = // matrix(1, tan(20deg), tan(-30deg), 1)866 target.animate({ [idlName]: ['skew(-30deg, 20deg)',867 // matrix(1, tan(-30deg), tan(20deg), 1)868 'skew(20deg, -30deg)'] },869 { duration: 1000, fill: 'both', composite: 'add' });870 // matrix at 0%.871 // [ 1 tan(10deg) ] [ 1 tan(-30deg) ]872 // [ tan(10deg) 1 ] [ tan(20deg) 1 ] =873 //874 // [ 1 + tan(10deg) * tan(20deg) tan(-30deg) + tan(10deg) ]875 // [ tan(10deg) + tan(20deg) tan(10deg) * tan(-30deg) + 1 ]876 // matrix at 100%.877 // [ 1 tan(10deg) ] [ 1 tan(20deg) ]878 // [ tan(10deg) 1 ] [ tan(-30deg) 1 ] =879 //880 // [ 1 + tan(10deg) * tan(-30deg) tan(20deg) + tan(10deg) ]881 // [ tan(10deg) + tan(-30deg) tan(10deg) * tan(20deg) + 1 ]882 testAnimationSampleMatrices(animation, idlName,883 [{ time: 0, expected: [ 1 + Math.tan(Math.PI/18) * Math.tan(Math.PI/9),884 Math.tan(Math.PI/18) + Math.tan(Math.PI/9),885 Math.tan(-Math.PI/6) + Math.tan(Math.PI/18),886 1 + Math.tan(Math.PI/18) * Math.tan(-Math.PI/6),887 0, 0] },888 { time: 1000, expected: [ 1 + Math.tan(Math.PI/18) * Math.tan(-Math.PI/6),889 Math.tan(Math.PI/18) + Math.tan(-Math.PI/6),890 Math.tan(Math.PI/9) + Math.tan(Math.PI/18),891 1 + Math.tan(Math.PI/18) * Math.tan(Math.PI/9),892 0, 0] }]);893 }, property + ': skew');894 test(function(t) {895 var idlName = propertyToIDL(property);896 var target = createTestElement(t, setup);897 // matrix(1, 0, 0, 1, 100, 0)898 target.style[idlName] = 'translateX(100px)';899 var animation = // matrix(0, 1, -1, 0, 0, 0)900 target.animate({ [idlName]: ['rotate(90deg)',901 // matrix(-1, 0, 0, -1, 0, 0)902 'rotate(180deg)'] },903 { duration: 1000, fill: 'both', composite: 'add' });904 testAnimationSampleMatrices(animation, idlName,905 [{ time: 0, expected: [ 0, 1, -1, 0, 100, 0 ] },906 { time: 1000, expected: [ -1, 0, 0, -1, 100, 0 ] }]);907 }, property + ': rotate on translate');908 test(function(t) {909 var idlName = propertyToIDL(property);910 var target = createTestElement(t, setup);911 // matrix(0, 1, -1, 0, 0, 0)912 target.style[idlName] = 'rotate(90deg)';913 var animation = // matrix(1, 0, 0, 1, 100, 0)914 target.animate({ [idlName]: ['translateX(100px)',915 // matrix(1, 0, 0, 1, 200, 0)916 'translateX(200px)'] },917 { duration: 1000, fill: 'both', composite: 'add' });918 testAnimationSampleMatrices(animation, idlName,919 [{ time: 0, expected: [ 0, 1, -1, 0, 0, 100 ] },920 { time: 1000, expected: [ 0, 1, -1, 0, 0, 200 ] }]);921 }, property + ': translate on rotate');922 test(function(t) {923 var idlName = propertyToIDL(property);924 var target = createTestElement(t, setup);925 target.style[idlName] = 'matrix(0, 1, -1, 0, 0, 0)';926 var animation = // Same matrices as above.927 target.animate({ [idlName]: [ 'matrix(1, 0, 0, 1, 100, 0)',928 'matrix(1, 0, 0, 1, 200, 0)' ] },929 { duration: 1000, fill: 'both', composite: 'add' });930 testAnimationSampleMatrices(animation, idlName,931 [{ time: 0, expected: [ 0, 1, -1, 0, 0, 100 ] },932 { time: 1000, expected: [ 0, 1, -1, 0, 0, 200 ] }]);933 }, property + ': matrix');934 test(function(t) {935 var idlName = propertyToIDL(property);936 var target = createTestElement(t, setup);937 target.style[idlName] = 'rotate3d(1, 1, 0, 45deg)';938 var animation =939 target.animate({ [idlName]: [ 'rotate3d(1, 1, 0, -90deg)',940 'rotate3d(1, 1, 0, 90deg)'] },941 { duration: 1000, fill: 'both', composite: 'add' });942 testAnimationSampleMatrices(animation, idlName,943 [{ time: 0, expected: rotate3dToMatrix(1, 1, 0, -Math.PI / 4) },944 { time: 1000, expected: rotate3dToMatrix(1, 1, 0, 3 * Math.PI / 4) }]);945 }, property + ': rotate3d');946 test(function(t) {947 var idlName = propertyToIDL(property);948 var target = createTestElement(t, setup);949 // To calculate expected matrices easily, generate input matrices from950 // rotate3d.951 target.style[idlName] = rotate3dToMatrix3d(1, 1, 0, Math.PI / 4);952 var from = rotate3dToMatrix3d(1, 1, 0, -Math.PI / 2);953 var to = rotate3dToMatrix3d(1, 1, 0, Math.PI / 2);954 var animation =955 target.animate({ [idlName]: [ from, to ] },956 { duration: 1000, fill: 'both', composite: 'add' });957 testAnimationSampleMatrices(animation, idlName,958 [{ time: 0, expected: rotate3dToMatrix(1, 1, 0, -Math.PI / 4) },959 { time: 1000, expected: rotate3dToMatrix(1, 1, 0, 3 * Math.PI / 4) }]);960 }, property + ': matrix3d');961 },962 testAccumulation: function(property, setup) {963 test(function(t) {964 var idlName = propertyToIDL(property);965 var target = createTestElement(t, setup);966 target.style[idlName] = 'translateX(100px)';967 var animation = target.animate({ [idlName]: ['translateX(-200px)',968 'translateX(500px)'] },969 { duration: 1000, fill: 'both',970 composite: 'accumulate' });971 testAnimationSampleMatrices(animation, idlName,972 [ { time: 0, expected: [ 1, 0, 0, 1, -100, 0 ] },973 { time: 1000, expected: [ 1, 0, 0, 1, 600, 0 ] }]);974 }, property + ': translate');975 test(function(t) {976 var idlName = propertyToIDL(property);977 var target = createTestElement(t, setup);978 target.style[idlName] = 'rotate(45deg)';979 var animation = target.animate({ [idlName]: ['rotate(-90deg)',980 'rotate(90deg)'] },981 { duration: 1000, fill: 'both',982 composite: 'accumulate' });983 testAnimationSampleMatrices(animation, idlName,984 [{ time: 0, expected: [ Math.cos(-Math.PI / 4),985 Math.sin(-Math.PI / 4),986 -Math.sin(-Math.PI / 4),987 Math.cos(-Math.PI / 4),988 0, 0] },989 { time: 1000, expected: [ Math.cos(Math.PI * 3 / 4),990 Math.sin(Math.PI * 3 / 4),991 -Math.sin(Math.PI * 3 / 4),992 Math.cos(Math.PI * 3 / 4),993 0, 0] }]);994 }, property + ': rotate');995 test(function(t) {996 var idlName = propertyToIDL(property);997 var target = createTestElement(t, setup);998 target.style[idlName] = 'scale(2)';999 var animation = target.animate({ [idlName]: ['scale(-3)', 'scale(5)'] },1000 { duration: 1000, fill: 'both',1001 composite: 'accumulate' });1002 testAnimationSampleMatrices(animation, idlName,1003 // scale((2 - 1) + (-3 - 1) + 1)1004 [{ time: 0, expected: [ -2, 0, 0, -2, 0, 0 ] },1005 // scale((2 - 1) + (5 - 1) + 1)1006 { time: 1000, expected: [ 6, 0, 0, 6, 0, 0 ] }]);1007 }, property + ': scale');1008 test(function(t) {1009 var idlName = propertyToIDL(property);1010 var target = createTestElement(t, setup);1011 // matrix(1, tan(10deg), tan(10deg), 1)1012 target.style[idlName] = 'skew(10deg, 10deg)';1013 var animation = // matrix(1, tan(20deg), tan(-30deg), 1)1014 target.animate({ [idlName]: ['skew(-30deg, 20deg)',1015 // matrix(1, tan(-30deg), tan(20deg), 1)1016 'skew(20deg, -30deg)'] },1017 { duration: 1000, fill: 'both', composite: 'accumulate' });1018 testAnimationSampleMatrices(animation, idlName,1019 [{ time: 0, expected: [ 1, Math.tan(Math.PI/6),1020 Math.tan(-Math.PI/9), 1,1021 0, 0] },1022 { time: 1000, expected: [ 1, Math.tan(-Math.PI/9),1023 Math.tan(Math.PI/6), 1,1024 0, 0] }]);1025 }, property + ': skew');1026 test(function(t) {1027 var idlName = propertyToIDL(property);1028 var target = createTestElement(t, setup);1029 // matrix(1, 0, 0, 1, 100, 0)1030 target.style[idlName] = 'translateX(100px)';1031 var animation = // matrix(0, 1, -1, 0, 0, 0)1032 target.animate({ [idlName]: ['rotate(90deg)',1033 // matrix(-1, 0, 0, -1, 0, 0)1034 'rotate(180deg)'] },1035 { duration: 1000, fill: 'both', composite: 'accumulate' });1036 testAnimationSampleMatrices(animation, idlName,1037 [{ time: 0, expected: [ 0, 1, -1, 0, 100, 0 ] },1038 { time: 1000, expected: [ -1, 0, 0, -1, 100, 0 ] }]);1039 }, property + ': rotate on translate');1040 test(function(t) {1041 var idlName = propertyToIDL(property);1042 var target = createTestElement(t, setup);1043 // matrix(0, 1, -1, 0, 0, 0)1044 target.style[idlName] = 'rotate(90deg)';1045 var animation = // matrix(1, 0, 0, 1, 100, 0)1046 target.animate({ [idlName]: ['translateX(100px)',1047 // matrix(1, 0, 0, 1, 200, 0)1048 'translateX(200px)'] },1049 { duration: 1000, fill: 'both', composite: 'accumulate' });1050 testAnimationSampleMatrices(animation, idlName,1051 [{ time: 0, expected: [ 0, 1, -1, 0, 100, 0 ] },1052 { time: 1000, expected: [ 0, 1, -1, 0, 200, 0 ] }]);1053 }, property + ': translate on rotate');1054 test(function(t) {1055 var idlName = propertyToIDL(property);1056 var target = createTestElement(t, setup);1057 target.style[idlName] = 'matrix(0, 1, -1, 0, 0, 0)';1058 var animation = // Same matrices as above.1059 target.animate({ [idlName]: [ 'matrix(1, 0, 0, 1, 100, 0)',1060 'matrix(1, 0, 0, 1, 200, 0)' ] },1061 { duration: 1000, fill: 'both', composite: 'accumulate' });1062 testAnimationSampleMatrices(animation, idlName,1063 [{ time: 0, expected: [ 0, 1, -1, 0, 100, 0 ] },1064 { time: 1000, expected: [ 0, 1, -1, 0, 200, 0 ] }]);1065 }, property + ': matrix');1066 test(function(t) {1067 var idlName = propertyToIDL(property);1068 var target = createTestElement(t, setup);1069 target.style[idlName] = 'rotate3d(1, 1, 0, 45deg)';1070 var animation =1071 target.animate({ [idlName]: [ 'rotate3d(1, 1, 0, -90deg)',1072 'rotate3d(1, 1, 0, 90deg)'] },1073 { duration: 1000, fill: 'both', composite: 'accumulate' });1074 testAnimationSampleMatrices(animation, idlName,1075 [{ time: 0, expected: rotate3dToMatrix(1, 1, 0, -Math.PI / 4) },1076 { time: 1000, expected: rotate3dToMatrix(1, 1, 0, 3 * Math.PI / 4) }]);1077 }, property + ': rotate3d');1078 test(function(t) {1079 var idlName = propertyToIDL(property);1080 var target = createTestElement(t, setup);1081 // To calculate expected matrices easily, generate input matrices from1082 // rotate3d.1083 target.style[idlName] = rotate3dToMatrix3d(1, 1, 0, Math.PI / 4);1084 var from = rotate3dToMatrix3d(1, 1, 0, -Math.PI / 2);1085 var to = rotate3dToMatrix3d(1, 1, 0, Math.PI / 2);1086 var animation =1087 target.animate({ [idlName]: [ from, to ] },1088 { duration: 1000, fill: 'both', composite: 'accumulate' });1089 testAnimationSampleMatrices(animation, idlName,1090 [{ time: 0, expected: rotate3dToMatrix(1, 1, 0, -Math.PI / 4) },1091 { time: 1000, expected: rotate3dToMatrix(1, 1, 0, 3 * Math.PI / 4) }]);1092 }, property + ': matrix3d');1093 test(function(t) {1094 var idlName = propertyToIDL(property);1095 var target = createTestElement(t, setup);1096 var matrixArray = [ 1, 0, 0, 0,1097 0, 1, 0, 0,1098 0, 0, 1, 0,1099 0, 0, 1, 1 ];1100 target.style[idlName] = createMatrixFromArray(matrixArray);1101 var animation =1102 target.animate({ [idlName]: [ 'none', 'none' ] },1103 { duration: 1000, fill: 'both', composite: 'accumulate' });1104 testAnimationSampleMatrices(animation, idlName,1105 [{ time: 0, expected: matrixArray },1106 { time: 1000, expected: matrixArray }]);1107 }, property + ': none');1108 },1109};1110const filterListType = {1111 testInterpolation: function(property, setup) {1112 test(function(t) {1113 var idlName = propertyToIDL(property);1114 var target = createTestElement(t, setup);1115 var animation = target.animate({ [idlName]:1116 ['blur(10px)', 'blur(50px)'] },1117 1000);1118 testAnimationSamples(animation, idlName,1119 [{ time: 500, expected: 'blur(30px)' }]);1120 }, property + ': blur function' );1121 test(function(t) {1122 var idlName = propertyToIDL(property);1123 var target = createTestElement(t, setup);1124 var animation = target.animate({ [idlName]: ['hue-rotate(0deg)',1125 'hue-rotate(100deg)'] },1126 1000);1127 testAnimationSamples(animation, idlName,1128 [{ time: 500, expected: 'hue-rotate(50deg)' }]);1129 }, property + ': hue-rotate function with same unit(deg)' );1130 test(function(t) {1131 var idlName = propertyToIDL(property);1132 var target = createTestElement(t, setup);1133 var animation = target.animate({ [idlName]: ['hue-rotate(10deg)',1134 'hue-rotate(100rad)'] },1135 1000);1136 // 10deg = 0.1745rad.1137 testAnimationSamples(animation, idlName,1138 [{ time: 500, expected: 'hue-rotate(50.0873rad)' }]);1139 }, property + ': hue-rotate function with different unit(deg -> rad)');1140 test(function(t) {1141 var idlName = propertyToIDL(property);1142 var target = createTestElement(t, setup);1143 var animation = target.animate(1144 { [idlName]:1145 ['drop-shadow(10px 10px 10px rgba(255, 0, 0, 0.4))',1146 'drop-shadow(50px 50px 50px rgba(0, 0, 255, 0.8))'] },1147 1000);1148 testAnimationSamples(1149 animation, idlName,1150 [{ time: 500,1151 expected: 'drop-shadow(rgba(85, 0, 170, 0.6) 30px 30px 30px)' }]);1152 }, property + ': drop-shadow function' );1153 test(function(t) {1154 var idlName = propertyToIDL(property);1155 var target = createTestElement(t, setup);1156 var animation = target.animate(1157 { [idlName]:1158 ['brightness(0.1) contrast(0.1) grayscale(0.1) invert(0.1) ' +1159 'opacity(0.1) saturate(0.1) sepia(0.1)',1160 'brightness(0.5) contrast(0.5) grayscale(0.5) invert(0.5) ' +1161 'opacity(0.5) saturate(0.5) sepia(0.5)'] },1162 1000);1163 testAnimationSamples(animation, idlName,1164 [{ time: 500,1165 expected: 'brightness(0.3) contrast(0.3) grayscale(0.3) ' +1166 'invert(0.3) opacity(0.3) saturate(0.3) sepia(0.3)' }]);1167 }, property + ': percentage or numeric-specifiable functions' +1168 '(number value)');1169 test(function(t) {1170 var idlName = propertyToIDL(property);1171 var target = createTestElement(t, setup);1172 var animation = target.animate(1173 { [idlName]:1174 ['brightness(10%) contrast(10%) grayscale(10%) invert(10%) ' +1175 'opacity(10%) saturate(10%) sepia(10%)',1176 'brightness(50%) contrast(50%) grayscale(50%) invert(50%) ' +1177 'opacity(50%) saturate(50%) sepia(50%)'] },1178 1000);1179 testAnimationSamples(animation, idlName,1180 [{ time: 500,1181 expected: 'brightness(0.3) contrast(0.3) grayscale(0.3) ' +1182 'invert(0.3) opacity(0.3) saturate(0.3) sepia(0.3)' }]);1183 }, property + ': percentage or numeric-specifiable functions' +1184 '(percentage value)');1185 test(function(t) {1186 var idlName = propertyToIDL(property);1187 var target = createTestElement(t, setup);1188 var animation = target.animate(1189 { [idlName]:1190 // To make missing filter-function-lists, specified the grayscale.1191 ['grayscale(0)',1192 'grayscale(1) brightness(0) contrast(0) opacity(0) saturate(0)' ]},1193 1000);1194 testAnimationSamples(animation, idlName,1195 [{ time: 500,1196 expected: 'grayscale(0.5) brightness(0.5) contrast(0.5) ' +1197 'opacity(0.5) saturate(0.5)' }]);1198 }, property + ': interpolate different length of filter-function-list ' +1199 ' with function which lacuna value is 1');1200 test(function(t) {1201 var idlName = propertyToIDL(property);1202 var target = createTestElement(t, setup);1203 var animation = target.animate(1204 { [idlName]:1205 // To make missing filter-function-lists, specified the opacity.1206 ['opoacity(1)',1207 'opacity(0) grayscale(1) invert(1) sepia(1) blur(10px)'] },1208 1000);1209 testAnimationSamples(animation, idlName,1210 [{ time: 500,1211 expected:1212 'opacity(0.5) grayscale(0.5) invert(0.5) sepia(0.5) blur(5px)' }]);1213 }, property + ': interpolate different length of filter-function-list ' +1214 ' with function which lacuna value is 0');1215 test(function(t) {1216 var idlName = propertyToIDL(property);1217 var target = createTestElement(t, setup);1218 target.style.color = "rgba(255, 0, 0, 0.4)";1219 var animation = target.animate(1220 { [idlName]:1221 ['blur(0px)',1222 'blur(10px) drop-shadow(10px 10px 10px rgba(0, 0, 255, 0.8))'] },1223 1000);1224 testAnimationSamples(animation, idlName,1225 [{ time: 500,1226 // The lacuna value of drop-shadow's color is taken from1227 // the color property.1228 expected: 'blur(5px) drop-shadow(rgba(85, 0, 170, 0.6) 5px 5px 5px' }]);1229 }, property + ': interpolate different length of filter-function-list ' +1230 'with drop-shadow function');1231 test(function(t) {1232 var idlName = propertyToIDL(property);1233 var target = createTestElement(t, setup);1234 var animation = target.animate({ [idlName]: ['none', 'blur(10px)'] },1235 1000);1236 testAnimationSamples(animation, idlName,1237 [{ time: 500, expected: 'blur(5px)' }]);1238 }, property + ': interpolate from none');1239 test(function(t) {1240 var idlName = propertyToIDL(property);1241 var target = createTestElement(t, setup);1242 var animation = target.animate(1243 { [idlName]:1244 ['blur(0px) url(\"#f1\")',1245 'blur(10px) url(\"#f2\")']},1246 1000);1247 testAnimationSamples(animation, idlName,1248 [{ time: 499, expected: 'blur(0px) url(\"#f1\")' },1249 { time: 500, expected: 'blur(10px) url(\"#f2\")' }]);1250 }, property + ': url function (interpoalte as discrete)');1251 },1252 testAddition: function(property, setup) {1253 test(function(t) {1254 var idlName = propertyToIDL(property);1255 var target = createTestElement(t, setup);1256 target.style[idlName] = 'blur(10px)';1257 var animation = target.animate({ [idlName]: ['blur(20px)',1258 'blur(50px)'] },1259 { duration: 1000, composite: 'add' });1260 testAnimationSamples(animation, idlName,1261 [ { time: 0, expected: 'blur(10px) blur(20px)' }]);1262 }, property + ': blur on blur');1263 test(function(t) {1264 var idlName = propertyToIDL(property);1265 var target = createTestElement(t, setup);1266 target.style[idlName] = 'blur(10px)';1267 var animation = target.animate({ [idlName]: ['brightness(80%)',1268 'brightness(40%)'] },1269 { duration: 1000, composite: 'add' });1270 testAnimationSamples(animation, idlName,1271 [ { time: 0, expected: 'blur(10px) brightness(0.8)' }]);1272 }, property + ': different filter functions');1273 },1274 testAccumulation: function(property, setup) {1275 test(function(t) {1276 var idlName = propertyToIDL(property);1277 var target = createTestElement(t, setup);1278 target.style[idlName] = 'blur(10px) brightness(0.3)';1279 var animation = target.animate({ [idlName]: ['blur(20px) brightness(0.1)',1280 'blur(20px) brightness(0.1)'] },1281 { duration: 1000, composite: 'accumulate' });1282 // brightness(0.1) onto brightness(0.3) means1283 // brightness((0.1 - 1.0) + (0.3 - 1.0) + 1.0). The result of this formula1284 // is brightness(-0.6) that means brightness(0.0).1285 testAnimationSamples(animation, idlName,1286 [ { time: 0, expected: 'blur(30px) brightness(0)' }]);1287 }, property + ': same ordered filter functions');1288 test(function(t) {1289 var idlName = propertyToIDL(property);1290 var target = createTestElement(t, setup);1291 target.style[idlName] = 'blur(10px) brightness(1.3)';1292 var animation = target.animate({ [idlName]: ['brightness(1.2) blur(20px)',1293 'brightness(1.2) blur(20px)'] },1294 { duration: 1000, composite: 'accumulate' });1295 // Mismatched ordered functions can't be accumulated.1296 testAnimationSamples(animation, idlName,1297 [ { time: 0, expected: 'brightness(1.2) blur(20px)' }]);1298 }, property + ': mismatched ordered filter functions');1299 },1300};1301const textShadowListType = {1302 testInterpolation: function(property, setup) {1303 test(function(t) {1304 var idlName = propertyToIDL(property);1305 var target = createTestElement(t, setup);1306 var animation =1307 target.animate({ [idlName]: [ 'none',1308 'rgb(100, 100, 100) 10px 10px 10px'] },1309 { duration: 1000, fill: 'both' });1310 testAnimationSamples(animation, idlName,1311 // Premultiplied1312 [{ time: 500, expected: 'rgba(100, 100, 100, 0.5) 5px 5px 5px' }]);1313 }, property + ': from none to other');1314 test(function(t) {1315 var idlName = propertyToIDL(property);1316 var target = createTestElement(t, setup);1317 var animation =1318 target.animate({ [idlName]: [ 'rgb(100, 100, 100) 10px 10px 10px',1319 'none' ] },1320 { duration: 1000, fill: 'both' });1321 testAnimationSamples(animation, idlName,1322 // Premultiplied1323 [{ time: 500, expected: 'rgba(100, 100, 100, 0.5) 5px 5px 5px' }]);1324 }, property + ': from other to none');1325 test(function(t) {1326 var idlName = propertyToIDL(property);1327 var target = createTestElement(t, setup);1328 var animation =1329 target.animate({ [idlName]: [ 'rgb(0, 0, 0) 0px 0px 0px',1330 'rgb(100, 100, 100) 10px 10px 10px'] },1331 { duration: 1000, fill: 'both' });1332 testAnimationSamples(animation, idlName,1333 [{ time: 500, expected: 'rgb(50, 50, 50) 5px 5px 5px' }]);1334 }, property + ': single shadow');1335 test(function(t) {1336 var idlName = propertyToIDL(property);1337 var target = createTestElement(t, setup);1338 var animation =1339 target.animate({ [idlName]: [ 'rgb(0, 0, 0) 0px 0px 0px, '1340 + 'rgb(200, 200, 200) 20px 20px 20px',1341 'rgb(100, 100, 100) 10px 10px 10px, '1342 + 'rgb(100, 100, 100) 10px 10px 10px'] },1343 { duration: 1000, fill: 'both' });1344 testAnimationSamples(animation, idlName,1345 [{ time: 500, expected: 'rgb(50, 50, 50) 5px 5px 5px, '1346 + 'rgb(150, 150, 150) 15px 15px 15px' }]);1347 }, property + ': shadow list');1348 test(function(t) {1349 var idlName = propertyToIDL(property);1350 var target = createTestElement(t, setup);1351 var animation =1352 target.animate({ [idlName]: [ 'rgb(200, 200, 200) 20px 20px 20px',1353 'rgb(100, 100, 100) 10px 10px 10px, '1354 + 'rgb(100, 100, 100) 10px 10px 10px'] },1355 { duration: 1000, fill: 'both' });1356 testAnimationSamples(animation, idlName,1357 [{ time: 500, expected: 'rgb(150, 150, 150) 15px 15px 15px, '1358 + 'rgba(100, 100, 100, 0.5) 5px 5px 5px' }]);1359 }, property + ': mismatched list length (from longer to shorter)');1360 test(function(t) {1361 var idlName = propertyToIDL(property);1362 var target = createTestElement(t, setup);1363 var animation =1364 target.animate({ [idlName]: [ 'rgb(100, 100, 100) 10px 10px 10px, '1365 + 'rgb(100, 100, 100) 10px 10px 10px',1366 'rgb(200, 200, 200) 20px 20px 20px'] },1367 { duration: 1000, fill: 'both' });1368 testAnimationSamples(animation, idlName,1369 [{ time: 500, expected: 'rgb(150, 150, 150) 15px 15px 15px, '1370 + 'rgba(100, 100, 100, 0.5) 5px 5px 5px' }]);1371 }, property + ': mismatched list length (from shorter to longer)');1372 },1373 testAddition: function(property, setup) {1374 test(function(t) {1375 var idlName = propertyToIDL(property);1376 var target = createTestElement(t, setup);1377 target.style[idlName] = 'rgb(0, 0, 0) 0px 0px 0px';1378 var animation =1379 target.animate({ [idlName]: [ 'rgb(120, 120, 120) 10px 10px 10px',1380 'rgb(120, 120, 120) 10px 10px 10px'] },1381 { duration: 1000, composite: 'add' });1382 testAnimationSamples(animation, idlName,1383 [ { time: 0, expected: 'rgb(0, 0, 0) 0px 0px 0px, ' +1384 'rgb(120, 120, 120) 10px 10px 10px' }]);1385 }, property + ': shadow');1386 },1387 testAccumulation: function(property, setup) {1388 test(function(t) {1389 var idlName = propertyToIDL(property);1390 var target = createTestElement(t, setup);1391 target.style[idlName] = 'rgb(120, 120, 120) 10px 10px 10px';1392 var animation =1393 target.animate({ [idlName]: [ 'rgb(120, 120, 120) 10px 10px 10px',1394 'rgb(120, 120, 120) 10px 10px 10px'] },1395 { duration: 1000, composite: 'accumulate' });1396 testAnimationSamples(animation, idlName,1397 [ { time: 0, expected: 'rgb(240, 240, 240) 20px 20px 20px' }]);1398 }, property + ': shadow');1399 },1400};1401const boxShadowListType = {1402 testInterpolation: function(property, setup) {1403 test(function(t) {1404 var idlName = propertyToIDL(property);1405 var target = createTestElement(t, setup);1406 var animation =1407 target.animate({ [idlName]: [ 'none',1408 'rgb(100, 100, 100) 10px 10px 10px 0px'] },1409 { duration: 1000, fill: 'both' });1410 testAnimationSamples(animation, idlName,1411 // Premultiplied1412 [{ time: 500, expected: 'rgba(100, 100, 100, 0.5) 5px 5px 5px 0px' }]);1413 }, property + ': from none to other');1414 test(function(t) {1415 var idlName = propertyToIDL(property);1416 var target = createTestElement(t, setup);1417 var animation =1418 target.animate({ [idlName]: [ 'rgb(100, 100, 100) 10px 10px 10px 0px',1419 'none' ] },1420 { duration: 1000, fill: 'both' });1421 testAnimationSamples(animation, idlName,1422 // Premultiplied1423 [{ time: 500, expected: 'rgba(100, 100, 100, 0.5) 5px 5px 5px 0px' }]);1424 }, property + ': from other to none');1425 test(function(t) {1426 var idlName = propertyToIDL(property);1427 var target = createTestElement(t, setup);1428 var animation =1429 target.animate({ [idlName]: [ 'rgb(0, 0, 0) 0px 0px 0px 0px',1430 'rgb(100, 100, 100) 10px 10px 10px 0px'] },1431 { duration: 1000, fill: 'both' });1432 testAnimationSamples(animation, idlName,1433 [{ time: 500, expected: 'rgb(50, 50, 50) 5px 5px 5px 0px' }]);1434 }, property + ': single shadow');1435 test(function(t) {1436 var idlName = propertyToIDL(property);1437 var target = createTestElement(t, setup);1438 var animation =1439 target.animate({ [idlName]: [ 'rgb(0, 0, 0) 0px 0px 0px 0px, '1440 + 'rgb(200, 200, 200) 20px 20px 20px 20px',1441 'rgb(100, 100, 100) 10px 10px 10px 0px, '1442 + 'rgb(100, 100, 100) 10px 10px 10px 0px'] },1443 { duration: 1000, fill: 'both' });1444 testAnimationSamples(animation, idlName,1445 [{ time: 500, expected: 'rgb(50, 50, 50) 5px 5px 5px 0px, '1446 + 'rgb(150, 150, 150) 15px 15px 15px 10px' }]);1447 }, property + ': shadow list');1448 test(function(t) {1449 var idlName = propertyToIDL(property);1450 var target = createTestElement(t, setup);1451 var animation =1452 target.animate({ [idlName]: [ 'rgb(200, 200, 200) 20px 20px 20px 20px',1453 'rgb(100, 100, 100) 10px 10px 10px 0px, '1454 + 'rgb(100, 100, 100) 10px 10px 10px 0px'] },1455 { duration: 1000, fill: 'both' });1456 testAnimationSamples(animation, idlName,1457 [{ time: 500, expected: 'rgb(150, 150, 150) 15px 15px 15px 10px, '1458 + 'rgba(100, 100, 100, 0.5) 5px 5px 5px 0px' }]);1459 }, property + ': mismatched list length (from shorter to longer)');1460 test(function(t) {1461 var idlName = propertyToIDL(property);1462 var target = createTestElement(t, setup);1463 var animation =1464 target.animate({ [idlName]: [ 'rgb(100, 100, 100) 10px 10px 10px 0px, '1465 + 'rgb(100, 100, 100) 10px 10px 10px 0px',1466 'rgb(200, 200, 200) 20px 20px 20px 20px']},1467 { duration: 1000, fill: 'both' });1468 testAnimationSamples(animation, idlName,1469 [{ time: 500, expected: 'rgb(150, 150, 150) 15px 15px 15px 10px, '1470 + 'rgba(100, 100, 100, 0.5) 5px 5px 5px 0px' }]);1471 }, property + ': mismatched list length (from longer to shorter)');1472 },1473 testAddition: function(property, setup) {1474 test(function(t) {1475 var idlName = propertyToIDL(property);1476 var target = createTestElement(t, setup);1477 target.style[idlName] = 'rgb(0, 0, 0) 0px 0px 0px 0px';1478 var animation =1479 target.animate({ [idlName]: [ 'rgb(120, 120, 120) 10px 10px 10px 0px',1480 'rgb(120, 120, 120) 10px 10px 10px 0px'] },1481 { duration: 1000, composite: 'add' });1482 testAnimationSamples(animation, idlName,1483 [ { time: 0, expected: 'rgb(0, 0, 0) 0px 0px 0px 0px, ' +1484 'rgb(120, 120, 120) 10px 10px 10px 0px' }]);1485 }, property + ': shadow');1486 },1487 testAccumulation: function(property, setup) {1488 test(function(t) {1489 var idlName = propertyToIDL(property);1490 var target = createTestElement(t, setup);1491 target.style[idlName] = 'rgb(120, 120, 120) 10px 10px 10px 10px';1492 var animation =1493 target.animate({ [idlName]: [ 'rgb(120, 120, 120) 10px 10px 10px 10px',1494 'rgb(120, 120, 120) 10px 10px 10px 10px'] },1495 { duration: 1000, composite: 'accumulate' });1496 testAnimationSamples(animation, idlName,1497 [ { time: 0, expected: 'rgb(240, 240, 240) 20px 20px 20px 20px' }]);1498 }, property + ': shadow');1499 },1500};1501const positionType = {1502 testInterpolation: function(property, setup) {1503 lengthPairType.testInterpolation(property, setup);1504 test(function(t) {1505 var idlName = propertyToIDL(property);1506 var target = createTestElement(t, setup);1507 var animation = target.animate({ [idlName]: ['10% 10%', '50% 50%'] },1508 { duration: 1000, fill: 'both' });1509 testAnimationSamples(1510 animation, idlName,1511 [{ time: 500, expected: calcFromPercentage(idlName, '30% 30%') }]);1512 }, property + ' supports animating as a position of percent');1513 },1514 testAdditionOrAccumulation: function(property, setup, composite) {1515 lengthPairType.testAddition(property, setup);1516 test(function(t) {1517 var idlName = propertyToIDL(property);1518 var target = createTestElement(t, setup);1519 target.style[idlName] = '60% 60%';1520 var animation = target.animate({ [idlName]: ['70% 70%', '100% 100%'] },1521 { duration: 1000, composite: composite });1522 testAnimationSamples(1523 animation, idlName,1524 [{ time: 0, expected: calcFromPercentage(idlName, '130% 130%') }]);1525 }, property + ': position of percentage');1526 },1527 testAddition: function(property, setup) {1528 this.testAdditionOrAccumulation(property, setup, 'add');1529 },1530 testAccumulation: function(property, setup) {1531 this.testAdditionOrAccumulation(property, setup, 'accumulate');1532 },1533};1534const rectType = {1535 testInterpolation: function(property, setup) {1536 test(function(t) {1537 var idlName = propertyToIDL(property);1538 var target = createTestElement(t, setup);1539 var animation = target.animate({ [idlName]:1540 ['rect(10px, 10px, 10px, 10px)',1541 'rect(50px, 50px, 50px, 50px)'] },1542 { duration: 1000, fill: 'both' });1543 testAnimationSamples(1544 animation, idlName,1545 [{ time: 500, expected: 'rect(30px, 30px, 30px, 30px)' }]);1546 }, property + ' supports animating as a rect');1547 },1548 testAdditionOrAccumulation: function(property, setup, composite) {1549 test(function(t) {1550 var idlName = propertyToIDL(property);1551 var target = createTestElement(t, setup);1552 target.style[idlName] = 'rect(100px, 100px, 100px, 100px)';1553 var animation = target.animate({ [idlName]:1554 ['rect(10px, 10px, 10px, 10px)',1555 'rect(10px, 10px, 10px, 10px)'] },1556 { duration: 1000, composite: composite });1557 testAnimationSamples(1558 animation, idlName,1559 [{ time: 0, expected: 'rect(110px, 110px, 110px, 110px)' }]);1560 }, property + ': rect');1561 },1562 testAddition: function(property, setup) {1563 this.testAdditionOrAccumulation(property, setup, 'add');1564 },1565 testAccumulation: function(property, setup) {1566 this.testAdditionOrAccumulation(property, setup, 'accumulate');1567 },1568}1569// stroke-dasharray: none | [ <length> | <percentage> | <number> ]*1570const dasharrayType = {1571 testInterpolation: function(property, setup) {1572 percentageType.testInterpolation(property, setup);1573 positiveNumberType.testInterpolation(property, setup);1574 test(function(t) {1575 var idlName = propertyToIDL(property);1576 var target = createTestElement(t, setup);1577 var animation = target.animate({ [idlName]:1578 ['8, 16, 4',1579 '4, 8, 12, 16'] },1580 { duration: 1000, fill: 'both' });1581 testAnimationSamples(1582 animation, idlName,1583 [{ time: 500, expected: '6, 12, 8, 12, 10, 6, 10, 16, 4, 8, 14, 10' }]);1584 }, property + ' supports animating as a dasharray (mismatched length)');1585 test(function(t) {1586 var idlName = propertyToIDL(property);1587 var target = createTestElement(t, setup);1588 var animation = target.animate({ [idlName]:1589 ['2, 50%, 6, 10',1590 '6, 30%, 2, 2'] },1591 { duration: 1000, fill: 'both' });1592 testAnimationSamples(1593 animation, idlName,1594 [{ time: 500, expected: '4, 40%, 4, 6' }]);1595 }, property + ' supports animating as a dasharray (mixed number and percentage)');1596 },1597 // Note that stroke-dasharray is neither additive nor cumulative, so we should1598 // write this additive test case that animating value replaces underlying1599 // values.1600 // See https://www.w3.org/TR/SVG2/painting.html#StrokeDashing.1601 testAdditionOrAccumulation: function(property, setup, composite) {1602 test(function(t) {1603 var idlName = propertyToIDL(property);1604 var target = createTestElement(t, setup);1605 target.style[idlName] = '6, 30%, 2px';1606 var animation = target.animate({ [idlName]:1607 ['1, 2, 3, 4, 5',1608 '6, 7, 8, 9, 10'] },1609 { duration: 1000, composite: composite });1610 testAnimationSamples(1611 animation, idlName,1612 [{ time: 0, expected: '1, 2, 3, 4, 5' }]);1613 }, property + ': dasharray');1614 },1615 testAddition: function(property, setup) {1616 this.testAdditionOrAccumulation(property, setup, 'add');1617 },1618 testAccumulation: function(property, setup) {1619 this.testAdditionOrAccumulation(property, setup, 'accumulate');1620 },1621}1622const fontStretchType = {1623 testInterpolation: function(property, setup) {1624 test(function(t) {1625 var idlName = propertyToIDL(property);1626 var target = createTestElement(t, setup);1627 var animation =1628 target.animate({ [idlName]: ['ultra-condensed', 'extra-condensed'] },1629 { duration: 1000, fill: 'both' });1630 testAnimationSamples(animation, idlName,1631 [{ time: 499, expected: 'ultra-condensed' },1632 { time: 500, expected: 'extra-condensed' }]);1633 }, property + ' supports animating as a font-stretch (adjacent values)');1634 test(function(t) {1635 var idlName = propertyToIDL(property);1636 var target = createTestElement(t, setup);1637 var animation =1638 target.animate({ [idlName]: ['ultra-condensed', 'condensed'] },1639 { duration: 1000, fill: 'both' });1640 testAnimationSamples(animation, idlName,1641 [{ time: 500, expected: 'extra-condensed' }]);1642 }, property + ' supports animating as a font-stretch (between value)');1643 },1644 testAdditionOrAccumulation: function(property, setup, composite) {1645 test(function(t) {1646 var idlName = propertyToIDL(property);1647 var target = createTestElement(t, setup);1648 target.style[idlName] = 'condensed';1649 var animation =1650 target.animate({ [idlName]: ['expanded', 'ultra-expanded'] },1651 { duration: 1000, composite: composite });1652 testAnimationSamples(animation, idlName,1653 [{ time: 0, expected: 'normal' },1654 { time: 250, expected: 'semi-expanded' }]);1655 }, property + ' uses font-stretch behavior for composite type ' + composite);1656 },1657 testAddition: function(property, setup) {1658 this.testAdditionOrAccumulation(property, setup, 'add');1659 },1660 testAccumulation: function(property, setup) {1661 this.testAdditionOrAccumulation(property, setup, 'accumulate');...
Using AI Code Generation
1var wpt = require('webpagetest');2test.runTest(function(err, data) {3 if (err) throw err;4 console.log(data);5});6var wpt = require('webpagetest');7 if (err) throw err;8 console.log(data);9});10var wpt = require('webpagetest');11test.on('complete', function(data) {12 console.log(data);13});14var wpt = require('webpagetest');15test.on('progress', function(data) {16 console.log(data);17});18var wpt = require('webpagetest');19test.on('error', function(err) {20 console.log(err);21});22var wpt = require('webpagetest');23test.on('data', function(data) {24 console.log(data);25});26var wpt = require('webpagetest');27test.on('log', function(data) {28 console.log(data);29});30var wpt = require('webpagetest');31test.on('statusText', function(data) {32 console.log(data);33});
Using AI Code Generation
1var wpt = require('webpagetest');2var wpt = new WebPageTest('www.webpagetest.org', 'A.6b8c7d8e9f0g1h2i3j4k5l6m7n8o9p0q1r2s3t4u5v6w7x8y9z0a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6q7r8s9t0u1v2w3x4y5z6');3 if (err) {4 console.log('Error: ' + err);5 }6 else {7 console.log('Test ID: ' + data.data.testId);8 }9});
Using AI Code Generation
1var wpt = require('wptdriver');2var test = wpt.createTestElement();3 console.log(res.statusCode);4 test.done();5});6var webdriver = require('selenium-webdriver'),7 until = webdriver.until;8var driver = new webdriver.Builder()9 .forBrowser('chrome')10 .build();11exports.createTestElement = function() {12 return new TestElement(driver);13};14function TestElement(driver) {15 this.driver = driver;16}17TestElement.prototype.get = function(url, callback) {18 this.driver.get(url).then(function() {19 callback(null, {statusCode: 200});20 });21};22TestElement.prototype.done = function() {23 this.driver.quit();24};25var wpt = require('wptdriver');26var test = wpt.createTestElement();27 console.log(res.statusCode);28 test.done();29});30var wpt = require('wptdriver');31var test = wpt.createTestElement();32 console.log(res.statusCode);33 test.done();34});35var wpt = require('wptdriver');36var test = wpt.createTestElement();37 console.log(res.statusCode);38 test.done();39});40var wpt = require('wptdriver');41var test = wpt.createTestElement();42 console.log(res.statusCode);43 test.done();44});
Using AI Code Generation
1var test = new createTestElement("test.js", "test", "test", "test");2test.setTestName("test");3test.setTestDescription("test");4test.setTestAuthor("test");5test.setTestVersion("1.0");6test.setTestDate("2013-03-01");7test.setTestResult("pass");
Automation Testing Tutorials
Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.
LambdaTest Learning Hubs:
- JUnit Tutorial
- TestNG Tutorial
- Webdriver Tutorial
- WebDriverIO Tutorial
- Protractor Tutorial
- Selenium 4 Tutorial
- Jenkins Tutorial
- NUnit Tutorial
- Jest Tutorial
- Playwright Tutorial
- Cypress Tutorial
- PyTest Tutorial
YouTube
You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.
Run wpt automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
