--- a/layout/style/StyleAnimationValue.cpp
+++ b/layout/style/StyleAnimationValue.cpp
@@ -774,25 +774,26 @@ StyleAnimationValue::Add(nsCSSPropertyID
   switch (commonUnit) {
     case eUnit_Color: {
       RGBAColorData color1 = ExtractColor(result);
       RGBAColorData color2 = ExtractColor(aA);
       result.mValue.mCSSValue->SetRGBAColorValue(
         AddWeightedColors(1.0, color1, 1, color2));
       break;
     }
-    case eUnit_Filter: {
-      // If |aA| is 'filter:none', don't concatinate anything, just return
+    case eUnit_Filter:
+    case eUnit_Shadow: {
+      // If |aA| has no function list, don't concatinate anything, just return
       // |aB| as the result.
       if (aA.GetCSSValueListValue()->mValue.GetUnit() == eCSSUnit_None) {
         break;
       }
       UniquePtr<nsCSSValueList> resultList(aA.GetCSSValueListValue()->Clone());
 
-      // If |aB| is not 'filter:none', concatinate it to |aA|, then return
+      // If |aB| has function list, concatinate it to |aA|, then return
       // the concatinated list.
       if (result.GetCSSValueListValue()->mValue.GetUnit() != eCSSUnit_None) {
         nsCSSValueList* listA = resultList.get();
         while (listA->mNext) {
           listA = listA->mNext;
         }
 
         listA->mNext = result.GetCSSValueListValue();

--- 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,8 +7,14 @@ 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
+

--- 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
@@ -299,18 +299,17 @@ var gCSSProperties = {
   'box-decoration-break': {
     // https://drafts.csswg.org/css-break/#propdef-box-decoration-break
     types: [
       { type: 'discrete', options: [ [ 'slice', 'clone' ] ] }
     ]
   },
   'box-shadow': {
     // https://drafts.csswg.org/css-backgrounds/#box-shadow
-    types: [
-    ]
+    types: [ 'boxShadowList' ],
   },
   'box-sizing': {
     // https://drafts.csswg.org/css-ui-4/#box-sizing
     types: [
       { type: 'discrete', options: [ [ 'content-box', 'border-box' ] ] }
     ]
   },
   'caption-side': {
@@ -1346,18 +1345,22 @@ var gCSSProperties = {
   'text-rendering': {
     // https://svgwg.org/svg2-draft/painting.html#TextRenderingProperty
     types: [
       { type: 'discrete', options: [ [ 'optimizeSpeed', 'optimizeLegibility' ] ] }
     ]
   },
   'text-shadow': {
     // https://drafts.csswg.org/css-text-decor-3/#propdef-text-shadow
-    types: [
-    ]
+    types: [ 'textShadowList' ],
+    setup: t => {
+      var element = createElement(t);
+      element.style.color = 'green';
+      return element;
+    }
   },
   'text-transform': {
     // https://drafts.csswg.org/css-text-3/#propdef-text-transform
     types: [
       { type: 'discrete', options: [ [ 'capitalize', 'uppercase' ] ] }
     ]
   },
   'touch-action': {

--- 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
@@ -915,21 +915,58 @@ const filterListType = {
                                                    'brightness(40%)'] },
                                      { duration: 1000, composite: 'add' });
       testAnimationSamples(animation, idlName,
         [ { time: 0,    expected: 'blur(10px) brightness(0.8)' }]);
     }, property + ': different filter functions');
   },
 };
 
+const textShadowListType = {
+  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';
+      var animation =
+        target.animate({ [idlName]: [ 'rgb(120, 120, 120) 10px 10px 10px',
+                                      'rgb(120, 120, 120) 10px 10px 10px'] },
+                       { duration: 1000, composite: 'add' });
+      testAnimationSamples(animation, idlName,
+        [ { time: 0, expected: 'rgb(0, 0, 0) 0px 0px 0px, ' +
+                               'rgb(120, 120, 120) 10px 10px 10px' }]);
+    }, property + ': shadow');
+  },
+};
+
+
+const boxShadowListType = {
+  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'] },
+                       { duration: 1000, composite: 'add' });
+      testAnimationSamples(animation, idlName,
+        [ { time: 0, expected: 'rgb(0, 0, 0) 0px 0px 0px 0px, ' +
+                               'rgb(120, 120, 120) 10px 10px 10px 0px' }]);
+    }, property + ': shadow');
+  },
+};
+
 const types = {
   color: colorType,
   discrete: discreteType,
   filterList: filterListType,
   integer: integerType,
   length: lengthType,
   percentage: percentageType,
   lengthPercentageOrCalc: lengthPercentageOrCalcType,
   positiveNumber: positiveNumberType,
   transformList: transformListType,
   visibility: visibilityType,
+  boxShadowList: boxShadowListType,
+  textShadowList: textShadowListType,
 };