Bug 1362897 - Add w-p-t of interpolating filter property. r?hiro draft
authorMantaroh Yoshinaga <mantaroh@gmail.com>
Fri, 09 Jun 2017 16:13:37 +0900
changeset 591573 ee631a11ed7e693243016900345f4408e3d18cfa
parent 591572 34107e019362b97e926d15da6a3ae7bf4357fad5
child 632546 85aea8745ead27df869aa1bee332c234f5914992
push id63091
push usermantaroh@gmail.com
push dateFri, 09 Jun 2017 07:21:29 +0000
reviewershiro
bugs1362897
milestone55.0a1
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/mozilla/meta/MANIFEST.json
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
@@ -174480,17 +174480,17 @@
    "9a7ed5f97f7eff3f6711325dea7dcca1323d3bde",
    "support"
   ],
   "encrypted-media/scripts/playback-temporary.js": [
    "ac2f3395cd63f1fe4c243265c59fc3f503f09926",
    "support"
   ],
   "encrypted-media/scripts/requestmediakeysystemaccess.js": [
-   "1a17a323605ff3882b8e9d8ac4b48f1a2d592d97",
+   "6a40a2db2ae0657bda978bcaee1a12f7670634bb",
    "support"
   ],
   "encrypted-media/scripts/reset-src-after-setmediakeys.js": [
    "5c82378ce1dd5c9991b78668d7cfd0e02c2d1b5e",
    "support"
   ],
   "encrypted-media/scripts/setmediakeys-again-after-playback.js": [
    "fc6557f201aad3dfcd5df83a96d40fdbf752d009",
@@ -191764,17 +191764,17 @@
    "febb81c38f530c81d9e9837df2c6d603225ecfd1",
    "testharness"
   ],
   "html/webappapis/idle-callbacks/callback-timeout.html": [
    "ba76964575cdf9b433f26c8a5d7a8183ab5c16e9",
    "testharness"
   ],
   "html/webappapis/idle-callbacks/callback-xhr-sync.html": [
-   "79b4a278f0e35646cfdffeebf8f0523e2772bc9b",
+   "272a688feaefc3c1ebab315ae9f4633f11a966f1",
    "testharness"
   ],
   "html/webappapis/idle-callbacks/cancel-invoked.html": [
    "30787d765fa435c1392bd852559042bf3c2e2553",
    "testharness"
   ],
   "html/webappapis/idle-callbacks/idlharness.html": [
    "520ee58982b43875f3caa08d7f46b9c6311be0b6",
@@ -193408,17 +193408,17 @@
    "ce791120236e6304b41ba3c085a8f9164f6da4ca",
    "testharness"
   ],
   "media-source/mediasource-addsourcebuffer.html": [
    "c65d474f5279b3238dccf50415b5995b9d6b80ca",
    "testharness"
   ],
   "media-source/mediasource-append-buffer.html": [
-   "56f0d90f006e300a412ec7ceb3c15a252ff303a5",
+   "fed1254d64c59b625af9745bbffcf5788ac5906e",
    "testharness"
   ],
   "media-source/mediasource-appendbuffer-quota-exceeded.html": [
    "1d98e36fdc1d93444b5a9809774ed0ce58b8680b",
    "testharness"
   ],
   "media-source/mediasource-appendwindow.html": [
    "5a39b4e58a18a4d878e6b710e4506262c2335519",
@@ -193568,17 +193568,17 @@
    "2936b8d06311bb9b796bf8e6c997c25a2e2d3709",
    "testharness"
   ],
   "media-source/mediasource-seek-during-pending-seek.html": [
    "44ff5284c77dab088494924fb8d11a3e7da48a5a",
    "testharness"
   ],
   "media-source/mediasource-seekable.html": [
-   "5f75983eeb4eed4095a625ec997c01eaba021166",
+   "6e92616bfb23e0d00e387688ff6754e68b1da35f",
    "testharness"
   ],
   "media-source/mediasource-sequencemode-append-buffer.html": [
    "8709f7b57b3a460909dc0456a70fc9b83b111fa4",
    "testharness"
   ],
   "media-source/mediasource-sourcebuffer-mode-timestamps.html": [
    "caa103e85e89c1bccda5e9d2b563bb66d7a44006",
@@ -213864,17 +213864,17 @@
    "fcbb50668ec1a3f7bdbd4331babda5b6e0295f2e",
    "support"
   ],
   "service-workers/service-worker/resources/fetch-response-taint-iframe.html": [
    "ce934e0f8f0a77ce236053f17c57f22bc44e4c27",
    "support"
   ],
   "service-workers/service-worker/resources/fetch-response-xhr-iframe.https.html": [
-   "5b29c0807de1229631a27ad3c9d66f288631938a",
+   "8a7db09b6c8f89414e6310c3744361f545f44758",
    "support"
   ],
   "service-workers/service-worker/resources/fetch-response-xhr-worker.js": [
    "f94ad37a6f751b96a95c325b0787c1f0c28d2418",
    "support"
   ],
   "service-workers/service-worker/resources/fetch-rewrite-worker.js": [
    "e390cdc4fa2324db03069193e2b049dde82fbc2d",
@@ -220016,21 +220016,21 @@
    "eee8ff07b3ec5e83e5f18305f5bc00eb72468443",
    "testharness"
   ],
   "web-animations/animation-model/animation-types/interpolation-per-property.html": [
    "55100f7d505bc8cbc966ced0d1337ed78534a553",
    "testharness"
   ],
   "web-animations/animation-model/animation-types/property-list.js": [
-   "a6860f4971e06078b5abdd57b3d7f57c0adff51e",
+   "a2579f817da7a123f1c4ff1ec1ec3d8675666201",
    "support"
   ],
   "web-animations/animation-model/animation-types/property-types.js": [
-   "ee3e5ae1923027f7e9dd80da11e765085a02c367",
+   "ff82234edb266488030658056ce1709d225a3a39",
    "support"
   ],
   "web-animations/animation-model/animation-types/spacing-keyframes-filters.html": [
    "bd771a8a18245560221d92ea3495f81918c09848",
    "testharness"
   ],
   "web-animations/animation-model/animation-types/spacing-keyframes-shapes.html": [
    "03c3ab6815cfa96c07d5f95b6059fb276c50a25f",
@@ -220588,17 +220588,17 @@
    "918bcadf034657dfcb679fd92c8a11efe34bfedf",
    "wdspec"
   ],
   "webdriver/actions/mouse.py": [
    "9b591d61e353548d0894db281abad0c006e26497",
    "wdspec"
   ],
   "webdriver/actions/sequence.py": [
-   "d80f382863e52ff223db735a2a551197e570774f",
+   "67f6d5d359fb5d24a1eab893e38857a3caf17e13",
    "wdspec"
   ],
   "webdriver/actions/special_keys.py": [
    "a3989b050d0616ee81e9444303508848f1c5459a",
    "wdspec"
   ],
   "webdriver/actions/support/__init__.py": [
    "da39a3ee5e6b4b0d3255bfef95601890afd80709",
@@ -220608,17 +220608,17 @@
    "636991372c21e52b623ed4ada9dfb675dd7f7e14",
    "support"
   ],
   "webdriver/actions/support/refine.py": [
    "0d244bffe67ef57be68aad99f1cbc7440ff80e27",
    "support"
   ],
   "webdriver/actions/support/test_actions_wdspec.html": [
-   "c56cc117512bf9a5b6378dcead8e2640493d23a4",
+   "a5a1cbce9f0ef66c19065cb8ba761c8fd27cc4ac",
    "support"
   ],
   "webdriver/conftest.py": [
    "6217bd14a1ec72f00d5a6a9014a9dc991e4289db",
    "wdspec"
   ],
   "webdriver/contexts.py": [
    "302a1a0cb246aef74f2c1d961a210d9de7e366c5",
--- 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,21 +1,18 @@
 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
--- a/testing/web-platform/mozilla/meta/MANIFEST.json
+++ b/testing/web-platform/mozilla/meta/MANIFEST.json
@@ -873,17 +873,17 @@
    "65143dd5377acc88b180460a46dd4bbb79cbf68e",
    "testharness"
   ],
   "focus/Selection_addRange_into_iframe_iframe.html": [
    "8e8eb8ee04e7a0879828de2c5fb2501c088504a4",
    "support"
   ],
   "focus/Selection_collapse.html": [
-   "15f83b9e158ff63fd3428c4d681ce4777b74198c",
+   "7367e997760a15f19b46545f371659c3093e28ae",
    "testharness"
   ],
   "focus/Selection_collapseToEnd.html": [
    "92b38fcaffdee31422690f35c3d9147452b3a2e2",
    "testharness"
   ],
   "focus/Selection_collapseToStart.html": [
    "e47f9a13430db7d9f2c18ee41f9445ea372f0a18",
--- 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)'] },
+                                     { duration: 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)'] },
+                                     { duration: 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)'] },
+                                     { duration: 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))'] },
+        { duration: 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)'] },
+        { duration: 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%)'] },
+        { duration: 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)' ]},
+        { duration: 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)'] },
+        { duration: 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))'] },
+        { duration: 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)'] },
+                                     { duration: 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\")']},
+        { duration: 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' });