Bug 1356941 - Add box-shadow interpolation tests. r=birtles
authorHiroyuki Ikezoe <hikezoe@mozilla.com>
Mon, 24 Apr 2017 15:51:25 +0900
changeset 354662 5714c00effca79c5ba98352a0a7d949604b533e2
parent 354661 e3b8389a53ca058a1ab7e2d54ecace037244ebab
child 354663 d1b02c96cec5976bfa392d435aa84066d04a1e68
push id31708
push userihsiao@mozilla.com
push dateTue, 25 Apr 2017 03:16:26 +0000
treeherdermozilla-central@f0621f7f0520 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbirtles
bugs1356941
milestone55.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 1356941 - Add box-shadow interpolation tests. r=birtles MozReview-Commit-ID: D8rJY1wOd0j
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
@@ -211693,17 +211693,17 @@
    "55100f7d505bc8cbc966ced0d1337ed78534a553",
    "testharness"
   ],
   "web-animations/animation-model/animation-types/property-list.js": [
    "0d7f75b05e66da256fe4d2ecb17332ec7abccfd2",
    "support"
   ],
   "web-animations/animation-model/animation-types/property-types.js": [
-   "7b79c51f6dc5c33aae127406509770159815c290",
+   "782ea74bf1e3d7c3c7708f7c2354d895ab349bea",
    "support"
   ],
   "web-animations/animation-model/animation-types/spacing-keyframes-filters.html": [
    "bd771a8a18245560221d92ea3495f81918c09848",
    "testharness"
   ],
   "web-animations/animation-model/animation-types/spacing-keyframes-shapes.html": [
    "03c3ab6815cfa96c07d5f95b6059fb276c50a25f",
--- 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
@@ -7,25 +7,19 @@ prefs: [layout.css.contain.enabled:true,
 
   [flex-basis supports animating as combination units "%" and "em"]
     expected: FAIL
     bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1291187
 
   [filterList has testInterpolation function]
     expected: FAIL
 
-  [boxShadowList has testInterpolation function]
-    expected: FAIL
-
   [textShadowList has testInterpolation function]
     expected: FAIL
 
-  [box-shadow (type: boxShadowList) has testInterpolation function]
-    expected: FAIL
-
   [filter (type: filterList) has testInterpolation function]
     expected: FAIL
 
   [text-shadow (type: textShadowList) has testInterpolation function]
     expected: FAIL
 
   [word-spacing supports animating as combination units "px" and "%"]
     expected: FAIL
--- 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
@@ -934,16 +934,93 @@ const textShadowListType = {
         [ { time: 0, expected: 'rgb(0, 0, 0) 0px 0px 0px, ' +
                                'rgb(120, 120, 120) 10px 10px 10px' }]);
     }, property + ': shadow');
   },
 };
 
 
 const boxShadowListType = {
+  testInterpolation: function(property, setup) {
+    test(function(t) {
+      var idlName = propertyToIDL(property);
+      var target = createTestElement(t, setup);
+      var animation =
+        target.animate({ [idlName]: [ 'none',
+                                      'rgb(100, 100, 100) 10px 10px 10px 0px'] },
+                       { duration: 1000, fill: 'both' });
+      testAnimationSamples(animation, idlName,
+                                  // Premultiplied
+        [{ time: 500,  expected: 'rgba(100, 100, 100, 0.5) 5px 5px 5px 0px' }]);
+    }, property + ': from none to other');
+
+    test(function(t) {
+      var idlName = propertyToIDL(property);
+      var target = createTestElement(t, setup);
+      var animation =
+        target.animate({ [idlName]: [ 'rgb(100, 100, 100) 10px 10px 10px 0px',
+                                      'none' ] },
+                       { duration: 1000, fill: 'both' });
+      testAnimationSamples(animation, idlName,
+                                  // Premultiplied
+        [{ time: 500,  expected: 'rgba(100, 100, 100, 0.5) 5px 5px 5px 0px' }]);
+    }, property + ': from other to none');
+
+    test(function(t) {
+      var idlName = propertyToIDL(property);
+      var target = createTestElement(t, setup);
+      var animation =
+        target.animate({ [idlName]: [ 'rgb(0, 0, 0) 0px 0px 0px 0px',
+                                      'rgb(100, 100, 100) 10px 10px 10px 0px'] },
+                       { duration: 1000, fill: 'both' });
+      testAnimationSamples(animation, idlName,
+        [{ time: 500,  expected: 'rgb(50, 50, 50) 5px 5px 5px 0px' }]);
+    }, property + ': single shadow');
+
+    test(function(t) {
+      var idlName = propertyToIDL(property);
+      var target = createTestElement(t, setup);
+      var animation =
+        target.animate({ [idlName]: [ 'rgb(0, 0, 0) 0px 0px 0px 0px, '
+                                    + 'rgb(200, 200, 200) 20px 20px 20px 20px',
+                                      'rgb(100, 100, 100) 10px 10px 10px 0px, '
+                                    + 'rgb(100, 100, 100) 10px 10px 10px 0px'] },
+                       { duration: 1000, fill: 'both' });
+      testAnimationSamples(animation, idlName,
+        [{ time: 500,  expected: 'rgb(50, 50, 50) 5px 5px 5px 0px, '
+                               + 'rgb(150, 150, 150) 15px 15px 15px 10px' }]);
+    }, property + ': shadow list');
+
+    test(function(t) {
+      var idlName = propertyToIDL(property);
+      var target = createTestElement(t, setup);
+      var animation =
+        target.animate({ [idlName]: [ 'rgb(200, 200, 200) 20px 20px 20px 20px',
+                                      'rgb(100, 100, 100) 10px 10px 10px 0px, '
+                                    + 'rgb(100, 100, 100) 10px 10px 10px 0px'] },
+                       { duration: 1000, fill: 'both' });
+      testAnimationSamples(animation, idlName,
+        [{ time: 500,  expected: 'rgb(150, 150, 150) 15px 15px 15px 10px, '
+                               + 'rgba(100, 100, 100, 0.5) 5px 5px 5px 0px' }]);
+    }, property + ': mismatched list length (from shorter to longer)');
+
+    test(function(t) {
+      var idlName = propertyToIDL(property);
+      var target = createTestElement(t, setup);
+      var animation =
+        target.animate({ [idlName]: [ 'rgb(100, 100, 100) 10px 10px 10px 0px, '
+                                    + 'rgb(100, 100, 100) 10px 10px 10px 0px',
+                                      'rgb(200, 200, 200) 20px 20px 20px 20px']},
+                       { duration: 1000, fill: 'both' });
+      testAnimationSamples(animation, idlName,
+        [{ time: 500,  expected: 'rgb(150, 150, 150) 15px 15px 15px 10px, '
+                               + 'rgba(100, 100, 100, 0.5) 5px 5px 5px 0px' }]);
+    }, property + ': mismatched list length (from longer to shorter)');
+  },
+
   testAddition: function(property, setup) {
     test(function(t) {
       var idlName = propertyToIDL(property);
       var target = createTestElement(t, setup);
       target.style[idlName] = 'rgb(0, 0, 0) 0px 0px 0px 0px';
       var animation =
         target.animate({ [idlName]: [ 'rgb(120, 120, 120) 10px 10px 10px 0px',
                                       'rgb(120, 120, 120) 10px 10px 10px 0px'] },