How to use propertyToIDL method in wpt

Best JavaScript code snippet using wpt

property-types.js

Source:property-types.js

...3 testInterpolation: (property, setup, options) => {4 for (const keyframes of options) {5 const [ from, to ] = keyframes;6 test(t => {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: 'visible' }]);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 [idlName]: ['perspective(0)', 'perspective(10px)'],965 },966 1000967 );968 testAnimationSampleMatrices(animation, idlName,969 [{ time: 500, expected: [ 1, 0, 0, 0,970 0, 1, 0, 0,971 0, 0, 1, -0.05,972 0, 0, 0, 1 ] }]);973 }, `${property}: perspective`);974 },975 testAddition: function(property, setup) {976 test(t => {977 const idlName = propertyToIDL(property);978 const target = createTestElement(t, setup);979 target.style[idlName] = 'translateX(100px)';980 const animation = target.animate({ [idlName]: ['translateX(-200px)',981 'translateX(500px)'] },982 { duration: 1000, fill: 'both',983 composite: 'add' });984 testAnimationSampleMatrices(animation, idlName,985 [ { time: 0, expected: [ 1, 0, 0, 1, -100, 0 ] },986 { time: 1000, expected: [ 1, 0, 0, 1, 600, 0 ] }]);987 }, `${property}: translate`);988 test(t => {989 const idlName = propertyToIDL(property);990 const target = createTestElement(t, setup);991 target.style[idlName] = 'rotate(45deg)';992 const animation = target.animate({ [idlName]: ['rotate(-90deg)',993 'rotate(90deg)'] },994 { duration: 1000, fill: 'both',995 composite: 'add' });996 testAnimationSampleMatrices(animation, idlName,997 [{ time: 0, expected: [ Math.cos(-Math.PI / 4),998 Math.sin(-Math.PI / 4),999 -Math.sin(-Math.PI / 4),1000 Math.cos(-Math.PI / 4),1001 0, 0] },1002 { time: 1000, expected: [ Math.cos(Math.PI * 3 / 4),1003 Math.sin(Math.PI * 3 / 4),1004 -Math.sin(Math.PI * 3 / 4),1005 Math.cos(Math.PI * 3 / 4),1006 0, 0] }]);1007 }, `${property}: rotate`);1008 test(t => {1009 const idlName = propertyToIDL(property);1010 const target = createTestElement(t, setup);1011 target.style[idlName] = 'scale(2)';1012 const animation = target.animate({ [idlName]: ['scale(-3)', 'scale(5)'] },1013 { duration: 1000, fill: 'both',1014 composite: 'add' });1015 testAnimationSampleMatrices(animation, idlName,1016 [{ time: 0, expected: [ -6, 0, 0, -6, 0, 0 ] }, // scale(-3) scale(2)1017 { time: 1000, expected: [ 10, 0, 0, 10, 0, 0 ] }]); // scale(5) scale(2)1018 }, `${property}: scale`);1019 test(t => {1020 const idlName = propertyToIDL(property);1021 const target = createTestElement(t, setup);1022 // matrix(1, tan(10deg), tan(10deg), 1)1023 target.style[idlName] = 'skew(10deg, 10deg)';1024 const animation = // matrix(1, tan(20deg), tan(-30deg), 1)1025 target.animate({ [idlName]: ['skew(-30deg, 20deg)',1026 // matrix(1, tan(-30deg), tan(20deg), 1)1027 'skew(20deg, -30deg)'] },1028 { duration: 1000, fill: 'both', composite: 'add' });1029 // matrix at 0%.1030 // [ 1 tan(10deg) ] [ 1 tan(-30deg) ]1031 // [ tan(10deg) 1 ] [ tan(20deg) 1 ] =1032 //1033 // [ 1 + tan(10deg) * tan(20deg) tan(-30deg) + tan(10deg) ]1034 // [ tan(10deg) + tan(20deg) tan(10deg) * tan(-30deg) + 1 ]1035 // matrix at 100%.1036 // [ 1 tan(10deg) ] [ 1 tan(20deg) ]1037 // [ tan(10deg) 1 ] [ tan(-30deg) 1 ] =1038 //1039 // [ 1 + tan(10deg) * tan(-30deg) tan(20deg) + tan(10deg) ]1040 // [ tan(10deg) + tan(-30deg) tan(10deg) * tan(20deg) + 1 ]1041 testAnimationSampleMatrices(animation, idlName,1042 [{ time: 0, expected: [ 1 + Math.tan(Math.PI/18) * Math.tan(Math.PI/9),1043 Math.tan(Math.PI/18) + Math.tan(Math.PI/9),1044 Math.tan(-Math.PI/6) + Math.tan(Math.PI/18),1045 1 + Math.tan(Math.PI/18) * Math.tan(-Math.PI/6),1046 0, 0] },1047 { time: 1000, expected: [ 1 + Math.tan(Math.PI/18) * Math.tan(-Math.PI/6),1048 Math.tan(Math.PI/18) + Math.tan(-Math.PI/6),1049 Math.tan(Math.PI/9) + Math.tan(Math.PI/18),1050 1 + Math.tan(Math.PI/18) * Math.tan(Math.PI/9),1051 0, 0] }]);1052 }, `${property}: skew`);1053 test(t => {1054 const idlName = propertyToIDL(property);1055 const target = createTestElement(t, setup);1056 // matrix(1, 0, 0, 1, 100, 0)1057 target.style[idlName] = 'translateX(100px)';1058 const animation = // matrix(0, 1, -1, 0, 0, 0)1059 target.animate({ [idlName]: ['rotate(90deg)',1060 // matrix(-1, 0, 0, -1, 0, 0)1061 'rotate(180deg)'] },1062 { duration: 1000, fill: 'both', composite: 'add' });1063 testAnimationSampleMatrices(animation, idlName,1064 [{ time: 0, expected: [ 0, 1, -1, 0, 100, 0 ] },1065 { time: 1000, expected: [ -1, 0, 0, -1, 100, 0 ] }]);1066 }, `${property}: rotate on translate`);1067 test(t => {1068 const idlName = propertyToIDL(property);1069 const target = createTestElement(t, setup);1070 // matrix(0, 1, -1, 0, 0, 0)1071 target.style[idlName] = 'rotate(90deg)';1072 const animation = // matrix(1, 0, 0, 1, 100, 0)1073 target.animate({ [idlName]: ['translateX(100px)',1074 // matrix(1, 0, 0, 1, 200, 0)1075 'translateX(200px)'] },1076 { duration: 1000, fill: 'both', composite: 'add' });1077 testAnimationSampleMatrices(animation, idlName,1078 [{ time: 0, expected: [ 0, 1, -1, 0, 0, 100 ] },1079 { time: 1000, expected: [ 0, 1, -1, 0, 0, 200 ] }]);1080 }, `${property}: translate on rotate`);1081 test(t => {1082 const idlName = propertyToIDL(property);1083 const target = createTestElement(t, setup);1084 target.style[idlName] = 'rotate(45deg) translateX(100px)';1085 const animation = target.animate({ [idlName]: ['rotate(-90deg)',1086 'rotate(90deg)'] },1087 { duration: 1000, fill: 'both',1088 composite: 'add' });1089 testAnimationSampleMatrices(animation, idlName,1090 [{ time: 0, expected: [ Math.cos(-Math.PI / 4),1091 Math.sin(-Math.PI / 4),1092 -Math.sin(-Math.PI / 4),1093 Math.cos(-Math.PI / 4),1094 100 * Math.cos(Math.PI / 4),1095 100 * Math.sin(Math.PI / 4) ] },1096 { time: 1000, expected: [ Math.cos(Math.PI * 3 / 4),1097 Math.sin(Math.PI * 3 / 4),1098 -Math.sin(Math.PI * 3 / 4),1099 Math.cos(Math.PI * 3 / 4),1100 100 * Math.cos(Math.PI / 4),1101 100 * Math.sin(Math.PI / 4) ] }]);1102 }, `${property}: rotate on rotate and translate`);1103 test(t => {1104 const idlName = propertyToIDL(property);1105 const target = createTestElement(t, setup);1106 target.style[idlName] = 'matrix(0, 1, -1, 0, 0, 0)';1107 const animation = // Same matrices as above.1108 target.animate({ [idlName]: [ 'matrix(1, 0, 0, 1, 100, 0)',1109 'matrix(1, 0, 0, 1, 200, 0)' ] },1110 { duration: 1000, fill: 'both', composite: 'add' });1111 testAnimationSampleMatrices(animation, idlName,1112 [{ time: 0, expected: [ 0, 1, -1, 0, 0, 100 ] },1113 { time: 1000, expected: [ 0, 1, -1, 0, 0, 200 ] }]);1114 }, `${property}: matrix`);1115 test(t => {1116 const idlName = propertyToIDL(property);1117 const target = createTestElement(t, setup);1118 target.style[idlName] = 'rotate3d(1, 1, 0, 45deg)';1119 const animation =1120 target.animate({ [idlName]: [ 'rotate3d(1, 1, 0, -90deg)',1121 'rotate3d(1, 1, 0, 90deg)'] },1122 { duration: 1000, fill: 'both', composite: 'add' });1123 testAnimationSampleMatrices(animation, idlName,1124 [{ time: 0, expected: rotate3dToMatrix(1, 1, 0, -Math.PI / 4) },1125 { time: 1000, expected: rotate3dToMatrix(1, 1, 0, 3 * Math.PI / 4) }]);1126 }, `${property}: rotate3d`);1127 test(t => {1128 const idlName = propertyToIDL(property);1129 const target = createTestElement(t, setup);1130 // To calculate expected matrices easily, generate input matrices from1131 // rotate3d.1132 target.style[idlName] = rotate3dToMatrix3d(1, 1, 0, Math.PI / 4);1133 const from = rotate3dToMatrix3d(1, 1, 0, -Math.PI / 2);1134 const to = rotate3dToMatrix3d(1, 1, 0, Math.PI / 2);1135 const animation =1136 target.animate({ [idlName]: [ from, to ] },1137 { duration: 1000, fill: 'both', composite: 'add' });1138 testAnimationSampleMatrices(animation, idlName,1139 [{ time: 0, expected: rotate3dToMatrix(1, 1, 0, -Math.PI / 4) },1140 { time: 1000, expected: rotate3dToMatrix(1, 1, 0, 3 * Math.PI / 4) }]);1141 }, `${property}: matrix3d`);1142 // Following tests aim for test the addition behavior for non-invertible1143 // matrices. Note that the addition for non-invertible matrices should be1144 // the same, just like addition for invertible matrices. With these tests,1145 // we can assure that addition never behaves as discrete. The non-invertible1146 // matrix that we use is the singular matrix, matrix(1, 1, 0, 0, 0, 100).1147 test(t => {1148 const idlName = propertyToIDL(property);1149 const target = createTestElement(t, setup);1150 target.style[idlName] = 'translateX(50px)';1151 const animation =1152 target.animate({ [idlName]: ['matrix(-1, 0, 0, -1, 200, 0)',1153 'matrix( 1, 1, 0, 0, 0, 100)'] },1154 { duration: 1000, fill: 'both', composite: 'add' });1155 testAnimationSampleMatrices(animation, idlName,1156 [ { time: 0, expected: [ -1, 0, 0, -1, 250, 0 ] },1157 { time: 1000, expected: [ 1, 1, 0, 0, 50, 100 ] }]);1158 }, `${property}: non-invertible matrices`);1159 test(t => {1160 const idlName = propertyToIDL(property);1161 const target = createTestElement(t, setup);1162 target.style[idlName] = 'translateX(50px)';1163 const animation = // matrix(0, -1, 1, 0, 200, 0)1164 target.animate({ [idlName]: ['matrix(-1, 0, 0, -1, 200, 0) rotate(90deg)',1165 // matrix(-1, -1, 0, 0, 0, 100)1166 'matrix( 1, 1, 0, 0, 0, 100) rotate(180deg)'] },1167 { duration: 1000, fill: 'both', composite: 'add' });1168 testAnimationSampleMatrices(animation, idlName,1169 [ { time: 0, expected: [ 0, -1, 1, 0, 250, 0 ] },1170 { time: 1000, expected: [ -1, -1, 0, 0, 50, 100 ] }]);1171 }, `${property}: non-invertible matrices in matched transform lists`);1172 test(t => {1173 const idlName = propertyToIDL(property);1174 const target = createTestElement(t, setup);1175 target.style[idlName] = 'translateX(50px)';1176 const animation = // matrix(-2, 0, 0, -2, 200, 0)1177 target.animate({ [idlName]: ['matrix(-1, 0, 0, -1, 200, 0) scale(2)',1178 // matrix(1, 1, 1, 1, 0, 100)1179 'matrix( 1, 1, 0, 0, 0, 100) skew(45deg)'] },1180 { duration: 1000, fill: 'both', composite: 'add' });1181 testAnimationSampleMatrices(animation, idlName,1182 [ { time: 0, expected: [ -2, 0, 0, -2, 250, 0 ] },1183 { time: 1000, expected: [ 1, 1, 1, 1, 50, 100 ] }]);1184 }, `${property}: non-invertible matrices in mismatched transform lists`);1185 },1186 testAccumulation: function(property, setup) {1187 test(t => {1188 const idlName = propertyToIDL(property);1189 const target = createTestElement(t, setup);1190 target.style[idlName] = 'translateX(100px)';1191 const animation = target.animate({ [idlName]: ['translateX(-200px)',1192 'translateX(500px)'] },1193 { duration: 1000, fill: 'both',1194 composite: 'accumulate' });1195 testAnimationSampleMatrices(animation, idlName,1196 [ { time: 0, expected: [ 1, 0, 0, 1, -100, 0 ] },1197 { time: 1000, expected: [ 1, 0, 0, 1, 600, 0 ] }]);1198 }, `${property}: translate`);1199 test(t => {1200 const idlName = propertyToIDL(property);1201 const target = createTestElement(t, setup);1202 target.style[idlName] = 'rotate(45deg)';1203 const animation = target.animate({ [idlName]: ['rotate(-90deg)',1204 'rotate(90deg)'] },1205 { duration: 1000, fill: 'both',1206 composite: 'accumulate' });1207 testAnimationSampleMatrices(animation, idlName,1208 [{ time: 0, expected: [ Math.cos(-Math.PI / 4),1209 Math.sin(-Math.PI / 4),1210 -Math.sin(-Math.PI / 4),1211 Math.cos(-Math.PI / 4),1212 0, 0] },1213 { time: 1000, expected: [ Math.cos(Math.PI * 3 / 4),1214 Math.sin(Math.PI * 3 / 4),1215 -Math.sin(Math.PI * 3 / 4),1216 Math.cos(Math.PI * 3 / 4),1217 0, 0] }]);1218 }, `${property}: rotate`);1219 test(t => {1220 const idlName = propertyToIDL(property);1221 const target = createTestElement(t, setup);1222 target.style[idlName] = 'scale(2)';1223 const animation = target.animate({ [idlName]: ['scale(-3)', 'scale(5)'] },1224 { duration: 1000, fill: 'both',1225 composite: 'accumulate' });1226 testAnimationSampleMatrices(animation, idlName,1227 // scale((2 - 1) + (-3 - 1) + 1)1228 [{ time: 0, expected: [ -2, 0, 0, -2, 0, 0 ] },1229 // scale((2 - 1) + (5 - 1) + 1)1230 { time: 1000, expected: [ 6, 0, 0, 6, 0, 0 ] }]);1231 }, `${property}: scale`);1232 test(t => {1233 const idlName = propertyToIDL(property);1234 const target = createTestElement(t, setup);1235 // matrix(1, tan(10deg), tan(10deg), 1)1236 target.style[idlName] = 'skew(10deg, 10deg)';1237 const animation = // matrix(1, tan(20deg), tan(-30deg), 1)1238 target.animate({ [idlName]: ['skew(-30deg, 20deg)',1239 // matrix(1, tan(-30deg), tan(20deg), 1)1240 'skew(20deg, -30deg)'] },1241 { duration: 1000, fill: 'both', composite: 'accumulate' });1242 testAnimationSampleMatrices(animation, idlName,1243 [{ time: 0, expected: [ 1, Math.tan(Math.PI/6),1244 Math.tan(-Math.PI/9), 1,1245 0, 0] },1246 { time: 1000, expected: [ 1, Math.tan(-Math.PI/9),1247 Math.tan(Math.PI/6), 1,1248 0, 0] }]);1249 }, `${property}: skew`);1250 test(t => {1251 const idlName = propertyToIDL(property);1252 const target = createTestElement(t, setup);1253 // matrix(1, 0, 0, 1, 100, 0)1254 target.style[idlName] = 'translateX(100px)';1255 const animation = // matrix(0, 1, -1, 0, 0, 0)1256 target.animate({ [idlName]: ['rotate(90deg)',1257 // matrix(-1, 0, 0, -1, 0, 0)1258 'rotate(180deg)'] },1259 { duration: 1000, fill: 'both', composite: 'accumulate' });1260 testAnimationSampleMatrices(animation, idlName,1261 [{ time: 0, expected: [ 0, 1, -1, 0, 100, 0 ] },1262 { time: 1000, expected: [ -1, 0, 0, -1, 100, 0 ] }]);1263 }, `${property}: rotate on translate`);1264 test(t => {1265 const idlName = propertyToIDL(property);1266 const target = createTestElement(t, setup);1267 // matrix(0, 1, -1, 0, 0, 0)1268 target.style[idlName] = 'rotate(90deg)';1269 const animation = // matrix(1, 0, 0, 1, 100, 0)1270 target.animate({ [idlName]: ['translateX(100px)',1271 // matrix(1, 0, 0, 1, 200, 0)1272 'translateX(200px)'] },1273 { duration: 1000, fill: 'both', composite: 'accumulate' });1274 testAnimationSampleMatrices(animation, idlName,1275 [{ time: 0, expected: [ 0, 1, -1, 0, 100, 0 ] },1276 { time: 1000, expected: [ 0, 1, -1, 0, 200, 0 ] }]);1277 }, `${property}: translate on rotate`);1278 test(t => {1279 const idlName = propertyToIDL(property);1280 const target = createTestElement(t, setup);1281 target.style[idlName] = 'rotate(45deg)';1282 const animation =1283 target.animate({ [idlName]: ['rotate(45deg) translateX(0px)',1284 'rotate(45deg) translateX(100px)'] },1285 { duration: 1000, fill: 'both', composite: 'accumulate' });1286 testAnimationSampleMatrices(animation, idlName,1287 [{ time: 0, expected: [ Math.cos(Math.PI / 2),1288 Math.sin(Math.PI / 2),1289 -Math.sin(Math.PI / 2),1290 Math.cos(Math.PI / 2),1291 0 * Math.cos(Math.PI / 2),1292 0 * Math.sin(Math.PI / 2) ] },1293 { time: 1000, expected: [ Math.cos(Math.PI / 2),1294 Math.sin(Math.PI / 2),1295 -Math.sin(Math.PI / 2),1296 Math.cos(Math.PI / 2),1297 100 * Math.cos(Math.PI / 2),1298 100 * Math.sin(Math.PI / 2) ] }]);1299 }, `${property}: rotate and translate on rotate`);1300 test(t => {1301 const idlName = propertyToIDL(property);1302 const target = createTestElement(t, setup);1303 target.style[idlName] = 'rotate(45deg) translateX(100px)';1304 const animation =1305 target.animate({ [idlName]: ['rotate(45deg)', 'rotate(45deg)'] },1306 { duration: 1000, fill: 'both', composite: 'accumulate' });1307 testAnimationSampleMatrices(animation, idlName,1308 [{ time: 0, expected: [ Math.cos(Math.PI / 2),1309 Math.sin(Math.PI / 2),1310 -Math.sin(Math.PI / 2),1311 Math.cos(Math.PI / 2),1312 100 * Math.cos(Math.PI / 2),1313 100 * Math.sin(Math.PI / 2) ] },1314 { time: 1000, expected: [ Math.cos(Math.PI / 2),1315 Math.sin(Math.PI / 2),1316 -Math.sin(Math.PI / 2),1317 Math.cos(Math.PI / 2),1318 100 * Math.cos(Math.PI / 2),1319 100 * Math.sin(Math.PI / 2) ] }]);1320 }, `${property}: rotate on rotate and translate`);1321 test(t => {1322 const idlName = propertyToIDL(property);1323 const target = createTestElement(t, setup);1324 target.style[idlName] = 'matrix(0, 1, -1, 0, 0, 0)';1325 const animation = // Same matrices as above.1326 target.animate({ [idlName]: [ 'matrix(1, 0, 0, 1, 100, 0)',1327 'matrix(1, 0, 0, 1, 200, 0)' ] },1328 { duration: 1000, fill: 'both', composite: 'accumulate' });1329 testAnimationSampleMatrices(animation, idlName,1330 [{ time: 0, expected: [ 0, 1, -1, 0, 100, 0 ] },1331 { time: 1000, expected: [ 0, 1, -1, 0, 200, 0 ] }]);1332 }, `${property}: matrix`);1333 test(t => {1334 const idlName = propertyToIDL(property);1335 const target = createTestElement(t, setup);1336 target.style[idlName] = 'rotate3d(1, 1, 0, 45deg)';1337 const animation =1338 target.animate({ [idlName]: [ 'rotate3d(1, 1, 0, -90deg)',1339 'rotate3d(1, 1, 0, 90deg)'] },1340 { duration: 1000, fill: 'both', composite: 'accumulate' });1341 testAnimationSampleMatrices(animation, idlName,1342 [{ time: 0, expected: rotate3dToMatrix(1, 1, 0, -Math.PI / 4) },1343 { time: 1000, expected: rotate3dToMatrix(1, 1, 0, 3 * Math.PI / 4) }]);1344 }, `${property}: rotate3d`);1345 test(t => {1346 const idlName = propertyToIDL(property);1347 const target = createTestElement(t, setup);1348 // To calculate expected matrices easily, generate input matrices from1349 // rotate3d.1350 target.style[idlName] = rotate3dToMatrix3d(1, 1, 0, Math.PI / 4);1351 const from = rotate3dToMatrix3d(1, 1, 0, -Math.PI / 2);1352 const to = rotate3dToMatrix3d(1, 1, 0, Math.PI / 2);1353 const animation =1354 target.animate({ [idlName]: [ from, to ] },1355 { duration: 1000, fill: 'both', composite: 'accumulate' });1356 testAnimationSampleMatrices(animation, idlName,1357 [{ time: 0, expected: rotate3dToMatrix(1, 1, 0, -Math.PI / 4) },1358 { time: 1000, expected: rotate3dToMatrix(1, 1, 0, 3 * Math.PI / 4) }]);1359 }, `${property}: matrix3d`);1360 test(t => {1361 const idlName = propertyToIDL(property);1362 const target = createTestElement(t, setup);1363 const matrixArray = [ 1, 0, 0, 0,1364 0, 1, 0, 0,1365 0, 0, 1, 0,1366 0, 0, 1, 1 ];1367 target.style[idlName] = createMatrixFromArray(matrixArray);1368 const animation =1369 target.animate({ [idlName]: [ 'none', 'none' ] },1370 { duration: 1000, fill: 'both', composite: 'accumulate' });1371 testAnimationSampleMatrices(animation, idlName,1372 [{ time: 0, expected: matrixArray },1373 { time: 1000, expected: matrixArray }]);1374 }, `${property}: none`);1375 // Following tests aim for test the fallback discrete accumulation behavior1376 // for non-invertible matrices. The non-invertible matrix that we use is the1377 // singular matrix, matrix(1, 1, 0, 0, 0, 100).1378 test(t => {1379 const idlName = propertyToIDL(property);1380 const target = createTestElement(t, setup);1381 target.animate({ [idlName]: ['matrix(-1, 0, 0, -1, 200, 0)',1382 'matrix(-1, 0, 0, -1, 200, 0)'] }, 1000);1383 const animation = target.animate(1384 {1385 [idlName]: [1386 'matrix( 1, 1, 0, 0, 0, 100)',1387 'matrix( 1, 1, 0, 0, 0, 100)',1388 ],1389 },1390 { duration: 1000, composite: 'accumulate' }1391 );1392 testAnimationSampleMatrices(animation, idlName, [1393 { time: 0, expected: [1, 1, 0, 0, 0, 100] },1394 ]);1395 }, `${property}: non-invertible matrices (non-invertible onto invertible)`);1396 test(t => {1397 const idlName = propertyToIDL(property);1398 const target = createTestElement(t, setup);1399 target.animate({ [idlName]: ['matrix( 1, 1, 0, 0, 0, 100)',1400 'matrix( 1, 1, 0, 0, 0, 100)'] }, 1000);1401 const animation = target.animate(1402 {1403 [idlName]: [1404 'matrix(-1, 0, 0, -1, 200, 0)',1405 'matrix(-1, 0, 0, -1, 200, 0)',1406 ],1407 },1408 { duration: 1000, composite: 'accumulate' }1409 );1410 testAnimationSampleMatrices(animation, idlName, [1411 { time: 0, expected: [-1, 0, 0, -1, 200, 0] },1412 ]);1413 }, `${property}: non-invertible matrices (invertible onto non-invertible)`);1414 test(t => {1415 const idlName = propertyToIDL(property);1416 const target = createTestElement(t, setup);1417 // matrix(0, -1, 1, 0, 250, 0)1418 target.animate(1419 {1420 [idlName]: [1421 'translate(50px) matrix(-1, 0, 0, -1, 200, 0) rotate(90deg)',1422 'translate(50px) matrix(-1, 0, 0, -1, 200, 0) rotate(90deg)',1423 ],1424 },1425 10001426 );1427 // matrix(-1, -1, 0, 0, 100, 100)1428 const animation = target.animate(1429 {1430 [idlName]: [1431 'translate(100px) matrix( 1, 1, 0, 0, 0, 100) rotate(180deg)',1432 'translate(100px) matrix( 1, 1, 0, 0, 0, 100) rotate(180deg)',1433 ],1434 },1435 { duration: 1000, composite: 'accumulate' }1436 );1437 testAnimationSampleMatrices(animation, idlName, [1438 { time: 0, expected: [-1, -1, 0, 0, 100, 100] },1439 ]);1440 }, `${property}: non-invertible matrices in matched transform lists (non-invertible onto invertible)`);1441 test(t => {1442 const idlName = propertyToIDL(property);1443 const target = createTestElement(t, setup);1444 // matrix(-1, -1, 0, 0, 100, 100)1445 target.animate(1446 {1447 [idlName]: [1448 'translate(100px) matrix(1, 1, 0, 0, 0, 100) rotate(180deg)',1449 'translate(100px) matrix(1, 1, 0, 0, 0, 100) rotate(180deg)',1450 ],1451 },1452 10001453 );1454 // matrix(0, -1, 1, 0, 250, 0)1455 const animation = target.animate(1456 {1457 [idlName]: [1458 'translate(50px) matrix(-1, 0, 0, -1, 200, 0) rotate(90deg)',1459 'translate(50px) matrix(-1, 0, 0, -1, 200, 0) rotate(90deg)',1460 ],1461 },1462 { duration: 1000, composite: 'accumulate' }1463 );1464 testAnimationSampleMatrices(animation, idlName, [1465 { time: 0, expected: [0, -1, 1, 0, 250, 0] },1466 ]);1467 }, `${property}: non-invertible matrices in matched transform lists (invertible onto non-invertible)`);1468 test(t => {1469 const idlName = propertyToIDL(property);1470 const target = createTestElement(t, setup);1471 // matrix(-2, 0, 0, -2, 250, 0)1472 target.animate(1473 {1474 [idlName]: [1475 'translate(50px) matrix(-1, 0, 0, -1, 200, 0) scale(2)',1476 'translate(50px) matrix(-1, 0, 0, -1, 200, 0) scale(2)',1477 ],1478 },1479 10001480 );1481 // matrix(1, 1, 1, 1, 100, 100)1482 const animation = target.animate(1483 {1484 [idlName]: [1485 'translate(100px) matrix(1, 1, 0, 0, 0, 100) skew(45deg)',1486 'translate(100px) matrix(1, 1, 0, 0, 0, 100) skew(45deg)',1487 ],1488 },1489 { duration: 1000, composite: 'accumulate' }1490 );1491 testAnimationSampleMatrices(animation, idlName, [1492 { time: 0, expected: [1, 1, 1, 1, 100, 100] },1493 ]);1494 }, `${property}: non-invertible matrices in mismatched transform lists`1495 + ' (non-invertible onto invertible)');1496 test(t => {1497 const idlName = propertyToIDL(property);1498 const target = createTestElement(t, setup);1499 // matrix(1, 1, 1, 1, 100, 100)1500 target.animate(1501 {1502 [idlName]: [1503 'translate(100px) matrix(1, 1, 0, 0, 0, 100) skew(45deg)',1504 'translate(100px) matrix(1, 1, 0, 0, 0, 100) skew(45deg)',1505 ],1506 },1507 10001508 );1509 // matrix(-2, 0, 0, -2, 250, 0)1510 const animation = target.animate(1511 {1512 [idlName]: [1513 'translate(50px) matrix(-1, 0, 0, -1, 200, 0) scale(2)',1514 'translate(50px) matrix(-1, 0, 0, -1, 200, 0) scale(2)',1515 ],1516 },1517 { duration: 1000, composite: 'accumulate' }1518 );1519 testAnimationSampleMatrices(animation, idlName, [1520 { time: 0, expected: [-2, 0, 0, -2, 250, 0] },1521 ]);1522 }, `${property}: non-invertible matrices in mismatched transform lists`1523 + ' (invertible onto non-invertible)');1524 },1525};1526const rotateListType = {1527 testInterpolation: (property, setup) => {1528 test(t => {1529 const idlName = propertyToIDL(property);1530 const target = createTestElement(t, setup);1531 const animation = target.animate(1532 {1533 [idlName]: ['45deg', '135deg'],1534 },1535 10001536 );1537 testAnimationSamples(animation, idlName,1538 [{ time: 500, expected: '90deg' }]);1539 }, `${property} without rotation axes`);1540 test(t => {1541 const idlName = propertyToIDL(property);1542 const target = createTestElement(t, setup);1543 const animation =1544 target.animate({ [idlName]: [ '0 1 0 0deg',1545 '0 1 0 90deg'] },1546 1000);1547 testAnimationSamples(animation, idlName,1548 [{ time: 500, expected: 'y 45deg' }]);1549 }, `${property} with rotation axes`);1550 test(t => {1551 const idlName = propertyToIDL(property);1552 const target = createTestElement(t, setup);1553 const animation =1554 target.animate({ [idlName]: [ '0 1 0 0deg',1555 '0 1 0 720deg'] },1556 1000);1557 testAnimationSamples(animation, idlName,1558 [{ time: 250, expected: 'y 180deg' }]);1559 }, `${property} with rotation axes and range over 360 degrees`);1560 test(t => {1561 const idlName = propertyToIDL(property);1562 const target = createTestElement(t, setup);1563 const animation =1564 target.animate({ [idlName]: [ '0 1 0 0deg',1565 '0 1 1 90deg'] },1566 1000);1567 testAnimationSampleRotate3d(animation, idlName,1568 [{ time: 500, expected: '0 0.707107 0.707107 45deg' }]);1569 }, `${property} with different rotation axes`);1570 },1571 testAddition: function(property, setup) {1572 test(t => {1573 const idlName = propertyToIDL(property);1574 const target = createTestElement(t, setup);1575 target.style[idlName] = '45deg';1576 const animation = target.animate({ [idlName]: ['-90deg', '90deg'] },1577 { duration: 1000, fill: 'both',1578 composite: 'add' });1579 testAnimationSamples(animation, idlName,1580 [{ time: 0, expected: '-45deg' },1581 { time: 1000, expected: '135deg' }]);1582 }, `${property} without rotation axes`);1583 test(t => {1584 const idlName = propertyToIDL(property);1585 const target = createTestElement(t, setup);1586 // Rotation specified in transform property should not affect the computed1587 // value of |property|.1588 target.style.transform = 'rotate(20deg)';1589 target.style[idlName] = 'y -45deg';1590 const animation =1591 target.animate({ [idlName]: ['0 1 0 90deg',1592 '0 1 0 180deg'] },1593 { duration: 1000, fill: 'both', composite: 'add' });1594 testAnimationSamples(animation, idlName,1595 [{ time: 0, expected: 'y 45deg' },1596 { time: 1000, expected: 'y 135deg' }]);1597 }, `${property} with underlying transform`);1598 test(t => {1599 const idlName = propertyToIDL(property);1600 const target = createTestElement(t, setup);1601 const animation =1602 target.animate({ [idlName]: [ '0 1 0 0deg',1603 '1 1 1 270deg'] },1604 { duration: 1000, fill: 'both', composite: 'add' });1605 testAnimationSampleRotate3d(animation, idlName,1606 [{ time: 500, expected: '0.57735 0.57735 0.57735 135deg' }]);1607 }, `${property} with different rotation axes`);1608 },1609 testAccumulation: function(property, setup) {1610 test(t => {1611 const idlName = propertyToIDL(property);1612 const target = createTestElement(t, setup);1613 target.style[idlName] = '45deg';1614 const animation = target.animate({ [idlName]: ['-90deg', '90deg'] },1615 { duration: 1000, fill: 'both',1616 composite: 'accumulate' });1617 testAnimationSamples(animation, idlName,1618 [{ time: 0, expected: '-45deg' },1619 { time: 1000, expected: '135deg' }]);1620 }, `${property} without rotation axes`);1621 test(t => {1622 const idlName = propertyToIDL(property);1623 const target = createTestElement(t, setup);1624 target.style.transform = 'translateX(100px)';1625 target.style[idlName] = '1 0 0 -45deg';1626 const animation =1627 target.animate({ [idlName]: ['1 0 0 90deg',1628 '1 0 0 180deg'] },1629 { duration: 1000, fill: 'both', composite: 'accumulate' });1630 testAnimationSamples(animation, idlName,1631 [{ time: 0, expected: 'x 45deg' },1632 { time: 1000, expected: 'x 135deg' }]);1633 }, `${property} with underlying transform`);1634 test(t => {1635 const idlName = propertyToIDL(property);1636 const target = createTestElement(t, setup);1637 const animation =1638 target.animate({ [idlName]: [ '0 1 0 0deg',1639 '1 0 1 180deg'] },1640 { duration: 1000, fill: 'both', composite: 'accumulate' });1641 testAnimationSampleRotate3d(animation, idlName,1642 [{ time: 500, expected: '0.707107 0 0.707107 90deg' }]);1643 }, `${property} with different rotation axes`);1644 },1645};1646const translateListType = {1647 testInterpolation: (property, setup) => {1648 test(t => {1649 const idlName = propertyToIDL(property);1650 const target = createTestElement(t, setup);1651 const animation = target.animate(1652 {1653 [idlName]: ['200px', '400px'],1654 },1655 10001656 );1657 testAnimationSamples(animation, idlName,1658 [{ time: 500, expected: '300px' }]);1659 }, `${property} with two unspecified values`);1660 test(t => {1661 const idlName = propertyToIDL(property);1662 const target = createTestElement(t, setup);1663 const animation = target.animate(1664 {1665 [idlName]: ['200px -200px', '400px 400px'],1666 },1667 10001668 );1669 testAnimationSamples(animation, idlName,1670 [{ time: 500, expected: '300px 100px' }]);1671 }, `${property} with one unspecified value`);1672 test(t => {1673 const idlName = propertyToIDL(property);1674 const target = createTestElement(t, setup);1675 const animation = target.animate(1676 {1677 [idlName]: ['200px -200px 600px', '400px 400px -200px'],1678 },1679 10001680 );1681 testAnimationSamples(animation, idlName,1682 [{ time: 500, expected: '300px 100px 200px' }]);1683 }, `${property} with all three values specified`);1684 test(t => {1685 const idlName = propertyToIDL(property);1686 const target = createTestElement(t, setup);1687 const animation = target.animate(1688 {1689 [idlName]: ['0% -101px 600px', '400px 50% -200px'],1690 },1691 10001692 );1693 testAnimationSamples(animation, idlName,1694 [{ time: 500, expected: 'calc(0% + 200px) calc(25% - 50.5px) 200px' }]);1695 }, `${property} with combination of percentages and lengths`);1696 },1697 testAddition: function(property, setup) {1698 test(t => {1699 const idlName = propertyToIDL(property);1700 const target = createTestElement(t, setup);1701 target.style[idlName] = '100px';1702 const animation = target.animate({ [idlName]: ['-200px', '500px'] },1703 { duration: 1000, fill: 'both',1704 composite: 'add' });1705 testAnimationSamples(animation, idlName,1706 [ { time: 0, expected: '-100px' },1707 { time: 1000, expected: '600px' }]);1708 }, `${property}`);1709 test(t => {1710 const idlName = propertyToIDL(property);1711 const target = createTestElement(t, setup);1712 target.transform = 'translateY(100px)';1713 target.style[idlName] = '100px';1714 const animation = target.animate({ [idlName]: ['-200px', '500px'] },1715 { duration: 1000, fill: 'both',1716 composite: 'add' });1717 testAnimationSamples(animation, idlName,1718 [ { time: 0, expected: '-100px' },1719 { time: 1000, expected: '600px' }]);1720 }, `${property} with underlying transform`);1721 test(t => {1722 const idlName = propertyToIDL(property);1723 const target = createTestElement(t, setup);1724 target.style[idlName] = '50%';1725 const animation = target.animate({ [idlName]: ['-200px', '500px'] },1726 { duration: 1000, fill: 'both',1727 composite: 'add' });1728 testAnimationSamples(animation, idlName,1729 [ { time: 0, expected: 'calc(50% - 200px)' },1730 { time: 1000, expected: 'calc(50% + 500px)' }]);1731 }, `${property} with underlying percentage value`);1732 },1733 testAccumulation: function(property, setup) {1734 test(t => {1735 const idlName = propertyToIDL(property);1736 const target = createTestElement(t, setup);1737 target.style[idlName] = '100px';1738 const animation = target.animate({ [idlName]: ['-200px', '500px'] },1739 { duration: 1000, fill: 'both',1740 composite: 'accumulate' });1741 testAnimationSamples(animation, idlName,1742 [ { time: 0, expected: '-100px' },1743 { time: 1000, expected: '600px' }]);1744 }, `${property}`);1745 test(t => {1746 const idlName = propertyToIDL(property);1747 const target = createTestElement(t, setup);1748 target.transform = 'translateY(100px)';1749 target.style[idlName] = '100px';1750 const animation = target.animate({ [idlName]: ['-200px', '500px'] },1751 { duration: 1000, fill: 'both',1752 composite: 'accumulate' });1753 testAnimationSamples(animation, idlName,1754 [ { time: 0, expected: '-100px' },1755 { time: 1000, expected: '600px' }]);1756 }, `${property} with transform`);1757 },1758};1759const scaleListType = {1760 testInterpolation: (property, setup) => {1761 test(t => {1762 const idlName = propertyToIDL(property);1763 const target = createTestElement(t, setup);1764 const animation = target.animate({ [idlName]: ['3', '5'] },1765 1000);1766 testAnimationSamples(animation, idlName,1767 [{ time: 500, expected: '4' }]);1768 }, `${property} with two unspecified values`);1769 test(t => {1770 const idlName = propertyToIDL(property);1771 const target = createTestElement(t, setup);1772 const animation = target.animate({ [idlName]: ['3 3', '5 5'] },1773 1000);1774 testAnimationSamples(animation, idlName,1775 [{ time: 500, expected: '4' }]);1776 }, `${property} with one unspecified value`);1777 test(t => {1778 const idlName = propertyToIDL(property);1779 const target = createTestElement(t, setup);1780 const animation = target.animate({ [idlName]: ['3 3 3', '5 5 5'] },1781 1000);1782 testAnimationSamples(animation, idlName,1783 [{ time: 500, expected: '4 4 4' }]);1784 }, `${property}`);1785 },1786 testAddition: function(property, setup) {1787 test(t => {1788 const idlName = propertyToIDL(property);1789 const target = createTestElement(t, setup);1790 target.style[idlName] = '2';1791 const animation = target.animate({ [idlName]: ['-3', '5'] },1792 { duration: 1000, fill: 'both',1793 composite: 'add' });1794 testAnimationSamples(animation, idlName,1795 [{ time: 0, expected: '-6' },1796 { time: 1000, expected: '10' }]);1797 }, `${property} with two unspecified values`);1798 test(t => {1799 const idlName = propertyToIDL(property);1800 const target = createTestElement(t, setup);1801 target.style[idlName] = '2 2';1802 const animation = target.animate({ [idlName]: ['-3 -3', '5 5'] },1803 { duration: 1000, fill: 'both',1804 composite: 'add' });1805 testAnimationSamples(animation, idlName,1806 [{ time: 0, expected: '-6' },1807 { time: 1000, expected: '10' }]);1808 }, `${property} with one unspecified value`);1809 test(t => {1810 const idlName = propertyToIDL(property);1811 const target = createTestElement(t, setup);1812 target.style[idlName] = '2 2 2';1813 const animation = target.animate({ [idlName]: ['-1 -2 -3', '4 5 6'] },1814 { duration: 1000, fill: 'both',1815 composite: 'add' });1816 testAnimationSamples(animation, idlName,1817 [{ time: 0, expected: '-2 -4 -6' },1818 { time: 1000, expected: '8 10 12' }]);1819 }, `${property}`);1820 },1821 testAccumulation: function(property, setup) {1822 test(t => {1823 const idlName = propertyToIDL(property);1824 const target = createTestElement(t, setup);1825 target.style[idlName] = '2';1826 const animation = target.animate({ [idlName]: ['-3', '5'] },1827 { duration: 1000, fill: 'both',1828 composite: 'accumulate' });1829 testAnimationSamples(animation, idlName,1830 [{ time: 0, expected: '-2' },1831 { time: 1000, expected: '6' }]);1832 }, `${property} with two unspecified values`);1833 test(t => {1834 const idlName = propertyToIDL(property);1835 const target = createTestElement(t, setup);1836 target.style[idlName] = '2 2';1837 const animation = target.animate({ [idlName]: ['-3 -3', '5 5'] },1838 { duration: 1000, fill: 'both',1839 composite: 'accumulate' });1840 testAnimationSamples(animation, idlName,1841 [{ time: 0, expected: '-2' },1842 { time: 1000, expected: '6' }]);1843 }, `${property} with one unspecified value`);1844 test(t => {1845 const idlName = propertyToIDL(property);1846 const target = createTestElement(t, setup);1847 target.style[idlName] = '2 2 2';1848 const animation = target.animate({ [idlName]: ['-1 -2 -3', '4 5 6'] },1849 { duration: 1000, fill: 'both',1850 composite: 'accumulate' });1851 testAnimationSamples(animation, idlName,1852 [{ time: 0, expected: '0 -1 -2' },1853 { time: 1000, expected: '5 6 7' }]);1854 }, `${property}`);1855 },1856};1857const filterListType = {1858 testInterpolation: (property, setup) => {1859 test(t => {1860 const idlName = propertyToIDL(property);1861 const target = createTestElement(t, setup);1862 const animation = target.animate({ [idlName]:1863 ['blur(10px)', 'blur(50px)'] },1864 1000);1865 testAnimationSamples(animation, idlName,1866 [{ time: 500, expected: 'blur(30px)' }]);1867 }, `${property}: blur function`);1868 test(t => {1869 const idlName = propertyToIDL(property);1870 const target = createTestElement(t, setup);1871 const animation = target.animate({ [idlName]: ['hue-rotate(0deg)',1872 'hue-rotate(100deg)'] },1873 1000);1874 testAnimationSamples(animation, idlName,1875 [{ time: 500, expected: 'hue-rotate(50deg)' }]);1876 }, `${property}: hue-rotate function with same unit(deg)`);1877 test(t => {1878 const idlName = propertyToIDL(property);1879 const target = createTestElement(t, setup);1880 const animation = target.animate({ [idlName]: ['hue-rotate(10deg)',1881 'hue-rotate(100rad)'] },1882 1000);1883 // 10deg = 0.1745rad.1884 testAnimationSamples(animation, idlName,1885 [{ time: 500, expected: 'hue-rotate(2869.79deg)' }]);1886 }, `${property}: hue-rotate function with different unit(deg -> rad)`);1887 test(t => {1888 const idlName = propertyToIDL(property);1889 const target = createTestElement(t, setup);1890 const animation = target.animate(1891 { [idlName]:1892 ['drop-shadow(10px 10px 10px rgba(255, 0, 0, 0.4))',1893 'drop-shadow(50px 50px 50px rgba(0, 0, 255, 0.8))'] },1894 1000);1895 testAnimationSamples(1896 animation, idlName,1897 [{ time: 500,1898 expected: 'drop-shadow(rgba(85, 0, 170, 0.6) 30px 30px 30px)' }]);1899 }, `${property}: drop-shadow function`);1900 test(t => {1901 const idlName = propertyToIDL(property);1902 const target = createTestElement(t, setup);1903 const animation = target.animate(1904 { [idlName]:1905 ['brightness(0.1) contrast(0.1) grayscale(0.1) invert(0.1) ' +1906 'opacity(0.1) saturate(0.1) sepia(0.1)',1907 'brightness(0.5) contrast(0.5) grayscale(0.5) invert(0.5) ' +1908 'opacity(0.5) saturate(0.5) sepia(0.5)'] },1909 1000);1910 testAnimationSamples(animation, idlName,1911 [{ time: 500,1912 expected: 'brightness(0.3) contrast(0.3) grayscale(0.3) ' +1913 'invert(0.3) opacity(0.3) saturate(0.3) sepia(0.3)' }]);1914 }, `${property}: percentage or numeric-specifiable functions`1915 + ' (number value)');1916 test(t => {1917 const idlName = propertyToIDL(property);1918 const target = createTestElement(t, setup);1919 const animation = target.animate(1920 { [idlName]:1921 ['brightness(10%) contrast(10%) grayscale(10%) invert(10%) ' +1922 'opacity(10%) saturate(10%) sepia(10%)',1923 'brightness(50%) contrast(50%) grayscale(50%) invert(50%) ' +1924 'opacity(50%) saturate(50%) sepia(50%)'] },1925 1000);1926 testAnimationSamples(animation, idlName,1927 [{ time: 500,1928 expected: 'brightness(0.3) contrast(0.3) grayscale(0.3) ' +1929 'invert(0.3) opacity(0.3) saturate(0.3) sepia(0.3)' }]);1930 }, `${property}: percentage or numeric-specifiable functions`1931 + ' (percentage value)');1932 test(t => {1933 const idlName = propertyToIDL(property);1934 const target = createTestElement(t, setup);1935 const animation = target.animate(1936 { [idlName]:1937 // To make missing filter-function-lists, specified the grayscale.1938 ['grayscale(0)',1939 'grayscale(1) brightness(0) contrast(0) opacity(0) saturate(0)' ]},1940 1000);1941 testAnimationSamples(animation, idlName,1942 [{ time: 500,1943 expected: 'grayscale(0.5) brightness(0.5) contrast(0.5) ' +1944 'opacity(0.5) saturate(0.5)' }]);1945 }, `${property}: interpolate different length of filter-function-list`1946 + ' with function which lacuna value is 1');1947 test(t => {1948 const idlName = propertyToIDL(property);1949 const target = createTestElement(t, setup);1950 const animation = target.animate(1951 { [idlName]:1952 // To make missing filter-function-lists, specified the opacity.1953 ['opacity(1)',1954 'opacity(0) grayscale(1) invert(1) sepia(1) blur(10px)'] },1955 1000);1956 testAnimationSamples(animation, idlName,1957 [{ time: 500,1958 expected:1959 'opacity(0.5) grayscale(0.5) invert(0.5) sepia(0.5) blur(5px)' }]);1960 }, `${property}: interpolate different length of filter-function-list`1961 + ' with function which lacuna value is 0');1962 test(t => {1963 const idlName = propertyToIDL(property);1964 const target = createTestElement(t, setup);1965 target.style.color = "rgba(255, 0, 0, 0.4)";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 // The lacuna value of drop-shadow's color is taken from1974 // the color property.1975 expected: 'blur(5px) drop-shadow(rgba(85, 0, 170, 0.6) 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) {...

Using AI Code Generation

1var wptutils = require('./wptutils');2var testObject = {3};4var idl = wptutils.propertyToIDL(testObject);5console.log(idl);6exports.propertyToIDL = function (object) {7 var idl = '';8 for (var key in object) {9 if (idl != '') idl += ', ';10 idl += key + ': ' + object[key];11 }12 return idl;13};14module.exports.propertyToIDL = function (object) {15 var idl = '';16 for (var key in object) {17 if (idl != '') idl += ', ';18 idl += key + ': ' + object[key];19 }20 return idl;21};22exports.propertyToIDL = function (object) {23 var idl = '';24 for (var key in object) {25 if (idl != '') idl += ', ';26 idl += key + ': ' + object[key];27 }28 return idl;29};

Using AI Code Generation

1var wpt = new WebIDLParser();2var idl = wpt.propertyToIDL("myProperty", "string");3console.log(idl);4var wpt = new WebIDLParser();5var idl = wpt.propertiesToIDL({6});7console.log(idl);8var wpt = new WebIDLParser();9var idl = wpt.methodToIDL("myMethod", {10});11console.log(idl);12var wpt = new WebIDLParser();13var idl = wpt.methodsToIDL({14 "myMethod": {15 },16 "myOtherMethod": {17 }18});19console.log(idl);20var wpt = new WebIDLParser();21var idl = wpt.interfaceToIDL("MyInterface", {22 "myMethod": {23 },24 "myOtherMethod": {25 }26});27console.log(idl);

Using AI Code Generation

1var obj = {2 "address": {3 }4}5var idl = propertyToIDL(obj);6console.log(idl);7 var idl = "id:1234,name:test,description:test description,address:{street:test street,city:test city,state:test state,zip:12345}";8 var obj = idlToProperty(idl);9 console.log(obj);10var obj = {11 "address": {12 }13}14var idl = propertyToIDL(obj);15console.log(idl);16var idl = "id:1234,name:test,description:test description,address:{street:test street,city:test city,state:test state,zip:12345}";17var obj = idlToProperty(idl);18console.log(obj);19id:1234,name:test,description:test description,address:{street:test street,city:test city,state:test state,zip:12345}20{ id: '1234', name: 'test', description: 'test description', address: { street: 'test street', city: 'test city', state: 'test state', zip: '12345' } }21var obj = {22 "address": {23 }

Using AI Code Generation

1var wptools = require('wptools');2var fs = require('fs');3var prop = fs.readFileSync('property.json', 'utf8');4var prop = JSON.parse(prop);5var prop = prop.property;6var prop = prop.toString();7var idl = wptools.propertyToIDL(prop);8console.log(idl);9{10}11var wptools = require('wptools');12var fs = require('fs');13var prop = fs.readFileSync('property.json', 'utf8');14var prop = JSON.parse(prop);15var prop = prop.property;16var prop = prop.toString();17var idl = wptools.propertyToIDL(prop);18console.log(idl);19{20}21var wptools = require('wptools');22var fs = require('fs');23var prop = fs.readFileSync('property.json', 'utf8');24var prop = JSON.parse(prop);25var prop = prop.property;26var prop = prop.toString();27var idl = wptools.propertyToIDL(prop);28console.log(idl);29{30}31var wptools = require('wptools');32var fs = require('fs');33var prop = fs.readFileSync('property.json', 'utf8');34var prop = JSON.parse(prop);35var prop = prop.property;36var prop = prop.toString();37var idl = wptools.propertyToIDL(prop);38console.log(idl);

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

›

_