diff --git a/components/style/properties/helpers/animated_properties.mako.rs b/components/style/properties/helpers/animated_properties.mako.rs
index cfc7947f23d..38ac83a941d 100644
--- a/components/style/properties/helpers/animated_properties.mako.rs
+++ b/components/style/properties/helpers/animated_properties.mako.rs
@@ -867,27 +867,6 @@ impl Animatable for i32 {
     }
 }
 
-/// https://drafts.csswg.org/css-transitions/#animtype-number
-impl Animatable for Angle {
-    #[inline]
-    fn add_weighted(&self, other: &Angle, self_portion: f64, other_portion: f64) -> Result<Self, ()> {
-        match (*self, *other) {
-            % for angle_type in [ 'Degree', 'Gradian', 'Turn' ]:
-            (Angle::${angle_type}(val1), Angle::${angle_type}(val2)) => {
-                Ok(Angle::${angle_type}(
-                    try!(val1.add_weighted(&val2, self_portion, other_portion))
-                ))
-            }
-            % endfor
-            _ => {
-                self.radians()
-                    .add_weighted(&other.radians(), self_portion, other_portion)
-                    .map(Angle::from_radians)
-            }
-        }
-    }
-}
-
 /// https://drafts.csswg.org/css-transitions/#animtype-visibility
 impl Animatable for Visibility {
     #[inline]
diff --git a/components/style/values/computed/angle.rs b/components/style/values/computed/angle.rs
new file mode 100644
index 00000000000..eea46bbe388
--- /dev/null
+++ b/components/style/values/computed/angle.rs
@@ -0,0 +1,116 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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/. */
+
+//! Computed angles.
+
+use properties::animated_properties::Animatable;
+use std::{f32, f64, fmt};
+use std::f64::consts::PI;
+use style_traits::ToCss;
+use values::CSSFloat;
+use values::distance::{ComputeSquaredDistance, SquaredDistance};
+
+/// A computed angle.
+#[cfg_attr(feature = "servo", derive(HeapSizeOf, Deserialize, Serialize))]
+#[derive(Clone, Copy, Debug, HasViewportPercentage, PartialEq, PartialOrd)]
+pub enum Angle {
+    /// An angle with degree unit.
+    Degree(CSSFloat),
+    /// An angle with gradian unit.
+    Gradian(CSSFloat),
+    /// An angle with radian unit.
+    Radian(CSSFloat),
+    /// An angle with turn unit.
+    Turn(CSSFloat),
+}
+
+impl Angle {
+    /// Creates a computed `Angle` value from a radian amount.
+    pub fn from_radians(radians: CSSFloat) -> Self {
+        Angle::Radian(radians)
+    }
+
+    /// Returns the amount of radians this angle represents.
+    #[inline]
+    pub fn radians(&self) -> CSSFloat {
+        self.radians64().min(f32::MAX as f64).max(f32::MIN as f64) as f32
+    }
+
+    /// Returns the amount of radians this angle represents as a `f64`.
+    ///
+    /// Gecko stores angles as singles, but does this computation using doubles.
+    /// See nsCSSValue::GetAngleValueInRadians.
+    /// This is significant enough to mess up rounding to the nearest
+    /// quarter-turn for 225 degrees, for example.
+    #[inline]
+    pub fn radians64(&self) -> f64 {
+        const RAD_PER_DEG: f64 = PI / 180.0;
+        const RAD_PER_GRAD: f64 = PI / 200.0;
+        const RAD_PER_TURN: f64 = PI * 2.0;
+
+        let radians = match *self {
+            Angle::Degree(val) => val as f64 * RAD_PER_DEG,
+            Angle::Gradian(val) => val as f64 * RAD_PER_GRAD,
+            Angle::Turn(val) => val as f64 * RAD_PER_TURN,
+            Angle::Radian(val) => val as f64,
+        };
+        radians.min(f64::MAX).max(f64::MIN)
+    }
+
+    /// Returns an angle that represents a rotation of zero radians.
+    pub fn zero() -> Self {
+        Angle::Radian(0.0)
+    }
+}
+
+/// https://drafts.csswg.org/css-transitions/#animtype-number
+impl Animatable for Angle {
+    #[inline]
+    fn add_weighted(&self, other: &Self, self_portion: f64, other_portion: f64) -> Result<Self, ()> {
+        match (self, other) {
+            (&Angle::Degree(ref this), &Angle::Degree(ref other)) => {
+                Ok(Angle::Degree(this.add_weighted(other, self_portion, other_portion)?))
+            },
+            (&Angle::Gradian(ref this), &Angle::Gradian(ref other)) => {
+                Ok(Angle::Gradian(this.add_weighted(other, self_portion, other_portion)?))
+            },
+            (&Angle::Turn(ref this), &Angle::Turn(ref other)) => {
+                Ok(Angle::Turn(this.add_weighted(other, self_portion, other_portion)?))
+            },
+            _ => {
+                self.radians()
+                    .add_weighted(&other.radians(), self_portion, other_portion)
+                    .map(Angle::from_radians)
+            }
+        }
+    }
+}
+
+impl ComputeSquaredDistance for Angle {
+    #[inline]
+    fn compute_squared_distance(&self, other: &Self) -> Result<SquaredDistance, ()> {
+        // Use the formula for calculating the distance between angles defined in SVG:
+        // https://www.w3.org/TR/SVG/animate.html#complexDistances
+        self.radians64().compute_squared_distance(&other.radians64())
+    }
+}
+
+impl ToCss for Angle {
+    fn to_css<W>(&self, dest: &mut W) -> fmt::Result
+    where
+        W: fmt::Write,
+    {
+        let mut write = |value: CSSFloat, unit: &str| {
+            value.to_css(dest)?;
+            dest.write_str(unit)
+        };
+
+        match *self {
+            Angle::Degree(val) => write(val, "deg"),
+            Angle::Gradian(val) => write(val, "grad"),
+            Angle::Radian(val) => write(val, "rad"),
+            Angle::Turn(val) => write(val, "turn"),
+        }
+    }
+}
diff --git a/components/style/values/computed/mod.rs b/components/style/values/computed/mod.rs
index 43076d1f546..759e236bae9 100644
--- a/components/style/values/computed/mod.rs
+++ b/components/style/values/computed/mod.rs
@@ -15,14 +15,11 @@ use properties::{ComputedValues, StyleBuilder};
 #[cfg(feature = "servo")]
 use servo_url::ServoUrl;
 use std::f32;
-use std::f64;
-use std::f64::consts::PI;
 use std::fmt;
 #[cfg(feature = "servo")]
 use std::sync::Arc;
 use style_traits::ToCss;
 use super::{CSSFloat, CSSInteger};
-use super::distance::{ComputeSquaredDistance, SquaredDistance};
 use super::generics::{GreaterThanOrEqualToOne, NonNegative};
 use super::generics::grid::{TrackBreadth as GenericTrackBreadth, TrackSize as GenericTrackSize};
 use super::generics::grid::GridTemplateComponent as GenericGridTemplateComponent;
@@ -33,6 +30,7 @@ pub use app_units::Au;
 pub use properties::animated_properties::TransitionProperty;
 #[cfg(feature = "gecko")]
 pub use self::align::{AlignItems, AlignJustifyContent, AlignJustifySelf, JustifyItems};
+pub use self::angle::Angle;
 pub use self::background::BackgroundSize;
 pub use self::border::{BorderImageSlice, BorderImageWidth, BorderImageSideWidth};
 pub use self::border::{BorderRadius, BorderCornerRadius};
@@ -57,6 +55,7 @@ pub use self::transform::{TimingFunction, TransformOrigin};
 
 #[cfg(feature = "gecko")]
 pub mod align;
+pub mod angle;
 pub mod background;
 pub mod basic_shape;
 pub mod border;
@@ -327,80 +326,6 @@ impl<T> ToComputedValue for T
 impl ComputedValueAsSpecified for Atom {}
 impl ComputedValueAsSpecified for bool {}
 
-/// A computed `<angle>` value.
-#[derive(Clone, Copy, Debug, HasViewportPercentage, PartialEq, PartialOrd)]
-#[cfg_attr(feature = "servo", derive(HeapSizeOf, Deserialize, Serialize))]
-pub enum Angle {
-    /// An angle with degree unit
-    Degree(CSSFloat),
-    /// An angle with gradian unit
-    Gradian(CSSFloat),
-    /// An angle with radian unit
-    Radian(CSSFloat),
-    /// An angle with turn unit
-    Turn(CSSFloat),
-}
-
-impl ComputeSquaredDistance for Angle {
-    #[inline]
-    fn compute_squared_distance(&self, other: &Self) -> Result<SquaredDistance, ()> {
-        // Use the formula for calculating the distance between angles defined in SVG:
-        // https://www.w3.org/TR/SVG/animate.html#complexDistances
-        self.radians64().compute_squared_distance(&other.radians64())
-    }
-}
-
-impl Angle {
-    /// Construct a computed `Angle` value from a radian amount.
-    pub fn from_radians(radians: CSSFloat) -> Self {
-        Angle::Radian(radians)
-    }
-
-    /// Return the amount of radians this angle represents.
-    #[inline]
-    pub fn radians(&self) -> CSSFloat {
-        self.radians64().min(f32::MAX as f64).max(f32::MIN as f64) as f32
-    }
-
-    /// Return the amount of radians this angle represents as a 64-bit float.
-    /// Gecko stores angles as singles, but does this computation using doubles.
-    /// See nsCSSValue::GetAngleValueInRadians.
-    /// This is significant enough to mess up rounding to the nearest
-    /// quarter-turn for 225 degrees, for example.
-    #[inline]
-    pub fn radians64(&self) -> f64 {
-        const RAD_PER_DEG: f64 = PI / 180.0;
-        const RAD_PER_GRAD: f64 = PI / 200.0;
-        const RAD_PER_TURN: f64 = PI * 2.0;
-
-        let radians = match *self {
-            Angle::Degree(val) => val as f64 * RAD_PER_DEG,
-            Angle::Gradian(val) => val as f64 * RAD_PER_GRAD,
-            Angle::Turn(val) => val as f64 * RAD_PER_TURN,
-            Angle::Radian(val) => val as f64,
-        };
-        radians.min(f64::MAX).max(f64::MIN)
-    }
-
-    /// Returns an angle that represents a rotation of zero radians.
-    pub fn zero() -> Self {
-        Angle::Radian(0.0)
-    }
-}
-
-impl ToCss for Angle {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result
-        where W: fmt::Write,
-    {
-        match *self {
-            Angle::Degree(val) => write!(dest, "{}deg", val),
-            Angle::Gradian(val) => write!(dest, "{}grad", val),
-            Angle::Radian(val) => write!(dest, "{}rad", val),
-            Angle::Turn(val) => write!(dest, "{}turn", val),
-        }
-    }
-}
-
 /// A computed `<time>` value.
 #[derive(Clone, PartialEq, PartialOrd, Copy, Debug)]
 #[cfg_attr(feature = "servo", derive(HeapSizeOf, Deserialize, Serialize))]
diff --git a/components/style/values/specified/angle.rs b/components/style/values/specified/angle.rs
new file mode 100644
index 00000000000..bb926318b01
--- /dev/null
+++ b/components/style/values/specified/angle.rs
@@ -0,0 +1,159 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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/. */
+
+//! Specified angles.
+
+use cssparser::{Parser, Token, BasicParseError};
+use parser::{ParserContext, Parse};
+use std::ascii::AsciiExt;
+use std::fmt;
+use style_traits::{ToCss, ParseError};
+use values::CSSFloat;
+use values::computed::{Context, ToComputedValue};
+use values::computed::angle::Angle as ComputedAngle;
+use values::specified::calc::CalcNode;
+
+/// A specified angle.
+///
+/// Computed angles are essentially same as specified ones except for `calc()`
+/// value serialization. Therefore we are storing a computed angle inside
+/// to hold the actual value and its unit.
+#[cfg_attr(feature = "servo", derive(HeapSizeOf, Deserialize, Serialize))]
+#[derive(Clone, Copy, Debug, HasViewportPercentage, PartialEq)]
+pub struct Angle {
+    value: ComputedAngle,
+    was_calc: bool,
+}
+
+impl ToCss for Angle {
+    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        if self.was_calc {
+            dest.write_str("calc(")?;
+        }
+        self.value.to_css(dest)?;
+        if self.was_calc {
+            dest.write_str(")")?;
+        }
+        Ok(())
+    }
+}
+
+impl ToComputedValue for Angle {
+    type ComputedValue = ComputedAngle;
+
+    fn to_computed_value(&self, _context: &Context) -> Self::ComputedValue {
+        self.value
+    }
+
+    fn from_computed_value(computed: &Self::ComputedValue) -> Self {
+        Angle {
+            value: *computed,
+            was_calc: false,
+        }
+    }
+}
+
+impl Angle {
+    /// Creates an angle with the given value in degrees.
+    pub fn from_degrees(value: CSSFloat, was_calc: bool) -> Self {
+        Angle { value: ComputedAngle::Degree(value), was_calc }
+    }
+
+    /// Creates an angle with the given value in gradians.
+    pub fn from_gradians(value: CSSFloat, was_calc: bool) -> Self {
+        Angle { value: ComputedAngle::Gradian(value), was_calc }
+    }
+
+    /// Creates an angle with the given value in turns.
+    pub fn from_turns(value: CSSFloat, was_calc: bool) -> Self {
+        Angle { value: ComputedAngle::Turn(value), was_calc }
+    }
+
+    /// Creates an angle with the given value in radians.
+    pub fn from_radians(value: CSSFloat, was_calc: bool) -> Self {
+        Angle { value: ComputedAngle::Radian(value), was_calc }
+    }
+
+    /// Returns the amount of radians this angle represents.
+    #[inline]
+    pub fn radians(self) -> f32 {
+        self.value.radians()
+    }
+
+    /// Returns `0deg`.
+    pub fn zero() -> Self {
+        Self::from_degrees(0.0, false)
+    }
+
+    /// Returns an `Angle` parsed from a `calc()` expression.
+    pub fn from_calc(radians: CSSFloat) -> Self {
+        Angle {
+            value: ComputedAngle::Radian(radians),
+            was_calc: true,
+        }
+    }
+}
+
+impl Parse for Angle {
+    /// Parses an angle according to CSS-VALUES § 6.1.
+    fn parse<'i, 't>(
+        context: &ParserContext,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<Self, ParseError<'i>> {
+        // FIXME: remove clone() when lifetimes are non-lexical
+        let token = input.next()?.clone();
+        match token {
+            Token::Dimension { value, ref unit, .. } => {
+                Angle::parse_dimension(value, unit, /* from_calc = */ false)
+            }
+            Token::Function(ref name) if name.eq_ignore_ascii_case("calc") => {
+                return input.parse_nested_block(|i| CalcNode::parse_angle(context, i))
+            }
+            _ => Err(())
+        }.map_err(|()| BasicParseError::UnexpectedToken(token.clone()).into())
+    }
+}
+
+impl Angle {
+    /// Parse an `<angle>` value given a value and an unit.
+    pub fn parse_dimension(
+        value: CSSFloat,
+        unit: &str,
+        from_calc: bool)
+        -> Result<Angle, ()>
+    {
+        let angle = match_ignore_ascii_case! { unit,
+            "deg" => Angle::from_degrees(value, from_calc),
+            "grad" => Angle::from_gradians(value, from_calc),
+            "turn" => Angle::from_turns(value, from_calc),
+            "rad" => Angle::from_radians(value, from_calc),
+             _ => return Err(())
+        };
+        Ok(angle)
+    }
+
+    /// Parse an angle, including unitless 0 degree.
+    ///
+    /// Note that numbers without any AngleUnit, including unitless 0 angle,
+    /// should be invalid. However, some properties still accept unitless 0
+    /// angle and stores it as '0deg'.
+    ///
+    /// We can remove this and get back to the unified version Angle::parse once
+    /// https://github.com/w3c/csswg-drafts/issues/1162 is resolved.
+    pub fn parse_with_unitless<'i, 't>(context: &ParserContext, input: &mut Parser<'i, 't>)
+                                       -> Result<Self, ParseError<'i>> {
+        // FIXME: remove clone() when lifetimes are non-lexical
+        let token = input.next()?.clone();
+        match token {
+            Token::Dimension { value, ref unit, .. } => {
+                Angle::parse_dimension(value, unit, /* from_calc = */ false)
+            }
+            Token::Number { value, .. } if value == 0. => Ok(Angle::zero()),
+            Token::Function(ref name) if name.eq_ignore_ascii_case("calc") => {
+                return input.parse_nested_block(|i| CalcNode::parse_angle(context, i))
+            }
+            _ => Err(())
+        }.map_err(|()| BasicParseError::UnexpectedToken(token.clone()).into())
+    }
+}
diff --git a/components/style/values/specified/mod.rs b/components/style/values/specified/mod.rs
index 95031e895f0..636b3fc5adf 100644
--- a/components/style/values/specified/mod.rs
+++ b/components/style/values/specified/mod.rs
@@ -25,6 +25,7 @@ use values::computed::ComputedValueAsSpecified;
 use values::specified::calc::CalcNode;
 
 pub use properties::animated_properties::TransitionProperty;
+pub use self::angle::Angle;
 #[cfg(feature = "gecko")]
 pub use self::align::{AlignItems, AlignJustifyContent, AlignJustifySelf, JustifyItems};
 pub use self::background::BackgroundSize;
@@ -54,6 +55,7 @@ pub use super::generics::grid::GridTemplateComponent as GenericGridTemplateCompo
 
 #[cfg(feature = "gecko")]
 pub mod align;
+pub mod angle;
 pub mod background;
 pub mod basic_shape;
 pub mod border;
@@ -152,146 +154,6 @@ pub fn parse_number_with_clamping_mode<'i, 't>(context: &ParserContext,
     })
 }
 
-#[derive(Clone, Copy, Debug, HasViewportPercentage, PartialEq)]
-#[cfg_attr(feature = "servo", derive(HeapSizeOf, Deserialize, Serialize))]
-/// An angle consisting of a value and a unit.
-///
-/// Computed Angle is essentially same as specified angle except calc
-/// value serialization. Therefore we are using computed Angle enum
-/// to hold the value and unit type.
-pub struct Angle {
-    value: computed::Angle,
-    was_calc: bool,
-}
-
-impl ToCss for Angle {
-    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
-        if self.was_calc {
-            dest.write_str("calc(")?;
-        }
-        self.value.to_css(dest)?;
-        if self.was_calc {
-            dest.write_str(")")?;
-        }
-        Ok(())
-    }
-}
-
-impl ToComputedValue for Angle {
-    type ComputedValue = computed::Angle;
-
-    fn to_computed_value(&self, _context: &Context) -> Self::ComputedValue {
-        self.value
-    }
-
-    fn from_computed_value(computed: &Self::ComputedValue) -> Self {
-        Angle {
-            value: *computed,
-            was_calc: false,
-        }
-    }
-}
-
-impl Angle {
-    /// Returns an angle with the given value in degrees.
-    pub fn from_degrees(value: CSSFloat, was_calc: bool) -> Self {
-        Angle { value: computed::Angle::Degree(value), was_calc: was_calc }
-    }
-
-    /// Returns an angle with the given value in gradians.
-    pub fn from_gradians(value: CSSFloat, was_calc: bool) -> Self {
-        Angle { value: computed::Angle::Gradian(value), was_calc: was_calc }
-    }
-
-    /// Returns an angle with the given value in turns.
-    pub fn from_turns(value: CSSFloat, was_calc: bool) -> Self {
-        Angle { value: computed::Angle::Turn(value), was_calc: was_calc }
-    }
-
-    /// Returns an angle with the given value in radians.
-    pub fn from_radians(value: CSSFloat, was_calc: bool) -> Self {
-        Angle { value: computed::Angle::Radian(value), was_calc: was_calc }
-    }
-
-    #[inline]
-    #[allow(missing_docs)]
-    pub fn radians(self) -> f32 {
-        self.value.radians()
-    }
-
-    /// Returns an angle value that represents zero.
-    pub fn zero() -> Self {
-        Self::from_degrees(0.0, false)
-    }
-
-    /// Returns an `Angle` parsed from a `calc()` expression.
-    pub fn from_calc(radians: CSSFloat) -> Self {
-        Angle {
-            value: computed::Angle::Radian(radians),
-            was_calc: true,
-        }
-    }
-}
-
-impl Parse for Angle {
-    /// Parses an angle according to CSS-VALUES § 6.1.
-    fn parse<'i, 't>(context: &ParserContext, input: &mut Parser<'i, 't>) -> Result<Self, ParseError<'i>> {
-        // FIXME: remove clone() when lifetimes are non-lexical
-        let token = input.next()?.clone();
-        match token {
-            Token::Dimension { value, ref unit, .. } => {
-                Angle::parse_dimension(value, unit, /* from_calc = */ false)
-            }
-            Token::Function(ref name) if name.eq_ignore_ascii_case("calc") => {
-                return input.parse_nested_block(|i| CalcNode::parse_angle(context, i))
-            }
-            _ => Err(())
-        }.map_err(|()| BasicParseError::UnexpectedToken(token.clone()).into())
-    }
-}
-
-impl Angle {
-    /// Parse an `<angle>` value given a value and an unit.
-    pub fn parse_dimension(
-        value: CSSFloat,
-        unit: &str,
-        from_calc: bool)
-        -> Result<Angle, ()>
-    {
-        let angle = match_ignore_ascii_case! { unit,
-            "deg" => Angle::from_degrees(value, from_calc),
-            "grad" => Angle::from_gradians(value, from_calc),
-            "turn" => Angle::from_turns(value, from_calc),
-            "rad" => Angle::from_radians(value, from_calc),
-             _ => return Err(())
-        };
-        Ok(angle)
-    }
-    /// Parse an angle, including unitless 0 degree.
-    ///
-    /// Note that numbers without any AngleUnit, including unitless 0 angle,
-    /// should be invalid. However, some properties still accept unitless 0
-    /// angle and stores it as '0deg'.
-    ///
-    /// We can remove this and get back to the unified version Angle::parse once
-    /// https://github.com/w3c/csswg-drafts/issues/1162 is resolved.
-    pub fn parse_with_unitless<'i, 't>(context: &ParserContext, input: &mut Parser<'i, 't>)
-                                       -> Result<Self, ParseError<'i>> {
-        // FIXME: remove clone() when lifetimes are non-lexical
-        let token = input.next()?.clone();
-        match token {
-            Token::Dimension { value, ref unit, .. } => {
-                Angle::parse_dimension(value, unit, /* from_calc = */ false)
-            }
-            Token::Number { value, .. } if value == 0. => Ok(Angle::zero()),
-            Token::Function(ref name) if name.eq_ignore_ascii_case("calc") => {
-                return input.parse_nested_block(|i| CalcNode::parse_angle(context, i))
-            }
-            _ => Err(())
-        }.map_err(|()| BasicParseError::UnexpectedToken(token.clone()).into())
-    }
-}
-
 // The integer values here correspond to the border conflict resolution rules in CSS 2.1 §
 // 17.6.2.1. Higher values override lower values.
 define_numbered_css_keyword_enum! { BorderStyle: