How to use testAnimationSamples method in wpt

Best JavaScript code snippet using wpt

property-types.js

Source:property-types.js

...7 const idlName = propertyToIDL(property);8 const target = createTestElement(t, setup);9 const animation = target.animate({ [idlName]: [from, to] },10 { duration: 1000, fill: 'both' });11 testAnimationSamples(animation, idlName,12 [{ time: 0, expected: from.toLowerCase() },13 { time: 499, expected: from.toLowerCase() },14 { time: 500, expected: to.toLowerCase() },15 { time: 1000, expected: to.toLowerCase() }]);16 }, `${property} uses discrete animation when animating between`17 + ` "${from}" and "${to}" with linear easing`);18 test(t => {19 // Easing: http://cubic-bezier.com/#.68,0,1,.0120 // With this curve, we don't reach the 50% point until about 95% of21 // the time has expired.22 const idlName = propertyToIDL(property);23 const keyframes = {};24 const target = createTestElement(t, setup);25 const animation = target.animate(26 { [idlName]: [from, to] },27 {28 duration: 1000,29 fill: 'both',30 easing: 'cubic-bezier(0.68,0,1,0.01)',31 }32 );33 testAnimationSamples(animation, idlName,34 [{ time: 0, expected: from.toLowerCase() },35 { time: 940, expected: from.toLowerCase() },36 { time: 960, expected: to.toLowerCase() }]);37 }, `${property} uses discrete animation when animating between`38 + ` "${from}" and "${to}" with effect easing`);39 test(t => {40 // Easing: http://cubic-bezier.com/#.68,0,1,.0141 // With this curve, we don't reach the 50% point until about 95% of42 // the time has expired.43 const idlName = propertyToIDL(property);44 const target = createTestElement(t, setup);45 const animation = target.animate(46 {47 [idlName]: [from, to],48 easing: 'cubic-bezier(0.68,0,1,0.01)',49 },50 { duration: 1000, fill: 'both' }51 );52 testAnimationSamples(animation, idlName,53 [{ time: 0, expected: from.toLowerCase() },54 { time: 940, expected: from.toLowerCase() },55 { time: 960, expected: to.toLowerCase() }]);56 }, `${property} uses discrete animation when animating between`57 + ` "${from}" and "${to}" with keyframe easing`);58 }59 },60 testAdditionOrAccumulation: (property, setup, options, composite) => {61 for (const keyframes of options) {62 const [ from, to ] = keyframes;63 test(t => {64 const idlName = propertyToIDL(property);65 const target = createTestElement(t, setup);66 target.animate({ [idlName]: [from, from] }, 1000);67 const animation = target.animate(68 { [idlName]: [to, to] },69 { duration: 1000, composite }70 );71 testAnimationSamples(animation, idlName,72 [{ time: 0, expected: to.toLowerCase() }]);73 }, `${property}: "${to}" onto "${from}"`);74 test(t => {75 const idlName = propertyToIDL(property);76 const target = createTestElement(t, setup);77 target.animate({ [idlName]: [to, to] }, 1000);78 const animation = target.animate(79 { [idlName]: [from, from] },80 { duration: 1000, composite }81 );82 testAnimationSamples(animation, idlName,83 [{ time: 0, expected: from.toLowerCase() }]);84 }, `${property}: "${from}" onto "${to}"`);85 }86 },87 testAddition: function(property, setup, options) {88 this.testAdditionOrAccumulation(property, setup, options, 'add');89 },90 testAccumulation: function(property, setup, options) {91 this.testAdditionOrAccumulation(property, setup, options, 'accumulate');92 },93};94const lengthType = {95 testInterpolation: (property, setup) => {96 test(t => {97 const idlName = propertyToIDL(property);98 const target = createTestElement(t, setup);99 const animation = target.animate({ [idlName]: ['10px', '50px'] },100 { duration: 1000, fill: 'both' });101 testAnimationSamples(animation, idlName,102 [{ time: 500, expected: '30px' }]);103 }, `${property} supports animating as a length`);104 test(t => {105 const idlName = propertyToIDL(property);106 const target = createTestElement(t, setup);107 const animation = target.animate({ [idlName]: ['1rem', '5rem'] },108 { duration: 1000, fill: 'both' });109 testAnimationSamples(animation, idlName,110 [{ time: 500, expected: '30px' }]);111 }, `${property} supports animating as a length of rem`);112 },113 testAdditionOrAccumulation: (property, setup, composite) => {114 test(t => {115 const idlName = propertyToIDL(property);116 const target = createTestElement(t, setup);117 target.style[idlName] = '10px';118 const animation = target.animate(119 { [idlName]: ['10px', '50px'] },120 { duration: 1000, composite }121 );122 testAnimationSamples(animation, idlName, [{ time: 0, expected: '20px' }]);123 }, `${property}: length`);124 test(t => {125 const idlName = propertyToIDL(property);126 const target = createTestElement(t, setup);127 target.style[idlName] = '1rem';128 const animation = target.animate(129 { [idlName]: ['1rem', '5rem'] },130 { duration: 1000, composite }131 );132 testAnimationSamples(animation, idlName, [{ time: 0, expected: '20px' }]);133 }, `${property}: length of rem`);134 },135 testAddition: function(property, setup) {136 this.testAdditionOrAccumulation(property, setup, 'add');137 },138 testAccumulation: function(property, setup) {139 this.testAdditionOrAccumulation(property, setup, 'accumulate');140 },141};142const lengthPairType = {143 testInterpolation: (property, setup) => {144 test(t => {145 const idlName = propertyToIDL(property);146 const target = createTestElement(t, setup);147 const animation = target.animate(148 { [idlName]: ['10px 10px', '50px 50px'] },149 { duration: 1000, fill: 'both' }150 );151 testAnimationSamples(animation, idlName,152 [{ time: 500, expected: '30px 30px' }]);153 }, `${property} supports animating as a length pair`);154 test(t => {155 const idlName = propertyToIDL(property);156 const target = createTestElement(t, setup);157 const animation = target.animate(158 { [idlName]: ['1rem 1rem', '5rem 5rem'] },159 { duration: 1000, fill: 'both' }160 );161 testAnimationSamples(animation, idlName,162 [{ time: 500, expected: '30px 30px' }]);163 }, `${property} supports animating as a length pair of rem`);164 },165 testAdditionOrAccumulation: (property, setup, composite) => {166 test(t => {167 const idlName = propertyToIDL(property);168 const target = createTestElement(t, setup);169 target.style[idlName] = '10px 10px';170 const animation = target.animate(171 { [idlName]: ['10px 10px', '50px 50px'] },172 { duration: 1000, composite }173 );174 testAnimationSamples(175 animation,176 idlName,177 [{ time: 0, expected: '20px 20px' }]178 );179 }, `${property}: length pair`);180 test(t => {181 const idlName = propertyToIDL(property);182 const target = createTestElement(t, setup);183 target.style[idlName] = '1rem 1rem';184 const animation = target.animate(185 { [idlName]: ['1rem 1rem', '5rem 5rem'] },186 { duration: 1000, composite }187 );188 testAnimationSamples(189 animation,190 idlName,191 [{ time: 0, expected: '20px 20px' }]192 );193 }, `${property}: length pair of rem`);194 },195 testAddition: function(property, setup) {196 this.testAdditionOrAccumulation(property, setup, 'add');197 },198 testAccumulation: function(property, setup) {199 this.testAdditionOrAccumulation(property, setup, 'accumulate');200 },201};202const percentageType = {203 testInterpolation: (property, setup) => {204 test(t => {205 const idlName = propertyToIDL(property);206 const target = createTestElement(t, setup);207 const animation = target.animate({ [idlName]: ['10%', '50%'] },208 { duration: 1000, fill: 'both' });209 testAnimationSamples(animation, idlName,210 [{ time: 500, expected: '30%' }]);211 }, `${property} supports animating as a percentage`);212 },213 testAdditionOrAccumulation: (property, setup, composite) => {214 test(t => {215 const idlName = propertyToIDL(property);216 const target = createTestElement(t, setup);217 target.style[idlName] = '60%';218 const animation = target.animate(219 { [idlName]: ['70%', '100%'] },220 { duration: 1000, composite }221 );222 testAnimationSamples(animation, idlName, [{ time: 0, expected: '130%' }]);223 }, `${property}: percentage`);224 },225 testAddition: function(property, setup) {226 this.testAdditionOrAccumulation(property, setup, 'add');227 },228 testAccumulation: function(property, setup) {229 this.testAdditionOrAccumulation(property, setup, 'accumulate');230 },231};232const integerType = {233 testInterpolation: (property, setup) => {234 test(t => {235 const idlName = propertyToIDL(property);236 const target = createTestElement(t, setup);237 const animation = target.animate({ [idlName]: [-2, 2] },238 { duration: 1000, fill: 'both' });239 testAnimationSamples(animation, idlName,240 [{ time: 500, expected: '0' }]);241 }, `${property} supports animating as an integer`);242 },243 testAdditionOrAccumulation: (property, setup, composite) => {244 test(t => {245 const idlName = propertyToIDL(property);246 const target = createTestElement(t, setup);247 target.style[idlName] = -1;248 const animation = target.animate(249 { [idlName]: [-2, 2] },250 { duration: 1000, composite }251 );252 testAnimationSamples(animation, idlName,253 [{ time: 0, expected: '-3' }]);254 }, `${property}: integer`);255 },256 testAddition: function(property, setup) {257 this.testAdditionOrAccumulation(property, setup, 'add');258 },259 testAccumulation: function(property, setup) {260 this.testAdditionOrAccumulation(property, setup, 'accumulate');261 },262};263const positiveIntegerType = {264 testInterpolation: (property, setup) => {265 test(t => {266 const idlName = propertyToIDL(property);267 const target = createTestElement(t, setup);268 const animation = target.animate({ [idlName]: [1, 3] },269 { duration: 1000, fill: 'both' });270 testAnimationSamples(animation, idlName,271 [ { time: 500, expected: '2' } ]);272 }, `${property} supports animating as a positive integer`);273 },274 testAdditionOrAccumulation: (property, setup, composite) => {275 test(t => {276 const idlName = propertyToIDL(property);277 const target = createTestElement(t, setup);278 target.style[idlName] = 1;279 const animation = target.animate(280 { [idlName]: [2, 5] },281 { duration: 1000, composite }282 );283 testAnimationSamples(animation, idlName,284 [{ time: 0, expected: '3' }]);285 }, `${property}: positive integer`);286 },287 testAddition: function(property, setup) {288 this.testAdditionOrAccumulation(property, setup, 'add');289 },290 testAccumulation: function(property, setup) {291 this.testAdditionOrAccumulation(property, setup, 'accumulate');292 },293};294const lengthPercentageOrCalcType = {295 testInterpolation: (property, setup) => {296 lengthType.testInterpolation(property, setup);297 percentageType.testInterpolation(property, setup);298 test(t => {299 const idlName = propertyToIDL(property);300 const target = createTestElement(t, setup);301 const animation = target.animate({ [idlName]: ['10px', '20%'] },302 { duration: 1000, fill: 'both' });303 testAnimationSamples(animation, idlName,304 [{ time: 500, expected: 'calc(10% + 5px)' }]);305 }, `${property} supports animating as combination units "px" and "%"`);306 test(t => {307 const idlName = propertyToIDL(property);308 const target = createTestElement(t, setup);309 const animation = target.animate({ [idlName]: ['10%', '2em'] },310 { duration: 1000, fill: 'both' });311 testAnimationSamples(animation, idlName,312 [{ time: 500, expected: 'calc(5% + 10px)' }]);313 }, `${property} supports animating as combination units "%" and "em"`);314 test(t => {315 const idlName = propertyToIDL(property);316 const target = createTestElement(t, setup);317 const animation = target.animate({ [idlName]: ['1em', '2rem'] },318 { duration: 1000, fill: 'both' });319 testAnimationSamples(animation, idlName,320 [{ time: 500, expected: '15px' }]);321 }, `${property} supports animating as combination units "em" and "rem"`);322 test(t => {323 const idlName = propertyToIDL(property);324 const target = createTestElement(t, setup);325 const animation = target.animate(326 { [idlName]: ['10px', 'calc(1em + 20%)'] },327 { duration: 1000, fill: 'both' }328 );329 testAnimationSamples(animation, idlName,330 [{ time: 500, expected: 'calc(10% + 10px)' }]);331 }, `${property} supports animating as combination units "px" and "calc"`);332 test(t => {333 const idlName = propertyToIDL(property);334 const target = createTestElement(t, setup);335 const animation = target.animate(336 { [idlName]: ['calc(10px + 10%)', 'calc(1em + 1rem + 20%)'] },337 { duration: 1000, fill: 'both' });338 testAnimationSamples(animation, idlName,339 [{ time: 500,340 expected: 'calc(15% + 15px)' }]);341 }, `${property} supports animating as a calc`);342 },343 testAdditionOrAccumulation: (property, setup, composite) => {344 lengthType.testAddition(property, setup);345 percentageType.testAddition(property, setup);346 test(t => {347 const idlName = propertyToIDL(property);348 const target = createTestElement(t, setup);349 target.style[idlName] = '10px';350 const animation = target.animate({ [idlName]: ['10%', '50%'] },351 { duration: 1000, composite });352 testAnimationSamples(animation, idlName,353 [{ time: 0, expected: 'calc(10% + 10px)' }]);354 }, `${property}: units "%" onto "px"`);355 test(t => {356 const idlName = propertyToIDL(property);357 const target = createTestElement(t, setup);358 target.style[idlName] = '10%';359 const animation = target.animate({ [idlName]: ['10px', '50px'] },360 { duration: 1000, composite });361 testAnimationSamples(animation, idlName,362 [{ time: 0, expected: 'calc(10% + 10px)' }]);363 }, `${property}: units "px" onto "%"`);364 test(t => {365 const idlName = propertyToIDL(property);366 const target = createTestElement(t, setup);367 target.style[idlName] = '10%';368 const animation = target.animate({ [idlName]: ['2rem', '5rem'] },369 { duration: 1000, composite });370 testAnimationSamples(animation, idlName,371 [{ time: 0, expected: 'calc(10% + 20px)' }]);372 }, `${property}: units "rem" onto "%"`);373 test(t => {374 const idlName = propertyToIDL(property);375 const target = createTestElement(t, setup);376 target.style[idlName] = '2rem';377 const animation = target.animate({ [idlName]: ['10%', '50%'] },378 { duration: 1000, composite });379 testAnimationSamples(animation, idlName,380 [{ time: 0, expected: 'calc(10% + 20px)' }]);381 }, `${property}: units "%" onto "rem"`);382 test(t => {383 const idlName = propertyToIDL(property);384 const target = createTestElement(t, setup);385 target.style[idlName] = '2em';386 const animation = target.animate({ [idlName]: ['2rem', '5rem'] },387 { duration: 1000, composite });388 testAnimationSamples(animation, idlName, [{ time: 0, expected: '40px' }]);389 }, `${property}: units "rem" onto "em"`);390 test(t => {391 const idlName = propertyToIDL(property);392 const target = createTestElement(t, setup);393 target.style[idlName] = '2rem';394 const animation = target.animate({ [idlName]: ['2em', '5em'] },395 { duration: 1000, composite });396 testAnimationSamples(animation, idlName, [{ time: 0, expected: '40px' }]);397 }, `${property}: units "em" onto "rem"`);398 test(t => {399 const idlName = propertyToIDL(property);400 const target = createTestElement(t, setup);401 target.style[idlName] = '10px';402 const animation = target.animate({ [idlName]: ['calc(2em + 20%)',403 'calc(5rem + 50%)'] },404 { duration: 1000, composite });405 testAnimationSamples(animation, idlName,406 [{ time: 0, expected: 'calc(20% + 30px)' }]);407 }, `${property}: units "calc" onto "px"`);408 test(t => {409 const idlName = propertyToIDL(property);410 const target = createTestElement(t, setup);411 target.style[idlName] = 'calc(10px + 10%)';412 const animation = target.animate({ [idlName]: ['calc(20px + 20%)',413 'calc(2em + 3rem + 40%)'] },414 { duration: 1000, composite });415 testAnimationSamples(animation, idlName,416 [{ time: 0, expected: 'calc(30% + 30px)' }]);417 }, `${property}: calc`);418 },419 testAddition: function(property, setup) {420 this.testAdditionOrAccumulation(property, setup, 'add');421 },422 testAccumulation: function(property, setup) {423 this.testAdditionOrAccumulation(property, setup, 'accumulate');424 },425};426const positiveNumberType = {427 testInterpolation: (property, setup, expectedUnit='') => {428 test(t => {429 const idlName = propertyToIDL(property);430 const target = createTestElement(t, setup);431 const animation = target.animate({ [idlName]: [1.1, 1.5] },432 { duration: 1000, fill: 'both' });433 testAnimationSamples(animation, idlName,434 [{ time: 500, expected: '1.3' + expectedUnit }]);435 }, `${property} supports animating as a positive number`);436 },437 testAdditionOrAccumulation: (property, setup, composite) => {438 test(t => {439 const idlName = propertyToIDL(property);440 const target = createTestElement(t, setup);441 target.style[idlName] = 1.1;442 const animation = target.animate({ [idlName]: [1.1, 1.5] },443 { duration: 1000, composite });444 testAnimationSamples(animation, idlName, [{ time: 0, expected: '2.2' }]);445 }, `${property}: positive number`);446 },447 testAddition: function(property, setup) {448 this.testAdditionOrAccumulation(property, setup, 'add');449 },450 testAccumulation: function(property, setup) {451 this.testAdditionOrAccumulation(property, setup, 'accumulate');452 },453};454// Test using float values in the range [0, 1]455const opacityType = {456 testInterpolation: (property, setup) => {457 test(t => {458 const idlName = propertyToIDL(property);459 const target = createTestElement(t, setup);460 const animation = target.animate({ [idlName]: [0.3, 0.8] },461 { duration: 1000, fill: 'both' });462 testAnimationSamples(animation, idlName,463 [{ time: 500, expected: '0.55' }]);464 }, `${property} supports animating as a [0, 1] number`);465 },466 testAdditionOrAccumulation: (property, setup, composite) => {467 test(t => {468 const idlName = propertyToIDL(property);469 const target = createTestElement(t, setup);470 target.style[idlName] = 0.3;471 const animation = target.animate({ [idlName]: [0.3, 0.8] },472 { duration: 1000, composite });473 testAnimationSamples(animation, idlName, [{ time: 0, expected: '0.6' }]);474 }, `${property}: [0, 1] number`);475 test(t => {476 const idlName = propertyToIDL(property);477 const target = createTestElement(t, setup);478 target.style[idlName] = 0.8;479 const animation = target.animate({ [idlName]: [0.3, 0.8] },480 { duration: 1000, composite });481 testAnimationSamples(animation, idlName, [{ time: 0, expected: '1' }]);482 }, `${property}: [0, 1] number (clamped)`);483 },484 testAddition: function(property, setup) {485 this.testAdditionOrAccumulation(property, setup, 'add');486 },487 testAccumulation: function(property, setup) {488 this.testAdditionOrAccumulation(property, setup, 'accumulate');489 },490};491const visibilityType = {492 testInterpolation: (property, setup) => {493 test(t => {494 const idlName = propertyToIDL(property);495 const target = createTestElement(t, setup);496 const animation = target.animate({ [idlName]: ['visible', 'hidden'] },497 { duration: 1000, fill: 'both' });498 testAnimationSamples(animation, idlName,499 [{ time: 0, expected: 'visible' },500 { time: 999, expected: 'visible' },501 { time: 1000, expected: 'hidden' }]);502 }, `${property} uses visibility animation when animating`503 + ' from "visible" to "hidden"');504 test(t => {505 const idlName = propertyToIDL(property);506 const target = createTestElement(t, setup);507 const animation = target.animate({ [idlName]: ['hidden', 'visible'] },508 { duration: 1000, fill: 'both' });509 testAnimationSamples(animation, idlName,510 [{ time: 0, expected: 'hidden' },511 { time: 1, expected: 'visible' },512 { time: 1000, expected: 'visible' }]);513 }, `${property} uses visibility animation when animating`514 + ' from "hidden" to "visible"');515 test(t => {516 const idlName = propertyToIDL(property);517 const target = createTestElement(t, setup);518 const animation = target.animate({ [idlName]: ['hidden', 'collapse'] },519 { duration: 1000, fill: 'both' });520 testAnimationSamples(animation, idlName,521 [{ time: 0, expected: 'hidden' },522 { time: 499, expected: 'hidden' },523 { time: 500, expected: 'collapse' },524 { time: 1000, expected: 'collapse' }]);525 }, `${property} uses visibility animation when animating`526 + ' from "hidden" to "collapse"');527 test(t => {528 // Easing: http://cubic-bezier.com/#.68,-.55,.26,1.55529 // With this curve, the value is less than 0 till about 34%530 // also more than 1 since about 63%531 const idlName = propertyToIDL(property);532 const target = createTestElement(t, setup);533 const animation =534 target.animate({ [idlName]: ['visible', 'hidden'] },535 { duration: 1000, fill: 'both',536 easing: 'cubic-bezier(0.68, -0.55, 0.26, 1.55)' });537 testAnimationSamples(animation, idlName,538 [{ time: 0, expected: 'visible' },539 { time: 1, expected: 'visible' },540 { time: 330, expected: 'visible' },541 { time: 340, expected: 'visible' },542 { time: 620, expected: 'visible' },543 { time: 630, expected: 'hidden' },544 { time: 1000, expected: 'hidden' }]);545 }, `${property} uses visibility animation when animating`546 + ' from "visible" to "hidden" with easeInOutBack easing');547 },548 testAdditionOrAccumulation: (property, setup, composite) => {549 test(t => {550 const idlName = propertyToIDL(property);551 const target = createTestElement(t, setup);552 target.style[idlName] = 'visible';553 const animation = target.animate({ [idlName]: ['visible', 'hidden'] },554 { duration: 1000, fill: 'both',555 composite });556 testAnimationSamples(animation, idlName,557 [{ time: 0, expected: 'visible' },558 { time: 1000, expected: 'hidden' }]);559 }, `${property}: onto "visible"`);560 test(t => {561 const idlName = propertyToIDL(property);562 const target = createTestElement(t, setup);563 target.style[idlName] = 'hidden';564 const animation = target.animate({ [idlName]: ['hidden', 'visible'] },565 { duration: 1000, fill: 'both',566 composite });567 testAnimationSamples(animation, idlName,568 [{ time: 0, expected: 'hidden' },569 { time: 1000, expected: 'visible' }]);570 }, `${property}: onto "hidden"`);571 },572 testAddition: function(property, setup) {573 this.testAdditionOrAccumulation(property, setup, 'add');574 },575 testAccumulation: function(property, setup) {576 this.testAdditionOrAccumulation(property, setup, 'accumulate');577 },578};579const colorType = {580 testInterpolation: (property, setup) => {581 test(t => {582 const idlName = propertyToIDL(property);583 const target = createTestElement(t, setup);584 const animation = target.animate({ [idlName]: ['rgb(255, 0, 0)',585 'rgb(0, 0, 255)'] },586 1000);587 testAnimationSamples(animation, idlName,588 [{ time: 500, expected: 'rgb(128, 0, 128)' }]);589 }, `${property} supports animating as color of rgb()`);590 test(t => {591 const idlName = propertyToIDL(property);592 const target = createTestElement(t, setup);593 const animation = target.animate({ [idlName]: ['#ff0000', '#0000ff'] },594 1000);595 testAnimationSamples(animation, idlName,596 [{ time: 500, expected: 'rgb(128, 0, 128)' }]);597 }, `${property} supports animating as color of #RGB`);598 test(t => {599 const idlName = propertyToIDL(property);600 const target = createTestElement(t, setup);601 const animation = target.animate({ [idlName]: ['hsl(0, 100%, 50%)',602 'hsl(240, 100%, 50%)'] },603 1000);604 testAnimationSamples(animation, idlName,605 [{ time: 500, expected: 'rgb(128, 0, 128)' }]);606 }, `${property} supports animating as color of hsl()`);607 test(t => {608 const idlName = propertyToIDL(property);609 const target = createTestElement(t, setup);610 const animation = target.animate(611 { [idlName]: ['#ff000066', '#0000ffcc'] },612 1000613 );614 // R: 255 * (0.4 * 0.5) / 0.6 = 85615 // B: 255 * (0.8 * 0.5) / 0.6 = 170616 testAnimationSamples(animation, idlName,617 [{ time: 500, expected: 'rgba(85, 0, 170, 0.6)' }]);618 }, `${property} supports animating as color of #RGBa`);619 test(t => {620 const idlName = propertyToIDL(property);621 const target = createTestElement(t, setup);622 const animation = target.animate(623 {624 [idlName]: ['rgba(255, 0, 0, 0.4)', 'rgba(0, 0, 255, 0.8)'],625 },626 1000627 );628 testAnimationSamples(animation, idlName, // Same as above.629 [{ time: 500, expected: 'rgba(85, 0, 170, 0.6)' }]);630 }, `${property} supports animating as color of rgba()`);631 test(t => {632 const idlName = propertyToIDL(property);633 const target = createTestElement(t, setup);634 const animation = target.animate(635 {636 [idlName]: ['hsla(0, 100%, 50%, 0.4)', 'hsla(240, 100%, 50%, 0.8)'],637 },638 1000639 );640 testAnimationSamples(animation, idlName, // Same as above.641 [{ time: 500, expected: 'rgba(85, 0, 170, 0.6)' }]);642 }, `${property} supports animating as color of hsla()`);643 },644 testAdditionOrAccumulation: (property, setup, composite) => {645 test(t => {646 const idlName = propertyToIDL(property);647 const target = createTestElement(t, setup);648 target.style[idlName] = 'rgb(128, 128, 128)';649 const animation = target.animate(650 {651 [idlName]: ['rgb(255, 0, 0)', 'rgb(0, 0, 255)'],652 },653 { duration: 1000, composite }654 );655 testAnimationSamples(animation, idlName,656 [{ time: 0, expected: 'rgb(255, 128, 128)' },657 // The value at 50% is interpolated658 // from 'rgb(128+255, 128, 128)'659 // to 'rgb(128, 128, 128+255)'.660 { time: 500, expected: 'rgb(255, 128, 255)' }]);661 }, `${property} supports animating as color of rgb() with overflowed `662 + ' from and to values');663 test(t => {664 const idlName = propertyToIDL(property);665 const target = createTestElement(t, setup);666 target.style[idlName] = 'rgb(128, 128, 128)';667 const animation = target.animate({ [idlName]: ['#ff0000', '#0000ff'] },668 { duration: 1000, composite });669 testAnimationSamples(animation, idlName,670 [{ time: 0, expected: 'rgb(255, 128, 128)' }]);671 }, `${property} supports animating as color of #RGB`);672 test(t => {673 const idlName = propertyToIDL(property);674 const target = createTestElement(t, setup);675 target.style[idlName] = 'rgb(128, 128, 128)';676 const animation = target.animate({ [idlName]: ['hsl(0, 100%, 50%)',677 'hsl(240, 100%, 50%)'] },678 { duration: 1000, composite });679 testAnimationSamples(animation, idlName,680 [{ time: 0, expected: 'rgb(255, 128, 128)' }]);681 }, `${property} supports animating as color of hsl()`);682 test(t => {683 const idlName = propertyToIDL(property);684 const target = createTestElement(t, setup);685 target.style[idlName] = 'rgb(128, 128, 128)';686 const animation = target.animate(687 { [idlName]: ['#ff000066', '#0000ffcc'] },688 { duration: 1000, composite }689 );690 testAnimationSamples(animation, idlName,691 [{ time: 0, expected: 'rgb(230, 128, 128)' }]);692 }, `${property} supports animating as color of #RGBa`);693 test(t => {694 const idlName = propertyToIDL(property);695 const target = createTestElement(t, setup);696 target.style[idlName] = 'rgb(128, 128, 128)';697 const animation = target.animate({ [idlName]: ['rgba(255, 0, 0, 0.4)',698 'rgba(0, 0, 255, 0.8)'] },699 { duration: 1000, composite });700 testAnimationSamples(animation, idlName, // Same as above.701 [{ time: 0, expected: 'rgb(230, 128, 128)' }]);702 }, `${property} supports animating as color of rgba()`);703 test(t => {704 const idlName = propertyToIDL(property);705 const target = createTestElement(t, setup);706 target.style[idlName] = 'rgb(128, 128, 128)';707 const animation = target.animate(708 {709 [idlName]: ['hsla(0, 100%, 50%, 0.4)', 'hsla(240, 100%, 50%, 0.8)'],710 },711 { duration: 1000, composite }712 );713 testAnimationSamples(animation, idlName, // Same as above.714 [{ time: 0, expected: 'rgb(230, 128, 128)' }]);715 }, `${property} supports animating as color of hsla()`);716 },717 testAddition: function(property, setup) {718 this.testAdditionOrAccumulation(property, setup, 'add');719 },720 testAccumulation: function(property, setup) {721 this.testAdditionOrAccumulation(property, setup, 'accumulate');722 },723};724const transformListType = {725 testInterpolation: (property, setup) => {726 test(t => {727 const idlName = propertyToIDL(property);728 const target = createTestElement(t, setup);729 const animation = target.animate(730 {731 [idlName]: ['translate(200px, -200px)', 'translate(400px, 400px)'],732 },733 1000734 );735 testAnimationSampleMatrices(animation, idlName,736 [{ time: 500, expected: [ 1, 0, 0, 1, 300, 100 ] }]);737 }, `${property}: translate`);738 test(t => {739 const idlName = propertyToIDL(property);740 const target = createTestElement(t, setup);741 const animation = target.animate(742 {743 [idlName]: ['rotate(45deg)', 'rotate(135deg)'],744 },745 1000746 );747 testAnimationSampleMatrices(animation, idlName,748 [{ time: 500, expected: [ Math.cos(Math.PI / 2),749 Math.sin(Math.PI / 2),750 -Math.sin(Math.PI / 2),751 Math.cos(Math.PI / 2),752 0, 0] }]);753 }, `${property}: rotate`);754 test(t => {755 const idlName = propertyToIDL(property);756 const target = createTestElement(t, setup);757 const animation = target.animate({ [idlName]: ['scale(3)', 'scale(5)'] },758 1000);759 testAnimationSampleMatrices(animation, idlName,760 [{ time: 500, expected: [ 4, 0, 0, 4, 0, 0 ] }]);761 }, `${property}: scale`);762 test(t => {763 const idlName = propertyToIDL(property);764 const target = createTestElement(t, setup);765 const animation = target.animate({ [idlName]: ['skew(30deg, 60deg)',766 'skew(60deg, 30deg)'] },767 1000);768 testAnimationSampleMatrices(animation, idlName,769 [{ time: 500, expected: [ 1, Math.tan(Math.PI / 4),770 Math.tan(Math.PI / 4), 1,771 0, 0] }]);772 }, `${property}: skew`);773 test(t => {774 const idlName = propertyToIDL(property);775 const target = createTestElement(t, setup);776 const animation =777 target.animate({ [idlName]: ['translateX(100px) rotate(45deg)',778 'translateX(200px) rotate(135deg)'] },779 1000);780 testAnimationSampleMatrices(animation, idlName,781 [{ time: 500, expected: [ Math.cos(Math.PI / 2),782 Math.sin(Math.PI / 2),783 -Math.sin(Math.PI / 2),784 Math.cos(Math.PI / 2),785 150, 0 ] }]);786 }, `${property}: rotate and translate`);787 test(t => {788 const idlName = propertyToIDL(property);789 const target = createTestElement(t, setup);790 const animation =791 target.animate({ [idlName]: ['rotate(45deg) translateX(100px)',792 'rotate(135deg) translateX(200px)'] },793 1000);794 testAnimationSampleMatrices(animation, idlName,795 [{ time: 500, expected: [ Math.cos(Math.PI / 2),796 Math.sin(Math.PI / 2),797 -Math.sin(Math.PI / 2),798 Math.cos(Math.PI / 2),799 150 * Math.cos(Math.PI / 2),800 150 * Math.sin(Math.PI / 2) ] }]);801 }, `${property}: translate and rotate`);802 test(t => {803 const idlName = propertyToIDL(property);804 const target = createTestElement(t, setup);805 const animation =806 target.animate({ [idlName]: ['rotate(0deg)',807 'rotate(1080deg) translateX(100px)'] },808 1000);809 testAnimationSampleMatrices(animation, idlName,810 [{ time: 500, expected: [ -1, 0, 0, -1, -50, 0 ] }]);811 }, `${property}: extend shorter list (from)`);812 test(t => {813 const idlName = propertyToIDL(property);814 const target = createTestElement(t, setup);815 const animation =816 target.animate({ [idlName]: ['rotate(0deg) translateX(100px)',817 'rotate(1080deg)'] },818 1000);819 testAnimationSampleMatrices(animation, idlName,820 [{ time: 500, expected: [ -1, 0, 0, -1, -50, 0 ] }]);821 }, `${property}: extend shorter list (to)`);822 test(t => {823 const idlName = propertyToIDL(property);824 const target = createTestElement(t, setup);825 const animation = // matrix(0, 1, -1, 0, 0, 100)826 target.animate({ [idlName]: ['rotate(90deg) translateX(100px)',827 // matrix(-1, 0, 0, -1, 200, 0)828 'translateX(200px) rotate(180deg)'] },829 1000);830 testAnimationSampleMatrices(animation, idlName,831 [{ time: 500, expected: [ Math.cos(Math.PI * 3 / 4),832 Math.sin(Math.PI * 3 / 4),833 -Math.sin(Math.PI * 3 / 4),834 Math.cos(Math.PI * 3 / 4),835 100, 50 ] }]);836 }, `${property}: mismatch order of translate and rotate`);837 test(t => {838 const idlName = propertyToIDL(property);839 const target = createTestElement(t, setup);840 const animation = // Same matrices as above.841 target.animate({ [idlName]: [ 'matrix(0, 1, -1, 0, 0, 100)',842 'matrix(-1, 0, 0, -1, 200, 0)' ] },843 1000);844 testAnimationSampleMatrices(animation, idlName,845 [{ time: 500, expected: [ Math.cos(Math.PI * 3 / 4),846 Math.sin(Math.PI * 3 / 4),847 -Math.sin(Math.PI * 3 / 4),848 Math.cos(Math.PI * 3 / 4),849 100, 50 ] }]);850 }, `${property}: matrix`);851 test(t => {852 const idlName = propertyToIDL(property);853 const target = createTestElement(t, setup);854 const animation =855 target.animate({ [idlName]: [ 'rotate3d(1, 1, 0, 0deg)',856 'rotate3d(1, 1, 0, 90deg)'] },857 1000);858 testAnimationSampleMatrices(animation, idlName,859 [{ time: 500, expected: rotate3dToMatrix(1, 1, 0, Math.PI / 4) }]);860 }, `${property}: rotate3d`);861 test(t => {862 const idlName = propertyToIDL(property);863 const target = createTestElement(t, setup);864 // To calculate expected matrices easily, generate input matrices from865 // rotate3d.866 const from = rotate3dToMatrix3d(1, 1, 0, Math.PI / 4);867 const to = rotate3dToMatrix3d(1, 1, 0, Math.PI * 3 / 4);868 const animation = target.animate({ [idlName]: [ from, to ] }, 1000);869 testAnimationSampleMatrices(animation, idlName,870 [{ time: 500, expected: rotate3dToMatrix(1, 1, 0, Math.PI * 2 / 4) }]);871 }, `${property}: matrix3d`);872 // This test aims for forcing the two mismatched transforms to be873 // decomposed into matrix3d before interpolation. Therefore, we not only874 // test the interpolation, but also test the 3D matrix decomposition.875 test(t => {876 const idlName = propertyToIDL(property);877 const target = createTestElement(t, setup);878 const animation = target.animate(879 {880 [idlName]: [881 'scale(0.3)',882 // scale(0.5) translateZ(1px)883 'matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1)',884 ],885 },886 1000887 );888 testAnimationSampleMatrices(animation, idlName,889 [{ time: 500, expected: [ 0.4, 0, 0, 0,890 0, 0.4, 0, 0,891 0, 0, 1, 0,892 0, 0, 0.5, 1] }]);893 }, `${property}: mismatched 3D transforms`);894 test(t => {895 const idlName = propertyToIDL(property);896 const target = createTestElement(t, setup);897 const animation =898 target.animate({ [idlName]: ['rotateY(60deg)', 'none' ] }, 1000);899 testAnimationSampleMatrices(animation, idlName,900 // rotateY(30deg) == rotate3D(0, 1, 0, 30deg)901 [{ time: 500, expected: rotate3dToMatrix(0, 1, 0, Math.PI / 6) }]);902 }, `${property}: rotateY`);903 // Following tests aim for test the fallback discrete interpolation behavior904 // for non-invertible matrices. The non-invertible matrix that we use is the905 // singular matrix, matrix(1, 1, 0, 0, 0, 100).906 test(t => {907 const idlName = propertyToIDL(property);908 const target = createTestElement(t, setup);909 const animation =910 target.animate({ [idlName]: ['matrix(-1, 0, 0, -1, 200, 0)',911 'matrix( 1, 1, 0, 0, 0, 100)'] },912 { duration: 1000, fill: 'both' });913 testAnimationSampleMatrices(animation, idlName,914 [ { time: 0, expected: [ -1, 0, 0, -1, 200, 0 ] },915 { time: 499, expected: [ -1, 0, 0, -1, 200, 0 ] },916 { time: 500, expected: [ 1, 1, 0, 0, 0, 100 ] },917 { time: 1000, expected: [ 1, 1, 0, 0, 0, 100 ] }]);918 }, `${property}: non-invertible matrices`);919 test(t => {920 const idlName = propertyToIDL(property);921 const target = createTestElement(t, setup);922 const animation = target.animate(923 {924 [idlName]: [925 // matrix(0, -1, 1, 0, 250, 0)926 'translate(50px) matrix(-1, 0, 0, -1, 200, 0) rotate(90deg)',927 // matrix(-1, -1, 0, 0, 100, 100)928 'translate(100px) matrix( 1, 1, 0, 0, 0, 100) rotate(180deg)',929 ],930 },931 { duration: 1000, fill: 'both' }932 );933 testAnimationSampleMatrices(animation, idlName,934 [ { time: 0, expected: [ 0, -1, 1, 0, 250, 0 ] },935 { time: 499, expected: [ 0, -1, 1, 0, 250, 0 ] },936 { time: 500, expected: [ -1, -1, 0, 0, 100, 100 ] },937 { time: 1000, expected: [ -1, -1, 0, 0, 100, 100 ] }]);938 }, `${property}: non-invertible matrices in matched transform lists`);939 test(t => {940 const idlName = propertyToIDL(property);941 const target = createTestElement(t, setup);942 const animation = target.animate(943 {944 [idlName]: [945 // matrix(-2, 0, 0, -2, 250, 0)946 'translate(50px) matrix(-1, 0, 0, -1, 200, 0) scale(2)',947 // matrix(1, 1, 1, 1, 100, 100)948 'translate(100px) matrix( 1, 1, 0, 0, 0, 100) skew(45deg)',949 ],950 },951 { duration: 1000, fill: 'both' }952 );953 testAnimationSampleMatrices(animation, idlName,954 [ { time: 0, expected: [ -2, 0, 0, -2, 250, 0 ] },955 { time: 499, expected: [ -2, 0, 0, -2, 250, 0 ] },956 { time: 500, expected: [ 1, 1, 1, 1, 100, 100 ] },957 { time: 1000, expected: [ 1, 1, 1, 1, 100, 100 ] }]);958 }, `${property}: non-invertible matrices in mismatched transform lists`);959 test(t => {960 const idlName = propertyToIDL(property);961 const target = createTestElement(t, setup);962 const animation = target.animate(963 {964 // perspective(0) is treated as perspective(1px)965 [idlName]: ['perspective(0)', 'perspective(10px)'],966 },967 1000968 );969 testAnimationSampleMatrices(animation, idlName,970 [{ time: 500, expected: [ 1, 0, 0, 0,971 0, 1, 0, 0,972 0, 0, 1, -0.55,973 0, 0, 0, 1 ] }]);974 }, `${property}: perspective`);975 },976 testAddition: function(property, setup) {977 test(t => {978 const idlName = propertyToIDL(property);979 const target = createTestElement(t, setup);980 target.style[idlName] = 'translateX(100px)';981 const animation = target.animate({ [idlName]: ['translateX(-200px)',982 'translateX(500px)'] },983 { duration: 1000, fill: 'both',984 composite: 'add' });985 testAnimationSampleMatrices(animation, idlName,986 [ { time: 0, expected: [ 1, 0, 0, 1, -100, 0 ] },987 { time: 1000, expected: [ 1, 0, 0, 1, 600, 0 ] }]);988 }, `${property}: translate`);989 test(t => {990 const idlName = propertyToIDL(property);991 const target = createTestElement(t, setup);992 target.style[idlName] = 'rotate(45deg)';993 const animation = target.animate({ [idlName]: ['rotate(-90deg)',994 'rotate(90deg)'] },995 { duration: 1000, fill: 'both',996 composite: 'add' });997 testAnimationSampleMatrices(animation, idlName,998 [{ time: 0, expected: [ Math.cos(-Math.PI / 4),999 Math.sin(-Math.PI / 4),1000 -Math.sin(-Math.PI / 4),1001 Math.cos(-Math.PI / 4),1002 0, 0] },1003 { time: 1000, expected: [ Math.cos(Math.PI * 3 / 4),1004 Math.sin(Math.PI * 3 / 4),1005 -Math.sin(Math.PI * 3 / 4),1006 Math.cos(Math.PI * 3 / 4),1007 0, 0] }]);1008 }, `${property}: rotate`);1009 test(t => {1010 const idlName = propertyToIDL(property);1011 const target = createTestElement(t, setup);1012 target.style[idlName] = 'scale(2)';1013 const animation = target.animate({ [idlName]: ['scale(-3)', 'scale(5)'] },1014 { duration: 1000, fill: 'both',1015 composite: 'add' });1016 testAnimationSampleMatrices(animation, idlName,1017 [{ time: 0, expected: [ -6, 0, 0, -6, 0, 0 ] }, // scale(-3) scale(2)1018 { time: 1000, expected: [ 10, 0, 0, 10, 0, 0 ] }]); // scale(5) scale(2)1019 }, `${property}: scale`);1020 test(t => {1021 const idlName = propertyToIDL(property);1022 const target = createTestElement(t, setup);1023 // matrix(1, tan(10deg), tan(10deg), 1)1024 target.style[idlName] = 'skew(10deg, 10deg)';1025 const animation = // matrix(1, tan(20deg), tan(-30deg), 1)1026 target.animate({ [idlName]: ['skew(-30deg, 20deg)',1027 // matrix(1, tan(-30deg), tan(20deg), 1)1028 'skew(20deg, -30deg)'] },1029 { duration: 1000, fill: 'both', composite: 'add' });1030 // matrix at 0%.1031 // [ 1 tan(10deg) ] [ 1 tan(-30deg) ]1032 // [ tan(10deg) 1 ] [ tan(20deg) 1 ] =1033 //1034 // [ 1 + tan(10deg) * tan(20deg) tan(-30deg) + tan(10deg) ]1035 // [ tan(10deg) + tan(20deg) tan(10deg) * tan(-30deg) + 1 ]1036 // matrix at 100%.1037 // [ 1 tan(10deg) ] [ 1 tan(20deg) ]1038 // [ tan(10deg) 1 ] [ tan(-30deg) 1 ] =1039 //1040 // [ 1 + tan(10deg) * tan(-30deg) tan(20deg) + tan(10deg) ]1041 // [ tan(10deg) + tan(-30deg) tan(10deg) * tan(20deg) + 1 ]1042 testAnimationSampleMatrices(animation, idlName,1043 [{ time: 0, expected: [ 1 + Math.tan(Math.PI/18) * Math.tan(Math.PI/9),1044 Math.tan(Math.PI/18) + Math.tan(Math.PI/9),1045 Math.tan(-Math.PI/6) + Math.tan(Math.PI/18),1046 1 + Math.tan(Math.PI/18) * Math.tan(-Math.PI/6),1047 0, 0] },1048 { time: 1000, expected: [ 1 + Math.tan(Math.PI/18) * Math.tan(-Math.PI/6),1049 Math.tan(Math.PI/18) + Math.tan(-Math.PI/6),1050 Math.tan(Math.PI/9) + Math.tan(Math.PI/18),1051 1 + Math.tan(Math.PI/18) * Math.tan(Math.PI/9),1052 0, 0] }]);1053 }, `${property}: skew`);1054 test(t => {1055 const idlName = propertyToIDL(property);1056 const target = createTestElement(t, setup);1057 // matrix(1, 0, 0, 1, 100, 0)1058 target.style[idlName] = 'translateX(100px)';1059 const animation = // matrix(0, 1, -1, 0, 0, 0)1060 target.animate({ [idlName]: ['rotate(90deg)',1061 // matrix(-1, 0, 0, -1, 0, 0)1062 'rotate(180deg)'] },1063 { duration: 1000, fill: 'both', composite: 'add' });1064 testAnimationSampleMatrices(animation, idlName,1065 [{ time: 0, expected: [ 0, 1, -1, 0, 100, 0 ] },1066 { time: 1000, expected: [ -1, 0, 0, -1, 100, 0 ] }]);1067 }, `${property}: rotate on translate`);1068 test(t => {1069 const idlName = propertyToIDL(property);1070 const target = createTestElement(t, setup);1071 // matrix(0, 1, -1, 0, 0, 0)1072 target.style[idlName] = 'rotate(90deg)';1073 const animation = // matrix(1, 0, 0, 1, 100, 0)1074 target.animate({ [idlName]: ['translateX(100px)',1075 // matrix(1, 0, 0, 1, 200, 0)1076 'translateX(200px)'] },1077 { duration: 1000, fill: 'both', composite: 'add' });1078 testAnimationSampleMatrices(animation, idlName,1079 [{ time: 0, expected: [ 0, 1, -1, 0, 0, 100 ] },1080 { time: 1000, expected: [ 0, 1, -1, 0, 0, 200 ] }]);1081 }, `${property}: translate on rotate`);1082 test(t => {1083 const idlName = propertyToIDL(property);1084 const target = createTestElement(t, setup);1085 target.style[idlName] = 'rotate(45deg) translateX(100px)';1086 const animation = target.animate({ [idlName]: ['rotate(-90deg)',1087 'rotate(90deg)'] },1088 { duration: 1000, fill: 'both',1089 composite: 'add' });1090 testAnimationSampleMatrices(animation, idlName,1091 [{ time: 0, expected: [ Math.cos(-Math.PI / 4),1092 Math.sin(-Math.PI / 4),1093 -Math.sin(-Math.PI / 4),1094 Math.cos(-Math.PI / 4),1095 100 * Math.cos(Math.PI / 4),1096 100 * Math.sin(Math.PI / 4) ] },1097 { time: 1000, expected: [ Math.cos(Math.PI * 3 / 4),1098 Math.sin(Math.PI * 3 / 4),1099 -Math.sin(Math.PI * 3 / 4),1100 Math.cos(Math.PI * 3 / 4),1101 100 * Math.cos(Math.PI / 4),1102 100 * Math.sin(Math.PI / 4) ] }]);1103 }, `${property}: rotate on rotate and translate`);1104 test(t => {1105 const idlName = propertyToIDL(property);1106 const target = createTestElement(t, setup);1107 target.style[idlName] = 'matrix(0, 1, -1, 0, 0, 0)';1108 const animation = // Same matrices as above.1109 target.animate({ [idlName]: [ 'matrix(1, 0, 0, 1, 100, 0)',1110 'matrix(1, 0, 0, 1, 200, 0)' ] },1111 { duration: 1000, fill: 'both', composite: 'add' });1112 testAnimationSampleMatrices(animation, idlName,1113 [{ time: 0, expected: [ 0, 1, -1, 0, 0, 100 ] },1114 { time: 1000, expected: [ 0, 1, -1, 0, 0, 200 ] }]);1115 }, `${property}: matrix`);1116 test(t => {1117 const idlName = propertyToIDL(property);1118 const target = createTestElement(t, setup);1119 target.style[idlName] = 'rotate3d(1, 1, 0, 45deg)';1120 const animation =1121 target.animate({ [idlName]: [ 'rotate3d(1, 1, 0, -90deg)',1122 'rotate3d(1, 1, 0, 90deg)'] },1123 { duration: 1000, fill: 'both', composite: 'add' });1124 testAnimationSampleMatrices(animation, idlName,1125 [{ time: 0, expected: rotate3dToMatrix(1, 1, 0, -Math.PI / 4) },1126 { time: 1000, expected: rotate3dToMatrix(1, 1, 0, 3 * Math.PI / 4) }]);1127 }, `${property}: rotate3d`);1128 test(t => {1129 const idlName = propertyToIDL(property);1130 const target = createTestElement(t, setup);1131 // To calculate expected matrices easily, generate input matrices from1132 // rotate3d.1133 target.style[idlName] = rotate3dToMatrix3d(1, 1, 0, Math.PI / 4);1134 const from = rotate3dToMatrix3d(1, 1, 0, -Math.PI / 2);1135 const to = rotate3dToMatrix3d(1, 1, 0, Math.PI / 2);1136 const animation =1137 target.animate({ [idlName]: [ from, to ] },1138 { duration: 1000, fill: 'both', composite: 'add' });1139 testAnimationSampleMatrices(animation, idlName,1140 [{ time: 0, expected: rotate3dToMatrix(1, 1, 0, -Math.PI / 4) },1141 { time: 1000, expected: rotate3dToMatrix(1, 1, 0, 3 * Math.PI / 4) }]);1142 }, `${property}: matrix3d`);1143 // Following tests aim for test the addition behavior for non-invertible1144 // matrices. Note that the addition for non-invertible matrices should be1145 // the same, just like addition for invertible matrices. With these tests,1146 // we can assure that addition never behaves as discrete. The non-invertible1147 // matrix that we use is the singular matrix, matrix(1, 1, 0, 0, 0, 100).1148 test(t => {1149 const idlName = propertyToIDL(property);1150 const target = createTestElement(t, setup);1151 target.style[idlName] = 'translateX(50px)';1152 const animation =1153 target.animate({ [idlName]: ['matrix(-1, 0, 0, -1, 200, 0)',1154 'matrix( 1, 1, 0, 0, 0, 100)'] },1155 { duration: 1000, fill: 'both', composite: 'add' });1156 testAnimationSampleMatrices(animation, idlName,1157 [ { time: 0, expected: [ -1, 0, 0, -1, 250, 0 ] },1158 { time: 1000, expected: [ 1, 1, 0, 0, 50, 100 ] }]);1159 }, `${property}: non-invertible matrices`);1160 test(t => {1161 const idlName = propertyToIDL(property);1162 const target = createTestElement(t, setup);1163 target.style[idlName] = 'translateX(50px)';1164 const animation = // matrix(0, -1, 1, 0, 200, 0)1165 target.animate({ [idlName]: ['matrix(-1, 0, 0, -1, 200, 0) rotate(90deg)',1166 // matrix(-1, -1, 0, 0, 0, 100)1167 'matrix( 1, 1, 0, 0, 0, 100) rotate(180deg)'] },1168 { duration: 1000, fill: 'both', composite: 'add' });1169 testAnimationSampleMatrices(animation, idlName,1170 [ { time: 0, expected: [ 0, -1, 1, 0, 250, 0 ] },1171 { time: 1000, expected: [ -1, -1, 0, 0, 50, 100 ] }]);1172 }, `${property}: non-invertible matrices in matched transform lists`);1173 test(t => {1174 const idlName = propertyToIDL(property);1175 const target = createTestElement(t, setup);1176 target.style[idlName] = 'translateX(50px)';1177 const animation = // matrix(-2, 0, 0, -2, 200, 0)1178 target.animate({ [idlName]: ['matrix(-1, 0, 0, -1, 200, 0) scale(2)',1179 // matrix(1, 1, 1, 1, 0, 100)1180 'matrix( 1, 1, 0, 0, 0, 100) skew(45deg)'] },1181 { duration: 1000, fill: 'both', composite: 'add' });1182 testAnimationSampleMatrices(animation, idlName,1183 [ { time: 0, expected: [ -2, 0, 0, -2, 250, 0 ] },1184 { time: 1000, expected: [ 1, 1, 1, 1, 50, 100 ] }]);1185 }, `${property}: non-invertible matrices in mismatched transform lists`);1186 },1187 testAccumulation: function(property, setup) {1188 test(t => {1189 const idlName = propertyToIDL(property);1190 const target = createTestElement(t, setup);1191 target.style[idlName] = 'translateX(100px)';1192 const animation = target.animate({ [idlName]: ['translateX(-200px)',1193 'translateX(500px)'] },1194 { duration: 1000, fill: 'both',1195 composite: 'accumulate' });1196 testAnimationSampleMatrices(animation, idlName,1197 [ { time: 0, expected: [ 1, 0, 0, 1, -100, 0 ] },1198 { time: 1000, expected: [ 1, 0, 0, 1, 600, 0 ] }]);1199 }, `${property}: translate`);1200 test(t => {1201 const idlName = propertyToIDL(property);1202 const target = createTestElement(t, setup);1203 target.style[idlName] = 'rotate(45deg)';1204 const animation = target.animate({ [idlName]: ['rotate(-90deg)',1205 'rotate(90deg)'] },1206 { duration: 1000, fill: 'both',1207 composite: 'accumulate' });1208 testAnimationSampleMatrices(animation, idlName,1209 [{ time: 0, expected: [ Math.cos(-Math.PI / 4),1210 Math.sin(-Math.PI / 4),1211 -Math.sin(-Math.PI / 4),1212 Math.cos(-Math.PI / 4),1213 0, 0] },1214 { time: 1000, expected: [ Math.cos(Math.PI * 3 / 4),1215 Math.sin(Math.PI * 3 / 4),1216 -Math.sin(Math.PI * 3 / 4),1217 Math.cos(Math.PI * 3 / 4),1218 0, 0] }]);1219 }, `${property}: rotate`);1220 test(t => {1221 const idlName = propertyToIDL(property);1222 const target = createTestElement(t, setup);1223 target.style[idlName] = 'scale(2)';1224 const animation = target.animate({ [idlName]: ['scale(-3)', 'scale(5)'] },1225 { duration: 1000, fill: 'both',1226 composite: 'accumulate' });1227 testAnimationSampleMatrices(animation, idlName,1228 // scale((2 - 1) + (-3 - 1) + 1)1229 [{ time: 0, expected: [ -2, 0, 0, -2, 0, 0 ] },1230 // scale((2 - 1) + (5 - 1) + 1)1231 { time: 1000, expected: [ 6, 0, 0, 6, 0, 0 ] }]);1232 }, `${property}: scale`);1233 test(t => {1234 const idlName = propertyToIDL(property);1235 const target = createTestElement(t, setup);1236 // matrix(1, tan(10deg), tan(10deg), 1)1237 target.style[idlName] = 'skew(10deg, 10deg)';1238 const animation = // matrix(1, tan(20deg), tan(-30deg), 1)1239 target.animate({ [idlName]: ['skew(-30deg, 20deg)',1240 // matrix(1, tan(-30deg), tan(20deg), 1)1241 'skew(20deg, -30deg)'] },1242 { duration: 1000, fill: 'both', composite: 'accumulate' });1243 testAnimationSampleMatrices(animation, idlName,1244 [{ time: 0, expected: [ 1, Math.tan(Math.PI/6),1245 Math.tan(-Math.PI/9), 1,1246 0, 0] },1247 { time: 1000, expected: [ 1, Math.tan(-Math.PI/9),1248 Math.tan(Math.PI/6), 1,1249 0, 0] }]);1250 }, `${property}: skew`);1251 test(t => {1252 const idlName = propertyToIDL(property);1253 const target = createTestElement(t, setup);1254 // matrix(1, 0, 0, 1, 100, 0)1255 target.style[idlName] = 'translateX(100px)';1256 const animation = // matrix(0, 1, -1, 0, 0, 0)1257 target.animate({ [idlName]: ['rotate(90deg)',1258 // matrix(-1, 0, 0, -1, 0, 0)1259 'rotate(180deg)'] },1260 { duration: 1000, fill: 'both', composite: 'accumulate' });1261 testAnimationSampleMatrices(animation, idlName,1262 [{ time: 0, expected: [ 0, 1, -1, 0, 100, 0 ] },1263 { time: 1000, expected: [ -1, 0, 0, -1, 100, 0 ] }]);1264 }, `${property}: rotate on translate`);1265 test(t => {1266 const idlName = propertyToIDL(property);1267 const target = createTestElement(t, setup);1268 // matrix(0, 1, -1, 0, 0, 0)1269 target.style[idlName] = 'rotate(90deg)';1270 const animation = // matrix(1, 0, 0, 1, 100, 0)1271 target.animate({ [idlName]: ['translateX(100px)',1272 // matrix(1, 0, 0, 1, 200, 0)1273 'translateX(200px)'] },1274 { duration: 1000, fill: 'both', composite: 'accumulate' });1275 testAnimationSampleMatrices(animation, idlName,1276 [{ time: 0, expected: [ 0, 1, -1, 0, 100, 0 ] },1277 { time: 1000, expected: [ 0, 1, -1, 0, 200, 0 ] }]);1278 }, `${property}: translate on rotate`);1279 test(t => {1280 const idlName = propertyToIDL(property);1281 const target = createTestElement(t, setup);1282 target.style[idlName] = 'rotate(45deg)';1283 const animation =1284 target.animate({ [idlName]: ['rotate(45deg) translateX(0px)',1285 'rotate(45deg) translateX(100px)'] },1286 { duration: 1000, fill: 'both', composite: 'accumulate' });1287 testAnimationSampleMatrices(animation, idlName,1288 [{ time: 0, expected: [ Math.cos(Math.PI / 2),1289 Math.sin(Math.PI / 2),1290 -Math.sin(Math.PI / 2),1291 Math.cos(Math.PI / 2),1292 0 * Math.cos(Math.PI / 2),1293 0 * Math.sin(Math.PI / 2) ] },1294 { time: 1000, expected: [ Math.cos(Math.PI / 2),1295 Math.sin(Math.PI / 2),1296 -Math.sin(Math.PI / 2),1297 Math.cos(Math.PI / 2),1298 100 * Math.cos(Math.PI / 2),1299 100 * Math.sin(Math.PI / 2) ] }]);1300 }, `${property}: rotate and translate on rotate`);1301 test(t => {1302 const idlName = propertyToIDL(property);1303 const target = createTestElement(t, setup);1304 target.style[idlName] = 'rotate(45deg) translateX(100px)';1305 const animation =1306 target.animate({ [idlName]: ['rotate(45deg)', 'rotate(45deg)'] },1307 { duration: 1000, fill: 'both', composite: 'accumulate' });1308 testAnimationSampleMatrices(animation, idlName,1309 [{ time: 0, expected: [ Math.cos(Math.PI / 2),1310 Math.sin(Math.PI / 2),1311 -Math.sin(Math.PI / 2),1312 Math.cos(Math.PI / 2),1313 100 * Math.cos(Math.PI / 2),1314 100 * Math.sin(Math.PI / 2) ] },1315 { time: 1000, expected: [ Math.cos(Math.PI / 2),1316 Math.sin(Math.PI / 2),1317 -Math.sin(Math.PI / 2),1318 Math.cos(Math.PI / 2),1319 100 * Math.cos(Math.PI / 2),1320 100 * Math.sin(Math.PI / 2) ] }]);1321 }, `${property}: rotate on rotate and translate`);1322 test(t => {1323 const idlName = propertyToIDL(property);1324 const target = createTestElement(t, setup);1325 target.style[idlName] = 'matrix(0, 1, -1, 0, 0, 0)';1326 const animation = // Same matrices as above.1327 target.animate({ [idlName]: [ 'matrix(1, 0, 0, 1, 100, 0)',1328 'matrix(1, 0, 0, 1, 200, 0)' ] },1329 { duration: 1000, fill: 'both', composite: 'accumulate' });1330 testAnimationSampleMatrices(animation, idlName,1331 [{ time: 0, expected: [ 0, 1, -1, 0, 100, 0 ] },1332 { time: 1000, expected: [ 0, 1, -1, 0, 200, 0 ] }]);1333 }, `${property}: matrix`);1334 test(t => {1335 const idlName = propertyToIDL(property);1336 const target = createTestElement(t, setup);1337 target.style[idlName] = 'rotate3d(1, 1, 0, 45deg)';1338 const animation =1339 target.animate({ [idlName]: [ 'rotate3d(1, 1, 0, -90deg)',1340 'rotate3d(1, 1, 0, 90deg)'] },1341 { duration: 1000, fill: 'both', composite: 'accumulate' });1342 testAnimationSampleMatrices(animation, idlName,1343 [{ time: 0, expected: rotate3dToMatrix(1, 1, 0, -Math.PI / 4) },1344 { time: 1000, expected: rotate3dToMatrix(1, 1, 0, 3 * Math.PI / 4) }]);1345 }, `${property}: rotate3d`);1346 test(t => {1347 const idlName = propertyToIDL(property);1348 const target = createTestElement(t, setup);1349 // To calculate expected matrices easily, generate input matrices from1350 // rotate3d.1351 target.style[idlName] = rotate3dToMatrix3d(1, 1, 0, Math.PI / 4);1352 const from = rotate3dToMatrix3d(1, 1, 0, -Math.PI / 2);1353 const to = rotate3dToMatrix3d(1, 1, 0, Math.PI / 2);1354 const animation =1355 target.animate({ [idlName]: [ from, to ] },1356 { duration: 1000, fill: 'both', composite: 'accumulate' });1357 testAnimationSampleMatrices(animation, idlName,1358 [{ time: 0, expected: rotate3dToMatrix(1, 1, 0, -Math.PI / 4) },1359 { time: 1000, expected: rotate3dToMatrix(1, 1, 0, 3 * Math.PI / 4) }]);1360 }, `${property}: matrix3d`);1361 test(t => {1362 const idlName = propertyToIDL(property);1363 const target = createTestElement(t, setup);1364 const matrixArray = [ 1, 0, 0, 0,1365 0, 1, 0, 0,1366 0, 0, 1, 0,1367 0, 0, 1, 1 ];1368 target.style[idlName] = createMatrixFromArray(matrixArray);1369 const animation =1370 target.animate({ [idlName]: [ 'none', 'none' ] },1371 { duration: 1000, fill: 'both', composite: 'accumulate' });1372 testAnimationSampleMatrices(animation, idlName,1373 [{ time: 0, expected: matrixArray },1374 { time: 1000, expected: matrixArray }]);1375 }, `${property}: none`);1376 // Following tests aim for test the fallback discrete accumulation behavior1377 // for non-invertible matrices. The non-invertible matrix that we use is the1378 // singular matrix, matrix(1, 1, 0, 0, 0, 100).1379 test(t => {1380 const idlName = propertyToIDL(property);1381 const target = createTestElement(t, setup);1382 target.animate({ [idlName]: ['matrix(-1, 0, 0, -1, 200, 0)',1383 'matrix(-1, 0, 0, -1, 200, 0)'] }, 1000);1384 const animation = target.animate(1385 {1386 [idlName]: [1387 'matrix( 1, 1, 0, 0, 0, 100)',1388 'matrix( 1, 1, 0, 0, 0, 100)',1389 ],1390 },1391 { duration: 1000, composite: 'accumulate' }1392 );1393 testAnimationSampleMatrices(animation, idlName, [1394 { time: 0, expected: [1, 1, 0, 0, 0, 100] },1395 ]);1396 }, `${property}: non-invertible matrices (non-invertible onto invertible)`);1397 test(t => {1398 const idlName = propertyToIDL(property);1399 const target = createTestElement(t, setup);1400 target.animate({ [idlName]: ['matrix( 1, 1, 0, 0, 0, 100)',1401 'matrix( 1, 1, 0, 0, 0, 100)'] }, 1000);1402 const animation = target.animate(1403 {1404 [idlName]: [1405 'matrix(-1, 0, 0, -1, 200, 0)',1406 'matrix(-1, 0, 0, -1, 200, 0)',1407 ],1408 },1409 { duration: 1000, composite: 'accumulate' }1410 );1411 testAnimationSampleMatrices(animation, idlName, [1412 { time: 0, expected: [-1, 0, 0, -1, 200, 0] },1413 ]);1414 }, `${property}: non-invertible matrices (invertible onto non-invertible)`);1415 test(t => {1416 const idlName = propertyToIDL(property);1417 const target = createTestElement(t, setup);1418 // matrix(0, -1, 1, 0, 250, 0)1419 target.animate(1420 {1421 [idlName]: [1422 'translate(50px) matrix(-1, 0, 0, -1, 200, 0) rotate(90deg)',1423 'translate(50px) matrix(-1, 0, 0, -1, 200, 0) rotate(90deg)',1424 ],1425 },1426 10001427 );1428 // matrix(-1, -1, 0, 0, 100, 100)1429 const animation = target.animate(1430 {1431 [idlName]: [1432 'translate(100px) matrix( 1, 1, 0, 0, 0, 100) rotate(180deg)',1433 'translate(100px) matrix( 1, 1, 0, 0, 0, 100) rotate(180deg)',1434 ],1435 },1436 { duration: 1000, composite: 'accumulate' }1437 );1438 testAnimationSampleMatrices(animation, idlName, [1439 { time: 0, expected: [-1, -1, 0, 0, 100, 100] },1440 ]);1441 }, `${property}: non-invertible matrices in matched transform lists (non-invertible onto invertible)`);1442 test(t => {1443 const idlName = propertyToIDL(property);1444 const target = createTestElement(t, setup);1445 // matrix(-1, -1, 0, 0, 100, 100)1446 target.animate(1447 {1448 [idlName]: [1449 'translate(100px) matrix(1, 1, 0, 0, 0, 100) rotate(180deg)',1450 'translate(100px) matrix(1, 1, 0, 0, 0, 100) rotate(180deg)',1451 ],1452 },1453 10001454 );1455 // matrix(0, -1, 1, 0, 250, 0)1456 const animation = target.animate(1457 {1458 [idlName]: [1459 'translate(50px) matrix(-1, 0, 0, -1, 200, 0) rotate(90deg)',1460 'translate(50px) matrix(-1, 0, 0, -1, 200, 0) rotate(90deg)',1461 ],1462 },1463 { duration: 1000, composite: 'accumulate' }1464 );1465 testAnimationSampleMatrices(animation, idlName, [1466 { time: 0, expected: [0, -1, 1, 0, 250, 0] },1467 ]);1468 }, `${property}: non-invertible matrices in matched transform lists (invertible onto non-invertible)`);1469 test(t => {1470 const idlName = propertyToIDL(property);1471 const target = createTestElement(t, setup);1472 // matrix(-2, 0, 0, -2, 250, 0)1473 target.animate(1474 {1475 [idlName]: [1476 'translate(50px) matrix(-1, 0, 0, -1, 200, 0) scale(2)',1477 'translate(50px) matrix(-1, 0, 0, -1, 200, 0) scale(2)',1478 ],1479 },1480 10001481 );1482 // matrix(1, 1, 1, 1, 100, 100)1483 const animation = target.animate(1484 {1485 [idlName]: [1486 'translate(100px) matrix(1, 1, 0, 0, 0, 100) skew(45deg)',1487 'translate(100px) matrix(1, 1, 0, 0, 0, 100) skew(45deg)',1488 ],1489 },1490 { duration: 1000, composite: 'accumulate' }1491 );1492 testAnimationSampleMatrices(animation, idlName, [1493 { time: 0, expected: [1, 1, 1, 1, 100, 100] },1494 ]);1495 }, `${property}: non-invertible matrices in mismatched transform lists`1496 + ' (non-invertible onto invertible)');1497 test(t => {1498 const idlName = propertyToIDL(property);1499 const target = createTestElement(t, setup);1500 // matrix(1, 1, 1, 1, 100, 100)1501 target.animate(1502 {1503 [idlName]: [1504 'translate(100px) matrix(1, 1, 0, 0, 0, 100) skew(45deg)',1505 'translate(100px) matrix(1, 1, 0, 0, 0, 100) skew(45deg)',1506 ],1507 },1508 10001509 );1510 // matrix(-2, 0, 0, -2, 250, 0)1511 const animation = target.animate(1512 {1513 [idlName]: [1514 'translate(50px) matrix(-1, 0, 0, -1, 200, 0) scale(2)',1515 'translate(50px) matrix(-1, 0, 0, -1, 200, 0) scale(2)',1516 ],1517 },1518 { duration: 1000, composite: 'accumulate' }1519 );1520 testAnimationSampleMatrices(animation, idlName, [1521 { time: 0, expected: [-2, 0, 0, -2, 250, 0] },1522 ]);1523 }, `${property}: non-invertible matrices in mismatched transform lists`1524 + ' (invertible onto non-invertible)');1525 },1526};1527const rotateListType = {1528 testInterpolation: (property, setup) => {1529 test(t => {1530 const idlName = propertyToIDL(property);1531 const target = createTestElement(t, setup);1532 const animation = target.animate(1533 {1534 [idlName]: ['45deg', '135deg'],1535 },1536 10001537 );1538 testAnimationSamples(animation, idlName,1539 [{ time: 500, expected: '90deg' }]);1540 }, `${property} without rotation axes`);1541 test(t => {1542 const idlName = propertyToIDL(property);1543 const target = createTestElement(t, setup);1544 const animation =1545 target.animate({ [idlName]: [ '0 1 0 0deg',1546 '0 1 0 90deg'] },1547 1000);1548 testAnimationSamples(animation, idlName,1549 [{ time: 500, expected: 'y 45deg' }]);1550 }, `${property} with rotation axes`);1551 test(t => {1552 const idlName = propertyToIDL(property);1553 const target = createTestElement(t, setup);1554 const animation =1555 target.animate({ [idlName]: [ '0 1 0 0deg',1556 '0 1 0 720deg'] },1557 1000);1558 testAnimationSamples(animation, idlName,1559 [{ time: 250, expected: 'y 180deg' }]);1560 }, `${property} with rotation axes and range over 360 degrees`);1561 test(t => {1562 const idlName = propertyToIDL(property);1563 const target = createTestElement(t, setup);1564 const animation =1565 target.animate({ [idlName]: [ '0 1 0 0deg',1566 '0 1 1 90deg'] },1567 1000);1568 testAnimationSampleRotate3d(animation, idlName,1569 [{ time: 500, expected: '0 0.707107 0.707107 45deg' }]);1570 }, `${property} with different rotation axes`);1571 },1572 testAddition: function(property, setup) {1573 test(t => {1574 const idlName = propertyToIDL(property);1575 const target = createTestElement(t, setup);1576 target.style[idlName] = '45deg';1577 const animation = target.animate({ [idlName]: ['-90deg', '90deg'] },1578 { duration: 1000, fill: 'both',1579 composite: 'add' });1580 testAnimationSamples(animation, idlName,1581 [{ time: 0, expected: '-45deg' },1582 { time: 1000, expected: '135deg' }]);1583 }, `${property} without rotation axes`);1584 test(t => {1585 const idlName = propertyToIDL(property);1586 const target = createTestElement(t, setup);1587 // Rotation specified in transform property should not affect the computed1588 // value of |property|.1589 target.style.transform = 'rotate(20deg)';1590 target.style[idlName] = 'y -45deg';1591 const animation =1592 target.animate({ [idlName]: ['0 1 0 90deg',1593 '0 1 0 180deg'] },1594 { duration: 1000, fill: 'both', composite: 'add' });1595 testAnimationSamples(animation, idlName,1596 [{ time: 0, expected: 'y 45deg' },1597 { time: 1000, expected: 'y 135deg' }]);1598 }, `${property} with underlying transform`);1599 test(t => {1600 const idlName = propertyToIDL(property);1601 const target = createTestElement(t, setup);1602 const animation =1603 target.animate({ [idlName]: [ '0 1 0 0deg',1604 '1 1 1 270deg'] },1605 { duration: 1000, fill: 'both', composite: 'add' });1606 testAnimationSampleRotate3d(animation, idlName,1607 [{ time: 500, expected: '0.57735 0.57735 0.57735 135deg' }]);1608 }, `${property} with different rotation axes`);1609 },1610 testAccumulation: function(property, setup) {1611 test(t => {1612 const idlName = propertyToIDL(property);1613 const target = createTestElement(t, setup);1614 target.style[idlName] = '45deg';1615 const animation = target.animate({ [idlName]: ['-90deg', '90deg'] },1616 { duration: 1000, fill: 'both',1617 composite: 'accumulate' });1618 testAnimationSamples(animation, idlName,1619 [{ time: 0, expected: '-45deg' },1620 { time: 1000, expected: '135deg' }]);1621 }, `${property} without rotation axes`);1622 test(t => {1623 const idlName = propertyToIDL(property);1624 const target = createTestElement(t, setup);1625 target.style.transform = 'translateX(100px)';1626 target.style[idlName] = '1 0 0 -45deg';1627 const animation =1628 target.animate({ [idlName]: ['1 0 0 90deg',1629 '1 0 0 180deg'] },1630 { duration: 1000, fill: 'both', composite: 'accumulate' });1631 testAnimationSamples(animation, idlName,1632 [{ time: 0, expected: 'x 45deg' },1633 { time: 1000, expected: 'x 135deg' }]);1634 }, `${property} with underlying transform`);1635 test(t => {1636 const idlName = propertyToIDL(property);1637 const target = createTestElement(t, setup);1638 const animation =1639 target.animate({ [idlName]: [ '0 1 0 0deg',1640 '1 0 1 180deg'] },1641 { duration: 1000, fill: 'both', composite: 'accumulate' });1642 testAnimationSampleRotate3d(animation, idlName,1643 [{ time: 500, expected: '0.707107 0 0.707107 90deg' }]);1644 }, `${property} with different rotation axes`);1645 },1646};1647const translateListType = {1648 testInterpolation: (property, setup) => {1649 test(t => {1650 const idlName = propertyToIDL(property);1651 const target = createTestElement(t, setup);1652 const animation = target.animate(1653 {1654 [idlName]: ['200px', '400px'],1655 },1656 10001657 );1658 testAnimationSamples(animation, idlName,1659 [{ time: 500, expected: '300px' }]);1660 }, `${property} with two unspecified values`);1661 test(t => {1662 const idlName = propertyToIDL(property);1663 const target = createTestElement(t, setup);1664 const animation = target.animate(1665 {1666 [idlName]: ['200px -200px', '400px 400px'],1667 },1668 10001669 );1670 testAnimationSamples(animation, idlName,1671 [{ time: 500, expected: '300px 100px' }]);1672 }, `${property} with one unspecified value`);1673 test(t => {1674 const idlName = propertyToIDL(property);1675 const target = createTestElement(t, setup);1676 const animation = target.animate(1677 {1678 [idlName]: ['200px -200px 600px', '400px 400px -200px'],1679 },1680 10001681 );1682 testAnimationSamples(animation, idlName,1683 [{ time: 500, expected: '300px 100px 200px' }]);1684 }, `${property} with all three values specified`);1685 test(t => {1686 const idlName = propertyToIDL(property);1687 const target = createTestElement(t, setup);1688 const animation = target.animate(1689 {1690 [idlName]: ['0% -101px 600px', '400px 50% -200px'],1691 },1692 10001693 );1694 testAnimationSamples(animation, idlName,1695 [{ time: 500, expected: 'calc(0% + 200px) calc(25% - 50.5px) 200px' }]);1696 }, `${property} with combination of percentages and lengths`);1697 },1698 testAddition: function(property, setup) {1699 test(t => {1700 const idlName = propertyToIDL(property);1701 const target = createTestElement(t, setup);1702 target.style[idlName] = '100px';1703 const animation = target.animate({ [idlName]: ['-200px', '500px'] },1704 { duration: 1000, fill: 'both',1705 composite: 'add' });1706 testAnimationSamples(animation, idlName,1707 [ { time: 0, expected: '-100px' },1708 { time: 1000, expected: '600px' }]);1709 }, `${property}`);1710 test(t => {1711 const idlName = propertyToIDL(property);1712 const target = createTestElement(t, setup);1713 target.transform = 'translateY(100px)';1714 target.style[idlName] = '100px';1715 const animation = target.animate({ [idlName]: ['-200px', '500px'] },1716 { duration: 1000, fill: 'both',1717 composite: 'add' });1718 testAnimationSamples(animation, idlName,1719 [ { time: 0, expected: '-100px' },1720 { time: 1000, expected: '600px' }]);1721 }, `${property} with underlying transform`);1722 test(t => {1723 const idlName = propertyToIDL(property);1724 const target = createTestElement(t, setup);1725 target.style[idlName] = '50%';1726 const animation = target.animate({ [idlName]: ['-200px', '500px'] },1727 { duration: 1000, fill: 'both',1728 composite: 'add' });1729 testAnimationSamples(animation, idlName,1730 [ { time: 0, expected: 'calc(50% - 200px)' },1731 { time: 1000, expected: 'calc(50% + 500px)' }]);1732 }, `${property} with underlying percentage value`);1733 },1734 testAccumulation: function(property, setup) {1735 test(t => {1736 const idlName = propertyToIDL(property);1737 const target = createTestElement(t, setup);1738 target.style[idlName] = '100px';1739 const animation = target.animate({ [idlName]: ['-200px', '500px'] },1740 { duration: 1000, fill: 'both',1741 composite: 'accumulate' });1742 testAnimationSamples(animation, idlName,1743 [ { time: 0, expected: '-100px' },1744 { time: 1000, expected: '600px' }]);1745 }, `${property}`);1746 test(t => {1747 const idlName = propertyToIDL(property);1748 const target = createTestElement(t, setup);1749 target.transform = 'translateY(100px)';1750 target.style[idlName] = '100px';1751 const animation = target.animate({ [idlName]: ['-200px', '500px'] },1752 { duration: 1000, fill: 'both',1753 composite: 'accumulate' });1754 testAnimationSamples(animation, idlName,1755 [ { time: 0, expected: '-100px' },1756 { time: 1000, expected: '600px' }]);1757 }, `${property} with transform`);1758 },1759};1760const scaleListType = {1761 testInterpolation: (property, setup) => {1762 test(t => {1763 const idlName = propertyToIDL(property);1764 const target = createTestElement(t, setup);1765 const animation = target.animate({ [idlName]: ['3', '5'] },1766 1000);1767 testAnimationSamples(animation, idlName,1768 [{ time: 500, expected: '4' }]);1769 }, `${property} with two unspecified values`);1770 test(t => {1771 const idlName = propertyToIDL(property);1772 const target = createTestElement(t, setup);1773 const animation = target.animate({ [idlName]: ['3 3', '5 5'] },1774 1000);1775 testAnimationSamples(animation, idlName,1776 [{ time: 500, expected: '4' }]);1777 }, `${property} with one unspecified value`);1778 test(t => {1779 const idlName = propertyToIDL(property);1780 const target = createTestElement(t, setup);1781 const animation = target.animate({ [idlName]: ['3 3 3', '5 5 5'] },1782 1000);1783 testAnimationSamples(animation, idlName,1784 [{ time: 500, expected: '4 4 4' }]);1785 }, `${property}`);1786 },1787 testAddition: function(property, setup) {1788 test(t => {1789 const idlName = propertyToIDL(property);1790 const target = createTestElement(t, setup);1791 target.style[idlName] = '2';1792 const animation = target.animate({ [idlName]: ['-3', '5'] },1793 { duration: 1000, fill: 'both',1794 composite: 'add' });1795 testAnimationSamples(animation, idlName,1796 [{ time: 0, expected: '-6' },1797 { time: 1000, expected: '10' }]);1798 }, `${property} with two unspecified values`);1799 test(t => {1800 const idlName = propertyToIDL(property);1801 const target = createTestElement(t, setup);1802 target.style[idlName] = '2 2';1803 const animation = target.animate({ [idlName]: ['-3 -3', '5 5'] },1804 { duration: 1000, fill: 'both',1805 composite: 'add' });1806 testAnimationSamples(animation, idlName,1807 [{ time: 0, expected: '-6' },1808 { time: 1000, expected: '10' }]);1809 }, `${property} with one unspecified value`);1810 test(t => {1811 const idlName = propertyToIDL(property);1812 const target = createTestElement(t, setup);1813 target.style[idlName] = '2 2 2';1814 const animation = target.animate({ [idlName]: ['-1 -2 -3', '4 5 6'] },1815 { duration: 1000, fill: 'both',1816 composite: 'add' });1817 testAnimationSamples(animation, idlName,1818 [{ time: 0, expected: '-2 -4 -6' },1819 { time: 1000, expected: '8 10 12' }]);1820 }, `${property}`);1821 },1822 testAccumulation: function(property, setup) {1823 test(t => {1824 const idlName = propertyToIDL(property);1825 const target = createTestElement(t, setup);1826 target.style[idlName] = '2';1827 const animation = target.animate({ [idlName]: ['-3', '5'] },1828 { duration: 1000, fill: 'both',1829 composite: 'accumulate' });1830 testAnimationSamples(animation, idlName,1831 [{ time: 0, expected: '-2' },1832 { time: 1000, expected: '6' }]);1833 }, `${property} with two unspecified values`);1834 test(t => {1835 const idlName = propertyToIDL(property);1836 const target = createTestElement(t, setup);1837 target.style[idlName] = '2 2';1838 const animation = target.animate({ [idlName]: ['-3 -3', '5 5'] },1839 { duration: 1000, fill: 'both',1840 composite: 'accumulate' });1841 testAnimationSamples(animation, idlName,1842 [{ time: 0, expected: '-2' },1843 { time: 1000, expected: '6' }]);1844 }, `${property} with one unspecified value`);1845 test(t => {1846 const idlName = propertyToIDL(property);1847 const target = createTestElement(t, setup);1848 target.style[idlName] = '2 2 2';1849 const animation = target.animate({ [idlName]: ['-1 -2 -3', '4 5 6'] },1850 { duration: 1000, fill: 'both',1851 composite: 'accumulate' });1852 testAnimationSamples(animation, idlName,1853 [{ time: 0, expected: '0 -1 -2' },1854 { time: 1000, expected: '5 6 7' }]);1855 }, `${property}`);1856 },1857};1858const filterListType = {1859 testInterpolation: (property, setup) => {1860 test(t => {1861 const idlName = propertyToIDL(property);1862 const target = createTestElement(t, setup);1863 const animation = target.animate({ [idlName]:1864 ['blur(10px)', 'blur(50px)'] },1865 1000);1866 testAnimationSamples(animation, idlName,1867 [{ time: 500, expected: 'blur(30px)' }]);1868 }, `${property}: blur function`);1869 test(t => {1870 const idlName = propertyToIDL(property);1871 const target = createTestElement(t, setup);1872 const animation = target.animate({ [idlName]: ['hue-rotate(0deg)',1873 'hue-rotate(100deg)'] },1874 1000);1875 testAnimationSamples(animation, idlName,1876 [{ time: 500, expected: 'hue-rotate(50deg)' }]);1877 }, `${property}: hue-rotate function with same unit(deg)`);1878 test(t => {1879 const idlName = propertyToIDL(property);1880 const target = createTestElement(t, setup);1881 const animation = target.animate({ [idlName]: ['hue-rotate(10deg)',1882 'hue-rotate(100rad)'] },1883 1000);1884 // 10deg = 0.1745rad.1885 testAnimationSamples(animation, idlName,1886 [{ time: 500, expected: 'hue-rotate(2869.79deg)' }]);1887 }, `${property}: hue-rotate function with different unit(deg -> rad)`);1888 test(t => {1889 const idlName = propertyToIDL(property);1890 const target = createTestElement(t, setup);1891 const animation = target.animate(1892 { [idlName]:1893 ['drop-shadow(10px 10px 10px rgba(255, 0, 0, 0.4))',1894 'drop-shadow(50px 50px 50px rgba(0, 0, 255, 0.8))'] },1895 1000);1896 testAnimationSamples(1897 animation, idlName,1898 [{ time: 500,1899 expected: 'drop-shadow(rgba(85, 0, 170, 0.6) 30px 30px 30px)' }]);1900 }, `${property}: drop-shadow function`);1901 test(t => {1902 const idlName = propertyToIDL(property);1903 const target = createTestElement(t, setup);1904 const animation = target.animate(1905 { [idlName]:1906 ['brightness(0.1) contrast(0.1) grayscale(0.1) invert(0.1) ' +1907 'opacity(0.1) saturate(0.1) sepia(0.1)',1908 'brightness(0.5) contrast(0.5) grayscale(0.5) invert(0.5) ' +1909 'opacity(0.5) saturate(0.5) sepia(0.5)'] },1910 1000);1911 testAnimationSamples(animation, idlName,1912 [{ time: 500,1913 expected: 'brightness(0.3) contrast(0.3) grayscale(0.3) ' +1914 'invert(0.3) opacity(0.3) saturate(0.3) sepia(0.3)' }]);1915 }, `${property}: percentage or numeric-specifiable functions`1916 + ' (number value)');1917 test(t => {1918 const idlName = propertyToIDL(property);1919 const target = createTestElement(t, setup);1920 const animation = target.animate(1921 { [idlName]:1922 ['brightness(10%) contrast(10%) grayscale(10%) invert(10%) ' +1923 'opacity(10%) saturate(10%) sepia(10%)',1924 'brightness(50%) contrast(50%) grayscale(50%) invert(50%) ' +1925 'opacity(50%) saturate(50%) sepia(50%)'] },1926 1000);1927 testAnimationSamples(animation, idlName,1928 [{ time: 500,1929 expected: 'brightness(0.3) contrast(0.3) grayscale(0.3) ' +1930 'invert(0.3) opacity(0.3) saturate(0.3) sepia(0.3)' }]);1931 }, `${property}: percentage or numeric-specifiable functions`1932 + ' (percentage value)');1933 test(t => {1934 const idlName = propertyToIDL(property);1935 const target = createTestElement(t, setup);1936 const animation = target.animate(1937 { [idlName]:1938 // To make missing filter-function-lists, specified the grayscale.1939 ['grayscale(0)',1940 'grayscale(1) brightness(0) contrast(0) opacity(0) saturate(0)' ]},1941 1000);1942 testAnimationSamples(animation, idlName,1943 [{ time: 500,1944 expected: 'grayscale(0.5) brightness(0.5) contrast(0.5) ' +1945 'opacity(0.5) saturate(0.5)' }]);1946 }, `${property}: interpolate different length of filter-function-list`1947 + ' with function which lacuna value is 1');1948 test(t => {1949 const idlName = propertyToIDL(property);1950 const target = createTestElement(t, setup);1951 const animation = target.animate(1952 { [idlName]:1953 // To make missing filter-function-lists, specified the opacity.1954 ['opacity(1)',1955 'opacity(0) grayscale(1) invert(1) sepia(1) blur(10px)'] },1956 1000);1957 testAnimationSamples(animation, idlName,1958 [{ time: 500,1959 expected:1960 'opacity(0.5) grayscale(0.5) invert(0.5) sepia(0.5) blur(5px)' }]);1961 }, `${property}: interpolate different length of filter-function-list`1962 + ' with function which lacuna value is 0');1963 test(t => {1964 const idlName = propertyToIDL(property);1965 const target = createTestElement(t, setup);1966 const animation = target.animate(1967 { [idlName]:1968 ['blur(0px)',1969 'blur(10px) drop-shadow(10px 10px 10px rgba(0, 0, 255, 0.8))'] },1970 1000);1971 testAnimationSamples(animation, idlName,1972 [{ time: 500,1973 // Per the spec: The initial value for interpolation is all length values1974 // set to 0 and the used color set to transparent.1975 expected: 'blur(5px) drop-shadow(rgba(0, 0, 255, 0.4) 5px 5px 5px)' }]);1976 }, `${property}: interpolate different length of filter-function-list`1977 + ' with drop-shadow function');1978 test(t => {1979 const idlName = propertyToIDL(property);1980 const target = createTestElement(t, setup);1981 const animation = target.animate({ [idlName]: ['none', 'blur(10px)'] },1982 1000);1983 testAnimationSamples(animation, idlName,1984 [{ time: 500, expected: 'blur(5px)' }]);1985 }, `${property}: interpolate from none`);1986 test(t => {1987 const idlName = propertyToIDL(property);1988 const target = createTestElement(t, setup);1989 const animation = target.animate(1990 { [idlName]:1991 ['blur(0px) url(\"#f1\")',1992 'blur(10px) url(\"#f2\")']},1993 1000);1994 testAnimationSamples(animation, idlName,1995 [{ time: 499, expected: 'blur(0px) url(\"#f1\")' },1996 { time: 500, expected: 'blur(10px) url(\"#f2\")' }]);1997 }, `${property}: url function (interpoalte as discrete)`);1998 },1999 testAddition: function(property, setup) {2000 test(t => {2001 const idlName = propertyToIDL(property);2002 const target = createTestElement(t, setup);2003 target.style[idlName] = 'blur(10px)';2004 const animation = target.animate({ [idlName]: ['blur(20px)',2005 'blur(50px)'] },2006 { duration: 1000, composite: 'add' });2007 testAnimationSamples(animation, idlName,2008 [ { time: 0, expected: 'blur(10px) blur(20px)' }]);2009 }, `${property}: blur on blur`);2010 test(t => {2011 const idlName = propertyToIDL(property);2012 const target = createTestElement(t, setup);2013 target.style[idlName] = 'blur(10px)';2014 const animation = target.animate({ [idlName]: ['brightness(80%)',2015 'brightness(40%)'] },2016 { duration: 1000, composite: 'add' });2017 testAnimationSamples(animation, idlName,2018 [ { time: 0, expected: 'blur(10px) brightness(0.8)' }]);2019 }, `${property}: different filter functions`);2020 },2021 testAccumulation: function(property, setup) {2022 test(t => {2023 const idlName = propertyToIDL(property);2024 const target = createTestElement(t, setup);2025 target.style[idlName] = 'blur(10px) brightness(0.3)';2026 const animation = target.animate(2027 {2028 [idlName]: [2029 'blur(20px) brightness(0.1)',2030 'blur(20px) brightness(0.1)',2031 ],2032 },2033 { duration: 1000, composite: 'accumulate' }2034 );2035 // brightness(0.1) onto brightness(0.3) means2036 // brightness((0.1 - 1.0) + (0.3 - 1.0) + 1.0). The result of this formula2037 // is brightness(-0.6) that means brightness(0.0).2038 testAnimationSamples(animation, idlName,2039 [ { time: 0, expected: 'blur(30px) brightness(0)' }]);2040 }, `${property}: same ordered filter functions`);2041 test(t => {2042 const idlName = propertyToIDL(property);2043 const target = createTestElement(t, setup);2044 target.style[idlName] = 'blur(10px) brightness(1.3)';2045 const animation = target.animate(2046 {2047 [idlName]: [2048 'brightness(1.2) blur(20px)',2049 'brightness(1.2) blur(20px)',2050 ],2051 },2052 { duration: 1000, composite: 'accumulate' }2053 );2054 // Mismatched ordered functions can't be accumulated.2055 testAnimationSamples(animation, idlName,2056 [ { time: 0, expected: 'brightness(1.2) blur(20px)' }]);2057 }, `${property}: mismatched ordered filter functions`);2058 },2059};2060const textShadowListType = {2061 testInterpolation: (property, setup) => {2062 test(t => {2063 const idlName = propertyToIDL(property);2064 const target = createTestElement(t, setup);2065 const animation =2066 target.animate({ [idlName]: [ 'none',2067 'rgb(100, 100, 100) 10px 10px 10px'] },2068 { duration: 1000, fill: 'both' });2069 testAnimationSamples(animation, idlName,2070 // Premultiplied2071 [{ time: 500, expected: 'rgba(100, 100, 100, 0.5) 5px 5px 5px' }]);2072 }, `${property}: from none to other`);2073 test(t => {2074 const idlName = propertyToIDL(property);2075 const target = createTestElement(t, setup);2076 const animation =2077 target.animate({ [idlName]: [ 'rgb(100, 100, 100) 10px 10px 10px',2078 'none' ] },2079 { duration: 1000, fill: 'both' });2080 testAnimationSamples(animation, idlName,2081 // Premultiplied2082 [{ time: 500, expected: 'rgba(100, 100, 100, 0.5) 5px 5px 5px' }]);2083 }, `${property}: from other to none`);2084 test(t => {2085 const idlName = propertyToIDL(property);2086 const target = createTestElement(t, setup);2087 const animation =2088 target.animate({ [idlName]: [ 'rgb(0, 0, 0) 0px 0px 0px',2089 'rgb(100, 100, 100) 10px 10px 10px'] },2090 { duration: 1000, fill: 'both' });2091 testAnimationSamples(animation, idlName,2092 [{ time: 500, expected: 'rgb(50, 50, 50) 5px 5px 5px' }]);2093 }, `${property}: single shadow`);2094 test(t => {2095 const idlName = propertyToIDL(property);2096 const target = createTestElement(t, setup);2097 const animation =2098 target.animate({ [idlName]: [ 'rgb(0, 0, 0) 0px 0px 0px, '2099 + 'rgb(200, 200, 200) 20px 20px 20px',2100 'rgb(100, 100, 100) 10px 10px 10px, '2101 + 'rgb(100, 100, 100) 10px 10px 10px'] },2102 { duration: 1000, fill: 'both' });2103 testAnimationSamples(animation, idlName,2104 [{ time: 500, expected: 'rgb(50, 50, 50) 5px 5px 5px, '2105 + 'rgb(150, 150, 150) 15px 15px 15px' }]);2106 }, `${property}: shadow list`);2107 test(t => {2108 const idlName = propertyToIDL(property);2109 const target = createTestElement(t, setup);2110 const animation =2111 target.animate({ [idlName]: [ 'rgb(200, 200, 200) 20px 20px 20px',2112 'rgb(100, 100, 100) 10px 10px 10px, '2113 + 'rgb(100, 100, 100) 10px 10px 10px'] },2114 { duration: 1000, fill: 'both' });2115 testAnimationSamples(animation, idlName,2116 [{ time: 500, expected: 'rgb(150, 150, 150) 15px 15px 15px, '2117 + 'rgba(100, 100, 100, 0.5) 5px 5px 5px' }]);2118 }, `${property}: mismatched list length (from longer to shorter)`);2119 test(t => {2120 const idlName = propertyToIDL(property);2121 const target = createTestElement(t, setup);2122 const animation =2123 target.animate({ [idlName]: [ 'rgb(100, 100, 100) 10px 10px 10px, '2124 + 'rgb(100, 100, 100) 10px 10px 10px',2125 'rgb(200, 200, 200) 20px 20px 20px'] },2126 { duration: 1000, fill: 'both' });2127 testAnimationSamples(animation, idlName,2128 [{ time: 500, expected: 'rgb(150, 150, 150) 15px 15px 15px, '2129 + 'rgba(100, 100, 100, 0.5) 5px 5px 5px' }]);2130 }, `${property}: mismatched list length (from shorter to longer)`);2131 test(t => {2132 const idlName = propertyToIDL(property);2133 const target = createTestElement(t, setup);2134 target.style.color = 'rgb(0, 255, 0)';2135 const animation =2136 target.animate({ [idlName]: [ 'currentcolor 0px 0px 0px',2137 'currentcolor 10px 10px 10px'] },2138 { duration: 1000, fill: 'both' });2139 testAnimationSamples(animation, idlName,2140 [{ time: 500, expected: 'rgb(0, 255, 0) 5px 5px 5px' }]);2141 }, `${property}: with currentcolor`);2142 },2143 testAddition: function(property, setup) {2144 test(t => {2145 const idlName = propertyToIDL(property);2146 const target = createTestElement(t, setup);2147 target.style[idlName] = 'rgb(0, 0, 0) 0px 0px 0px';2148 const animation =2149 target.animate({ [idlName]: [ 'rgb(120, 120, 120) 10px 10px 10px',2150 'rgb(120, 120, 120) 10px 10px 10px'] },2151 { duration: 1000, composite: 'add' });2152 testAnimationSamples(animation, idlName,2153 [ { time: 0, expected: 'rgb(0, 0, 0) 0px 0px 0px, ' +2154 'rgb(120, 120, 120) 10px 10px 10px' }]);2155 }, `${property}: shadow`);2156 },2157 testAccumulation: function(property, setup) {2158 test(t => {2159 const idlName = propertyToIDL(property);2160 const target = createTestElement(t, setup);2161 target.style[idlName] = 'rgb(120, 120, 120) 10px 10px 10px';2162 const animation =2163 target.animate({ [idlName]: [ 'rgb(120, 120, 120) 10px 10px 10px',2164 'rgb(120, 120, 120) 10px 10px 10px'] },2165 { duration: 1000, composite: 'accumulate' });2166 testAnimationSamples(animation, idlName,2167 [ { time: 0, expected: 'rgb(240, 240, 240) 20px 20px 20px' }]);2168 }, `${property}: shadow`);2169 },2170};2171const boxShadowListType = {2172 testInterpolation: (property, setup) => {2173 test(t => {2174 const idlName = propertyToIDL(property);2175 const target = createTestElement(t, setup);2176 const animation =2177 target.animate({ [idlName]: [ 'none',2178 'rgb(100, 100, 100) 10px 10px 10px 0px'] },2179 { duration: 1000, fill: 'both' });2180 testAnimationSamples(animation, idlName,2181 // Premultiplied2182 [{ time: 500, expected: 'rgba(100, 100, 100, 0.5) 5px 5px 5px 0px' }]);2183 }, `${property}: from none to other`);2184 test(t => {2185 const idlName = propertyToIDL(property);2186 const target = createTestElement(t, setup);2187 const animation =2188 target.animate({ [idlName]: [ 'rgb(100, 100, 100) 10px 10px 10px 0px',2189 'none' ] },2190 { duration: 1000, fill: 'both' });2191 testAnimationSamples(animation, idlName,2192 // Premultiplied2193 [{ time: 500, expected: 'rgba(100, 100, 100, 0.5) 5px 5px 5px 0px' }]);2194 }, `${property}: from other to none`);2195 test(t => {2196 const idlName = propertyToIDL(property);2197 const target = createTestElement(t, setup);2198 const animation =2199 target.animate({ [idlName]: [ 'rgb(0, 0, 0) 0px 0px 0px 0px',2200 'rgb(100, 100, 100) 10px 10px 10px 0px'] },2201 { duration: 1000, fill: 'both' });2202 testAnimationSamples(animation, idlName,2203 [{ time: 500, expected: 'rgb(50, 50, 50) 5px 5px 5px 0px' }]);2204 }, `${property}: single shadow`);2205 test(t => {2206 const idlName = propertyToIDL(property);2207 const target = createTestElement(t, setup);2208 const animation =2209 target.animate({ [idlName]: [ 'rgb(0, 0, 0) 0px 0px 0px 0px, '2210 + 'rgb(200, 200, 200) 20px 20px 20px 20px',2211 'rgb(100, 100, 100) 10px 10px 10px 0px, '2212 + 'rgb(100, 100, 100) 10px 10px 10px 0px'] },2213 { duration: 1000, fill: 'both' });2214 testAnimationSamples(animation, idlName,2215 [{ time: 500, expected: 'rgb(50, 50, 50) 5px 5px 5px 0px, '2216 + 'rgb(150, 150, 150) 15px 15px 15px 10px' }]);2217 }, `${property}: shadow list`);2218 test(t => {2219 const idlName = propertyToIDL(property);2220 const target = createTestElement(t, setup);2221 const animation =2222 target.animate({ [idlName]: [ 'rgb(200, 200, 200) 20px 20px 20px 20px',2223 'rgb(100, 100, 100) 10px 10px 10px 0px, '2224 + 'rgb(100, 100, 100) 10px 10px 10px 0px'] },2225 { duration: 1000, fill: 'both' });2226 testAnimationSamples(animation, idlName,2227 [{ time: 500, expected: 'rgb(150, 150, 150) 15px 15px 15px 10px, '2228 + 'rgba(100, 100, 100, 0.5) 5px 5px 5px 0px' }]);2229 }, `${property}: mismatched list length (from shorter to longer)`);2230 test(t => {2231 const idlName = propertyToIDL(property);2232 const target = createTestElement(t, setup);2233 const animation =2234 target.animate({ [idlName]: [ 'rgb(100, 100, 100) 10px 10px 10px 0px, '2235 + 'rgb(100, 100, 100) 10px 10px 10px 0px',2236 'rgb(200, 200, 200) 20px 20px 20px 20px']},2237 { duration: 1000, fill: 'both' });2238 testAnimationSamples(animation, idlName,2239 [{ time: 500, expected: 'rgb(150, 150, 150) 15px 15px 15px 10px, '2240 + 'rgba(100, 100, 100, 0.5) 5px 5px 5px 0px' }]);2241 }, `${property}: mismatched list length (from longer to shorter)`);2242 test(t => {2243 const idlName = propertyToIDL(property);2244 const target = createTestElement(t, setup);2245 target.style.color = 'rgb(0, 255, 0)';2246 const animation =2247 target.animate({ [idlName]: [ 'currentcolor 0px 0px 0px 0px',2248 'currentcolor 10px 10px 10px 10px'] },2249 { duration: 1000, fill: 'both' });2250 testAnimationSamples(animation, idlName,2251 [{ time: 500, expected: 'rgb(0, 255, 0) 5px 5px 5px 5px' }]);2252 }, `${property}: with currentcolor`);2253 },2254 testAddition: function(property, setup) {2255 test(t => {2256 const idlName = propertyToIDL(property);2257 const target = createTestElement(t, setup);2258 target.style[idlName] = 'rgb(0, 0, 0) 0px 0px 0px 0px';2259 const animation =2260 target.animate({ [idlName]: [ 'rgb(120, 120, 120) 10px 10px 10px 0px',2261 'rgb(120, 120, 120) 10px 10px 10px 0px'] },2262 { duration: 1000, composite: 'add' });2263 testAnimationSamples(animation, idlName,2264 [ { time: 0, expected: 'rgb(0, 0, 0) 0px 0px 0px 0px, ' +2265 'rgb(120, 120, 120) 10px 10px 10px 0px' }]);2266 }, `${property}: shadow`);2267 },2268 testAccumulation: function(property, setup) {2269 test(t => {2270 const idlName = propertyToIDL(property);2271 const target = createTestElement(t, setup);2272 target.style[idlName] = 'rgb(120, 120, 120) 10px 10px 10px 10px';2273 const animation =2274 target.animate({ [idlName]: [ 'rgb(120, 120, 120) 10px 10px 10px 10px',2275 'rgb(120, 120, 120) 10px 10px 10px 10px'] },2276 { duration: 1000, composite: 'accumulate' });2277 testAnimationSamples(animation, idlName,2278 [ { time: 0, expected: 'rgb(240, 240, 240) 20px 20px 20px 20px' }]);2279 }, `${property}: shadow`);2280 },2281};2282const positionType = {2283 testInterpolation: (property, setup) => {2284 lengthPairType.testInterpolation(property, setup);2285 test(t => {2286 const idlName = propertyToIDL(property);2287 const target = createTestElement(t, setup);2288 const animation = target.animate({ [idlName]: ['10% 10%', '50% 50%'] },2289 { duration: 1000, fill: 'both' });2290 testAnimationSamples(2291 animation, idlName,2292 [{ time: 500, expected: calcFromPercentage(idlName, '30% 30%') }]);2293 }, `${property} supports animating as a position of percent`);2294 },2295 testAdditionOrAccumulation: (property, setup, composite) => {2296 lengthPairType.testAddition(property, setup);2297 test(t => {2298 const idlName = propertyToIDL(property);2299 const target = createTestElement(t, setup);2300 target.style[idlName] = '60% 60%';2301 const animation = target.animate({ [idlName]: ['70% 70%', '100% 100%'] },2302 { duration: 1000, composite });2303 testAnimationSamples(2304 animation, idlName,2305 [{ time: 0, expected: calcFromPercentage(idlName, '130% 130%') }]);2306 }, `${property}: position of percentage`);2307 },2308 testAddition: function(property, setup) {2309 this.testAdditionOrAccumulation(property, setup, 'add');2310 },2311 testAccumulation: function(property, setup) {2312 this.testAdditionOrAccumulation(property, setup, 'accumulate');2313 },2314};2315const rectType = {2316 testInterpolation: (property, setup) => {2317 test(t => {2318 const idlName = propertyToIDL(property);2319 const target = createTestElement(t, setup);2320 const animation = target.animate({ [idlName]:2321 ['rect(10px, 10px, 10px, 10px)',2322 'rect(50px, 50px, 50px, 50px)'] },2323 { duration: 1000, fill: 'both' });2324 testAnimationSamples(2325 animation, idlName,2326 [{ time: 500, expected: 'rect(30px, 30px, 30px, 30px)' }]);2327 }, `${property} supports animating as a rect`);2328 },2329 testAdditionOrAccumulation: (property, setup, composite) => {2330 test(t => {2331 const idlName = propertyToIDL(property);2332 const target = createTestElement(t, setup);2333 target.style[idlName] = 'rect(100px, 100px, 100px, 100px)';2334 const animation = target.animate({ [idlName]:2335 ['rect(10px, 10px, 10px, 10px)',2336 'rect(10px, 10px, 10px, 10px)'] },2337 { duration: 1000, composite });2338 testAnimationSamples(2339 animation, idlName,2340 [{ time: 0, expected: 'rect(110px, 110px, 110px, 110px)' }]);2341 }, `${property}: rect`);2342 },2343 testAddition: function(property, setup) {2344 this.testAdditionOrAccumulation(property, setup, 'add');2345 },2346 testAccumulation: function(property, setup) {2347 this.testAdditionOrAccumulation(property, setup, 'accumulate');2348 },2349}2350// stroke-dasharray: none | [ <length> | <percentage> | <number> ]*2351const dasharrayType = {2352 testInterpolation: (property, setup) => {2353 percentageType.testInterpolation(property, setup);2354 positiveNumberType.testInterpolation(property, setup, 'px');2355 test(t => {2356 const idlName = propertyToIDL(property);2357 const target = createTestElement(t, setup);2358 const animation = target.animate({ [idlName]:2359 ['8, 16, 4',2360 '4, 8, 12, 16'] },2361 { duration: 1000, fill: 'both' });2362 testAnimationSamples(2363 animation, idlName,2364 [{ time: 500, expected: '6px, 12px, 8px, 12px, 10px, 6px, 10px, 16px, 4px, 8px, 14px, 10px' }]);2365 }, `${property} supports animating as a dasharray (mismatched length)`);2366 test(t => {2367 const idlName = propertyToIDL(property);2368 const target = createTestElement(t, setup);2369 const animation = target.animate({ [idlName]:2370 ['2, 50%, 6, 10',2371 '6, 30%, 2, 2'] },2372 { duration: 1000, fill: 'both' });2373 testAnimationSamples(2374 animation, idlName,2375 [{ time: 500, expected: '4px, 40%, 4px, 6px' }]);2376 }, `${property} supports animating as a dasharray (mixed lengths and percentages)`);2377 },2378 // Note that stroke-dasharray is neither additive nor cumulative, so we should2379 // write this additive test case that animating value replaces underlying2380 // values.2381 // See https://www.w3.org/TR/SVG2/painting.html#StrokeDashing.2382 testAdditionOrAccumulation: (property, setup, composite) => {2383 test(t => {2384 const idlName = propertyToIDL(property);2385 const target = createTestElement(t, setup);2386 target.style[idlName] = '6, 30%, 2px';2387 const animation = target.animate({ [idlName]:2388 ['1, 2, 3, 4, 5',2389 '6, 7, 8, 9, 10'] },2390 { duration: 1000, composite });2391 testAnimationSamples(2392 animation, idlName,2393 [{ time: 0, expected: '1px, 2px, 3px, 4px, 5px' }]);2394 }, `${property}: dasharray`);2395 },2396 testAddition: function(property, setup) {2397 this.testAdditionOrAccumulation(property, setup, 'add');2398 },2399 testAccumulation: function(property, setup) {2400 this.testAdditionOrAccumulation(property, setup, 'accumulate');2401 },2402}2403const fontVariationSettingsType = {2404 testInterpolation: (property, setup) => {2405 test(t => {2406 const idlName = propertyToIDL(property);2407 const target = createTestElement(t, setup);2408 const animation =2409 target.animate({ [idlName]: ['"wght" 1.1', '"wght" 1.5'] },2410 { duration: 1000, fill: 'both' });2411 testAnimationSamples(animation, idlName,2412 [{ time: 0, expected: '"wght" 1.1' },2413 { time: 250, expected: '"wght" 1.2' },2414 { time: 750, expected: '"wght" 1.4' } ]);2415 }, `${property} supports animation as float`);2416 test(t => {2417 const idlName = propertyToIDL(property);2418 const target = createTestElement(t, setup);2419 const animation =2420 target.animate({ [idlName]: ['"wdth" 1, "wght" 1.1',2421 '"wght" 1.5, "wdth" 5'] },2422 { duration: 1000, fill: 'both' });2423 testAnimationSamplesWithAnyOrder(2424 animation, idlName,2425 [{ time: 0, expected: '"wdth" 1, "wght" 1.1' },2426 { time: 250, expected: '"wdth" 2, "wght" 1.2' },2427 { time: 750, expected: '"wdth" 4, "wght" 1.4' } ]);2428 }, `${property} supports animation as float with multiple tags`);2429 test(t => {2430 const idlName = propertyToIDL(property);2431 const target = createTestElement(t, setup);2432 const animation =2433 target.animate({ [idlName]: ['"wdth" 1, "wght" 1.1',2434 '"wght" 10, "wdth" 5, "wght" 1.5'] },2435 { duration: 1000, fill: 'both' });2436 testAnimationSamplesWithAnyOrder(2437 animation, idlName,2438 [{ time: 250, expected: '"wdth" 2, "wght" 1.2' },2439 { time: 750, expected: '"wdth" 4, "wght" 1.4' } ]);2440 }, `${property} supports animation as float with multiple duplicate tags`);2441 },2442 testAdditionOrAccumulation: (property, setup, composite) => {2443 test(t => {2444 const idlName = propertyToIDL(property);2445 const target = createTestElement(t, setup);2446 target.style[idlName] = '"wght" 1';2447 const animation =2448 target.animate({ [idlName]: ['"wght" 1.1', '"wght" 1.5'] },2449 { duration: 1000, composite });2450 testAnimationSamples(animation, idlName,2451 [{ time: 250, expected: '"wght" 2.2' },2452 { time: 750, expected: '"wght" 2.4' } ]);2453 }, `${property} with composite type ${composite}`);2454 },2455 testAddition: function(property, setup) {2456 this.testAdditionOrAccumulation(property, setup, 'add');2457 },2458 testAccumulation: function(property, setup) {2459 this.testAdditionOrAccumulation(property, setup, 'accumulate');2460 },2461}2462const types = {2463 color: colorType,2464 discrete: discreteType,...

Using AI Code Generation

1var anim = new wptAnimation();2anim.testAnimationSamples();3wptAnimation.prototype.testAnimationSamples = function() {4 var sample = new AnimationSample(0, 0, 0, 0, 0, 0, 0);5};6function AnimationSample(time, x, y, z, xRotation, yRotation, zRotation) {7 this.time = time;8 this.x = x;9 this.y = y;10 this.z = z;11 this.xRotation = xRotation;12 this.yRotation = yRotation;13 this.zRotation = zRotation;14};15wptAnimation.prototype.testAnimationSamples = function() {16 var sample = new AnimationSample(0, 0, 0, 0, 0, 0, 0);17};18time (number) - The time of the sample19x (number) - The x position of the sample20y (number) - The y position of the sample21z (number) - The z position of the sample22xRotation (number) - The x rotation of the sample23yRotation (number) - The y rotation of the sample24zRotation (number) - The z rotation of the sample25model (wptModel) - The model to animate26animation (wptAnimation) - The animation to play27speed (number) - The speed to play the animation at28loop (boolean) - Whether to loop the animation or not

Using AI Code Generation

1var wptAnimation = require('wptAnimation');2wptAnimation.testAnimationSamples();3var wptAnimation = require('wptAnimation');4wptAnimation.testAnimationSamples();5var wptAnimation = require('wptAnimation');6wptAnimation.testAnimationSamples();7var wptAnimation = require('wptAnimation');8wptAnimation.testAnimationSamples();9var wptAnimation = require('wptAnimation');10wptAnimation.testAnimationSamples();11var wptAnimation = require('wptAnimation');12wptAnimation.testAnimationSamples();13var wptAnimation = require('wptAnimation');14wptAnimation.testAnimationSamples();15var wptAnimation = require('wptAnimation');16wptAnimation.testAnimationSamples();17var wptAnimation = require('wptAnimation');18wptAnimation.testAnimationSamples();

Using AI Code Generation

1var wptAnimation = require('wptAnimation');2wptAnimation.testAnimationSamples();3var wptAnimation = require('wptAnimation');4wptAnimation.testAnimationSamples();5var wptAnimation = require('wptAnimation');6wptAnimation.testAnimationSamples();7var wptAnimation = require('wptAnimation');8wptAnimation.testAnimationSamples();9var wptAnimation = require('wptAnimation');10wptAnimation.testAnimationSamples();11var wptAnimation = require('wptAnimation');12wptAnimation.testAnimationSamples();13var wptAnimation = require('wptAnimation');14wptAnimation.testAnimationSamples();15var wptAnimation = require('wptAnimation');16wptAnimation.testAnimationSamples();17var wptAnimation = require('wptAnimation');18wptAnimation.testAnimationSamples();19var wptAnimation = require('wptAnimation');20wptAnimation.testAnimationSamples();21var wptAnimation = require('wptAnimation');22wptAnimation.testAnimationSamples();

Using AI Code Generation

1testAnimationSamples(0.5, 0.5, 0.5, 0.5).then(() => {2});3function testAnimationSamples(startTime, endTime, sampleTime, expectedValue) {4 return new Promise((resolve, reject) => {5 window.test_driver_internal.add_result_callback(6 (message, is_error) => {7 if (is_error) {8 reject(new Error('Error from testdriver: ' + message));9 } else {10 resolve();11 }12 });13 window.test_driver_internal.send_command(14 {startTime, endTime, sampleTime, expectedValue});15 });16}

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.

View sample repo View DocumentationSign up Free

›

_