diff --git a/servo/components/style/properties/helpers/animated_properties.mako.rs b/servo/components/style/properties/helpers/animated_properties.mako.rs
index 0a9e5cd3ae60..04af291b3ec5 100644
--- a/servo/components/style/properties/helpers/animated_properties.mako.rs
+++ b/servo/components/style/properties/helpers/animated_properties.mako.rs
@@ -29,11 +29,12 @@ use std::fmt;
 use style_traits::ToCss;
 use super::ComputedValues;
 use values::CSSFloat;
-use values::Either;
+use values::{Auto, Either};
 use values::computed::{Angle, LengthOrPercentageOrAuto, LengthOrPercentageOrNone};
 use values::computed::{BorderRadiusSize, ClipRect, LengthOrNone};
 use values::computed::{CalcLengthOrPercentage, Context, LengthOrPercentage};
 use values::computed::{MaxLength, MinLength};
+use values::computed::ColorOrAuto;
 use values::computed::position::{HorizontalPosition, Position, VerticalPosition};
 use values::computed::ToComputedValue;
 use values::specified::Angle as SpecifiedAngle;
@@ -1796,3 +1797,21 @@ impl Interpolate for TransformList {
     }
 }
 
+/// https://drafts.csswg.org/css-transitions-1/#animtype-color
+impl Interpolate for ColorOrAuto {
+    #[inline]
+    fn interpolate(&self, other: &Self, progress: f64) -> Result<Self, ()> {
+        match (*self, *other) {
+            (Either::First(ref this), Either::First(ref other)) => {
+                this.interpolate(&other, progress).map(Either::First)
+            },
+            (Either::Second(Auto), Either::Second(Auto)) => {
+                Ok(Either::Second(Auto))
+            },
+            _ => {
+                let interpolated = if progress < 0.5 { *self } else { *other };
+                Ok(interpolated)
+            }
+        }
+    }
+}
diff --git a/servo/components/style/properties/longhand/ui.mako.rs b/servo/components/style/properties/longhand/ui.mako.rs
index 8b8d902c37da..3cd6668912b3 100644
--- a/servo/components/style/properties/longhand/ui.mako.rs
+++ b/servo/components/style/properties/longhand/ui.mako.rs
@@ -30,3 +30,10 @@ ${helpers.single_keyword("-moz-window-dragging", "default drag no-drag", product
                          gecko_enum_prefix="StyleWindowDragging",
                          animatable=False,
                          spec="None (Nonstandard Firefox-only property)")}
+
+${helpers.predefined_type("caret-color",
+                          "ColorOrAuto",
+                          "Either::Second(Auto)",
+                          spec="https://drafts.csswg.org/css-ui/#caret-color",
+                          animatable="True",
+                          products="none")}
diff --git a/servo/components/style/values/computed/mod.rs b/servo/components/style/values/computed/mod.rs
index 3652af994847..9f3c827b9443 100644
--- a/servo/components/style/values/computed/mod.rs
+++ b/servo/components/style/values/computed/mod.rs
@@ -363,3 +363,6 @@ impl ClipRectOrAuto {
         }
     }
 }
+
+/// <color> | auto
+pub type ColorOrAuto = Either<CSSColor, Auto>;
diff --git a/servo/components/style/values/specified/mod.rs b/servo/components/style/values/specified/mod.rs
index 7584ec7bee86..5c60141c689e 100644
--- a/servo/components/style/values/specified/mod.rs
+++ b/servo/components/style/values/specified/mod.rs
@@ -998,3 +998,6 @@ impl Parse for ClipRect {
 
 /// rect(...) | auto
 pub type ClipRectOrAuto = Either<ClipRect, Auto>;
+
+/// <color> | auto
+pub type ColorOrAuto = Either<CSSColor, Auto>;
diff --git a/servo/tests/unit/style/parsing/ui.rs b/servo/tests/unit/style/parsing/ui.rs
index c364e47bce50..1687df848489 100644
--- a/servo/tests/unit/style/parsing/ui.rs
+++ b/servo/tests/unit/style/parsing/ui.rs
@@ -2,11 +2,13 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-use cssparser::Parser;
+use cssparser::{Color, Parser, RGBA};
 use media_queries::CSSErrorReporterTest;
 use servo_url::ServoUrl;
 use style::parser::ParserContext;
 use style::stylesheets::Origin;
+use style::values::{Auto, Either};
+use style::values::specified::CSSColor;
 use style_traits::ToCss;
 
 #[test]
@@ -30,3 +32,24 @@ fn test_moz_user_select() {
     let mut negative = Parser::new("potato");
     assert!(_moz_user_select::parse(&context, &mut negative).is_err());
 }
+
+#[test]
+fn test_caret_color() {
+    use style::properties::longhands::caret_color;
+
+    let auto = parse_longhand!(caret_color, "auto");
+    assert_eq!(auto, Either::Second(Auto));
+
+    let blue_color = CSSColor {
+        parsed: Color::RGBA(RGBA {
+            red: 0,
+            green: 0,
+            blue: 255,
+            alpha: 255,
+        }),
+        authored: Some(String::from("blue").into_boxed_str()),
+    };
+
+    let color = parse_longhand!(caret_color, "blue");
+    assert_eq!(color, Either::First(blue_color));
+}