--- a/layout/style/StyleAnimationValue.cpp
+++ b/layout/style/StyleAnimationValue.cpp
@@ -738,16 +738,19 @@ enum class ColorAdditionType {
   Unclamped // Do not clamp color channels after adding.
 };
 
 static UniquePtr<nsCSSValueList>
 AddWeightedFilterFunction(double aCoeff1, const nsCSSValueList* aList1,
                           double aCoeff2, const nsCSSValueList* aList2,
                           ColorAdditionType aColorAdditionType);
 
+static inline float
+GetNumberOrPercent(const nsCSSValue &aValue);
+
 // Return false if we cannot compute the distance between these filter
 // functions.
 static bool
 ComputeFilterSquareDistance(const nsCSSValueList* aList1,
                             const nsCSSValueList* aList2,
                             double& aSquareDistance)
 {
   MOZ_ASSERT(aList1, "expected filter list");
@@ -786,22 +789,29 @@ ComputeFilterSquareDistance(const nsCSSV
       break;
     }
     case eCSSKeyword_grayscale:
     case eCSSKeyword_invert:
     case eCSSKeyword_sepia:
     case eCSSKeyword_brightness:
     case eCSSKeyword_contrast:
     case eCSSKeyword_opacity:
-    case eCSSKeyword_saturate:
-      // TODO
+    case eCSSKeyword_saturate: {
+      double diff =
+        EnsureNotNan(GetNumberOrPercent(func2) - GetNumberOrPercent(func1));
+      aSquareDistance = diff * diff;
       break;
-    case eCSSKeyword_hue_rotate:
-      // TODO
+    }
+    case eCSSKeyword_hue_rotate: {
+      nsCSSValue v;
+      AddCSSValueAngle(1.0, func2, -1.0, func1, v);
+      double diff = v.GetAngleValueInRadians();
+      aSquareDistance = diff * diff;
       break;
+    }
     case eCSSKeyword_drop_shadow: {
       MOZ_ASSERT(!func1.GetListValue()->mNext && !func2.GetListValue()->mNext,
                  "drop-shadow filter func doesn't support lists");
       const nsCSSValue& shadow1 = func1.GetListValue()->mValue;
       const nsCSSValue& shadow2 = func2.GetListValue()->mValue;
 
       MOZ_ASSERT(shadow1.GetUnit() == eCSSUnit_Array, "wrong unit");
       MOZ_ASSERT(shadow2.GetUnit() == eCSSUnit_Array, "wrong unit");
@@ -1673,22 +1683,19 @@ StyleAnimationValue::ComputeDistance(nsC
     }
     case eUnit_Shape:
       aDistance = ComputeShapeDistance(aProperty,
                                        aStartValue.GetCSSValueArrayValue(),
                                        aEndValue.GetCSSValueArrayValue());
       return true;
 
     case eUnit_Filter:
-      ComputeFilterListDistance(aStartValue.GetCSSValueListValue(),
-                                aEndValue.GetCSSValueListValue(),
-                                aDistance);
-      // TODO: Remove the setting and return true in the later patch.
-      aDistance = 0.0;
-      return false;
+      return ComputeFilterListDistance(aStartValue.GetCSSValueListValue(),
+                                       aEndValue.GetCSSValueListValue(),
+                                       aDistance);
 
     case eUnit_Transform: {
       // FIXME: We don't have an official spec to define the distance of
       // two transform lists, but paced spacing (defined in Web Animations API)
       // needs this, so we implement this according to the concept of the
       // interpolation of two transform lists.
       // Issue: https://www.w3.org/TR/web-animations-1/#issue-789f9fd1