Bug 1207734 - Part 9.f. (testing) Update animation wpt for individual transform.
authorcku <cku@mozilla.com>
Fri, 05 Jan 2018 15:41:20 +0800
changeset 1395216 ddb4e0779e8ffc0db2dabaf2dd2c3c819d1723d9
parent 1395215 42d9cd9da5dde1a28fdacf5e3f29f07840870477
child 1395217 e7ac40d3051447a4a5df1d2bc21737af04fd6a03
push id245851
push usercku@mozilla.com
push dateFri, 12 Jan 2018 02:16:20 +0000
treeherdertry@539f9c76d6c2 [default view] [failures only]
bugs1207734
milestone59.0a1
Bug 1207734 - Part 9.f. (testing) Update animation wpt for individual transform. MozReview-Commit-ID: EoKXT7CcYLA
testing/web-platform/meta/web-animations/animation-model/animation-types/accumulation-per-property.html.ini
testing/web-platform/meta/web-animations/animation-model/animation-types/addition-per-property.html.ini
testing/web-platform/meta/web-animations/animation-model/animation-types/interpolation-per-property.html.ini
testing/web-platform/tests/web-animations/animation-model/animation-types/property-list.js
testing/web-platform/tests/web-animations/animation-model/animation-types/property-types.js
--- a/testing/web-platform/meta/web-animations/animation-model/animation-types/accumulation-per-property.html.ini
+++ b/testing/web-platform/meta/web-animations/animation-model/animation-types/accumulation-per-property.html.ini
@@ -1,9 +1,9 @@
-prefs: [layout.css.font-variations.enabled:true, layout.css.overflow-clip-box.enabled:true]
+prefs: [layout.css.font-variations.enabled:true, layout.css.overflow-clip-box.enabled:true,layout.css.individual-transform.enabled:true]
 [accumulation-per-property.html]
   [shape-outside: "url("http://localhost/test-2")" onto "url("http://localhost/test-1")"]
     expected:
       if not stylo: FAIL
 
   [shape-outside: "url("http://localhost/test-1")" onto "url("http://localhost/test-2")"]
     expected:
       if not stylo: FAIL
--- a/testing/web-platform/meta/web-animations/animation-model/animation-types/addition-per-property.html.ini
+++ b/testing/web-platform/meta/web-animations/animation-model/animation-types/addition-per-property.html.ini
@@ -1,9 +1,9 @@
-prefs: [layout.css.font-variations.enabled:true, layout.css.overflow-clip-box.enabled:true]
+prefs: [layout.css.font-variations.enabled:true, layout.css.overflow-clip-box.enabled:true,layout.css.individual-transform.enabled:true]
 [addition-per-property.html]
   [shape-outside: "url("http://localhost/test-2")" onto "url("http://localhost/test-1")"]
     expected:
       if not stylo: FAIL
 
   [shape-outside: "url("http://localhost/test-1")" onto "url("http://localhost/test-2")"]
     expected:
       if not stylo: FAIL
--- a/testing/web-platform/meta/web-animations/animation-model/animation-types/interpolation-per-property.html.ini
+++ b/testing/web-platform/meta/web-animations/animation-model/animation-types/interpolation-per-property.html.ini
@@ -1,9 +1,9 @@
-prefs: [layout.css.font-variations.enabled:true, layout.css.overflow-clip-box.enabled:true]
+prefs: [layout.css.font-variations.enabled:true, layout.css.overflow-clip-box.enabled:true,layout.css.individual-transform.enabled:true]
 [interpolation-per-property.html]
   [filter: interpolate different length of filter-function-list with drop-shadow function]
     expected: FAIL
     bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1345709
 
   [font-variation-settings supports animation as float with multiple tags]
     expected:
       if not stylo: FAIL
--- a/testing/web-platform/tests/web-animations/animation-model/animation-types/property-list.js
+++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/property-list.js
@@ -1400,16 +1400,28 @@ const gCSSProperties = {
     ]
   },
   'transform-style': {
     // https://drafts.csswg.org/css-transforms/#propdef-transform-style
     types: [
       { type: 'discrete', options: [ [ 'flat', 'preserve-3d' ] ] }
     ]
   },
+  'rotate': {
+    // https://drafts.csswg.org/css-transforms-2/#individual-transforms
+    types: [ 'rotateList' ]
+  },
+  'translate': {
+    // https://drafts.csswg.org/css-transforms-2/#individual-transforms
+    types: [ 'translateList' ]
+  },
+  'scale': {
+    // https://drafts.csswg.org/css-transforms-2/#individual-transforms
+    types: [ 'scaleList' ]
+  },
   'unicode-bidi': {
     // https://drafts.csswg.org/css-writing-modes-3/#propdef-unicode-bidi
     types: [
       { type: 'discrete', options: [ [ 'embed', 'bidi-override' ] ] },
     ]
   },
   'vector-effect': {
     // https://svgwg.org/svg2-draft/coords.html#VectorEffectProperty
--- a/testing/web-platform/tests/web-animations/animation-model/animation-types/property-types.js
+++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/property-types.js
@@ -1578,16 +1578,315 @@ const transformListType = {
       testAnimationSampleMatrices(animation, idlName, [
         { time: 0, expected: [-2, 0, 0, -2, 250, 0] },
       ]);
     }, `${property}: non-invertible matrices in mismatched transform lists`
        + ' (invertible onto non-invertible)');
   },
 };
 
+const rotateListType = {
+  testInterpolation: (property, setup) => {
+    test(t => {
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate(
+        {
+          [idlName]: ['45deg', '135deg'],
+        },
+        1000
+      );
+
+      testAnimationSamples(animation, idlName,
+        [{ time: 500,  expected: '90deg' }]);
+    }, `${property} without rotation axes`);
+
+    test(t => {
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation =
+        target.animate({ [idlName]: [ '0 1 0 0deg',
+                                      '0 1 0 90deg'] },
+                       1000);
+
+      testAnimationSamples(animation, idlName,
+        [{ time: 500, expected: '0 1 0 45deg' }]);
+    }, `${property}  with rotation axes`);
+  },
+  testAddition: function(property, setup) {
+    test(t => {
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      target.style[idlName] = '45deg';
+      const animation = target.animate({ [idlName]: ['-90deg', '90deg'] },
+                                       { duration: 1000, fill: 'both',
+                                         composite: 'add' });
+
+      testAnimationSamples(animation, idlName,
+        [{ time: 0,    expected: '-45deg' },
+         { time: 1000, expected: '135deg' }]);
+    }, `${property} without rotation axes`);
+
+    test(t => {
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      target.style.transform = 'translateX(100px)';
+      target.style[idlName] = '0 1 0 -45deg';
+      const animation =
+        target.animate({ [idlName]: ['0 1 0 90deg',
+                                     '0 1 0 180deg'] },
+                       { duration: 1000, fill: 'both', composite: 'add' });
+
+      testAnimationSamples(animation, idlName,
+        [{ time: 0,    expected: '0 1 0 45deg' },
+         { time: 1000, expected: '0 1 0 135deg' }]);
+    }, `${property} with transform`);
+  },
+  testAccumulation: function(property, setup) {
+    test(t => {
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      target.style[idlName] = '45deg';
+      const animation = target.animate({ [idlName]: ['-90deg', '90deg'] },
+                                     { duration: 1000, fill: 'both',
+                                       composite: 'accumulate' });
+
+      testAnimationSamples(animation, idlName,
+        [{ time: 0,    expected: '-45deg' },
+         { time: 1000, expected: '135deg' }]);
+    }, `${property} without rotation axes`);
+
+    test(t => {
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      target.style.transform = 'translateX(100px)';
+      target.style[idlName] = '1 0 0 -45deg';
+      const animation =
+        target.animate({ [idlName]: ['1 0 0 90deg',
+                                     '1 0 0 180deg'] },
+                       { duration: 1000, fill: 'both', composite: 'accumulate' });
+
+      testAnimationSamples(animation, idlName,
+        [{ time: 0,    expected: '1 0 0 45deg' },
+         { time: 1000, expected: '1 0 0 135deg' }]);
+    }, `${property} with transform`);
+  },
+};
+
+const translateListType = {
+  testInterpolation: (property, setup) => {
+    test(t => {
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate(
+        {
+          [idlName]: ['200px', '400px'],
+        },
+        1000
+      );
+      testAnimationSamples(animation, idlName,
+        [{ time: 500,  expected: '300px' }]);
+    }, `${property} with two unspecified values`);
+
+    test(t => {
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate(
+        {
+          [idlName]: ['200px -200px', '400px 400px'],
+        },
+        1000
+      );
+      testAnimationSamples(animation, idlName,
+        [{ time: 500,  expected: '300px 100px' }]);
+    }, `${property} with one unspecified value`);
+
+    test(t => {
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate(
+        {
+          [idlName]: ['200px -200px 600px', '400px 400px -200px'],
+        },
+        1000
+      );
+      testAnimationSamples(animation, idlName,
+        [{ time: 500,  expected: '300px 100px 200px' }]);
+    }, `${property}`);
+  },
+  testAddition: function(property, setup) {
+    test(t => {
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      target.style[idlName] = '100px';
+      const animation = target.animate({ [idlName]: ['-200px', '500px'] },
+                                       { duration: 1000, fill: 'both',
+                                         composite: 'add' });
+      testAnimationSamples(animation, idlName,
+        [ { time: 0,    expected: '-100px' },
+          { time: 1000, expected: '600px' }]);
+
+    }, `${property}`);
+
+    test(t => {
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      target.transform = 'translateY(100px)';
+      target.style[idlName] = '100px';
+      const animation = target.animate({ [idlName]: ['-200px', '500px'] },
+                                       { duration: 1000, fill: 'both',
+                                         composite: 'add' });
+      testAnimationSamples(animation, idlName,
+        [ { time: 0,    expected: '-100px' },
+          { time: 1000, expected: '600px' }]);
+
+    }, `${property} with transform`);
+  },
+  testAccumulation: function(property, setup) {
+    test(t => {
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      target.style[idlName] = '100px';
+      const animation = target.animate({ [idlName]: ['-200px', '500px'] },
+                                     { duration: 1000, fill: 'both',
+                                       composite: 'accumulate' });
+      testAnimationSamples(animation, idlName,
+        [ { time: 0,    expected: '-100px' },
+          { time: 1000, expected: '600px' }]);
+    }, `${property}`);
+
+    test(t => {
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      target.transform = 'translateY(100px)';
+      target.style[idlName] = '100px';
+      const animation = target.animate({ [idlName]: ['-200px', '500px'] },
+                                     { duration: 1000, fill: 'both',
+                                       composite: 'accumulate' });
+      testAnimationSamples(animation, idlName,
+        [ { time: 0,    expected: '-100px' },
+          { time: 1000, expected: '600px' }]);
+    }, `${property} with transform`);
+  },
+};
+
+const scaleListType = {
+  testInterpolation: (property, setup) => {
+    test(t => {
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate({ [idlName]: ['3', '5'] },
+                                       1000);
+
+      testAnimationSamples(animation, idlName,
+        [{ time: 500,  expected: '4' }]);
+    }, `${property} with two unspecified values`);
+
+    test(t => {
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate({ [idlName]: ['3 3', '5 5'] },
+                                       1000);
+
+      testAnimationSamples(animation, idlName,
+        [{ time: 500,  expected: '4 4' }]);
+    }, `${property} with one unspecified value`);
+
+    test(t => {
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      const animation = target.animate({ [idlName]: ['3 3 3', '5 5 5'] },
+                                       1000);
+
+      testAnimationSamples(animation, idlName,
+        [{ time: 500,  expected: '4 4 4' }]);
+    }, `${property}`);
+  },
+  testAddition: function(property, setup) {
+    test(t => {
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      target.style[idlName] = '2';
+      const animation = target.animate({ [idlName]: ['-3', '5'] },
+                                       { duration: 1000, fill: 'both',
+                                         composite: 'add' });
+
+      testAnimationSamples(animation, idlName,
+        [{ time: 0,    expected: '-6' },
+         { time: 1000, expected: '10' }]);
+    }, `${property} with two unspecified values`);
+
+    test(t => {
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      target.style[idlName] = '2 2';
+      const animation = target.animate({ [idlName]: ['-3 -3', '5 5'] },
+                                       { duration: 1000, fill: 'both',
+                                         composite: 'add' });
+
+      testAnimationSamples(animation, idlName,
+        [{ time: 0,    expected: '-6 -6' },
+         { time: 1000, expected: '10 10' }]);
+    }, `${property} with one unspecified value`);
+
+    test(t => {
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      target.style[idlName] = '2 2 2';
+      const animation = target.animate({ [idlName]: ['-3 -3 -3', '5 5 5'] },
+                                       { duration: 1000, fill: 'both',
+                                         composite: 'add' });
+
+      testAnimationSamples(animation, idlName,
+        [{ time: 0,    expected: '-6 -6 -6' },
+         { time: 1000, expected: '10 10 10' }]);
+    }, `${property}`);
+  },
+  testAccumulation: function(property, setup) {
+    test(t => {
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      target.style[idlName] = '2';
+      const animation = target.animate({ [idlName]: ['-3', '5'] },
+                                     { duration: 1000, fill: 'both',
+                                       composite: 'accumulate' });
+
+      testAnimationSamples(animation, idlName,
+        [{ time: 0,    expected: '-2' },
+         { time: 1000, expected: '6' }]);
+    }, `${property} with two unspecified values`);
+
+    test(t => {
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      target.style[idlName] = '2 2';
+      const animation = target.animate({ [idlName]: ['-3 -3', '5 5'] },
+                                     { duration: 1000, fill: 'both',
+                                       composite: 'accumulate' });
+
+      testAnimationSamples(animation, idlName,
+        [{ time: 0,    expected: '-2 -2' },
+         { time: 1000, expected: '6 6' }]);
+    }, `${property} with one unspecified value`);
+
+    test(t => {
+      const idlName = propertyToIDL(property);
+      const target = createTestElement(t, setup);
+      target.style[idlName] = '2 2 2';
+      const animation = target.animate({ [idlName]: ['-3 -3 -3', '5 5 5'] },
+                                     { duration: 1000, fill: 'both',
+                                       composite: 'accumulate' });
+
+      testAnimationSamples(animation, idlName,
+        [{ time: 0,    expected: '-2 -2 -2' },
+         { time: 1000, expected: '6 6 6' }]);
+    }, `${property}`);
+  },
+};
+
 const filterListType = {
   testInterpolation: (property, setup) => {
     test(t => {
       const idlName = propertyToIDL(property);
       const target = createTestElement(t, setup);
       const animation = target.animate({ [idlName]:
                                          ['blur(10px)', 'blur(50px)'] },
                                         1000);
@@ -2311,16 +2610,19 @@ const types = {
   positiveInteger: positiveIntegerType,
   length: lengthType,
   percentage: percentageType,
   lengthPercentageOrCalc: lengthPercentageOrCalcType,
   lengthPair: lengthPairType,
   positiveNumber: positiveNumberType,
   opacity: opacityType,
   transformList: transformListType,
+  rotateList: rotateListType,
+  translateList: translateListType,
+  scaleList: scaleListType,
   visibility: visibilityType,
   boxShadowList: boxShadowListType,
   textShadowList: textShadowListType,
   rect: rectType,
   position: positionType,
   dasharray: dasharrayType,
   fontStretch: fontStretchType,
   fontVariationSettings: fontVariationSettingsType,