--- a/dom/svg/SVGFEDropShadowElement.cpp
+++ b/dom/svg/SVGFEDropShadowElement.cpp
@@ -104,19 +104,19 @@ SVGFEDropShadowElement::GetPrimitiveDesc
                             SVGContentUtils::Y, &mNumberAttributes[DY])));
 
   FilterPrimitiveDescription descr(PrimitiveType::DropShadow);
   descr.Attributes().Set(eDropShadowStdDeviation, Size(stdX, stdY));
   descr.Attributes().Set(eDropShadowOffset, offset);
 
   nsIFrame* frame = GetPrimaryFrame();
   if (frame) {
-    ComputedStyle* style = frame->Style();
-    Color color(Color::FromABGR(style->StyleSVGReset()->mFloodColor));
-    color.a *= style->StyleSVGReset()->mFloodOpacity;
+    const nsStyleSVGReset* styleSVGReset = frame->Style()->StyleSVGReset();
+    Color color(Color::FromABGR(styleSVGReset->mFloodColor.CalcColor(frame)));
+    color.a *= styleSVGReset->mFloodOpacity;
     descr.Attributes().Set(eDropShadowColor, color);
   } else {
     descr.Attributes().Set(eDropShadowColor, Color());
   }
   return descr;
 }
 
 bool

--- a/dom/svg/SVGFEFloodElement.cpp
+++ b/dom/svg/SVGFEFloodElement.cpp
@@ -38,19 +38,19 @@ FilterPrimitiveDescription
 SVGFEFloodElement::GetPrimitiveDescription(nsSVGFilterInstance* aInstance,
                                            const IntRect& aFilterSubregion,
                                            const nsTArray<bool>& aInputsAreTainted,
                                            nsTArray<RefPtr<SourceSurface>>& aInputImages)
 {
   FilterPrimitiveDescription descr(PrimitiveType::Flood);
   nsIFrame* frame = GetPrimaryFrame();
   if (frame) {
-    ComputedStyle* style = frame->Style();
-    Color color(Color::FromABGR(style->StyleSVGReset()->mFloodColor));
-    color.a *= style->StyleSVGReset()->mFloodOpacity;
+    const nsStyleSVGReset* styleSVGReset = frame->Style()->StyleSVGReset();
+    Color color(Color::FromABGR(styleSVGReset->mFloodColor.CalcColor(frame)));
+    color.a *= styleSVGReset->mFloodOpacity;
     descr.Attributes().Set(eFloodColor, color);
   } else {
     descr.Attributes().Set(eFloodColor, Color());
   }
   return descr;
 }
 
 //----------------------------------------------------------------------

--- a/dom/svg/nsSVGFilters.cpp
+++ b/dom/svg/nsSVGFilters.cpp
@@ -490,18 +490,18 @@ FilterPrimitiveDescription
 nsSVGFELightingElement::AddLightingAttributes(const FilterPrimitiveDescription& aDescription,
                                               nsSVGFilterInstance* aInstance)
 {
   nsIFrame* frame = GetPrimaryFrame();
   if (!frame) {
     return FilterPrimitiveDescription(PrimitiveType::Empty);
   }
 
-  ComputedStyle* style = frame->Style();
-  Color color(Color::FromABGR(style->StyleSVGReset()->mLightingColor));
+  const nsStyleSVGReset* styleSVGReset = frame->Style()->StyleSVGReset();
+  Color color(Color::FromABGR(styleSVGReset->mLightingColor.CalcColor(frame)));
   color.a = 1.f;
   float surfaceScale = mNumberAttributes[SURFACE_SCALE].GetAnimValue();
   Size kernelUnitLength =
     GetKernelUnitLength(aInstance, &mNumberPairAttributes[KERNEL_UNIT_LENGTH]);
 
   if (kernelUnitLength.width <= 0 || kernelUnitLength.height <= 0) {
     // According to spec, A negative or zero value is an error. See link below for details.
     // https://www.w3.org/TR/SVG/filters.html#feSpecularLightingKernelUnitLengthAttribute

--- a/layout/style/nsComputedDOMStyle.cpp
+++ b/layout/style/nsComputedDOMStyle.cpp
@@ -6401,33 +6401,33 @@ nsComputedDOMStyle::DoGetTextRendering()
                                    nsCSSProps::kTextRenderingKTable));
   return val.forget();
 }
 
 already_AddRefed<CSSValue>
 nsComputedDOMStyle::DoGetFloodColor()
 {
   RefPtr<nsROCSSPrimitiveValue> val = new nsROCSSPrimitiveValue;
-  SetToRGBAColor(val, StyleSVGReset()->mFloodColor);
+  SetValueFromComplexColor(val, StyleSVGReset()->mFloodColor);
   return val.forget();
 }
 
 already_AddRefed<CSSValue>
 nsComputedDOMStyle::DoGetLightingColor()
 {
   RefPtr<nsROCSSPrimitiveValue> val = new nsROCSSPrimitiveValue;
-  SetToRGBAColor(val, StyleSVGReset()->mLightingColor);
+  SetValueFromComplexColor(val, StyleSVGReset()->mLightingColor);
   return val.forget();
 }
 
 already_AddRefed<CSSValue>
 nsComputedDOMStyle::DoGetStopColor()
 {
   RefPtr<nsROCSSPrimitiveValue> val = new nsROCSSPrimitiveValue;
-  SetToRGBAColor(val, StyleSVGReset()->mStopColor);
+  SetValueFromComplexColor(val, StyleSVGReset()->mStopColor);
   return val.forget();
 }
 
 void
 nsComputedDOMStyle::BoxValuesToString(nsAString& aString,
                                       const nsTArray<nsStyleCoord>& aBoxValues,
                                       bool aClampNegativeCalc)
 {

--- a/layout/style/nsStyleStruct.cpp
+++ b/layout/style/nsStyleStruct.cpp
@@ -1219,19 +1219,19 @@ nsStyleFilter::SetDropShadow(nsCSSShadow
   mType = NS_STYLE_FILTER_DROP_SHADOW;
 }
 
 // --------------------
 // nsStyleSVGReset
 //
 nsStyleSVGReset::nsStyleSVGReset(const nsPresContext* aContext)
   : mMask(nsStyleImageLayers::LayerType::Mask)
-  , mStopColor(NS_RGB(0, 0, 0))
-  , mFloodColor(NS_RGB(0, 0, 0))
-  , mLightingColor(NS_RGB(255, 255, 255))
+  , mStopColor(StyleComplexColor::FromColor(NS_RGB(0, 0, 0)))
+  , mFloodColor(StyleComplexColor::FromColor(NS_RGB(0, 0, 0)))
+  , mLightingColor(StyleComplexColor::FromColor(NS_RGB(255, 255, 255)))
   , mStopOpacity(1.0f)
   , mFloodOpacity(1.0f)
   , mDominantBaseline(NS_STYLE_DOMINANT_BASELINE_AUTO)
   , mVectorEffect(NS_STYLE_VECTOR_EFFECT_NONE)
   , mMaskType(NS_STYLE_MASK_TYPE_LUMINANCE)
 {
   MOZ_COUNT_CTOR(nsStyleSVGReset);
 }
@@ -3334,27 +3334,23 @@ nsStyleBackground::HasFixedBackground(ns
     }
   }
   return false;
 }
 
 nscolor
 nsStyleBackground::BackgroundColor(const nsIFrame* aFrame) const
 {
-  return BackgroundColor(aFrame->Style());
+  return mBackgroundColor.CalcColor(aFrame);
 }
 
 nscolor
 nsStyleBackground::BackgroundColor(mozilla::ComputedStyle* aStyle) const
 {
-  // In majority of cases, background-color should just be a numeric color.
-  // In that case, we can skip resolving StyleColor().
-  return mBackgroundColor.IsNumericColor()
-    ? mBackgroundColor.mColor
-    : mBackgroundColor.CalcColor(aStyle);
+  return mBackgroundColor.CalcColor(aStyle);
 }
 
 bool
 nsStyleBackground::IsTransparent(const nsIFrame* aFrame) const
 {
   return IsTransparent(aFrame->Style());
 }
 

--- a/layout/style/nsStyleStruct.h
+++ b/layout/style/nsStyleStruct.h
@@ -3228,19 +3228,19 @@ struct MOZ_NEEDS_MEMMOVABLE_MEMBERS nsSt
   bool HasMask() const;
 
   bool HasNonScalingStroke() const {
     return mVectorEffect == NS_STYLE_VECTOR_EFFECT_NON_SCALING_STROKE;
   }
 
   nsStyleImageLayers    mMask;
   mozilla::StyleShapeSource mClipPath;// [reset]
-  nscolor          mStopColor;        // [reset]
-  nscolor          mFloodColor;       // [reset]
-  nscolor          mLightingColor;    // [reset]
+  mozilla::StyleComplexColor mStopColor;     // [reset]
+  mozilla::StyleComplexColor mFloodColor;    // [reset]
+  mozilla::StyleComplexColor mLightingColor; // [reset]
 
   float            mStopOpacity;      // [reset]
   float            mFloodOpacity;     // [reset]
 
   uint8_t          mDominantBaseline; // [reset] see nsStyleConsts.h
   uint8_t          mVectorEffect;     // [reset] see nsStyleConsts.h
   uint8_t          mMaskType;         // [reset] see nsStyleConsts.h
 };

--- a/layout/style/test/test_transitions_per_property.html
+++ b/layout/style/test/test_transitions_per_property.html
@@ -139,17 +139,17 @@ var supported_properties = {
     "flex-basis": [ test_length_transition, test_percent_transition,
                     test_length_clamped, test_percent_clamped,
                     test_flex_basis_content_transition ],
     "flex-grow": [ test_float_zeroToOne_transition,
                    test_float_aboveOne_transition ],
     "flex-shrink": [ test_float_zeroToOne_transition,
                      test_float_aboveOne_transition ],
     "flood-color": [ test_color_transition,
-                     test_currentcolor_transition ],
+                     test_true_currentcolor_transition ],
     "flood-opacity" : [ test_float_zeroToOne_transition,
                         // opacity is clamped in computed style
                         // (not parsing/interpolation)
                         test_float_zeroToOne_clamped ],
     "font-size": [ test_length_transition, test_percent_transition,
                    test_length_percent_calc_transition,
                    test_length_clamped, test_percent_clamped ],
     "font-size-adjust": [ test_float_zeroToOne_transition,
@@ -163,17 +163,17 @@ var supported_properties = {
     "height": [ test_length_transition, test_percent_transition,
                 test_length_percent_calc_transition,
                 test_length_clamped, test_percent_clamped ],
     "left": [ test_length_transition, test_percent_transition,
               test_length_percent_calc_transition,
               test_length_unclamped, test_percent_unclamped ],
     "letter-spacing": [ test_length_transition, test_length_unclamped ],
     "lighting-color": [ test_color_transition,
-                        test_currentcolor_transition ],
+                        test_true_currentcolor_transition ],
     // NOTE: when calc() is supported on 'line-height', we should add
     // test_length_percent_calc_transition.
     "line-height": [ test_length_transition, test_percent_transition,
                      test_length_clamped, test_percent_clamped ],
     "margin-bottom": [ test_length_transition, test_percent_transition,
                        test_length_percent_calc_transition,
                        test_length_unclamped, test_percent_unclamped ],
     "margin-left": [ test_length_transition, test_percent_transition,
@@ -236,17 +236,17 @@ var supported_properties = {
     "perspective": [ test_length_transition ],
     "perspective-origin": [ test_length_pair_transition,
                             test_length_percent_pair_transition,
                             test_length_percent_pair_unclamped ],
     "right": [ test_length_transition, test_percent_transition,
                test_length_percent_calc_transition,
                test_length_unclamped, test_percent_unclamped ],
     "stop-color": [ test_color_transition,
-                    test_currentcolor_transition ],
+                    test_true_currentcolor_transition ],
     "stop-opacity" : [ test_float_zeroToOne_transition,
                        // opacity is clamped in computed style
                        // (not parsing/interpolation)
                        test_float_zeroToOne_clamped ],
     "stroke": [ test_color_transition,
                 test_currentcolor_transition ],
     "stroke-dasharray": [ test_dasharray_transition ],
     // NOTE: when calc() is supported on 'stroke-dashoffset', we should

--- a/layout/svg/nsSVGGradientFrame.cpp
+++ b/layout/svg/nsSVGGradientFrame.cpp
@@ -220,19 +220,20 @@ static void GetStopInformation(nsIFrame*
                                float *aStopOpacity)
 {
   nsIContent* stopContent = aStopFrame->GetContent();
   MOZ_ASSERT(stopContent && stopContent->IsSVGElement(nsGkAtoms::stop));
 
   static_cast<SVGStopElement*>(stopContent)->
     GetAnimatedNumberValues(aOffset, nullptr);
 
+  const nsStyleSVGReset* styleSVGReset = aStopFrame->StyleSVGReset();
   *aOffset = mozilla::clamped(*aOffset, 0.0f, 1.0f);
-  *aStopColor = aStopFrame->StyleSVGReset()->mStopColor;
-  *aStopOpacity = aStopFrame->StyleSVGReset()->mStopOpacity;
+  *aStopColor = styleSVGReset->mStopColor.CalcColor(aStopFrame);
+  *aStopOpacity = styleSVGReset->mStopOpacity;
 }
 
 already_AddRefed<gfxPattern>
 nsSVGGradientFrame::GetPaintServerPattern(nsIFrame* aSource,
                                           const DrawTarget* aDrawTarget,
                                           const gfxMatrix& aContextMatrix,
                                           nsStyleSVGPaint nsStyleSVG::*aFillOrStroke,
                                           float aGraphicOpacity,
@@ -258,20 +259,22 @@ nsSVGGradientFrame::GetPaintServerPatter
   // SVG specification says that no stops should be treated like
   // the corresponding fill or stroke had "none" specified.
   if (nStops == 0) {
     RefPtr<gfxPattern> pattern = new gfxPattern(Color());
     return do_AddRef(new gfxPattern(Color()));
   }
 
   if (nStops == 1 || GradientVectorLengthIsZero()) {
+    auto lastStopFrame = stopFrames[nStops-1];
+    auto svgReset = lastStopFrame->StyleSVGReset();
     // The gradient paints a single colour, using the stop-color of the last
     // gradient step if there are more than one.
-    float stopOpacity = stopFrames[nStops-1]->StyleSVGReset()->mStopOpacity;
-    nscolor stopColor = stopFrames[nStops-1]->StyleSVGReset()->mStopColor;
+    float stopOpacity = svgReset->mStopOpacity;
+    nscolor stopColor = svgReset->mStopColor.CalcColor(lastStopFrame);
 
     Color stopColor2 = Color::FromABGR(stopColor);
     stopColor2.a *= stopOpacity * aGraphicOpacity;
     return do_AddRef(new gfxPattern(stopColor2));
   }
 
   // Get the transform list (if there is one). We do this after the returns
   // above since this call can be expensive when "gradientUnits" is set to

--- a/servo/components/style/properties/longhand/svg.mako.rs
+++ b/servo/components/style/properties/longhand/svg.mako.rs
@@ -16,49 +16,49 @@
 ${helpers.single_keyword("vector-effect", "none non-scaling-stroke",
                          products="gecko", animation_value_type="discrete",
                          spec="https://www.w3.org/TR/SVGTiny12/painting.html#VectorEffectProperty")}
 
 // Section 13 - Gradients and Patterns
 
 ${helpers.predefined_type(
     "stop-color",
-    "RGBAColor",
-    "RGBA::new(0, 0, 0, 255)",
+    "Color",
+    "RGBA::new(0, 0, 0, 255).into()",
     products="gecko",
     animation_value_type="AnimatedRGBA",
     spec="https://www.w3.org/TR/SVGTiny12/painting.html#StopColorProperty",
 )}
 
 ${helpers.predefined_type("stop-opacity", "Opacity", "1.0",
                           products="gecko",
                           animation_value_type="ComputedValue",
                           spec="https://www.w3.org/TR/SVGTiny12/painting.html#propdef-stop-opacity")}
 
 // Section 15 - Filter Effects
 
 ${helpers.predefined_type(
     "flood-color",
-    "RGBAColor",
-    "RGBA::new(0, 0, 0, 255)",
+    "Color",
+    "RGBA::new(0, 0, 0, 255).into()",
     products="gecko",
-    animation_value_type="AnimatedRGBA",
+    animation_value_type="AnimatedColor",
     spec="https://www.w3.org/TR/SVG/filters.html#FloodColorProperty",
 )}
 
 ${helpers.predefined_type("flood-opacity", "Opacity",
                           "1.0", products="gecko", animation_value_type="ComputedValue",
                           spec="https://www.w3.org/TR/SVG/filters.html#FloodOpacityProperty")}
 
 ${helpers.predefined_type(
     "lighting-color",
-    "RGBAColor",
-    "RGBA::new(255, 255, 255, 255)",
+    "Color",
+    "RGBA::new(255, 255, 255, 255).into()",
     products="gecko",
-    animation_value_type="AnimatedRGBA",
+    animation_value_type="AnimatedColor",
     spec="https://www.w3.org/TR/SVG/filters.html#LightingColorProperty",
 )}
 
 // CSS Masking Module Level 1
 // https://drafts.fxtf.org/css-masking
 ${helpers.single_keyword("mask-type", "luminance alpha",
                          products="gecko", animation_value_type="discrete",
                          spec="https://drafts.fxtf.org/css-masking/#propdef-mask-type")}