How to use createTestElement method in wpt

Best JavaScript code snippet using wpt

property-types.js

Source:property-types.js

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

Using AI Code Generation

1var wpt = require('webpagetest');2test.runTest(function(err, data) {3  if (err) throw err;4  console.log(data);5});6var wpt = require('webpagetest');7  if (err) throw err;8  console.log(data);9});10var wpt = require('webpagetest');11test.on('complete', function(data) {12  console.log(data);13});14var wpt = require('webpagetest');15test.on('progress', function(data) {16  console.log(data);17});18var wpt = require('webpagetest');19test.on('error', function(err) {20  console.log(err);21});22var wpt = require('webpagetest');23test.on('data', function(data) {24  console.log(data);25});26var wpt = require('webpagetest');27test.on('log', function(data) {28  console.log(data);29});30var wpt = require('webpagetest');31test.on('statusText', function(data) {32  console.log(data);33});

Using AI Code Generation

1var wpt = require('webpagetest');2var wpt = new WebPageTest('www.webpagetest.org', 'A.6b8c7d8e9f0g1h2i3j4k5l6m7n8o9p0q1r2s3t4u5v6w7x8y9z0a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6q7r8s9t0u1v2w3x4y5z6');3    if (err) {4        console.log('Error: ' + err);5    }6    else {7        console.log('Test ID: ' + data.data.testId);8    }9});

Using AI Code Generation

1var wpt = require('wptdriver');2var test = wpt.createTestElement();3    console.log(res.statusCode);4    test.done();5});6var webdriver = require('selenium-webdriver'),7    until = webdriver.until;8var driver = new webdriver.Builder()9    .forBrowser('chrome')10    .build();11exports.createTestElement = function() {12    return new TestElement(driver);13};14function TestElement(driver) {15    this.driver = driver;16}17TestElement.prototype.get = function(url, callback) {18    this.driver.get(url).then(function() {19        callback(null, {statusCode: 200});20    });21};22TestElement.prototype.done = function() {23    this.driver.quit();24};25var wpt = require('wptdriver');26var test = wpt.createTestElement();27    console.log(res.statusCode);28    test.done();29});30var wpt = require('wptdriver');31var test = wpt.createTestElement();32    console.log(res.statusCode);33    test.done();34});35var wpt = require('wptdriver');36var test = wpt.createTestElement();37    console.log(res.statusCode);38    test.done();39});40var wpt = require('wptdriver');41var test = wpt.createTestElement();42    console.log(res.statusCode);43    test.done();44});

Using AI Code Generation

1var test = new createTestElement("test.js", "test", "test", "test");2test.setTestName("test");3test.setTestDescription("test");4test.setTestAuthor("test");5test.setTestVersion("1.0");6test.setTestDate("2013-03-01");7test.setTestResult("pass");

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.