How to use idlName method in wpt

Best JavaScript code snippet using wpt

property-types.js

Source:property-types.js

1'use strict';2const discreteType = {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: 'hidden' }]);559    }, `${property}: onto "visible"`);560    test(t => {561      const idlName = propertyToIDL(property);562      const target = createTestElement(t, setup);563      target.style[idlName] = 'hidden';564      const animation = target.animate({ [idlName]: ['hidden', 'visible'] },565                                       { duration: 1000, fill: 'both',566                                         composite });567      testAnimationSamples(animation, idlName,568                           [{ time: 0,    expected: 'hidden' },569                            { time: 1000, expected: 'visible' }]);570    }, `${property}: onto "hidden"`);571  },572  testAddition: function(property, setup) {573    this.testAdditionOrAccumulation(property, setup, 'add');574  },575  testAccumulation: function(property, setup) {576    this.testAdditionOrAccumulation(property, setup, 'accumulate');577  },578};579const colorType = {580  testInterpolation: (property, setup) => {581    test(t => {582      const idlName = propertyToIDL(property);583      const target = createTestElement(t, setup);584      const animation = target.animate({ [idlName]: ['rgb(255, 0, 0)',585                                                     'rgb(0, 0, 255)'] },586                                       1000);587      testAnimationSamples(animation, idlName,588                           [{ time: 500,  expected: 'rgb(128, 0, 128)' }]);589    }, `${property} supports animating as color of rgb()`);590    test(t => {591      const idlName = propertyToIDL(property);592      const target = createTestElement(t, setup);593      const animation = target.animate({ [idlName]: ['#ff0000', '#0000ff'] },594                                       1000);595      testAnimationSamples(animation, idlName,596                           [{ time: 500,  expected: 'rgb(128, 0, 128)' }]);597    }, `${property} supports animating as color of #RGB`);598    test(t => {599      const idlName = propertyToIDL(property);600      const target = createTestElement(t, setup);601      const animation = target.animate({ [idlName]: ['hsl(0,   100%, 50%)',602                                                     'hsl(240, 100%, 50%)'] },603                                       1000);604      testAnimationSamples(animation, idlName,605                           [{ time: 500,  expected: 'rgb(128, 0, 128)' }]);606    }, `${property} supports animating as color of hsl()`);607    test(t => {608      const idlName = propertyToIDL(property);609      const target = createTestElement(t, setup);610      const animation = target.animate(611        { [idlName]: ['#ff000066', '#0000ffcc'] },612        1000613      );614      // R: 255 * (0.4 * 0.5) / 0.6 = 85615      // B: 255 * (0.8 * 0.5) / 0.6 = 170616      testAnimationSamples(animation, idlName,617                           [{ time: 500,  expected: 'rgba(85, 0, 170, 0.6)' }]);618    }, `${property} supports animating as color of #RGBa`);619    test(t => {620      const idlName = propertyToIDL(property);621      const target = createTestElement(t, setup);622      const animation = target.animate(623        {624          [idlName]: ['rgba(255, 0, 0, 0.4)', 'rgba(0, 0, 255, 0.8)'],625        },626        1000627      );628      testAnimationSamples(animation, idlName,      // Same as above.629                           [{ time: 500,  expected: 'rgba(85, 0, 170, 0.6)' }]);630    }, `${property} supports animating as color of rgba()`);631    test(t => {632      const idlName = propertyToIDL(property);633      const target = createTestElement(t, setup);634      const animation = target.animate(635        {636          [idlName]: ['hsla(0,   100%, 50%, 0.4)', 'hsla(240, 100%, 50%, 0.8)'],637        },638        1000639      );640      testAnimationSamples(animation, idlName,      // Same as above.641                           [{ time: 500,  expected: 'rgba(85, 0, 170, 0.6)' }]);642    }, `${property} supports animating as color of hsla()`);643  },644  testAdditionOrAccumulation: (property, setup, composite) => {645    test(t => {646      const idlName = propertyToIDL(property);647      const target = createTestElement(t, setup);648      target.style[idlName] = 'rgb(128, 128, 128)';649      const animation = target.animate(650        {651          [idlName]: ['rgb(255, 0, 0)', 'rgb(0, 0, 255)'],652        },653        { duration: 1000, composite }654      );655      testAnimationSamples(animation, idlName,656                           [{ time: 0,   expected: 'rgb(255, 128, 128)' },657                            // The value at 50% is interpolated658                            // from 'rgb(128+255, 128, 128)'659                            // to   'rgb(128,     128, 128+255)'.660                            { time: 500, expected: 'rgb(255, 128, 255)' }]);661    }, `${property} supports animating as color of rgb() with overflowed `662       + ' from and to values');663    test(t => {664      const idlName = propertyToIDL(property);665      const target = createTestElement(t, setup);666      target.style[idlName] = 'rgb(128, 128, 128)';667      const animation = target.animate({ [idlName]: ['#ff0000', '#0000ff'] },668                                       { duration: 1000, composite });669      testAnimationSamples(animation, idlName,670                           [{ time: 0,  expected: 'rgb(255, 128, 128)' }]);671    }, `${property} supports animating as color of #RGB`);672    test(t => {673      const idlName = propertyToIDL(property);674      const target = createTestElement(t, setup);675      target.style[idlName] = 'rgb(128, 128, 128)';676      const animation = target.animate({ [idlName]: ['hsl(0,   100%, 50%)',677                                                     'hsl(240, 100%, 50%)'] },678                                       { duration: 1000, composite });679      testAnimationSamples(animation, idlName,680                           [{ time: 0,  expected: 'rgb(255, 128, 128)' }]);681    }, `${property} supports animating as color of hsl()`);682    test(t => {683      const idlName = propertyToIDL(property);684      const target = createTestElement(t, setup);685      target.style[idlName] = 'rgb(128, 128, 128)';686      const animation = target.animate(687        { [idlName]: ['#ff000066', '#0000ffcc'] },688        { duration: 1000, composite }689      );690      testAnimationSamples(animation, idlName,691                           [{ time: 0,  expected: 'rgb(230, 128, 128)' }]);692    }, `${property} supports animating as color of #RGBa`);693    test(t => {694      const idlName = propertyToIDL(property);695      const target = createTestElement(t, setup);696      target.style[idlName] = 'rgb(128, 128, 128)';697      const animation = target.animate({ [idlName]: ['rgba(255, 0, 0, 0.4)',698                                                     'rgba(0, 0, 255, 0.8)'] },699                                       { duration: 1000, composite });700      testAnimationSamples(animation, idlName,      // Same as above.701                           [{ time: 0,  expected: 'rgb(230, 128, 128)' }]);702    }, `${property} supports animating as color of rgba()`);703    test(t => {704      const idlName = propertyToIDL(property);705      const target = createTestElement(t, setup);706      target.style[idlName] = 'rgb(128, 128, 128)';707      const animation = target.animate(708        {709          [idlName]: ['hsla(0,   100%, 50%, 0.4)', 'hsla(240, 100%, 50%, 0.8)'],710        },711        { duration: 1000, composite }712      );713      testAnimationSamples(animation, idlName,      // Same as above.714                           [{ time: 0,  expected: 'rgb(230, 128, 128)' }]);715    }, `${property} supports animating as color of hsla()`);716  },717  testAddition: function(property, setup) {718    this.testAdditionOrAccumulation(property, setup, 'add');719  },720  testAccumulation: function(property, setup) {721    this.testAdditionOrAccumulation(property, setup, 'accumulate');722  },723};724const transformListType = {725  testInterpolation: (property, setup) => {726    test(t => {727      const idlName = propertyToIDL(property);728      const target = createTestElement(t, setup);729      const animation = target.animate(730        {731          [idlName]: ['translate(200px, -200px)', 'translate(400px, 400px)'],732        },733        1000734      );735      testAnimationSampleMatrices(animation, idlName,736        [{ time: 500,  expected: [ 1, 0, 0, 1, 300, 100 ] }]);737    }, `${property}: translate`);738    test(t => {739      const idlName = propertyToIDL(property);740      const target = createTestElement(t, setup);741      const animation = target.animate(742        {743          [idlName]: ['rotate(45deg)', 'rotate(135deg)'],744        },745        1000746      );747      testAnimationSampleMatrices(animation, idlName,748        [{ time: 500,  expected: [ Math.cos(Math.PI / 2),749                                   Math.sin(Math.PI / 2),750                                  -Math.sin(Math.PI / 2),751                                   Math.cos(Math.PI / 2),752                                   0, 0] }]);753    }, `${property}: rotate`);754    test(t => {755      const idlName = propertyToIDL(property);756      const target = createTestElement(t, setup);757      const animation = target.animate({ [idlName]: ['scale(3)', 'scale(5)'] },758                                       1000);759      testAnimationSampleMatrices(animation, idlName,760        [{ time: 500,  expected: [ 4, 0, 0, 4, 0, 0 ] }]);761    }, `${property}: scale`);762    test(t => {763      const idlName = propertyToIDL(property);764      const target = createTestElement(t, setup);765      const animation = target.animate({ [idlName]: ['skew(30deg, 60deg)',766                                                     'skew(60deg, 30deg)'] },767                                       1000);768      testAnimationSampleMatrices(animation, idlName,769        [{ time: 500,  expected: [ 1, Math.tan(Math.PI / 4),770                                   Math.tan(Math.PI / 4), 1,771                                   0, 0] }]);772    }, `${property}: skew`);773    test(t => {774      const idlName = propertyToIDL(property);775      const target = createTestElement(t, setup);776      const animation =777        target.animate({ [idlName]: ['translateX(100px) rotate(45deg)',778                                     'translateX(200px) rotate(135deg)'] },779                       1000);780      testAnimationSampleMatrices(animation, idlName,781        [{ time: 500,  expected: [ Math.cos(Math.PI / 2),782                                   Math.sin(Math.PI / 2),783                                  -Math.sin(Math.PI / 2),784                                   Math.cos(Math.PI / 2),785                                   150, 0 ] }]);786    }, `${property}: rotate and translate`);787    test(t => {788      const idlName = propertyToIDL(property);789      const target = createTestElement(t, setup);790      const animation =791        target.animate({ [idlName]: ['rotate(45deg) translateX(100px)',792                                     'rotate(135deg) translateX(200px)'] },793                       1000);794      testAnimationSampleMatrices(animation, idlName,795        [{ time: 500, expected: [ Math.cos(Math.PI / 2),796                                  Math.sin(Math.PI / 2),797                                 -Math.sin(Math.PI / 2),798                                  Math.cos(Math.PI / 2),799                                  150 * Math.cos(Math.PI / 2),800                                  150 * Math.sin(Math.PI / 2) ] }]);801    }, `${property}: translate and rotate`);802    test(t => {803      const idlName = propertyToIDL(property);804      const target = createTestElement(t, setup);805      const animation =806        target.animate({ [idlName]: ['rotate(0deg)',807                                     'rotate(1080deg) translateX(100px)'] },808                       1000);809      testAnimationSampleMatrices(animation, idlName,810        [{ time: 500, expected: [ -1, 0, 0, -1, -50, 0 ] }]);811    }, `${property}: extend shorter list (from)`);812    test(t => {813      const idlName = propertyToIDL(property);814      const target = createTestElement(t, setup);815      const animation =816        target.animate({ [idlName]: ['rotate(0deg) translateX(100px)',817                                     'rotate(1080deg)'] },818                       1000);819      testAnimationSampleMatrices(animation, idlName,820        [{ time: 500, expected: [ -1, 0, 0, -1, -50, 0 ] }]);821    }, `${property}: extend shorter list (to)`);822    test(t => {823      const idlName = propertyToIDL(property);824      const target = createTestElement(t, setup);825      const animation =              // matrix(0, 1, -1, 0, 0, 100)826        target.animate({ [idlName]: ['rotate(90deg) translateX(100px)',827                                     // matrix(-1, 0, 0, -1, 200, 0)828                                     'translateX(200px) rotate(180deg)'] },829                       1000);830      testAnimationSampleMatrices(animation, idlName,831        [{ time: 500, expected: [ Math.cos(Math.PI * 3 / 4),832                                  Math.sin(Math.PI * 3 / 4),833                                 -Math.sin(Math.PI * 3 / 4),834                                  Math.cos(Math.PI * 3 / 4),835                                  100, 50 ] }]);836    }, `${property}: mismatch order of translate and rotate`);837    test(t => {838      const idlName = propertyToIDL(property);839      const target = createTestElement(t, setup);840      const animation =               // Same matrices as above.841        target.animate({ [idlName]: [ 'matrix(0, 1, -1, 0, 0, 100)',842                                      'matrix(-1, 0, 0, -1, 200, 0)' ] },843                       1000);844      testAnimationSampleMatrices(animation, idlName,845        [{ time: 500, expected: [ Math.cos(Math.PI * 3 / 4),846                                  Math.sin(Math.PI * 3 / 4),847                                 -Math.sin(Math.PI * 3 / 4),848                                  Math.cos(Math.PI * 3 / 4),849                                  100, 50 ] }]);850    }, `${property}: matrix`);851    test(t => {852      const idlName = propertyToIDL(property);853      const target = createTestElement(t, setup);854      const animation =855        target.animate({ [idlName]: [ 'rotate3d(1, 1, 0, 0deg)',856                                      'rotate3d(1, 1, 0, 90deg)'] },857                       1000);858      testAnimationSampleMatrices(animation, idlName,859        [{ time: 500, expected: rotate3dToMatrix(1, 1, 0, Math.PI / 4) }]);860    }, `${property}: rotate3d`);861    test(t => {862      const idlName = propertyToIDL(property);863      const target = createTestElement(t, setup);864      // To calculate expected matrices easily, generate input matrices from865      // rotate3d.866      const from = rotate3dToMatrix3d(1, 1, 0, Math.PI / 4);867      const to = rotate3dToMatrix3d(1, 1, 0, Math.PI * 3 / 4);868      const animation = target.animate({ [idlName]: [ from, to ] }, 1000);869      testAnimationSampleMatrices(animation, idlName,870        [{ time: 500, expected: rotate3dToMatrix(1, 1, 0, Math.PI * 2 / 4) }]);871    }, `${property}: matrix3d`);872    // This test aims for forcing the two mismatched transforms to be873    // decomposed into matrix3d before interpolation. Therefore, we not only874    // test the interpolation, but also test the 3D matrix decomposition.875    test(t => {876      const idlName = propertyToIDL(property);877      const target = createTestElement(t, setup);878      const animation = target.animate(879        {880          [idlName]: [881            'scale(0.3)',882            // scale(0.5) translateZ(1px)883            'matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1)',884          ],885        },886        1000887      );888      testAnimationSampleMatrices(animation, idlName,889        [{ time: 500,  expected: [ 0.4, 0,   0,   0,890                                   0,   0.4, 0,   0,891                                   0,   0,   1,   0,892                                   0,   0,   0.5, 1] }]);893    }, `${property}: mismatched 3D transforms`);894    test(t => {895      const idlName = propertyToIDL(property);896      const target = createTestElement(t, setup);897      const animation =898        target.animate({ [idlName]: ['rotateY(60deg)', 'none' ] }, 1000);899      testAnimationSampleMatrices(animation, idlName,900                   // rotateY(30deg) == rotate3D(0, 1, 0, 30deg)901        [{ time: 500, expected: rotate3dToMatrix(0, 1, 0, Math.PI / 6) }]);902    }, `${property}: rotateY`);903    // Following tests aim for test the fallback discrete interpolation behavior904    // for non-invertible matrices. The non-invertible matrix that we use is the905    // singular matrix, matrix(1, 1, 0, 0, 0, 100).906    test(t => {907      const idlName = propertyToIDL(property);908      const target = createTestElement(t, setup);909      const animation =910        target.animate({ [idlName]: ['matrix(-1, 0, 0, -1, 200, 0)',911                                     'matrix( 1, 1, 0,  0, 0, 100)'] },912                       { duration: 1000, fill: 'both' });913      testAnimationSampleMatrices(animation, idlName,914        [ { time: 0,    expected: [ -1, 0, 0, -1, 200,   0 ] },915          { time: 499,  expected: [ -1, 0, 0, -1, 200,   0 ] },916          { time: 500,  expected: [  1, 1, 0,  0,   0, 100 ] },917          { time: 1000, expected: [  1, 1, 0,  0,   0, 100 ] }]);918    }, `${property}: non-invertible matrices`);919    test(t => {920      const idlName = propertyToIDL(property);921      const target = createTestElement(t, setup);922      const animation = target.animate(923        {924          [idlName]: [925            // matrix(0, -1, 1, 0, 250, 0)926            'translate(50px)  matrix(-1, 0, 0, -1, 200, 0) rotate(90deg)',927            // matrix(-1, -1, 0, 0, 100, 100)928            'translate(100px) matrix( 1, 1, 0,  0, 0, 100) rotate(180deg)',929          ],930        },931        { duration: 1000, fill: 'both' }932      );933      testAnimationSampleMatrices(animation, idlName,934        [ { time: 0,    expected: [  0, -1, 1, 0, 250,   0 ] },935          { time: 499,  expected: [  0, -1, 1, 0, 250,   0 ] },936          { time: 500,  expected: [ -1, -1, 0, 0, 100, 100 ] },937          { time: 1000, expected: [ -1, -1, 0, 0, 100, 100 ] }]);938    }, `${property}: non-invertible matrices in matched transform lists`);939    test(t => {940      const idlName = propertyToIDL(property);941      const target = createTestElement(t, setup);942      const animation = target.animate(943        {944          [idlName]: [945            // matrix(-2, 0, 0, -2, 250, 0)946            'translate(50px)  matrix(-1, 0, 0, -1, 200, 0) scale(2)',947            // matrix(1, 1, 1, 1, 100, 100)948            'translate(100px) matrix( 1, 1, 0,  0, 0, 100) skew(45deg)',949          ],950        },951        { duration: 1000, fill: 'both' }952      );953      testAnimationSampleMatrices(animation, idlName,954        [ { time: 0,    expected: [ -2, 0, 0, -2, 250,   0 ] },955          { time: 499,  expected: [ -2, 0, 0, -2, 250,   0 ] },956          { time: 500,  expected: [  1, 1, 1,  1, 100, 100 ] },957          { time: 1000, expected: [  1, 1, 1,  1, 100, 100 ] }]);958    }, `${property}: non-invertible matrices in mismatched transform lists`);959    test(t => {960      const idlName = propertyToIDL(property);961      const target = createTestElement(t, setup);962      const animation = target.animate(963        {964          // perspective(0) is treated as perspective(1px)965          [idlName]: ['perspective(0)', 'perspective(10px)'],966        },967        1000968      );969      testAnimationSampleMatrices(animation, idlName,970        [{ time: 500,  expected: [ 1, 0, 0, 0,971                                   0, 1, 0, 0,972                                   0, 0, 1, -0.55,973                                   0, 0, 0, 1 ] }]);974    }, `${property}: perspective`);975  },976  testAddition: function(property, setup) {977    test(t => {978      const idlName = propertyToIDL(property);979      const target = createTestElement(t, setup);980      target.style[idlName] = 'translateX(100px)';981      const animation = target.animate({ [idlName]: ['translateX(-200px)',982                                                     'translateX(500px)'] },983                                       { duration: 1000, fill: 'both',984                                         composite: 'add' });985      testAnimationSampleMatrices(animation, idlName,986        [ { time: 0,    expected: [ 1, 0, 0, 1, -100, 0 ] },987          { time: 1000, expected: [ 1, 0, 0, 1,  600, 0 ] }]);988    }, `${property}: translate`);989    test(t => {990      const idlName = propertyToIDL(property);991      const target = createTestElement(t, setup);992      target.style[idlName] = 'rotate(45deg)';993      const animation = target.animate({ [idlName]: ['rotate(-90deg)',994                                                     'rotate(90deg)'] },995                                       { duration: 1000, fill: 'both',996                                         composite: 'add' });997      testAnimationSampleMatrices(animation, idlName,998        [{ time: 0,    expected: [ Math.cos(-Math.PI / 4),999                                   Math.sin(-Math.PI / 4),1000                                  -Math.sin(-Math.PI / 4),1001                                   Math.cos(-Math.PI / 4),1002                                   0, 0] },1003         { time: 1000, expected: [ Math.cos(Math.PI * 3 / 4),1004                                   Math.sin(Math.PI * 3 / 4),1005                                  -Math.sin(Math.PI * 3 / 4),1006                                   Math.cos(Math.PI * 3 / 4),1007                                   0, 0] }]);1008    }, `${property}: rotate`);1009    test(t => {1010      const idlName = propertyToIDL(property);1011      const target = createTestElement(t, setup);1012      target.style[idlName] = 'scale(2)';1013      const animation = target.animate({ [idlName]: ['scale(-3)', 'scale(5)'] },1014                                       { duration: 1000, fill: 'both',1015                                         composite: 'add' });1016      testAnimationSampleMatrices(animation, idlName,1017        [{ time: 0,    expected: [ -6, 0, 0, -6, 0, 0 ] }, // scale(-3) scale(2)1018         { time: 1000, expected: [ 10, 0, 0, 10, 0, 0 ] }]); // scale(5) scale(2)1019    }, `${property}: scale`);1020    test(t => {1021      const idlName = propertyToIDL(property);1022      const target = createTestElement(t, setup);1023                              // matrix(1, tan(10deg), tan(10deg), 1)1024      target.style[idlName] = 'skew(10deg, 10deg)';1025      const animation =              // matrix(1, tan(20deg), tan(-30deg), 1)1026        target.animate({ [idlName]: ['skew(-30deg, 20deg)',1027                                     // matrix(1, tan(-30deg), tan(20deg), 1)1028                                     'skew(20deg, -30deg)'] },1029                       { duration: 1000, fill: 'both', composite: 'add' });1030      // matrix at 0%.1031      // [ 1          tan(10deg) ] [ 1          tan(-30deg) ]1032      // [ tan(10deg)          1 ] [ tan(20deg)           1 ] =1033      //1034      // [ 1 + tan(10deg) * tan(20deg) tan(-30deg) + tan(10deg)     ]1035      // [     tan(10deg) + tan(20deg) tan(10deg) * tan(-30deg) + 1 ]1036      // matrix at 100%.1037      // [ 1          tan(10deg) ] [ 1           tan(20deg) ]1038      // [ tan(10deg)          1 ] [ tan(-30deg)          1 ] =1039      //1040      // [ 1 + tan(10deg) * tan(-30deg) tan(20deg) + tan(10deg)     ]1041      // [     tan(10deg) + tan(-30deg) tan(10deg) * tan(20deg) + 1 ]1042      testAnimationSampleMatrices(animation, idlName,1043        [{ time: 0,    expected: [ 1 + Math.tan(Math.PI/18) * Math.tan(Math.PI/9),1044                                   Math.tan(Math.PI/18) + Math.tan(Math.PI/9),1045                                   Math.tan(-Math.PI/6) + Math.tan(Math.PI/18),1046                                   1 + Math.tan(Math.PI/18) * Math.tan(-Math.PI/6),1047                                   0, 0] },1048         { time: 1000, expected: [ 1 + Math.tan(Math.PI/18) * Math.tan(-Math.PI/6),1049                                   Math.tan(Math.PI/18) + Math.tan(-Math.PI/6),1050                                   Math.tan(Math.PI/9) + Math.tan(Math.PI/18),1051                                   1 + Math.tan(Math.PI/18) * Math.tan(Math.PI/9),1052                                   0, 0] }]);1053    }, `${property}: skew`);1054    test(t => {1055      const idlName = propertyToIDL(property);1056      const target = createTestElement(t, setup);1057                               // matrix(1, 0, 0, 1, 100, 0)1058      target.style[idlName] = 'translateX(100px)';1059      const animation =              // matrix(0, 1, -1, 0, 0, 0)1060        target.animate({ [idlName]: ['rotate(90deg)',1061                                     // matrix(-1, 0, 0, -1, 0, 0)1062                                     'rotate(180deg)'] },1063                       { duration: 1000, fill: 'both', composite: 'add' });1064      testAnimationSampleMatrices(animation, idlName,1065        [{ time: 0,    expected: [  0, 1, -1,  0, 100, 0 ] },1066         { time: 1000, expected: [ -1, 0,  0, -1, 100, 0 ] }]);1067    }, `${property}: rotate on translate`);1068    test(t => {1069      const idlName = propertyToIDL(property);1070      const target = createTestElement(t, setup);1071                               // matrix(0, 1, -1, 0, 0, 0)1072      target.style[idlName] = 'rotate(90deg)';1073      const animation =              // matrix(1, 0, 0, 1, 100, 0)1074        target.animate({ [idlName]: ['translateX(100px)',1075                                     // matrix(1, 0, 0, 1, 200, 0)1076                                     'translateX(200px)'] },1077                       { duration: 1000, fill: 'both', composite: 'add' });1078      testAnimationSampleMatrices(animation, idlName,1079        [{ time: 0,    expected: [ 0, 1, -1, 0, 0, 100 ] },1080         { time: 1000, expected: [ 0, 1, -1, 0, 0, 200 ] }]);1081    }, `${property}: translate on rotate`);1082    test(t => {1083      const idlName = propertyToIDL(property);1084      const target = createTestElement(t, setup);1085      target.style[idlName] = 'rotate(45deg) translateX(100px)';1086      const animation = target.animate({ [idlName]: ['rotate(-90deg)',1087                                                     'rotate(90deg)'] },1088                                       { duration: 1000, fill: 'both',1089                                         composite: 'add' });1090      testAnimationSampleMatrices(animation, idlName,1091        [{ time: 0,    expected: [ Math.cos(-Math.PI / 4),1092                                   Math.sin(-Math.PI / 4),1093                                  -Math.sin(-Math.PI / 4),1094                                   Math.cos(-Math.PI / 4),1095                                   100 * Math.cos(Math.PI / 4),1096                                   100 * Math.sin(Math.PI / 4) ] },1097         { time: 1000, expected: [ Math.cos(Math.PI * 3 / 4),1098                                   Math.sin(Math.PI * 3 / 4),1099                                  -Math.sin(Math.PI * 3 / 4),1100                                   Math.cos(Math.PI * 3 / 4),1101                                   100 * Math.cos(Math.PI / 4),1102                                   100 * Math.sin(Math.PI / 4) ] }]);1103    }, `${property}: rotate on rotate and translate`);1104    test(t => {1105      const idlName = propertyToIDL(property);1106      const target = createTestElement(t, setup);1107      target.style[idlName] = 'matrix(0, 1, -1, 0, 0, 0)';1108      const animation =               // Same matrices as above.1109        target.animate({ [idlName]: [ 'matrix(1, 0, 0, 1, 100, 0)',1110                                      'matrix(1, 0, 0, 1, 200, 0)' ] },1111                       { duration: 1000, fill: 'both', composite: 'add' });1112      testAnimationSampleMatrices(animation, idlName,1113        [{ time: 0,    expected: [ 0, 1, -1, 0, 0, 100 ] },1114         { time: 1000, expected: [ 0, 1, -1, 0, 0, 200 ] }]);1115    }, `${property}: matrix`);1116    test(t => {1117      const idlName = propertyToIDL(property);1118      const target = createTestElement(t, setup);1119      target.style[idlName] = 'rotate3d(1, 1, 0, 45deg)';1120      const animation =1121        target.animate({ [idlName]: [ 'rotate3d(1, 1, 0, -90deg)',1122                                      'rotate3d(1, 1, 0, 90deg)'] },1123                       { duration: 1000, fill: 'both', composite: 'add' });1124      testAnimationSampleMatrices(animation, idlName,1125        [{ time: 0,    expected: rotate3dToMatrix(1, 1, 0,    -Math.PI / 4) },1126         { time: 1000, expected: rotate3dToMatrix(1, 1, 0, 3 * Math.PI / 4) }]);1127    }, `${property}: rotate3d`);1128    test(t => {1129      const idlName = propertyToIDL(property);1130      const target = createTestElement(t, setup);1131      // To calculate expected matrices easily, generate input matrices from1132      // rotate3d.1133      target.style[idlName] = rotate3dToMatrix3d(1, 1, 0, Math.PI / 4);1134      const from = rotate3dToMatrix3d(1, 1, 0, -Math.PI / 2);1135      const to = rotate3dToMatrix3d(1, 1, 0, Math.PI / 2);1136      const animation =1137        target.animate({ [idlName]: [ from, to ] },1138                       { duration: 1000, fill: 'both', composite: 'add' });1139      testAnimationSampleMatrices(animation, idlName,1140        [{ time: 0,    expected: rotate3dToMatrix(1, 1, 0,    -Math.PI / 4) },1141         { time: 1000, expected: rotate3dToMatrix(1, 1, 0, 3 * Math.PI / 4) }]);1142    }, `${property}: matrix3d`);1143    // Following tests aim for test the addition behavior for non-invertible1144    // matrices. Note that the addition for non-invertible matrices should be1145    // the same, just like addition for invertible matrices. With these tests,1146    // we can assure that addition never behaves as discrete. The non-invertible1147    // matrix that we use is the singular matrix, matrix(1, 1, 0, 0, 0, 100).1148    test(t => {1149      const idlName = propertyToIDL(property);1150      const target = createTestElement(t, setup);1151      target.style[idlName] = 'translateX(50px)';1152      const animation =1153        target.animate({ [idlName]: ['matrix(-1, 0, 0, -1, 200, 0)',1154                                     'matrix( 1, 1, 0,  0, 0, 100)'] },1155                       { duration: 1000, fill: 'both', composite: 'add' });1156      testAnimationSampleMatrices(animation, idlName,1157        [ { time: 0,    expected: [ -1, 0, 0, -1, 250,   0 ] },1158          { time: 1000, expected: [  1, 1, 0,  0,  50, 100 ] }]);1159    }, `${property}: non-invertible matrices`);1160    test(t => {1161      const idlName = propertyToIDL(property);1162      const target = createTestElement(t, setup);1163      target.style[idlName] = 'translateX(50px)';1164      const animation =              // matrix(0, -1, 1, 0, 200, 0)1165        target.animate({ [idlName]: ['matrix(-1, 0, 0, -1, 200, 0) rotate(90deg)',1166                                     // matrix(-1, -1, 0, 0, 0, 100)1167                                     'matrix( 1, 1, 0,  0, 0, 100) rotate(180deg)'] },1168                       { duration: 1000, fill: 'both', composite: 'add' });1169      testAnimationSampleMatrices(animation, idlName,1170        [ { time: 0,    expected: [  0, -1, 1, 0, 250,   0 ] },1171          { time: 1000, expected: [ -1, -1, 0, 0,  50, 100 ] }]);1172    }, `${property}: non-invertible matrices in matched transform lists`);1173    test(t => {1174      const idlName = propertyToIDL(property);1175      const target = createTestElement(t, setup);1176      target.style[idlName] = 'translateX(50px)';1177      const animation =                // matrix(-2, 0, 0, -2, 200, 0)1178        target.animate({ [idlName]: ['matrix(-1, 0, 0, -1, 200, 0) scale(2)',1179                                     // matrix(1, 1, 1, 1, 0, 100)1180                                     'matrix( 1, 1, 0,  0, 0, 100) skew(45deg)'] },1181                       { duration: 1000, fill: 'both', composite: 'add' });1182      testAnimationSampleMatrices(animation, idlName,1183        [ { time: 0,    expected: [ -2, 0, 0, -2, 250,   0 ] },1184          { time: 1000, expected: [  1, 1, 1,  1,  50, 100 ] }]);1185    }, `${property}: non-invertible matrices in mismatched transform lists`);1186  },1187  testAccumulation: function(property, setup) {1188    test(t => {1189      const idlName = propertyToIDL(property);1190      const target = createTestElement(t, setup);1191      target.style[idlName] = 'translateX(100px)';1192      const animation = target.animate({ [idlName]: ['translateX(-200px)',1193                                                   'translateX(500px)'] },1194                                     { duration: 1000, fill: 'both',1195                                       composite: 'accumulate' });1196      testAnimationSampleMatrices(animation, idlName,1197        [ { time: 0,    expected: [ 1, 0, 0, 1, -100, 0 ] },1198          { time: 1000, expected: [ 1, 0, 0, 1,  600, 0 ] }]);1199    }, `${property}: translate`);1200    test(t => {1201      const idlName = propertyToIDL(property);1202      const target = createTestElement(t, setup);1203      target.style[idlName] = 'rotate(45deg)';1204      const animation = target.animate({ [idlName]: ['rotate(-90deg)',1205                                                   'rotate(90deg)'] },1206                                     { duration: 1000, fill: 'both',1207                                       composite: 'accumulate' });1208      testAnimationSampleMatrices(animation, idlName,1209        [{ time: 0,    expected: [ Math.cos(-Math.PI / 4),1210                                   Math.sin(-Math.PI / 4),1211                                  -Math.sin(-Math.PI / 4),1212                                   Math.cos(-Math.PI / 4),1213                                   0, 0] },1214         { time: 1000, expected: [ Math.cos(Math.PI * 3 / 4),1215                                   Math.sin(Math.PI * 3 / 4),1216                                  -Math.sin(Math.PI * 3 / 4),1217                                   Math.cos(Math.PI * 3 / 4),1218                                   0, 0] }]);1219    }, `${property}: rotate`);1220    test(t => {1221      const idlName = propertyToIDL(property);1222      const target = createTestElement(t, setup);1223      target.style[idlName] = 'scale(2)';1224      const animation = target.animate({ [idlName]: ['scale(-3)', 'scale(5)'] },1225                                     { duration: 1000, fill: 'both',1226                                       composite: 'accumulate' });1227      testAnimationSampleMatrices(animation, idlName,1228                                  // scale((2 - 1) + (-3 - 1) + 1)1229        [{ time: 0,    expected: [ -2, 0, 0, -2, 0, 0 ] },1230                                  // scale((2 - 1) + (5 - 1) + 1)1231         { time: 1000, expected: [  6, 0, 0,  6, 0, 0 ] }]);1232    }, `${property}: scale`);1233    test(t => {1234      const idlName = propertyToIDL(property);1235      const target = createTestElement(t, setup);1236                              // matrix(1, tan(10deg), tan(10deg), 1)1237      target.style[idlName] = 'skew(10deg, 10deg)';1238      const animation =                // matrix(1, tan(20deg), tan(-30deg), 1)1239        target.animate({ [idlName]: ['skew(-30deg, 20deg)',1240                                     // matrix(1, tan(-30deg), tan(20deg), 1)1241                                     'skew(20deg, -30deg)'] },1242                       { duration: 1000, fill: 'both', composite: 'accumulate' });1243      testAnimationSampleMatrices(animation, idlName,1244        [{ time: 0,    expected: [ 1, Math.tan(Math.PI/6),1245                                   Math.tan(-Math.PI/9), 1,1246                                   0, 0] },1247         { time: 1000, expected: [ 1, Math.tan(-Math.PI/9),1248                                   Math.tan(Math.PI/6), 1,1249                                   0, 0] }]);1250    }, `${property}: skew`);1251    test(t => {1252      const idlName = propertyToIDL(property);1253      const target = createTestElement(t, setup);1254                               // matrix(1, 0, 0, 1, 100, 0)1255      target.style[idlName] = 'translateX(100px)';1256      const animation =                // matrix(0, 1, -1, 0, 0, 0)1257        target.animate({ [idlName]: ['rotate(90deg)',1258                                     // matrix(-1, 0, 0, -1, 0, 0)1259                                     'rotate(180deg)'] },1260                       { duration: 1000, fill: 'both', composite: 'accumulate' });1261      testAnimationSampleMatrices(animation, idlName,1262        [{ time: 0,    expected: [  0, 1, -1,  0, 100, 0 ] },1263         { time: 1000, expected: [ -1, 0,  0, -1, 100, 0 ] }]);1264    }, `${property}: rotate on translate`);1265    test(t => {1266      const idlName = propertyToIDL(property);1267      const target = createTestElement(t, setup);1268                               // matrix(0, 1, -1, 0, 0, 0)1269      target.style[idlName] = 'rotate(90deg)';1270      const animation =                // matrix(1, 0, 0, 1, 100, 0)1271        target.animate({ [idlName]: ['translateX(100px)',1272                                     // matrix(1, 0, 0, 1, 200, 0)1273                                     'translateX(200px)'] },1274                       { duration: 1000, fill: 'both', composite: 'accumulate' });1275      testAnimationSampleMatrices(animation, idlName,1276        [{ time: 0,    expected: [ 0, 1, -1, 0, 100, 0 ] },1277         { time: 1000, expected: [ 0, 1, -1, 0, 200, 0 ] }]);1278    }, `${property}: translate on rotate`);1279    test(t => {1280      const idlName = propertyToIDL(property);1281      const target = createTestElement(t, setup);1282      target.style[idlName] = 'rotate(45deg)';1283      const animation =1284        target.animate({ [idlName]: ['rotate(45deg) translateX(0px)',1285                                     'rotate(45deg) translateX(100px)'] },1286                       { duration: 1000, fill: 'both', composite: 'accumulate' });1287      testAnimationSampleMatrices(animation, idlName,1288        [{ time: 0,    expected: [ Math.cos(Math.PI / 2),1289                                   Math.sin(Math.PI / 2),1290                                  -Math.sin(Math.PI / 2),1291                                   Math.cos(Math.PI / 2),1292                                   0 * Math.cos(Math.PI / 2),1293                                   0 * Math.sin(Math.PI / 2) ] },1294         { time: 1000, expected: [ Math.cos(Math.PI / 2),1295                                   Math.sin(Math.PI / 2),1296                                  -Math.sin(Math.PI / 2),1297                                   Math.cos(Math.PI / 2),1298                                   100 * Math.cos(Math.PI / 2),1299                                   100 * Math.sin(Math.PI / 2) ] }]);1300    }, `${property}: rotate and translate on rotate`);1301    test(t => {1302      const idlName = propertyToIDL(property);1303      const target = createTestElement(t, setup);1304      target.style[idlName] = 'rotate(45deg) translateX(100px)';1305      const animation =1306        target.animate({ [idlName]: ['rotate(45deg)', 'rotate(45deg)'] },1307                       { duration: 1000, fill: 'both', composite: 'accumulate' });1308      testAnimationSampleMatrices(animation, idlName,1309        [{ time: 0,    expected: [ Math.cos(Math.PI / 2),1310                                   Math.sin(Math.PI / 2),1311                                  -Math.sin(Math.PI / 2),1312                                   Math.cos(Math.PI / 2),1313                                   100 * Math.cos(Math.PI / 2),1314                                   100 * Math.sin(Math.PI / 2) ] },1315         { time: 1000, expected: [ Math.cos(Math.PI / 2),1316                                   Math.sin(Math.PI / 2),1317                                  -Math.sin(Math.PI / 2),1318                                   Math.cos(Math.PI / 2),1319                                   100 * Math.cos(Math.PI / 2),1320                                   100 * Math.sin(Math.PI / 2) ] }]);1321    }, `${property}: rotate on rotate and translate`);1322    test(t => {1323      const idlName = propertyToIDL(property);1324      const target = createTestElement(t, setup);1325      target.style[idlName] = 'matrix(0, 1, -1, 0, 0, 0)';1326      const animation =                 // Same matrices as above.1327        target.animate({ [idlName]: [ 'matrix(1, 0, 0, 1, 100, 0)',1328                                      'matrix(1, 0, 0, 1, 200, 0)' ] },1329                       { duration: 1000, fill: 'both', composite: 'accumulate' });1330      testAnimationSampleMatrices(animation, idlName,1331        [{ time: 0,    expected: [ 0, 1, -1, 0, 100, 0 ] },1332         { time: 1000, expected: [ 0, 1, -1, 0, 200, 0 ] }]);1333    }, `${property}: matrix`);1334    test(t => {1335      const idlName = propertyToIDL(property);1336      const target = createTestElement(t, setup);1337      target.style[idlName] = 'rotate3d(1, 1, 0, 45deg)';1338      const animation =1339        target.animate({ [idlName]: [ 'rotate3d(1, 1, 0, -90deg)',1340                                      'rotate3d(1, 1, 0, 90deg)'] },1341                       { duration: 1000, fill: 'both', composite: 'accumulate' });1342      testAnimationSampleMatrices(animation, idlName,1343        [{ time: 0,    expected: rotate3dToMatrix(1, 1, 0,    -Math.PI / 4) },1344         { time: 1000, expected: rotate3dToMatrix(1, 1, 0, 3 * Math.PI / 4) }]);1345    }, `${property}: rotate3d`);1346    test(t => {1347      const idlName = propertyToIDL(property);1348      const target = createTestElement(t, setup);1349      // To calculate expected matrices easily, generate input matrices from1350      // rotate3d.1351      target.style[idlName] = rotate3dToMatrix3d(1, 1, 0, Math.PI / 4);1352      const from = rotate3dToMatrix3d(1, 1, 0, -Math.PI / 2);1353      const to = rotate3dToMatrix3d(1, 1, 0, Math.PI / 2);1354      const animation =1355        target.animate({ [idlName]: [ from, to ] },1356                       { duration: 1000, fill: 'both', composite: 'accumulate' });1357      testAnimationSampleMatrices(animation, idlName,1358        [{ time: 0,    expected: rotate3dToMatrix(1, 1, 0,    -Math.PI / 4) },1359         { time: 1000, expected: rotate3dToMatrix(1, 1, 0, 3 * Math.PI / 4) }]);1360    }, `${property}: matrix3d`);1361    test(t => {1362      const idlName = propertyToIDL(property);1363      const target = createTestElement(t, setup);1364      const matrixArray = [ 1, 0, 0, 0,1365                          0, 1, 0, 0,1366                          0, 0, 1, 0,1367                          0, 0, 1, 1 ];1368      target.style[idlName] = createMatrixFromArray(matrixArray);1369      const animation =1370        target.animate({ [idlName]: [ 'none', 'none' ] },1371                       { duration: 1000, fill: 'both', composite: 'accumulate' });1372      testAnimationSampleMatrices(animation, idlName,1373        [{ time: 0,    expected: matrixArray },1374         { time: 1000, expected: matrixArray }]);1375    }, `${property}: none`);1376    // Following tests aim for test the fallback discrete accumulation behavior1377    // for non-invertible matrices. The non-invertible matrix that we use is the1378    // singular matrix, matrix(1, 1, 0, 0, 0, 100).1379    test(t => {1380      const idlName = propertyToIDL(property);1381      const target = createTestElement(t, setup);1382      target.animate({ [idlName]: ['matrix(-1, 0, 0, -1, 200, 0)',1383                                   'matrix(-1, 0, 0, -1, 200, 0)'] }, 1000);1384      const animation = target.animate(1385        {1386          [idlName]: [1387            'matrix( 1, 1, 0, 0, 0, 100)',1388            'matrix( 1, 1, 0, 0, 0, 100)',1389          ],1390        },1391        { duration: 1000, composite: 'accumulate' }1392      );1393      testAnimationSampleMatrices(animation, idlName, [1394        { time: 0, expected: [1, 1, 0, 0, 0, 100] },1395      ]);1396    }, `${property}: non-invertible matrices (non-invertible onto invertible)`);1397    test(t => {1398      const idlName = propertyToIDL(property);1399      const target = createTestElement(t, setup);1400      target.animate({ [idlName]: ['matrix( 1, 1, 0, 0, 0, 100)',1401                                   'matrix( 1, 1, 0, 0, 0, 100)'] }, 1000);1402      const animation = target.animate(1403        {1404          [idlName]: [1405            'matrix(-1, 0, 0, -1, 200, 0)',1406            'matrix(-1, 0, 0, -1, 200, 0)',1407          ],1408        },1409        { duration: 1000, composite: 'accumulate' }1410      );1411      testAnimationSampleMatrices(animation, idlName, [1412        { time: 0, expected: [-1, 0, 0, -1, 200, 0] },1413      ]);1414    }, `${property}: non-invertible matrices (invertible onto non-invertible)`);1415    test(t => {1416      const idlName = propertyToIDL(property);1417      const target = createTestElement(t, setup);1418      // matrix(0, -1, 1, 0, 250, 0)1419      target.animate(1420        {1421          [idlName]: [1422            'translate(50px)  matrix(-1, 0, 0, -1, 200, 0) rotate(90deg)',1423            'translate(50px)  matrix(-1, 0, 0, -1, 200, 0) rotate(90deg)',1424          ],1425        },1426        10001427      );1428      // matrix(-1, -1, 0, 0, 100, 100)1429      const animation = target.animate(1430        {1431          [idlName]: [1432            'translate(100px) matrix( 1, 1, 0, 0, 0, 100) rotate(180deg)',1433            'translate(100px) matrix( 1, 1, 0, 0, 0, 100) rotate(180deg)',1434          ],1435        },1436        { duration: 1000, composite: 'accumulate' }1437      );1438      testAnimationSampleMatrices(animation, idlName, [1439        { time: 0, expected: [-1, -1, 0, 0, 100, 100] },1440      ]);1441    }, `${property}: non-invertible matrices in matched transform lists (non-invertible onto invertible)`);1442    test(t => {1443      const idlName = propertyToIDL(property);1444      const target = createTestElement(t, setup);1445      // matrix(-1, -1, 0, 0, 100, 100)1446      target.animate(1447        {1448          [idlName]: [1449            'translate(100px) matrix(1, 1, 0, 0, 0, 100) rotate(180deg)',1450            'translate(100px) matrix(1, 1, 0, 0, 0, 100) rotate(180deg)',1451          ],1452        },1453        10001454      );1455      // matrix(0, -1, 1, 0, 250, 0)1456      const animation = target.animate(1457        {1458          [idlName]: [1459            'translate(50px)  matrix(-1, 0, 0, -1, 200, 0) rotate(90deg)',1460            'translate(50px)  matrix(-1, 0, 0, -1, 200, 0) rotate(90deg)',1461          ],1462        },1463        { duration: 1000, composite: 'accumulate' }1464      );1465      testAnimationSampleMatrices(animation, idlName, [1466        { time: 0, expected: [0, -1, 1, 0, 250, 0] },1467      ]);1468    }, `${property}: non-invertible matrices in matched transform lists (invertible onto non-invertible)`);1469    test(t => {1470      const idlName = propertyToIDL(property);1471      const target = createTestElement(t, setup);1472      // matrix(-2, 0, 0, -2, 250, 0)1473      target.animate(1474        {1475          [idlName]: [1476            'translate(50px)  matrix(-1, 0, 0, -1, 200, 0) scale(2)',1477            'translate(50px)  matrix(-1, 0, 0, -1, 200, 0) scale(2)',1478          ],1479        },1480        10001481      );1482      // matrix(1, 1, 1, 1, 100, 100)1483      const animation = target.animate(1484        {1485          [idlName]: [1486            'translate(100px) matrix(1, 1, 0, 0, 0, 100) skew(45deg)',1487            'translate(100px) matrix(1, 1, 0, 0, 0, 100) skew(45deg)',1488          ],1489        },1490        { duration: 1000, composite: 'accumulate' }1491      );1492      testAnimationSampleMatrices(animation, idlName, [1493        { time: 0, expected: [1, 1, 1, 1, 100, 100] },1494      ]);1495    }, `${property}: non-invertible matrices in mismatched transform lists`1496       + ' (non-invertible onto invertible)');1497    test(t => {1498      const idlName = propertyToIDL(property);1499      const target = createTestElement(t, setup);1500      // matrix(1, 1, 1, 1, 100, 100)1501      target.animate(1502        {1503          [idlName]: [1504            'translate(100px) matrix(1, 1, 0, 0, 0, 100) skew(45deg)',1505            'translate(100px) matrix(1, 1, 0, 0, 0, 100) skew(45deg)',1506          ],1507        },1508        10001509      );1510      // matrix(-2, 0, 0, -2, 250, 0)1511      const animation = target.animate(1512        {1513          [idlName]: [1514            'translate(50px)  matrix(-1, 0, 0, -1, 200, 0) scale(2)',1515            'translate(50px)  matrix(-1, 0, 0, -1, 200, 0) scale(2)',1516          ],1517        },1518        { duration: 1000, composite: 'accumulate' }1519      );1520      testAnimationSampleMatrices(animation, idlName, [1521        { time: 0, expected: [-2, 0, 0, -2, 250, 0] },1522      ]);1523    }, `${property}: non-invertible matrices in mismatched transform lists`1524       + ' (invertible onto non-invertible)');1525  },1526};1527const rotateListType = {1528  testInterpolation: (property, setup) => {1529    test(t => {1530      const idlName = propertyToIDL(property);1531      const target = createTestElement(t, setup);1532      const animation = target.animate(1533        {1534          [idlName]: ['45deg', '135deg'],1535        },1536        10001537      );1538      testAnimationSamples(animation, idlName,1539        [{ time: 500,  expected: '90deg' }]);1540    }, `${property} without rotation axes`);1541    test(t => {1542      const idlName = propertyToIDL(property);1543      const target = createTestElement(t, setup);1544      const animation =1545        target.animate({ [idlName]: [ '0 1 0 0deg',1546                                      '0 1 0 90deg'] },1547                       1000);1548      testAnimationSamples(animation, idlName,1549        [{ time: 500, expected: 'y 45deg' }]);1550    }, `${property} with rotation axes`);1551    test(t => {1552      const idlName = propertyToIDL(property);1553      const target = createTestElement(t, setup);1554      const animation =1555        target.animate({ [idlName]: [ '0 1 0 0deg',1556                                      '0 1 0 720deg'] },1557                       1000);1558      testAnimationSamples(animation, idlName,1559        [{ time: 250, expected: 'y 180deg' }]);1560    }, `${property} with rotation axes and range over 360 degrees`);1561    test(t => {1562      const idlName = propertyToIDL(property);1563      const target = createTestElement(t, setup);1564      const animation =1565        target.animate({ [idlName]: [ '0 1 0 0deg',1566                                      '0 1 1 90deg'] },1567                       1000);1568      testAnimationSampleRotate3d(animation, idlName,1569        [{ time: 500, expected: '0 0.707107 0.707107 45deg' }]);1570    }, `${property} with different rotation axes`);1571  },1572  testAddition: function(property, setup) {1573    test(t => {1574      const idlName = propertyToIDL(property);1575      const target = createTestElement(t, setup);1576      target.style[idlName] = '45deg';1577      const animation = target.animate({ [idlName]: ['-90deg', '90deg'] },1578                                       { duration: 1000, fill: 'both',1579                                         composite: 'add' });1580      testAnimationSamples(animation, idlName,1581        [{ time: 0,    expected: '-45deg' },1582         { time: 1000, expected: '135deg' }]);1583    }, `${property} without rotation axes`);1584    test(t => {1585      const idlName = propertyToIDL(property);1586      const target = createTestElement(t, setup);1587      // Rotation specified in transform property should not affect the computed1588      // value of |property|.1589      target.style.transform = 'rotate(20deg)';1590      target.style[idlName] = 'y -45deg';1591      const animation =1592        target.animate({ [idlName]: ['0 1 0 90deg',1593                                     '0 1 0 180deg'] },1594                       { duration: 1000, fill: 'both', composite: 'add' });1595      testAnimationSamples(animation, idlName,1596        [{ time: 0,    expected: 'y 45deg' },1597         { time: 1000, expected: 'y 135deg' }]);1598    }, `${property} with underlying transform`);1599    test(t => {1600      const idlName = propertyToIDL(property);1601      const target = createTestElement(t, setup);1602      const animation =1603        target.animate({ [idlName]: [ '0 1 0 0deg',1604                                      '1 1 1 270deg'] },1605                       { duration: 1000, fill: 'both', composite: 'add' });1606      testAnimationSampleRotate3d(animation, idlName,1607        [{ time: 500, expected: '0.57735 0.57735 0.57735 135deg' }]);1608    }, `${property} with different rotation axes`);1609  },1610  testAccumulation: function(property, setup) {1611    test(t => {1612      const idlName = propertyToIDL(property);1613      const target = createTestElement(t, setup);1614      target.style[idlName] = '45deg';1615      const animation = target.animate({ [idlName]: ['-90deg', '90deg'] },1616                                     { duration: 1000, fill: 'both',1617                                       composite: 'accumulate' });1618      testAnimationSamples(animation, idlName,1619        [{ time: 0,    expected: '-45deg' },1620         { time: 1000, expected: '135deg' }]);1621    }, `${property} without rotation axes`);1622    test(t => {1623      const idlName = propertyToIDL(property);1624      const target = createTestElement(t, setup);1625      target.style.transform = 'translateX(100px)';1626      target.style[idlName] = '1 0 0 -45deg';1627      const animation =1628        target.animate({ [idlName]: ['1 0 0 90deg',1629                                     '1 0 0 180deg'] },1630                       { duration: 1000, fill: 'both', composite: 'accumulate' });1631      testAnimationSamples(animation, idlName,1632        [{ time: 0,    expected: 'x 45deg' },1633         { time: 1000, expected: 'x 135deg' }]);1634    }, `${property} with underlying transform`);1635    test(t => {1636      const idlName = propertyToIDL(property);1637      const target = createTestElement(t, setup);1638      const animation =1639        target.animate({ [idlName]: [ '0 1 0 0deg',1640                                      '1 0 1 180deg'] },1641                       { duration: 1000, fill: 'both', composite: 'accumulate' });1642      testAnimationSampleRotate3d(animation, idlName,1643        [{ time: 500, expected: '0.707107 0 0.707107 90deg' }]);1644    }, `${property} with different rotation axes`);1645  },1646};1647const translateListType = {1648  testInterpolation: (property, setup) => {1649    test(t => {1650      const idlName = propertyToIDL(property);1651      const target = createTestElement(t, setup);1652      const animation = target.animate(1653        {1654          [idlName]: ['200px', '400px'],1655        },1656        10001657      );1658      testAnimationSamples(animation, idlName,1659        [{ time: 500,  expected: '300px' }]);1660    }, `${property} with two unspecified values`);1661    test(t => {1662      const idlName = propertyToIDL(property);1663      const target = createTestElement(t, setup);1664      const animation = target.animate(1665        {1666          [idlName]: ['200px -200px', '400px 400px'],1667        },1668        10001669      );1670      testAnimationSamples(animation, idlName,1671        [{ time: 500,  expected: '300px 100px' }]);1672    }, `${property} with one unspecified value`);1673    test(t => {1674      const idlName = propertyToIDL(property);1675      const target = createTestElement(t, setup);1676      const animation = target.animate(1677        {1678          [idlName]: ['200px -200px 600px', '400px 400px -200px'],1679        },1680        10001681      );1682      testAnimationSamples(animation, idlName,1683        [{ time: 500,  expected: '300px 100px 200px' }]);1684    }, `${property} with all three values specified`);1685    test(t => {1686      const idlName = propertyToIDL(property);1687      const target = createTestElement(t, setup);1688      const animation = target.animate(1689        {1690          [idlName]: ['0% -101px 600px', '400px 50% -200px'],1691        },1692        10001693      );1694      testAnimationSamples(animation, idlName,1695        [{ time: 500,  expected: 'calc(0% + 200px) calc(25% - 50.5px) 200px' }]);1696    }, `${property} with combination of percentages and lengths`);1697  },1698  testAddition: function(property, setup) {1699    test(t => {1700      const idlName = propertyToIDL(property);1701      const target = createTestElement(t, setup);1702      target.style[idlName] = '100px';1703      const animation = target.animate({ [idlName]: ['-200px', '500px'] },1704                                       { duration: 1000, fill: 'both',1705                                         composite: 'add' });1706      testAnimationSamples(animation, idlName,1707        [ { time: 0,    expected: '-100px' },1708          { time: 1000, expected: '600px' }]);1709    }, `${property}`);1710    test(t => {1711      const idlName = propertyToIDL(property);1712      const target = createTestElement(t, setup);1713      target.transform = 'translateY(100px)';1714      target.style[idlName] = '100px';1715      const animation = target.animate({ [idlName]: ['-200px', '500px'] },1716                                       { duration: 1000, fill: 'both',1717                                         composite: 'add' });1718      testAnimationSamples(animation, idlName,1719        [ { time: 0,    expected: '-100px' },1720          { time: 1000, expected: '600px' }]);1721    }, `${property} with underlying transform`);1722    test(t => {1723      const idlName = propertyToIDL(property);1724      const target = createTestElement(t, setup);1725      target.style[idlName] = '50%';1726      const animation = target.animate({ [idlName]: ['-200px', '500px'] },1727                                       { duration: 1000, fill: 'both',1728                                         composite: 'add' });1729      testAnimationSamples(animation, idlName,1730        [ { time: 0,    expected: 'calc(50% - 200px)' },1731          { time: 1000, expected: 'calc(50% + 500px)' }]);1732    }, `${property} with underlying percentage value`);1733  },1734  testAccumulation: function(property, setup) {1735    test(t => {1736      const idlName = propertyToIDL(property);1737      const target = createTestElement(t, setup);1738      target.style[idlName] = '100px';1739      const animation = target.animate({ [idlName]: ['-200px', '500px'] },1740                                     { duration: 1000, fill: 'both',1741                                       composite: 'accumulate' });1742      testAnimationSamples(animation, idlName,1743        [ { time: 0,    expected: '-100px' },1744          { time: 1000, expected: '600px' }]);1745    }, `${property}`);1746    test(t => {1747      const idlName = propertyToIDL(property);1748      const target = createTestElement(t, setup);1749      target.transform = 'translateY(100px)';1750      target.style[idlName] = '100px';1751      const animation = target.animate({ [idlName]: ['-200px', '500px'] },1752                                     { duration: 1000, fill: 'both',1753                                       composite: 'accumulate' });1754      testAnimationSamples(animation, idlName,1755        [ { time: 0,    expected: '-100px' },1756          { time: 1000, expected: '600px' }]);1757    }, `${property} with transform`);1758  },1759};1760const scaleListType = {1761  testInterpolation: (property, setup) => {1762    test(t => {1763      const idlName = propertyToIDL(property);1764      const target = createTestElement(t, setup);1765      const animation = target.animate({ [idlName]: ['3', '5'] },1766                                       1000);1767      testAnimationSamples(animation, idlName,1768        [{ time: 500,  expected: '4' }]);1769    }, `${property} with two unspecified values`);1770    test(t => {1771      const idlName = propertyToIDL(property);1772      const target = createTestElement(t, setup);1773      const animation = target.animate({ [idlName]: ['3 3', '5 5'] },1774                                       1000);1775      testAnimationSamples(animation, idlName,1776        [{ time: 500,  expected: '4' }]);1777    }, `${property} with one unspecified value`);1778    test(t => {1779      const idlName = propertyToIDL(property);1780      const target = createTestElement(t, setup);1781      const animation = target.animate({ [idlName]: ['3 3 3', '5 5 5'] },1782                                       1000);1783      testAnimationSamples(animation, idlName,1784        [{ time: 500,  expected: '4 4 4' }]);1785    }, `${property}`);1786  },1787  testAddition: function(property, setup) {1788    test(t => {1789      const idlName = propertyToIDL(property);1790      const target = createTestElement(t, setup);1791      target.style[idlName] = '2';1792      const animation = target.animate({ [idlName]: ['-3', '5'] },1793                                       { duration: 1000, fill: 'both',1794                                         composite: 'add' });1795      testAnimationSamples(animation, idlName,1796        [{ time: 0,    expected: '-6' },1797         { time: 1000, expected: '10' }]);1798    }, `${property} with two unspecified values`);1799    test(t => {1800      const idlName = propertyToIDL(property);1801      const target = createTestElement(t, setup);1802      target.style[idlName] = '2 2';1803      const animation = target.animate({ [idlName]: ['-3 -3', '5 5'] },1804                                       { duration: 1000, fill: 'both',1805                                         composite: 'add' });1806      testAnimationSamples(animation, idlName,1807        [{ time: 0,    expected: '-6' },1808         { time: 1000, expected: '10' }]);1809    }, `${property} with one unspecified value`);1810    test(t => {1811      const idlName = propertyToIDL(property);1812      const target = createTestElement(t, setup);1813      target.style[idlName] = '2 2 2';1814      const animation = target.animate({ [idlName]: ['-1 -2 -3', '4 5 6'] },1815                                       { duration: 1000, fill: 'both',1816                                         composite: 'add' });1817      testAnimationSamples(animation, idlName,1818        [{ time: 0,    expected: '-2 -4 -6' },1819         { time: 1000, expected: '8 10 12' }]);1820    }, `${property}`);1821  },1822  testAccumulation: function(property, setup) {1823    test(t => {1824      const idlName = propertyToIDL(property);1825      const target = createTestElement(t, setup);1826      target.style[idlName] = '2';1827      const animation = target.animate({ [idlName]: ['-3', '5'] },1828                                     { duration: 1000, fill: 'both',1829                                       composite: 'accumulate' });1830      testAnimationSamples(animation, idlName,1831        [{ time: 0,    expected: '-2' },1832         { time: 1000, expected: '6' }]);1833    }, `${property} with two unspecified values`);1834    test(t => {1835      const idlName = propertyToIDL(property);1836      const target = createTestElement(t, setup);1837      target.style[idlName] = '2 2';1838      const animation = target.animate({ [idlName]: ['-3 -3', '5 5'] },1839                                     { duration: 1000, fill: 'both',1840                                       composite: 'accumulate' });1841      testAnimationSamples(animation, idlName,1842        [{ time: 0,    expected: '-2' },1843         { time: 1000, expected: '6' }]);1844    }, `${property} with one unspecified value`);1845    test(t => {1846      const idlName = propertyToIDL(property);1847      const target = createTestElement(t, setup);1848      target.style[idlName] = '2 2 2';1849      const animation = target.animate({ [idlName]: ['-1 -2 -3', '4 5 6'] },1850                                     { duration: 1000, fill: 'both',1851                                       composite: 'accumulate' });1852      testAnimationSamples(animation, idlName,1853        [{ time: 0,    expected: '0 -1 -2' },1854         { time: 1000, expected: '5 6 7' }]);1855    }, `${property}`);1856  },1857};1858const filterListType = {1859  testInterpolation: (property, setup) => {1860    test(t => {1861      const idlName = propertyToIDL(property);1862      const target = createTestElement(t, setup);1863      const animation = target.animate({ [idlName]:1864                                         ['blur(10px)', 'blur(50px)'] },1865                                        1000);1866      testAnimationSamples(animation, idlName,1867        [{ time: 500,    expected: 'blur(30px)' }]);1868    }, `${property}: blur function`);1869    test(t => {1870      const idlName = propertyToIDL(property);1871      const target = createTestElement(t, setup);1872      const animation = target.animate({ [idlName]: ['hue-rotate(0deg)',1873                                                     'hue-rotate(100deg)'] },1874                                       1000);1875      testAnimationSamples(animation, idlName,1876        [{ time: 500,    expected: 'hue-rotate(50deg)' }]);1877    }, `${property}: hue-rotate function with same unit(deg)`);1878    test(t => {1879      const idlName = propertyToIDL(property);1880      const target = createTestElement(t, setup);1881      const animation = target.animate({ [idlName]: ['hue-rotate(10deg)',1882                                                     'hue-rotate(100rad)'] },1883                                       1000);1884      // 10deg = 0.1745rad.1885      testAnimationSamples(animation, idlName,1886        [{ time: 500,    expected: 'hue-rotate(2869.79deg)' }]);1887    }, `${property}: hue-rotate function with different unit(deg -> rad)`);1888    test(t => {1889      const idlName = propertyToIDL(property);1890      const target = createTestElement(t, setup);1891      const animation = target.animate(1892        { [idlName]:1893          ['drop-shadow(10px 10px 10px rgba(255, 0, 0, 0.4))',1894           'drop-shadow(50px 50px 50px rgba(0, 0, 255, 0.8))'] },1895        1000);1896      testAnimationSamples(1897        animation, idlName,1898        [{ time: 500,1899            expected: 'drop-shadow(rgba(85, 0, 170, 0.6) 30px 30px 30px)' }]);1900    }, `${property}: drop-shadow function`);1901    test(t => {1902      const idlName = propertyToIDL(property);1903      const target = createTestElement(t, setup);1904      const animation = target.animate(1905        { [idlName]:1906          ['brightness(0.1) contrast(0.1) grayscale(0.1) invert(0.1) ' +1907           'opacity(0.1) saturate(0.1) sepia(0.1)',1908           'brightness(0.5) contrast(0.5) grayscale(0.5) invert(0.5) ' +1909           'opacity(0.5) saturate(0.5) sepia(0.5)'] },1910        1000);1911      testAnimationSamples(animation, idlName,1912        [{ time: 500,1913           expected: 'brightness(0.3) contrast(0.3) grayscale(0.3) ' +1914           'invert(0.3) opacity(0.3) saturate(0.3) sepia(0.3)' }]);1915    }, `${property}: percentage or numeric-specifiable functions`1916       + ' (number value)');1917    test(t => {1918      const idlName = propertyToIDL(property);1919      const target = createTestElement(t, setup);1920      const animation = target.animate(1921        { [idlName]:1922          ['brightness(10%) contrast(10%) grayscale(10%) invert(10%) ' +1923           'opacity(10%) saturate(10%) sepia(10%)',1924           'brightness(50%) contrast(50%) grayscale(50%) invert(50%) ' +1925           'opacity(50%) saturate(50%) sepia(50%)'] },1926        1000);1927      testAnimationSamples(animation, idlName,1928        [{ time: 500,1929           expected: 'brightness(0.3) contrast(0.3) grayscale(0.3) ' +1930           'invert(0.3) opacity(0.3) saturate(0.3) sepia(0.3)' }]);1931    }, `${property}: percentage or numeric-specifiable functions`1932       + ' (percentage value)');1933    test(t => {1934      const idlName = propertyToIDL(property);1935      const target = createTestElement(t, setup);1936      const animation = target.animate(1937        { [idlName]:1938          // To make missing filter-function-lists, specified the grayscale.1939          ['grayscale(0)',1940           'grayscale(1) brightness(0) contrast(0) opacity(0) saturate(0)' ]},1941        1000);1942      testAnimationSamples(animation, idlName,1943        [{ time: 500,1944           expected: 'grayscale(0.5) brightness(0.5) contrast(0.5) ' +1945                     'opacity(0.5) saturate(0.5)' }]);1946    }, `${property}: interpolate different length of filter-function-list`1947       + ' with function which lacuna value is 1');1948    test(t => {1949      const idlName = propertyToIDL(property);1950      const target = createTestElement(t, setup);1951      const animation = target.animate(1952        { [idlName]:1953          // To make missing filter-function-lists, specified the opacity.1954          ['opacity(1)',1955           'opacity(0) grayscale(1) invert(1) sepia(1) blur(10px)'] },1956        1000);1957      testAnimationSamples(animation, idlName,1958        [{ time: 500,1959           expected:1960           'opacity(0.5) grayscale(0.5) invert(0.5) sepia(0.5) blur(5px)' }]);1961    }, `${property}: interpolate different length of filter-function-list`1962       + ' with function which lacuna value is 0');1963    test(t => {1964      const idlName = propertyToIDL(property);1965      const target = createTestElement(t, setup);1966      const animation = target.animate(1967        { [idlName]:1968          ['blur(0px)',1969           'blur(10px) drop-shadow(10px 10px 10px rgba(0, 0, 255, 0.8))'] },1970        1000);1971      testAnimationSamples(animation, idlName,1972        [{ time: 500,1973           // Per the spec: The initial value for interpolation is all length values1974           // set to 0 and the used color set to transparent.1975           expected: 'blur(5px) drop-shadow(rgba(0, 0, 255, 0.4) 5px 5px 5px)' }]);1976    }, `${property}: interpolate different length of filter-function-list`1977       + ' with drop-shadow function');1978    test(t => {1979      const idlName = propertyToIDL(property);1980      const target = createTestElement(t, setup);1981      const animation = target.animate({ [idlName]: ['none', 'blur(10px)'] },1982                                     1000);1983      testAnimationSamples(animation, idlName,1984        [{ time: 500, expected: 'blur(5px)' }]);1985    }, `${property}: interpolate from none`);1986    test(t => {1987      const idlName = propertyToIDL(property);1988      const target = createTestElement(t, setup);1989      const animation = target.animate(1990        { [idlName]:1991          ['blur(0px) url(\"#f1\")',1992           'blur(10px) url(\"#f2\")']},1993        1000);1994      testAnimationSamples(animation, idlName,1995        [{ time: 499, expected: 'blur(0px) url(\"#f1\")' },1996         { time: 500, expected: 'blur(10px) url(\"#f2\")' }]);1997    }, `${property}: url function (interpoalte as discrete)`);1998  },1999  testAddition: function(property, setup) {2000    test(t => {2001      const idlName = propertyToIDL(property);2002      const target = createTestElement(t, setup);2003      target.style[idlName] = 'blur(10px)';2004      const animation = target.animate({ [idlName]: ['blur(20px)',2005                                                     'blur(50px)'] },2006                                       { duration: 1000, composite: 'add' });2007      testAnimationSamples(animation, idlName,2008        [ { time: 0,    expected: 'blur(10px) blur(20px)' }]);2009    }, `${property}: blur on blur`);2010    test(t => {2011      const idlName = propertyToIDL(property);2012      const target = createTestElement(t, setup);2013      target.style[idlName] = 'blur(10px)';2014      const animation = target.animate({ [idlName]: ['brightness(80%)',2015                                                     'brightness(40%)'] },2016                                       { duration: 1000, composite: 'add' });2017      testAnimationSamples(animation, idlName,2018        [ { time: 0,    expected: 'blur(10px) brightness(0.8)' }]);2019    }, `${property}: different filter functions`);2020  },2021  testAccumulation: function(property, setup) {2022    test(t => {2023      const idlName = propertyToIDL(property);2024      const target = createTestElement(t, setup);2025      target.style[idlName] = 'blur(10px) brightness(0.3)';2026      const animation = target.animate(2027        {2028          [idlName]: [2029            'blur(20px) brightness(0.1)',2030            'blur(20px) brightness(0.1)',2031          ],2032        },2033        { duration: 1000, composite: 'accumulate' }2034      );2035      // brightness(0.1) onto brightness(0.3) means2036      // brightness((0.1 - 1.0) + (0.3 - 1.0) + 1.0). The result of this formula2037      // is brightness(-0.6) that means brightness(0.0).2038      testAnimationSamples(animation, idlName,2039        [ { time: 0,    expected: 'blur(30px) brightness(0)' }]);2040    }, `${property}: same ordered filter functions`);2041    test(t => {2042      const idlName = propertyToIDL(property);2043      const target = createTestElement(t, setup);2044      target.style[idlName] = 'blur(10px) brightness(1.3)';2045      const animation = target.animate(2046        {2047          [idlName]: [2048            'brightness(1.2) blur(20px)',2049            'brightness(1.2) blur(20px)',2050          ],2051        },2052        { duration: 1000, composite: 'accumulate' }2053      );2054      // Mismatched ordered functions can't be accumulated.2055      testAnimationSamples(animation, idlName,2056        [ { time: 0,    expected: 'brightness(1.2) blur(20px)' }]);2057    }, `${property}: mismatched ordered filter functions`);2058  },2059};2060const textShadowListType = {2061  testInterpolation: (property, setup) => {2062    test(t => {2063      const idlName = propertyToIDL(property);2064      const target = createTestElement(t, setup);2065      const animation =2066        target.animate({ [idlName]: [ 'none',2067                                      'rgb(100, 100, 100) 10px 10px 10px'] },2068                       { duration: 1000, fill: 'both' });2069      testAnimationSamples(animation, idlName,2070                                  // Premultiplied2071        [{ time: 500,  expected: 'rgba(100, 100, 100, 0.5) 5px 5px 5px' }]);2072    }, `${property}: from none to other`);2073    test(t => {2074      const idlName = propertyToIDL(property);2075      const target = createTestElement(t, setup);2076      const animation =2077        target.animate({ [idlName]: [ 'rgb(100, 100, 100) 10px 10px 10px',2078                                      'none' ] },2079                       { duration: 1000, fill: 'both' });2080      testAnimationSamples(animation, idlName,2081                                  // Premultiplied2082        [{ time: 500,  expected: 'rgba(100, 100, 100, 0.5) 5px 5px 5px' }]);2083    }, `${property}: from other to none`);2084    test(t => {2085      const idlName = propertyToIDL(property);2086      const target = createTestElement(t, setup);2087      const animation =2088        target.animate({ [idlName]: [ 'rgb(0, 0, 0) 0px 0px 0px',2089                                      'rgb(100, 100, 100) 10px 10px 10px'] },2090                       { duration: 1000, fill: 'both' });2091      testAnimationSamples(animation, idlName,2092        [{ time: 500,  expected: 'rgb(50, 50, 50) 5px 5px 5px' }]);2093    }, `${property}: single shadow`);2094    test(t => {2095      const idlName = propertyToIDL(property);2096      const target = createTestElement(t, setup);2097      const animation =2098        target.animate({ [idlName]: [ 'rgb(0, 0, 0) 0px 0px 0px, '2099                                    + 'rgb(200, 200, 200) 20px 20px 20px',2100                                      'rgb(100, 100, 100) 10px 10px 10px, '2101                                    + 'rgb(100, 100, 100) 10px 10px 10px'] },2102                       { duration: 1000, fill: 'both' });2103      testAnimationSamples(animation, idlName,2104        [{ time: 500,  expected: 'rgb(50, 50, 50) 5px 5px 5px, '2105                               + 'rgb(150, 150, 150) 15px 15px 15px' }]);2106    }, `${property}: shadow list`);2107    test(t => {2108      const idlName = propertyToIDL(property);2109      const target = createTestElement(t, setup);2110      const animation =2111        target.animate({ [idlName]: [ 'rgb(200, 200, 200) 20px 20px 20px',2112                                      'rgb(100, 100, 100) 10px 10px 10px, '2113                                    + 'rgb(100, 100, 100) 10px 10px 10px'] },2114                       { duration: 1000, fill: 'both' });2115      testAnimationSamples(animation, idlName,2116        [{ time: 500,  expected: 'rgb(150, 150, 150) 15px 15px 15px, '2117                               + 'rgba(100, 100, 100, 0.5) 5px 5px 5px' }]);2118    }, `${property}: mismatched list length (from longer to shorter)`);2119    test(t => {2120      const idlName = propertyToIDL(property);2121      const target = createTestElement(t, setup);2122      const animation =2123        target.animate({ [idlName]: [ 'rgb(100, 100, 100) 10px 10px 10px, '2124                                    + 'rgb(100, 100, 100) 10px 10px 10px',2125                                      'rgb(200, 200, 200) 20px 20px 20px'] },2126                       { duration: 1000, fill: 'both' });2127      testAnimationSamples(animation, idlName,2128        [{ time: 500,  expected: 'rgb(150, 150, 150) 15px 15px 15px, '2129                               + 'rgba(100, 100, 100, 0.5) 5px 5px 5px' }]);2130    }, `${property}: mismatched list length (from shorter to longer)`);2131    test(t => {2132      const idlName = propertyToIDL(property);2133      const target = createTestElement(t, setup);2134      target.style.color = 'rgb(0, 255, 0)';2135      const animation =2136        target.animate({ [idlName]: [ 'currentcolor 0px 0px 0px',2137                                      'currentcolor 10px 10px 10px'] },2138                       { duration: 1000, fill: 'both' });2139      testAnimationSamples(animation, idlName,2140        [{ time: 500,  expected: 'rgb(0, 255, 0) 5px 5px 5px' }]);2141    }, `${property}: with currentcolor`);2142  },2143  testAddition: function(property, setup) {2144    test(t => {2145      const idlName = propertyToIDL(property);2146      const target = createTestElement(t, setup);2147      target.style[idlName] = 'rgb(0, 0, 0) 0px 0px 0px';2148      const animation =2149        target.animate({ [idlName]: [ 'rgb(120, 120, 120) 10px 10px 10px',2150                                      'rgb(120, 120, 120) 10px 10px 10px'] },2151                       { duration: 1000, composite: 'add' });2152      testAnimationSamples(animation, idlName,2153        [ { time: 0, expected: 'rgb(0, 0, 0) 0px 0px 0px, ' +2154                               'rgb(120, 120, 120) 10px 10px 10px' }]);2155    }, `${property}: shadow`);2156  },2157  testAccumulation: function(property, setup) {2158    test(t => {2159      const idlName = propertyToIDL(property);2160      const target = createTestElement(t, setup);2161      target.style[idlName] = 'rgb(120, 120, 120) 10px 10px 10px';2162      const animation =2163        target.animate({ [idlName]: [ 'rgb(120, 120, 120) 10px 10px 10px',2164                                      'rgb(120, 120, 120) 10px 10px 10px'] },2165                       { duration: 1000, composite: 'accumulate' });2166      testAnimationSamples(animation, idlName,2167        [ { time: 0, expected: 'rgb(240, 240, 240) 20px 20px 20px' }]);2168    }, `${property}: shadow`);2169  },2170};2171const boxShadowListType = {2172  testInterpolation: (property, setup) => {2173    test(t => {2174      const idlName = propertyToIDL(property);2175      const target = createTestElement(t, setup);2176      const animation =2177        target.animate({ [idlName]: [ 'none',2178                                      'rgb(100, 100, 100) 10px 10px 10px 0px'] },2179                       { duration: 1000, fill: 'both' });2180      testAnimationSamples(animation, idlName,2181                                  // Premultiplied2182        [{ time: 500,  expected: 'rgba(100, 100, 100, 0.5) 5px 5px 5px 0px' }]);2183    }, `${property}: from none to other`);2184    test(t => {2185      const idlName = propertyToIDL(property);2186      const target = createTestElement(t, setup);2187      const animation =2188        target.animate({ [idlName]: [ 'rgb(100, 100, 100) 10px 10px 10px 0px',2189                                      'none' ] },2190                       { duration: 1000, fill: 'both' });2191      testAnimationSamples(animation, idlName,2192                                  // Premultiplied2193        [{ time: 500,  expected: 'rgba(100, 100, 100, 0.5) 5px 5px 5px 0px' }]);2194    }, `${property}: from other to none`);2195    test(t => {2196      const idlName = propertyToIDL(property);2197      const target = createTestElement(t, setup);2198      const animation =2199        target.animate({ [idlName]: [ 'rgb(0, 0, 0) 0px 0px 0px 0px',2200                                      'rgb(100, 100, 100) 10px 10px 10px 0px'] },2201                       { duration: 1000, fill: 'both' });2202      testAnimationSamples(animation, idlName,2203        [{ time: 500,  expected: 'rgb(50, 50, 50) 5px 5px 5px 0px' }]);2204    }, `${property}: single shadow`);2205    test(t => {2206      const idlName = propertyToIDL(property);2207      const target = createTestElement(t, setup);2208      const animation =2209        target.animate({ [idlName]: [ 'rgb(0, 0, 0) 0px 0px 0px 0px, '2210                                    + 'rgb(200, 200, 200) 20px 20px 20px 20px',2211                                      'rgb(100, 100, 100) 10px 10px 10px 0px, '2212                                    + 'rgb(100, 100, 100) 10px 10px 10px 0px'] },2213                       { duration: 1000, fill: 'both' });2214      testAnimationSamples(animation, idlName,2215        [{ time: 500,  expected: 'rgb(50, 50, 50) 5px 5px 5px 0px, '2216                               + 'rgb(150, 150, 150) 15px 15px 15px 10px' }]);2217    }, `${property}: shadow list`);2218    test(t => {2219      const idlName = propertyToIDL(property);2220      const target = createTestElement(t, setup);2221      const animation =2222        target.animate({ [idlName]: [ 'rgb(200, 200, 200) 20px 20px 20px 20px',2223                                      'rgb(100, 100, 100) 10px 10px 10px 0px, '2224                                    + 'rgb(100, 100, 100) 10px 10px 10px 0px'] },2225                       { duration: 1000, fill: 'both' });2226      testAnimationSamples(animation, idlName,2227        [{ time: 500,  expected: 'rgb(150, 150, 150) 15px 15px 15px 10px, '2228                               + 'rgba(100, 100, 100, 0.5) 5px 5px 5px 0px' }]);2229    }, `${property}: mismatched list length (from shorter to longer)`);2230    test(t => {2231      const idlName = propertyToIDL(property);2232      const target = createTestElement(t, setup);2233      const animation =2234        target.animate({ [idlName]: [ 'rgb(100, 100, 100) 10px 10px 10px 0px, '2235                                    + 'rgb(100, 100, 100) 10px 10px 10px 0px',2236                                      'rgb(200, 200, 200) 20px 20px 20px 20px']},2237                       { duration: 1000, fill: 'both' });2238      testAnimationSamples(animation, idlName,2239        [{ time: 500,  expected: 'rgb(150, 150, 150) 15px 15px 15px 10px, '2240                               + 'rgba(100, 100, 100, 0.5) 5px 5px 5px 0px' }]);2241    }, `${property}: mismatched list length (from longer to shorter)`);2242    test(t => {2243      const idlName = propertyToIDL(property);2244      const target = createTestElement(t, setup);2245      target.style.color = 'rgb(0, 255, 0)';2246      const animation =2247        target.animate({ [idlName]: [ 'currentcolor 0px 0px 0px 0px',2248                                      'currentcolor 10px 10px 10px 10px'] },2249                       { duration: 1000, fill: 'both' });2250      testAnimationSamples(animation, idlName,2251        [{ time: 500,  expected: 'rgb(0, 255, 0) 5px 5px 5px 5px' }]);2252    }, `${property}: with currentcolor`);2253  },2254  testAddition: function(property, setup) {2255    test(t => {2256      const idlName = propertyToIDL(property);2257      const target = createTestElement(t, setup);2258      target.style[idlName] = 'rgb(0, 0, 0) 0px 0px 0px 0px';2259      const animation =2260        target.animate({ [idlName]: [ 'rgb(120, 120, 120) 10px 10px 10px 0px',2261                                      'rgb(120, 120, 120) 10px 10px 10px 0px'] },2262                       { duration: 1000, composite: 'add' });2263      testAnimationSamples(animation, idlName,2264        [ { time: 0, expected: 'rgb(0, 0, 0) 0px 0px 0px 0px, ' +2265                               'rgb(120, 120, 120) 10px 10px 10px 0px' }]);2266    }, `${property}: shadow`);2267  },2268  testAccumulation: function(property, setup) {2269    test(t => {2270      const idlName = propertyToIDL(property);2271      const target = createTestElement(t, setup);2272      target.style[idlName] = 'rgb(120, 120, 120) 10px 10px 10px 10px';2273      const animation =2274        target.animate({ [idlName]: [ 'rgb(120, 120, 120) 10px 10px 10px 10px',2275                                      'rgb(120, 120, 120) 10px 10px 10px 10px'] },2276                       { duration: 1000, composite: 'accumulate' });2277      testAnimationSamples(animation, idlName,2278        [ { time: 0, expected: 'rgb(240, 240, 240) 20px 20px 20px 20px' }]);2279    }, `${property}: shadow`);2280  },2281};2282const positionType = {2283  testInterpolation: (property, setup) => {2284    lengthPairType.testInterpolation(property, setup);2285    test(t => {2286      const idlName = propertyToIDL(property);2287      const target = createTestElement(t, setup);2288      const animation = target.animate({ [idlName]: ['10% 10%', '50% 50%'] },2289                                       { duration: 1000, fill: 'both' });2290      testAnimationSamples(2291        animation, idlName,2292        [{ time: 500,  expected: calcFromPercentage(idlName, '30% 30%') }]);2293    }, `${property} supports animating as a position of percent`);2294  },2295  testAdditionOrAccumulation: (property, setup, composite) => {2296    lengthPairType.testAddition(property, setup);2297    test(t => {2298      const idlName = propertyToIDL(property);2299      const target = createTestElement(t, setup);2300      target.style[idlName] = '60% 60%';2301      const animation = target.animate({ [idlName]: ['70% 70%', '100% 100%'] },2302                                       { duration: 1000, composite });2303      testAnimationSamples(2304        animation, idlName,2305        [{ time: 0, expected: calcFromPercentage(idlName, '130% 130%') }]);2306    }, `${property}: position of percentage`);2307  },2308  testAddition: function(property, setup) {2309    this.testAdditionOrAccumulation(property, setup, 'add');2310  },2311  testAccumulation: function(property, setup) {2312    this.testAdditionOrAccumulation(property, setup, 'accumulate');2313  },2314};2315const rectType = {2316  testInterpolation: (property, setup) => {2317    test(t => {2318      const idlName = propertyToIDL(property);2319      const target = createTestElement(t, setup);2320      const animation = target.animate({ [idlName]:2321                                           ['rect(10px, 10px, 10px, 10px)',2322                                            'rect(50px, 50px, 50px, 50px)'] },2323                                       { duration: 1000, fill: 'both' });2324      testAnimationSamples(2325          animation, idlName,2326          [{ time: 500,  expected: 'rect(30px, 30px, 30px, 30px)' }]);2327    }, `${property} supports animating as a rect`);2328  },2329  testAdditionOrAccumulation: (property, setup, composite) => {2330    test(t => {2331      const idlName = propertyToIDL(property);2332      const target = createTestElement(t, setup);2333      target.style[idlName] = 'rect(100px, 100px, 100px, 100px)';2334      const animation = target.animate({ [idlName]:2335                                           ['rect(10px, 10px, 10px, 10px)',2336                                            'rect(10px, 10px, 10px, 10px)'] },2337                                       { duration: 1000, composite });2338      testAnimationSamples(2339        animation, idlName,2340        [{ time: 0, expected: 'rect(110px, 110px, 110px, 110px)' }]);2341    }, `${property}: rect`);2342  },2343  testAddition: function(property, setup) {2344    this.testAdditionOrAccumulation(property, setup, 'add');2345  },2346  testAccumulation: function(property, setup) {2347    this.testAdditionOrAccumulation(property, setup, 'accumulate');2348  },2349}2350// stroke-dasharray: none | [ <length> | <percentage> | <number> ]*2351const dasharrayType = {2352  testInterpolation: (property, setup) => {2353    percentageType.testInterpolation(property, setup);2354    positiveNumberType.testInterpolation(property, setup, 'px');2355    test(t => {2356      const idlName = propertyToIDL(property);2357      const target = createTestElement(t, setup);2358      const animation = target.animate({ [idlName]:2359                                           ['8, 16, 4',2360                                            '4, 8, 12, 16'] },2361                                       { duration: 1000, fill: 'both' });2362      testAnimationSamples(2363          animation, idlName,2364          [{ time: 500,  expected: '6px, 12px, 8px, 12px, 10px, 6px, 10px, 16px, 4px, 8px, 14px, 10px' }]);2365    }, `${property} supports animating as a dasharray (mismatched length)`);2366    test(t => {2367      const idlName = propertyToIDL(property);2368      const target = createTestElement(t, setup);2369      const animation = target.animate({ [idlName]:2370                                           ['2, 50%, 6, 10',2371                                            '6, 30%, 2, 2'] },2372                                       { duration: 1000, fill: 'both' });2373      testAnimationSamples(2374          animation, idlName,2375          [{ time: 500,  expected: '4px, 40%, 4px, 6px' }]);2376    }, `${property} supports animating as a dasharray (mixed lengths and percentages)`);2377  },2378  // Note that stroke-dasharray is neither additive nor cumulative, so we should2379  // write this additive test case that animating value replaces underlying2380  // values.2381  // See https://www.w3.org/TR/SVG2/painting.html#StrokeDashing.2382  testAdditionOrAccumulation: (property, setup, composite) => {2383    test(t => {2384      const idlName = propertyToIDL(property);2385      const target = createTestElement(t, setup);2386      target.style[idlName] = '6, 30%, 2px';2387      const animation = target.animate({ [idlName]:2388                                           ['1, 2, 3, 4, 5',2389                                            '6, 7, 8, 9, 10'] },2390                                       { duration: 1000, composite });2391      testAnimationSamples(2392          animation, idlName,2393          [{ time: 0, expected: '1px, 2px, 3px, 4px, 5px' }]);2394    }, `${property}: dasharray`);2395  },2396  testAddition: function(property, setup) {2397    this.testAdditionOrAccumulation(property, setup, 'add');2398  },2399  testAccumulation: function(property, setup) {2400    this.testAdditionOrAccumulation(property, setup, 'accumulate');2401  },2402}2403const fontVariationSettingsType = {2404  testInterpolation: (property, setup) => {2405    test(t => {2406      const idlName = propertyToIDL(property);2407      const target = createTestElement(t, setup);2408      const animation =2409        target.animate({ [idlName]: ['"wght" 1.1', '"wght" 1.5'] },2410                       { duration: 1000, fill: 'both' });2411      testAnimationSamples(animation, idlName,2412                           [{ time: 0,  expected: '"wght" 1.1' },2413                            { time: 250,  expected: '"wght" 1.2' },2414                            { time: 750,  expected: '"wght" 1.4' } ]);2415    }, `${property} supports animation as float`);2416    test(t => {2417      const idlName = propertyToIDL(property);2418      const target = createTestElement(t, setup);2419      const animation =2420        target.animate({ [idlName]: ['"wdth" 1, "wght" 1.1',2421                                     '"wght" 1.5, "wdth" 5'] },2422                       { duration: 1000, fill: 'both' });2423      testAnimationSamplesWithAnyOrder(2424        animation, idlName,2425        [{ time: 0, expected: '"wdth" 1, "wght" 1.1' },2426         { time: 250, expected: '"wdth" 2, "wght" 1.2' },2427         { time: 750, expected: '"wdth" 4, "wght" 1.4' } ]);2428    }, `${property} supports animation as float with multiple tags`);2429    test(t => {2430      const idlName = propertyToIDL(property);2431      const target = createTestElement(t, setup);2432      const animation =2433        target.animate({ [idlName]: ['"wdth" 1, "wght" 1.1',2434                                     '"wght" 10, "wdth" 5, "wght" 1.5'] },2435                       { duration: 1000, fill: 'both' });2436      testAnimationSamplesWithAnyOrder(2437        animation, idlName,2438        [{ time: 250, expected: '"wdth" 2, "wght" 1.2' },2439         { time: 750, expected: '"wdth" 4, "wght" 1.4' } ]);2440    }, `${property} supports animation as float with multiple duplicate tags`);2441  },2442  testAdditionOrAccumulation: (property, setup, composite) => {2443    test(t => {2444      const idlName = propertyToIDL(property);2445      const target = createTestElement(t, setup);2446      target.style[idlName] = '"wght" 1';2447      const animation =2448        target.animate({ [idlName]: ['"wght" 1.1', '"wght" 1.5'] },2449                       { duration: 1000, composite });2450      testAnimationSamples(animation, idlName,2451                           [{ time: 250,  expected: '"wght" 2.2' },2452                            { time: 750,  expected: '"wght" 2.4' } ]);2453    }, `${property} with composite type ${composite}`);2454  },2455  testAddition: function(property, setup) {2456    this.testAdditionOrAccumulation(property, setup, 'add');2457  },2458  testAccumulation: function(property, setup) {2459    this.testAdditionOrAccumulation(property, setup, 'accumulate');2460  },2461}2462const types = {2463  color: colorType,2464  discrete: discreteType,2465  filterList: filterListType,2466  integer: integerType,2467  positiveInteger: positiveIntegerType,2468  length: lengthType,2469  percentage: percentageType,2470  lengthPercentageOrCalc: lengthPercentageOrCalcType,2471  lengthPair: lengthPairType,2472  positiveNumber: positiveNumberType,2473  opacity: opacityType,2474  transformList: transformListType,2475  rotateList: rotateListType,2476  translateList: translateListType,2477  scaleList: scaleListType,2478  visibility: visibilityType,2479  boxShadowList: boxShadowListType,2480  textShadowList: textShadowListType,2481  rect: rectType,2482  position: positionType,2483  dasharray: dasharrayType,2484  fontVariationSettings: fontVariationSettingsType,...

idlToTs.js

Source:idlToTs.js

1import { watch, readdir, readFile, writeFile } from "fs/promises";2import camelcase from "camelcase";3const idl = "./target/idl/";4function enumVariantToTs(variant) {5  return `${variant.name}: { ${variant.name.toLowerCase()}: {} }`;6}7function enumToTs(struct) {8  const enumVariants = struct.type.variants;9  if (enumVariants) {10    return `export type ${capitalizeFirstLetter(11      struct.name12    )} = Record<string, Record<string, any>>13export const ${capitalizeFirstLetter(struct.name)} = {14  ${enumVariants.map(enumVariantToTs).join(",\n  ")}15}16    `;17  }18}19function allEnumsToTs(idlDef) {20  return `21${idlDef.types ? idlDef.types.map(enumToTs).filter(Boolean).join("\n\n") : ""}22${23  idlDef.accounts24    ? idlDef.accounts.map(enumToTs).filter(Boolean).join("\n\n")25    : ""26}27  `;28}29function accountToTs(idlName, account) {30  return `export type ${capitalizeFirstLetter(31    account.name32  )} = IdlAccounts<${idlName}>["${account.name}"]`;33}34function allAccountsToTs(idlName, idlDef) {35  return `36${idlDef.accounts37  .map((a) => accountToTs(idlName, a))38  .filter(Boolean)39  .join("\n\n")}40  `;41}42function capitalizeFirstLetter(str) {43  return str[0].toUpperCase() + str.slice(1);44}45(async () => {46  const files = await readdir(idl);47  await Promise.all(48    files.map(async (filename) => {49      try {50        const path = `${idl}${filename}`;51        const watcher = watch(path);52        async function generate() {53          const rawdata = await readFile(path);54          console.log(`Change in ${path}`);55          const name = filename.replace(".json", "").replace(/\_/g, "-");56          let idlJson = JSON.parse(rawdata.toString());57          for (let account of idlJson.accounts) {58            account.name = camelcase(account.name);59          }60          const idlName = `${capitalizeFirstLetter(camelcase(name))}IDL`;61          const fileContents = `export type ${idlName} = ${JSON.stringify(62            idlJson63          )};64import { IdlAccounts } from '@project-serum/anchor';65${allEnumsToTs(idlJson)}66${allAccountsToTs(idlName, idlJson)}67          `;68          writeFile(`./test/${name}-types.ts`, fileContents);69        }70        await generate();71        for await (const event of watcher) {72          await generate();73        }74      } catch (err) {75        if (err.name === "AbortError") {76          console.log("Aborted");77          console.log(err);78          return;79        } else {80          throw err;81        }82      }83    })84  );...

Using AI Code Generation

1var wpt = require('webpagetest');2var wpt = new WebPageTest('www.webpagetest.org', 'A.1234567890abcdef1234567890abcdef12345678');3wpt.idlName(function(err, data) {4    if (err) {5        console.log(err);6    } else {7        console.log(data);8    }9});10{ "statusCode": 200, "statusText": "OK", "data": { "idlName": "A.1234567890abcdef1234567890abcdef12345678" } }11{ "statusCode": 200, "statusText": "OK", "data": { "idlName": "A.1234567890abcdef1234567890abcdef12345678" } }

Using AI Code Generation

1var idlName = require('./wpt.js');2console.log(idlName("fooBar"));3var wpt = require('./wpt.js');4console.log(wpt.idlName("fooBar"));5var wpt = require('./wpt.js');6console.log(wpt.idlName("fooBar"));7var wpt = require('./wpt.js');8console.log(wpt.idlName("fooBar"));9var wpt = require('./wpt.js');10console.log(wpt.idlName("fooBar"));11var wpt = require('./wpt.js');12console.log(wpt.idlName("fooBar"));13var wpt = require('./wpt.js');14console.log(wpt.idlName("fooBar"));15var wpt = require('./wpt.js');16console.log(wpt.idlName("fooBar"));17var wpt = require('./wpt.js');18console.log(wpt.idlName("fooBar"));19var wpt = require('./wpt.js');20console.log(wpt.idlName("fooBar"));21var wpt = require('./wpt.js');22console.log(wpt.idlName("fooBar"));23var wpt = require('./wpt.js');24console.log(wpt.idlName("fooBar"));25var wpt = require('./wpt.js');26console.log(wpt.idlName("

Using AI Code Generation

1var idlName = idlArray.idlName;2var idlArray = {3  "TestInterface": {4    "TestInterface": {5      "0": {6        "idlType": {7        },8      }9    }10  }11};12idlArray = process_idl(idlArray);13idlArray = add_objects(idlArray);14idlArray = add_objects(idlArray, {only: ["TestInterface"]});15idlArray = add_objects(idlArray, {expose: ["TestInterface"]});16idlArray = add_objects(idlArray, {expose: ["TestInterface"], only: ["TestInterface"]});17for (var i in idlArray) {18  var obj = idlArray[i];19  if (obj.name == "TestInterface") {20    test(function() {21      assert_true("testMethod" in obj.instance, "TestInterface.testMethod exists");22    }, idlName(obj) + ".testMethod exists");23  }24}25var idlArray = {26  "TestInterface": {27    "TestInterface": {28      "0": {29        "idlType": {30        },31      }32    }33  }34};35idlArray = process_idl(idlArray);36idlArray = add_objects(idlArray);37idlArray = add_objects(idlArray, {only: ["TestInterface"]});38idlArray = add_objects(idlArray, {expose: ["TestInterface"]});39idlArray = add_objects(idlArray, {expose: ["TestInterface"], only: ["TestInterface"]});40for (var i in idlArray) {41  var obj = idlArray[i];42  if (obj.name == "TestInterface") {

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.