Bug 1362897 - Add w-p-t of interpolating filter property. r=hiro
authorMantaroh Yoshinaga <mantaroh@gmail.com>
Mon, 19 Jun 2017 12:39:28 +0900
changeset 364591 7d056ddab0b25bfff1e8fdd3927538e5ad3f8fd3
parent 364590 ae924c659c7a028b5973c04f1c359f06c57b503f
child 364592 afb0e8bf4fccd832404982e80ca4b363551b19d5
push id32049
push usercbook@mozilla.com
push dateMon, 19 Jun 2017 11:36:23 +0000
treeherdermozilla-central@26d62a1ac0e3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewershiro
bugs1362897
milestone56.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1362897 - Add w-p-t of interpolating filter property. r=hiro MozReview-Commit-ID: 8vBWe8ZXLgi
testing/web-platform/meta/MANIFEST.json
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-types.js
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -219991,17 +219991,17 @@
    "55100f7d505bc8cbc966ced0d1337ed78534a553",
    "testharness"
   ],
   "web-animations/animation-model/animation-types/property-list.js": [
    "9dfb34806dfd264bb1155830b0548d53fcae9007",
    "support"
   ],
   "web-animations/animation-model/animation-types/property-types.js": [
-   "ee3e5ae1923027f7e9dd80da11e765085a02c367",
+   "750c9270292478d09cf176a5e489043a6707e726",
    "support"
   ],
   "web-animations/animation-model/combining-effects/effect-composition.html": [
    "8ac06085132d822e908d48de4c1109b66323f19f",
    "testharness"
   ],
   "web-animations/animation-model/keyframe-effects/effect-value-context.html": [
    "10d9ee521240475a1729c2facfcea8b50342614e",
--- 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,29 +1,26 @@
 prefs: [layout.css.contain.enabled:true, layout.css.initial-letter.enabled:true, layout.css.overflow-clip-box.enabled:true, layout.css.shape-outside.enabled:true]
 [interpolation-per-property.html]
   type: testharness
-  [filterList has testInterpolation function]
-    expected: FAIL
-
-  [filter (type: filterList) has testInterpolation function]
-    expected: FAIL
-
   [column-gap uses discrete animation when animating between "normal" and "200px" with linear easing]
     expected: FAIL
     bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1356241
 
   [column-gap uses discrete animation when animating between "normal" and "200px" with effect easing]
     expected: FAIL
     bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1356241
 
   [column-gap uses discrete animation when animating between "normal" and "200px" with keyframe easing]
     expected: FAIL
     bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1356241
 
+  [filter: interpolate different length of filter-function-list with drop-shadow function]
+    expected: FAIL
+    bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1345709
   [background-image uses discrete animation when animating between "url("http://localhost/test-1")" and "url("http://localhost/test-2")" with linear easing]
     expected:
       if not debug and stylo and not e10s and (os == "linux") and (version == "Ubuntu 16.04") and (processor == "x86_64") and (bits == 64): FAIL
       if not debug and stylo and e10s and (os == "linux") and (version == "Ubuntu 16.04") and (processor == "x86_64") and (bits == 64): FAIL
       if debug and stylo and e10s and (os == "linux") and (version == "Ubuntu 16.04") and (processor == "x86_64") and (bits == 64): FAIL
       if debug and stylo and not e10s and (os == "linux") and (version == "Ubuntu 16.04") and (processor == "x86_64") and (bits == 64): FAIL
 
   [background-image uses discrete animation when animating between "url("http://localhost/test-1")" and "url("http://localhost/test-2")" with effect easing]
--- 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
@@ -1197,16 +1197,178 @@ const transformListType = {
       testAnimationSampleMatrices(animation, idlName,
         [{ time: 0,    expected: rotate3dToMatrix(1, 1, 0,    -Math.PI / 4) },
          { time: 1000, expected: rotate3dToMatrix(1, 1, 0, 3 * Math.PI / 4) }]);
     }, property + ': matrix3d');
   },
 };
 
 const filterListType = {
+  testInterpolation: function(property, setup) {
+    test(function(t) {
+      var idlName = propertyToIDL(property);
+      var target = createTestElement(t, setup);
+      var animation = target.animate({ [idlName]:
+                                       ['blur(10px)', 'blur(50px)'] },
+                                      1000);
+
+      testAnimationSamples(animation, idlName,
+        [{ time: 500,    expected: 'blur(30px)' }]);
+    }, property + ': blur function' );
+
+    test(function(t) {
+      var idlName = propertyToIDL(property);
+      var target = createTestElement(t, setup);
+      var animation = target.animate({ [idlName]: ['hue-rotate(0deg)',
+                                                   'hue-rotate(100deg)'] },
+                                     1000);
+
+      testAnimationSamples(animation, idlName,
+        [{ time: 500,    expected: 'hue-rotate(50deg)' }]);
+    }, property + ': hue-rotate function with same unit(deg)' );
+
+    test(function(t) {
+      var idlName = propertyToIDL(property);
+      var target = createTestElement(t, setup);
+      var animation = target.animate({ [idlName]: ['hue-rotate(10deg)',
+                                                   'hue-rotate(100rad)'] },
+                                     1000);
+
+      // 10deg = 0.1745rad.
+      testAnimationSamples(animation, idlName,
+        [{ time: 500,    expected: 'hue-rotate(50.0873rad)' }]);
+    }, property + ': hue-rotate function with different unit(deg -> rad)');
+
+    test(function(t) {
+      var idlName = propertyToIDL(property);
+      var target = createTestElement(t, setup);
+      var animation = target.animate(
+        { [idlName]:
+          ['drop-shadow(10px 10px 10px rgba(255, 0, 0, 0.4))',
+           'drop-shadow(50px 50px 50px rgba(0, 0, 255, 0.8))'] },
+        1000);
+
+      testAnimationSamples(
+        animation, idlName,
+        [{ time: 500,
+            expected: 'drop-shadow(rgba(85, 0, 170, 0.6) 30px 30px 30px)' }]);
+    }, property + ': drop-shadow function' );
+
+    test(function(t) {
+      var idlName = propertyToIDL(property);
+      var target = createTestElement(t, setup);
+      var animation = target.animate(
+        { [idlName]:
+          ['brightness(0.1) contrast(0.1) grayscale(0.1) invert(0.1) ' +
+           'opacity(0.1) saturate(0.1) sepia(0.1)',
+           'brightness(0.5) contrast(0.5) grayscale(0.5) invert(0.5) ' +
+           'opacity(0.5) saturate(0.5) sepia(0.5)'] },
+        1000);
+
+      testAnimationSamples(animation, idlName,
+        [{ time: 500,
+           expected: 'brightness(0.3) contrast(0.3) grayscale(0.3) ' +
+           'invert(0.3) opacity(0.3) saturate(0.3) sepia(0.3)' }]);
+    }, property + ': percentage or numeric-specifiable functions' +
+       '(number value)');
+
+    test(function(t) {
+      var idlName = propertyToIDL(property);
+      var target = createTestElement(t, setup);
+      var animation = target.animate(
+        { [idlName]:
+          ['brightness(10%) contrast(10%) grayscale(10%) invert(10%) ' +
+           'opacity(10%) saturate(10%) sepia(10%)',
+           'brightness(50%) contrast(50%) grayscale(50%) invert(50%) ' +
+           'opacity(50%) saturate(50%) sepia(50%)'] },
+        1000);
+
+      testAnimationSamples(animation, idlName,
+        [{ time: 500,
+           expected: 'brightness(0.3) contrast(0.3) grayscale(0.3) ' +
+           'invert(0.3) opacity(0.3) saturate(0.3) sepia(0.3)' }]);
+    }, property + ': percentage or numeric-specifiable functions' +
+       '(percentage value)');
+
+    test(function(t) {
+      var idlName = propertyToIDL(property);
+      var target = createTestElement(t, setup);
+      var animation = target.animate(
+        { [idlName]:
+          // To make missing filter-function-lists, specified the grayscale.
+          ['grayscale(0)',
+           'grayscale(1) brightness(0) contrast(0) opacity(0) saturate(0)' ]},
+        1000);
+
+      testAnimationSamples(animation, idlName,
+        [{ time: 500,
+           expected: 'grayscale(0.5) brightness(0.5) contrast(0.5) ' +
+                     'opacity(0.5) saturate(0.5)' }]);
+    }, property + ': interpolate different length of filter-function-list ' +
+       ' with function which lacuna value is 1');
+
+    test(function(t) {
+      var idlName = propertyToIDL(property);
+      var target = createTestElement(t, setup);
+      var animation = target.animate(
+        { [idlName]:
+          // To make missing filter-function-lists, specified the opacity.
+          ['opoacity(1)',
+           'opacity(0) grayscale(1) invert(1) sepia(1) blur(10px)'] },
+        1000);
+
+      testAnimationSamples(animation, idlName,
+        [{ time: 500,
+           expected:
+           'opacity(0.5) grayscale(0.5) invert(0.5) sepia(0.5) blur(5px)' }]);
+    }, property + ': interpolate different length of filter-function-list ' +
+       ' with function which lacuna value is 0');
+
+    test(function(t) {
+      var idlName = propertyToIDL(property);
+      var target = createTestElement(t, setup);
+      target.style.color = "rgba(255, 0, 0, 0.4)";
+      var animation = target.animate(
+        { [idlName]:
+          ['blur(0px)',
+           'blur(10px) drop-shadow(10px 10px 10px rgba(0, 0, 255, 0.8))'] },
+        1000);
+
+      testAnimationSamples(animation, idlName,
+        [{ time: 500,
+           // The lacuna value of drop-shadow's color is taken from
+           // the color property.
+           expected: 'blur(5px) drop-shadow(rgba(85, 0, 170, 0.6) 5px 5px 5px' }]);
+    }, property + ': interpolate different length of filter-function-list ' +
+       'with drop-shadow function');
+
+    test(function(t) {
+      var idlName = propertyToIDL(property);
+      var target = createTestElement(t, setup);
+      var animation = target.animate({ [idlName]: ['none', 'blur(10px)'] },
+                                     1000);
+
+      testAnimationSamples(animation, idlName,
+        [{ time: 500, expected: 'blur(5px)' }]);
+    }, property + ': interpolate from none');
+
+    test(function(t) {
+      var idlName = propertyToIDL(property);
+      var target = createTestElement(t, setup);
+      var animation = target.animate(
+        { [idlName]:
+          ['blur(0px) url(\"#f1\")',
+           'blur(10px) url(\"#f2\")']},
+        1000);
+      testAnimationSamples(animation, idlName,
+        [{ time: 499, expected: 'blur(0px) url(\"#f1\")' },
+         { time: 500, expected: 'blur(10px) url(\"#f2\")' }]);
+    }, property + ': url function (interpoalte as discrete)');
+  },
+
   testAddition: function(property, setup) {
     test(function(t) {
       var idlName = propertyToIDL(property);
       var target = createTestElement(t, setup);
       target.style[idlName] = 'blur(10px)';
       var animation = target.animate({ [idlName]: ['blur(20px)',
                                                    'blur(50px)'] },
                                      { duration: 1000, composite: 'add' });