diff --git a/components/gfx/font_context.rs b/components/gfx/font_context.rs
index c21de4b2728..2badbce35fe 100644
--- a/components/gfx/font_context.rs
+++ b/components/gfx/font_context.rs
@@ -118,7 +118,7 @@ impl FontContext {
 
         let layout_font_group_cache_key = LayoutFontGroupCacheKey {
             pointer: style.clone(),
-            size: style.font_size.0,
+            size: Au::from(style.font_size),
         };
         if let Some(ref cached_font_group) = self.layout_font_group_cache.get(
                 &layout_font_group_cache_key) {
@@ -148,7 +148,7 @@ impl FontContext {
                         Some(ref cached_font_ref) => {
                             let cached_font = (*cached_font_ref).borrow();
                             if cached_font.descriptor == desc &&
-                               cached_font.requested_pt_size == style.font_size.0 &&
+                               cached_font.requested_pt_size == Au::from(style.font_size) &&
                                cached_font.variant == style.font_variant_caps {
                                 fonts.push((*cached_font_ref).clone());
                                 cache_hit = true;
@@ -166,7 +166,7 @@ impl FontContext {
                     Some(template_info) => {
                         let layout_font = self.create_layout_font(template_info.font_template,
                                                                   desc.clone(),
-                                                                  style.font_size.0,
+                                                                  Au::from(style.font_size),
                                                                   style.font_variant_caps,
                                                                   template_info.font_key);
                         let font = match layout_font {
@@ -199,7 +199,7 @@ impl FontContext {
         for cached_font_entry in &self.fallback_font_cache {
             let cached_font = cached_font_entry.font.borrow();
             if cached_font.descriptor == desc &&
-                        cached_font.requested_pt_size == style.font_size.0 &&
+                        cached_font.requested_pt_size == Au::from(style.font_size) &&
                         cached_font.variant == style.font_variant_caps {
                 fonts.push(cached_font_entry.font.clone());
                 cache_hit = true;
@@ -211,7 +211,7 @@ impl FontContext {
             let template_info = self.font_cache_thread.last_resort_font_template(desc.clone());
             let layout_font = self.create_layout_font(template_info.font_template,
                                                       desc.clone(),
-                                                      style.font_size.0,
+                                                      Au::from(style.font_size),
                                                       style.font_variant_caps,
                                                       template_info.font_key);
             match layout_font {
diff --git a/components/layout/block.rs b/components/layout/block.rs
index 40bc9eb9413..de151fd9a28 100644
--- a/components/layout/block.rs
+++ b/components/layout/block.rs
@@ -329,7 +329,7 @@ impl CandidateBSizeIterator {
             }
             (LengthOrPercentageOrAuto::Percentage(_), None) |
             (LengthOrPercentageOrAuto::Auto, _) => MaybeAuto::Auto,
-            (LengthOrPercentageOrAuto::Length(length), _) => MaybeAuto::Specified(length),
+            (LengthOrPercentageOrAuto::Length(length), _) => MaybeAuto::Specified(Au::from(length)),
         };
         let max_block_size = match (fragment.style.max_block_size(), block_container_block_size) {
             (LengthOrPercentageOrNone::Percentage(percent), Some(block_container_block_size)) => {
@@ -340,7 +340,7 @@ impl CandidateBSizeIterator {
             }
             (LengthOrPercentageOrNone::Percentage(_), None) |
             (LengthOrPercentageOrNone::None, _) => None,
-            (LengthOrPercentageOrNone::Length(length), _) => Some(length),
+            (LengthOrPercentageOrNone::Length(length), _) => Some(Au::from(length)),
         };
         let min_block_size = match (fragment.style.min_block_size(), block_container_block_size) {
             (LengthOrPercentage::Percentage(percent), Some(block_container_block_size)) => {
@@ -350,7 +350,7 @@ impl CandidateBSizeIterator {
                 calc.to_used_value(block_container_block_size).unwrap_or(Au(0))
             }
             (LengthOrPercentage::Percentage(_), None) => Au(0),
-            (LengthOrPercentage::Length(length), _) => length,
+            (LengthOrPercentage::Length(length), _) => Au::from(length),
         };
 
         // If the style includes `box-sizing: border-box`, subtract the border and padding.
@@ -1172,7 +1172,7 @@ impl BlockFlow {
             (LengthOrPercentageOrAuto::Calc(calc), _) => {
                 calc.to_used_value(containing_block_size)
             }
-            (LengthOrPercentageOrAuto::Length(length), _) => Some(length),
+            (LengthOrPercentageOrAuto::Length(length), _) => Some(Au::from(length)),
             (LengthOrPercentageOrAuto::Percentage(percent), Some(container_size)) => {
                 Some(container_size.scale_by(percent.0))
             }
diff --git a/components/layout/construct.rs b/components/layout/construct.rs
index 502f21b36f9..852f16e893e 100644
--- a/components/layout/construct.rs
+++ b/components/layout/construct.rs
@@ -14,7 +14,6 @@
 #![deny(unsafe_code)]
 
 use ServoArc;
-use app_units::Au;
 use block::BlockFlow;
 use context::{LayoutContext, with_thread_local_font_context};
 use data::{HAS_NEWLY_CONSTRUCTED_FLOW, LayoutData};
@@ -1852,10 +1851,10 @@ impl ComputedValueUtils for ComputedValues {
            !padding.padding_right.is_definitely_zero() ||
            !padding.padding_bottom.is_definitely_zero() ||
            !padding.padding_left.is_definitely_zero() ||
-           border.border_top_width.0 != Au(0) ||
-           border.border_right_width.0 != Au(0) ||
-           border.border_bottom_width.0 != Au(0) ||
-           border.border_left_width.0 != Au(0)
+           border.border_top_width.px() != 0. ||
+           border.border_right_width.px() != 0. ||
+           border.border_bottom_width.px() != 0. ||
+           border.border_left_width.px() != 0.
     }
 }
 
diff --git a/components/layout/display_list_builder.rs b/components/layout/display_list_builder.rs
index 6387c72ce3d..d38db2a0061 100644
--- a/components/layout/display_list_builder.rs
+++ b/components/layout/display_list_builder.rs
@@ -1325,6 +1325,7 @@ impl FragmentDisplayListBuilding for Fragment {
                                   center.vertical.to_used_value(bounds.size.height));
         let radius = match *shape {
             GenericEndingShape::Circle(Circle::Radius(length)) => {
+                let length = Au::from(length);
                 Size2D::new(length, length)
             },
             GenericEndingShape::Circle(Circle::Extent(extent)) => {
@@ -1409,11 +1410,11 @@ impl FragmentDisplayListBuilding for Fragment {
         for box_shadow in style.get_effects().box_shadow.0.iter().rev() {
             let bounds = shadow_bounds(
                 &absolute_bounds.translate(&Vector2D::new(
-                    box_shadow.base.horizontal,
-                    box_shadow.base.vertical,
+                    Au::from(box_shadow.base.horizontal),
+                    Au::from(box_shadow.base.vertical),
                 )),
-                box_shadow.base.blur.0,
-                box_shadow.spread,
+                Au::from(box_shadow.base.blur),
+                Au::from(box_shadow.spread),
             );
 
             // TODO(pcwalton): Multiple border radii; elliptical border radii.
@@ -1426,9 +1427,10 @@ impl FragmentDisplayListBuilding for Fragment {
                 base: base,
                 box_bounds: *absolute_bounds,
                 color: box_shadow.base.color.unwrap_or(style.get_color().color).to_gfx_color(),
-                offset: Vector2D::new(box_shadow.base.horizontal, box_shadow.base.vertical),
-                blur_radius: box_shadow.base.blur.0,
-                spread_radius: box_shadow.spread,
+                offset: Vector2D::new(Au::from(box_shadow.base.horizontal),
+                                      Au::from(box_shadow.base.vertical)),
+                blur_radius: Au::from(box_shadow.base.blur),
+                spread_radius: Au::from(box_shadow.spread),
                 border_radius: model::specified_border_radius(style.get_border()
                                                                    .border_top_left_radius,
                                                               absolute_bounds.size).width,
@@ -1596,7 +1598,7 @@ impl FragmentDisplayListBuilding for Fragment {
                                                     clip: &Rect<Au>) {
         use style::values::Either;
 
-        let width = style.get_outline().outline_width.0;
+        let width = Au::from(style.get_outline().outline_width);
         if width == Au(0) {
             return
         }
@@ -1610,7 +1612,7 @@ impl FragmentDisplayListBuilding for Fragment {
         // Outlines are not accounted for in the dimensions of the border box, so adjust the
         // absolute bounds.
         let mut bounds = *bounds;
-        let offset = width + style.get_outline().outline_offset;
+        let offset = width + Au::from(style.get_outline().outline_offset);
         bounds.origin.x = bounds.origin.x - offset;
         bounds.origin.y = bounds.origin.y - offset;
         bounds.size.width = bounds.size.width + offset + offset;
@@ -2139,8 +2141,8 @@ impl FragmentDisplayListBuilding for Fragment {
         for shadow in text_shadows.iter().rev() {
             state.add_display_item(DisplayItem::PushTextShadow(box PushTextShadowDisplayItem {
                 base: base.clone(),
-                blur_radius: shadow.blur.0,
-                offset: Vector2D::new(shadow.horizontal, shadow.vertical),
+                blur_radius: Au::from(shadow.blur),
+                offset: Vector2D::new(Au::from(shadow.horizontal), Au::from(shadow.vertical)),
                 color: shadow.color.unwrap_or(self.style().get_color().color).to_gfx_color(),
             }));
         }
@@ -2690,11 +2692,13 @@ impl BlockFlowDisplayListBuilding for BlockFlow {
         }
 
         let clip_origin = Point2D::new(stacking_relative_border_box.origin.x +
-                                       style_clip_rect.left.unwrap_or(Au(0)),
+                                       style_clip_rect.left.map(Au::from).unwrap_or(Au(0)),
                                        stacking_relative_border_box.origin.y +
-                                       style_clip_rect.top.unwrap_or(Au(0)));
-        let right = style_clip_rect.right.unwrap_or(stacking_relative_border_box.size.width);
-        let bottom = style_clip_rect.bottom.unwrap_or(stacking_relative_border_box.size.height);
+                                       style_clip_rect.top.map(Au::from).unwrap_or(Au(0)));
+        let right = style_clip_rect.right.map(Au::from)
+            .unwrap_or(stacking_relative_border_box.size.width);
+        let bottom = style_clip_rect.bottom.map(Au::from)
+            .unwrap_or(stacking_relative_border_box.size.height);
         let clip_size = Size2D::new(right - clip_origin.x, bottom - clip_origin.y);
 
         // We use the node id to create scroll roots for overflow properties, so we
@@ -3035,7 +3039,7 @@ struct StopRun {
 
 fn position_to_offset(position: LengthOrPercentage, total_length: Au) -> f32 {
     match position {
-        LengthOrPercentage::Length(Au(length)) => length as f32 / total_length.0 as f32,
+        LengthOrPercentage::Length(l) => l.to_i32_au() as f32 / total_length.0 as f32,
         LengthOrPercentage::Percentage(percentage) => percentage.0 as f32,
         LengthOrPercentage::Calc(calc) => {
             calc.to_used_value(Some(total_length)).unwrap().0 as f32 / total_length.0 as f32
diff --git a/components/layout/flex.rs b/components/layout/flex.rs
index 14e02aa6fb2..3c0f66def82 100644
--- a/components/layout/flex.rs
+++ b/components/layout/flex.rs
@@ -45,7 +45,7 @@ impl AxisSize {
     pub fn new(size: LengthOrPercentageOrAuto, content_size: Option<Au>, min: LengthOrPercentage,
                max: LengthOrPercentageOrNone) -> AxisSize {
         match size {
-            LengthOrPercentageOrAuto::Length(length) => AxisSize::Definite(length),
+            LengthOrPercentageOrAuto::Length(length) => AxisSize::Definite(Au::from(length)),
             LengthOrPercentageOrAuto::Percentage(percent) => {
                 match content_size {
                     Some(size) => AxisSize::Definite(size.scale_by(percent.0)),
@@ -76,7 +76,7 @@ fn from_flex_basis(
 ) -> MaybeAuto {
     match (flex_basis, containing_length) {
         (GenericFlexBasis::Length(LengthOrPercentage::Length(length)), _) =>
-            MaybeAuto::Specified(length),
+            MaybeAuto::Specified(Au::from(length)),
         (GenericFlexBasis::Length(LengthOrPercentage::Percentage(percent)), Some(size)) =>
             MaybeAuto::Specified(size.scale_by(percent.0)),
         (GenericFlexBasis::Length(LengthOrPercentage::Percentage(_)), None) =>
@@ -89,7 +89,7 @@ fn from_flex_basis(
             MaybeAuto::from_style(main_length, size),
         (GenericFlexBasis::Auto, None) => {
             if let LengthOrPercentageOrAuto::Length(length) = main_length {
-                MaybeAuto::Specified(length)
+                MaybeAuto::Specified(Au::from(length))
             } else {
                 MaybeAuto::Auto
             }
diff --git a/components/layout/fragment.rs b/components/layout/fragment.rs
index ece57c0ed46..5dcfea6da53 100644
--- a/components/layout/fragment.rs
+++ b/components/layout/fragment.rs
@@ -51,7 +51,7 @@ use style::selector_parser::RestyleDamage;
 use style::servo::restyle_damage::RECONSTRUCT_FLOW;
 use style::str::char_is_whitespace;
 use style::values::{self, Either, Auto};
-use style::values::computed::{LengthOrPercentage, LengthOrPercentageOrAuto};
+use style::values::computed::{Length, LengthOrPercentage, LengthOrPercentageOrAuto};
 use style::values::generics::box_::VerticalAlign;
 use text;
 use text::TextRunScanner;
@@ -1516,11 +1516,11 @@ impl Fragment {
                         let (result_inline, _) = self.calculate_replaced_sizes(None, None);
                         result_inline
                     }
-                    LengthOrPercentageOrAuto::Length(length) => length,
+                    LengthOrPercentageOrAuto::Length(length) => Au::from(length),
                     LengthOrPercentageOrAuto::Calc(calc) => {
                         // TODO(nox): This is probably wrong, because it accounts neither for
                         // clamping (not sure if necessary here) nor percentage.
-                        calc.unclamped_length()
+                        Au::from(calc.unclamped_length())
                     },
                 };
 
@@ -2261,7 +2261,7 @@ impl Fragment {
                     }
                 }
                 VerticalAlign::Length(LengthOrPercentage::Length(length)) => {
-                    offset -= length
+                    offset -= Au::from(length)
                 }
                 VerticalAlign::Length(LengthOrPercentage::Percentage(percentage)) => {
                     offset -= minimum_line_metrics.space_needed().scale_by(percentage.0)
@@ -2336,11 +2336,11 @@ impl Fragment {
                             continue
                         }
                         if inline_context_node.style.logical_margin().inline_end !=
-                                LengthOrPercentageOrAuto::Length(Au(0)) {
+                                LengthOrPercentageOrAuto::Length(Length::new(0.)) {
                             return false
                         }
                         if inline_context_node.style.logical_padding().inline_end !=
-                                LengthOrPercentage::Length(Au(0)) {
+                                LengthOrPercentage::Length(Length::new(0.)) {
                             return false
                         }
                         if inline_context_node.style.logical_border_width().inline_end != Au(0) {
@@ -2357,11 +2357,11 @@ impl Fragment {
                             continue
                         }
                         if inline_context_node.style.logical_margin().inline_start !=
-                                LengthOrPercentageOrAuto::Length(Au(0)) {
+                                LengthOrPercentageOrAuto::Length(Length::new(0.)) {
                             return false
                         }
                         if inline_context_node.style.logical_padding().inline_start !=
-                                LengthOrPercentage::Length(Au(0)) {
+                                LengthOrPercentage::Length(Length::new(0.)) {
                             return false
                         }
                         if inline_context_node.style.logical_border_width().inline_start != Au(0) {
@@ -2574,14 +2574,16 @@ impl Fragment {
 
         // Box shadows cause us to draw outside our border box.
         for box_shadow in &self.style().get_effects().box_shadow.0 {
-            let offset = Vector2D::new(box_shadow.base.horizontal, box_shadow.base.vertical);
-            let inflation = box_shadow.spread + box_shadow.base.blur.0 * BLUR_INFLATION_FACTOR;
+            let offset = Vector2D::new(Au::from(box_shadow.base.horizontal),
+                                       Au::from(box_shadow.base.vertical));
+            let inflation = Au::from(box_shadow.spread) +
+                            Au::from(box_shadow.base.blur) * BLUR_INFLATION_FACTOR;
             overflow.paint = overflow.paint.union(&border_box.translate(&offset)
                                                              .inflate(inflation, inflation))
         }
 
         // Outlines cause us to draw outside our border box.
-        let outline_width = self.style.get_outline().outline_width.0;
+        let outline_width = Au::from(self.style.get_outline().outline_width);
         if outline_width != Au(0) {
             overflow.paint = overflow.paint.union(&border_box.inflate(outline_width,
                                                                       outline_width))
@@ -2880,7 +2882,7 @@ impl Fragment {
             transform_origin.vertical
                 .to_used_value(stacking_relative_border_box.size.height)
                 .to_f32_px();
-        let transform_origin_z = transform_origin.depth.to_f32_px();
+        let transform_origin_z = transform_origin.depth.px();
 
         let pre_transform = Transform3D::create_translation(transform_origin_x,
                                                             transform_origin_y,
@@ -2913,7 +2915,7 @@ impl Fragment {
                                                                      -perspective_origin.y,
                                                                      0.0);
 
-                let perspective_matrix = TransformList::create_perspective_matrix(length);
+                let perspective_matrix = TransformList::create_perspective_matrix(length.px());
 
                 Some(pre_transform.pre_mul(&perspective_matrix).pre_mul(&post_transform))
             }
diff --git a/components/layout/model.rs b/components/layout/model.rs
index 34a6f89671b..0ea3a4be467 100644
--- a/components/layout/model.rs
+++ b/components/layout/model.rs
@@ -141,7 +141,7 @@ impl MarginCollapseInfo {
                 may_collapse_through = may_collapse_through &&
                     match fragment.style().content_block_size() {
                         LengthOrPercentageOrAuto::Auto => true,
-                        LengthOrPercentageOrAuto::Length(Au(v)) => v == 0,
+                        LengthOrPercentageOrAuto::Length(l) => l.px() == 0.,
                         LengthOrPercentageOrAuto::Percentage(v) => {
                             v.0 == 0. || containing_block_size.is_none()
                         }
@@ -150,7 +150,7 @@ impl MarginCollapseInfo {
 
                 if may_collapse_through {
                     match fragment.style().min_block_size() {
-                        LengthOrPercentage::Length(Au(0)) => {
+                        LengthOrPercentage::Length(l) if l.px() == 0. => {
                             FinalMarginState::MarginsCollapseThrough
                         },
                         LengthOrPercentage::Percentage(v) if v.0 == 0. => {
@@ -412,7 +412,7 @@ impl MaybeAuto {
             LengthOrPercentageOrAuto::Calc(calc) => {
                 MaybeAuto::from_option(calc.to_used_value(Some(containing_length)))
             }
-            LengthOrPercentageOrAuto::Length(length) => MaybeAuto::Specified(length)
+            LengthOrPercentageOrAuto::Length(length) => MaybeAuto::Specified(Au::from(length))
         }
     }
 
@@ -454,7 +454,7 @@ pub fn style_length(style_length: LengthOrPercentageOrAuto,
     match container_size {
         Some(length) => MaybeAuto::from_style(style_length, length),
         None => if let LengthOrPercentageOrAuto::Length(length) = style_length {
-            MaybeAuto::Specified(length)
+            MaybeAuto::Specified(Au::from(length))
         } else {
             MaybeAuto::Auto
         }
@@ -526,7 +526,7 @@ impl SizeConstraint {
         let mut min_size = match container_size {
             Some(container_size) => min_size.to_used_value(container_size),
             None => if let LengthOrPercentage::Length(length) = min_size {
-                length
+                Au::from(length)
             } else {
                 Au(0)
             }
@@ -535,7 +535,7 @@ impl SizeConstraint {
         let mut max_size = match container_size {
             Some(container_size) => max_size.to_used_value(container_size),
             None => if let LengthOrPercentageOrNone::Length(length) = max_size {
-                Some(length)
+                Some(Au::from(length))
             } else {
                 None
             }
diff --git a/components/layout/multicol.rs b/components/layout/multicol.rs
index 3e7cb66c2c9..19ca037712b 100644
--- a/components/layout/multicol.rs
+++ b/components/layout/multicol.rs
@@ -97,15 +97,16 @@ impl Flow for MulticolFlow {
         {
             let column_style = self.block_flow.fragment.style.get_column();
 
-            let column_gap = match column_style.column_gap {
-                Either::First(len) => len.0,
-                Either::Second(_normal) => self.block_flow.fragment.style.get_font().font_size.0,
-            };
+            let column_gap = Au::from(match column_style.column_gap {
+                Either::First(len) => len,
+                Either::Second(_normal) => self.block_flow.fragment.style.get_font().font_size,
+            });
 
             let mut column_count;
             if let Either::First(column_width) = column_style.column_width {
+                let column_width = Au::from(column_width);
                 column_count =
-                    max(1, (content_inline_size + column_gap).0 / (column_width.0 + column_gap).0);
+                    max(1, (content_inline_size + column_gap).0 / (column_width + column_gap).0);
                 if let Either::First(specified_column_count) = column_style.column_count {
                     column_count = min(column_count, specified_column_count.0 as i32);
                 }
@@ -135,9 +136,9 @@ impl Flow for MulticolFlow {
             available_block_size: {
                 let style = &self.block_flow.fragment.style;
                 if let LengthOrPercentageOrAuto::Length(length) = style.content_block_size() {
-                    length
+                    Au::from(length)
                 } else if let LengthOrPercentageOrNone::Length(length) = style.max_block_size() {
-                    length
+                    Au::from(length)
                 } else {
                     // FIXME: do column balancing instead
                     // FIXME: (until column balancing) substract margins/borders/padding
diff --git a/components/layout/query.rs b/components/layout/query.rs
index ecd93397c0a..c781412a4b6 100644
--- a/components/layout/query.rs
+++ b/components/layout/query.rs
@@ -450,10 +450,14 @@ impl FragmentBorderBoxIterator for FragmentLocatingFragmentIterator {
             border_left_width: left_width,
             ..
         } = *fragment.style.get_border();
-        self.client_rect.origin.y = top_width.0.to_px();
-        self.client_rect.origin.x = left_width.0.to_px();
-        self.client_rect.size.width = (border_box.size.width - left_width.0 - right_width.0).to_px();
-        self.client_rect.size.height = (border_box.size.height - top_width.0 - bottom_width.0).to_px();
+        let (left_width, right_width) = (left_width.px(), right_width.px());
+        let (top_width, bottom_width) = (top_width.px(), bottom_width.px());
+        self.client_rect.origin.y = top_width as i32;
+        self.client_rect.origin.x = left_width as i32;
+        self.client_rect.size.width =
+            (border_box.size.width.to_f32_px() - left_width - right_width) as i32;
+        self.client_rect.size.height =
+            (border_box.size.height.to_f32_px() - top_width - bottom_width) as i32;
     }
 
     fn should_process(&mut self, fragment: &Fragment) -> bool {
@@ -476,10 +480,12 @@ impl FragmentBorderBoxIterator for UnioningFragmentScrollAreaIterator {
             border_left_width: left_border,
             ..
         } = *fragment.style.get_border();
-        let right_padding = (border_box.size.width - right_border.0 - left_border.0).to_px();
-        let bottom_padding = (border_box.size.height - bottom_border.0 - top_border.0).to_px();
-        let top_padding = top_border.0.to_px();
-        let left_padding = left_border.0.to_px();
+        let (left_border, right_border) = (left_border.px(), right_border.px());
+        let (top_border, bottom_border) = (top_border.px(), bottom_border.px());
+        let right_padding = (border_box.size.width.to_f32_px() - right_border - left_border) as i32;
+        let bottom_padding = (border_box.size.height.to_f32_px() - bottom_border - top_border) as i32;
+        let top_padding = top_border as i32;
+        let left_padding = left_border as i32;
 
         match self.level {
             Some(start_level) if level <= start_level => { self.is_child = false; }
diff --git a/components/layout/table.rs b/components/layout/table.rs
index 2659b260501..8e7e63b4705 100644
--- a/components/layout/table.rs
+++ b/components/layout/table.rs
@@ -28,7 +28,7 @@ use style::logical_geometry::LogicalSize;
 use style::properties::ComputedValues;
 use style::servo::restyle_damage::{REFLOW, REFLOW_OUT_OF_FLOW};
 use style::values::CSSFloat;
-use style::values::computed::{LengthOrPercentageOrAuto, NonNegativeAu};
+use style::values::computed::{LengthOrPercentageOrAuto, NonNegativeLength};
 use table_row::{self, CellIntrinsicInlineSize, CollapsedBorder, CollapsedBorderProvenance};
 use table_row::TableRowFlow;
 use table_wrapper::TableLayout;
@@ -191,8 +191,8 @@ impl TableFlow {
             border_collapse::T::separate => style.get_inheritedtable().border_spacing,
             border_collapse::T::collapse => {
                 border_spacing::T {
-                    horizontal: NonNegativeAu::zero(),
-                    vertical: NonNegativeAu::zero(),
+                    horizontal: NonNegativeLength::zero(),
+                    vertical: NonNegativeLength::zero(),
                 }
             }
         }
@@ -203,7 +203,7 @@ impl TableFlow {
         if num_columns == 0 {
             return Au(0);
         }
-        self.spacing().horizontal.0 * (num_columns as i32 + 1)
+        Au::from(self.spacing().horizontal) * (num_columns as i32 + 1)
     }
 }
 
@@ -248,7 +248,7 @@ impl Flow for TableFlow {
                         LengthOrPercentageOrAuto::Auto |
                         LengthOrPercentageOrAuto::Calc(_) |
                         LengthOrPercentageOrAuto::Percentage(_) => Au(0),
-                        LengthOrPercentageOrAuto::Length(length) => length,
+                        LengthOrPercentageOrAuto::Length(length) => Au::from(length),
                     },
                     percentage: match *specified_inline_size {
                         LengthOrPercentageOrAuto::Auto |
@@ -471,7 +471,7 @@ impl Flow for TableFlow {
     fn assign_block_size(&mut self, _: &LayoutContext) {
         debug!("assign_block_size: assigning block_size for table");
         let vertical_spacing = self.spacing().vertical.0;
-        self.block_flow.assign_block_size_for_table_like_flow(vertical_spacing)
+        self.block_flow.assign_block_size_for_table_like_flow(Au::from(vertical_spacing))
     }
 
     fn compute_stacking_relative_position(&mut self, layout_context: &LayoutContext) {
diff --git a/components/layout/table_row.rs b/components/layout/table_row.rs
index 070e7da9229..376229e0db2 100644
--- a/components/layout/table_row.rs
+++ b/components/layout/table_row.rs
@@ -26,7 +26,7 @@ use style::computed_values::{border_collapse, border_spacing, border_top_style};
 use style::logical_geometry::{LogicalSize, PhysicalSide, WritingMode};
 use style::properties::ComputedValues;
 use style::servo::restyle_damage::{REFLOW, REFLOW_OUT_OF_FLOW};
-use style::values::computed::{Color, LengthOrPercentageOrAuto, NonNegativeAu};
+use style::values::computed::{Color, LengthOrPercentageOrAuto, NonNegativeLength};
 use table::{ColumnComputedInlineSize, ColumnIntrinsicInlineSize, InternalTable, VecExt};
 use table_cell::{CollapsedBordersForCell, TableCellFlow};
 
@@ -94,8 +94,8 @@ impl TableRowFlow {
             column_computed_inline_sizes: Vec::new(),
             incoming_rowspan: Vec::new(),
             spacing: border_spacing::T {
-                horizontal: NonNegativeAu::zero(),
-                vertical: NonNegativeAu::zero(),
+                horizontal: NonNegativeLength::zero(),
+                vertical: NonNegativeLength::zero(),
             },
             table_writing_mode: writing_mode,
             preliminary_collapsed_borders: CollapsedBordersForRow::new(),
@@ -305,7 +305,7 @@ impl Flow for TableRowFlow {
                         LengthOrPercentageOrAuto::Percentage(_) => {
                             child_base.intrinsic_inline_sizes.minimum_inline_size
                         }
-                        LengthOrPercentageOrAuto::Length(length) => length,
+                        LengthOrPercentageOrAuto::Length(length) => Au::from(length),
                     },
                     percentage: match child_specified_inline_size {
                         LengthOrPercentageOrAuto::Auto |
@@ -396,7 +396,7 @@ impl Flow for TableRowFlow {
                         None => break,
                     };
                 column_computed_inline_size.size = column_computed_inline_size.size +
-                    extra_column_computed_inline_size.size + self.spacing.horizontal.0;
+                    extra_column_computed_inline_size.size + Au::from(self.spacing.horizontal);
                 col += 1;
             }
 
@@ -625,7 +625,7 @@ impl CollapsedBorder {
            -> CollapsedBorder {
         CollapsedBorder {
             style: css_style.get_border().border_top_style,
-            width: css_style.get_border().border_top_width.0,
+            width: Au::from(css_style.get_border().border_top_width),
             color: css_style.get_border().border_top_color,
             provenance: provenance,
         }
@@ -637,7 +637,7 @@ impl CollapsedBorder {
              -> CollapsedBorder {
         CollapsedBorder {
             style: css_style.get_border().border_right_style,
-            width: css_style.get_border().border_right_width.0,
+            width: Au::from(css_style.get_border().border_right_width),
             color: css_style.get_border().border_right_color,
             provenance: provenance,
         }
@@ -649,7 +649,7 @@ impl CollapsedBorder {
               -> CollapsedBorder {
         CollapsedBorder {
             style: css_style.get_border().border_bottom_style,
-            width: css_style.get_border().border_bottom_width.0,
+            width: Au::from(css_style.get_border().border_bottom_width),
             color: css_style.get_border().border_bottom_color,
             provenance: provenance,
         }
@@ -661,7 +661,7 @@ impl CollapsedBorder {
             -> CollapsedBorder {
         CollapsedBorder {
             style: css_style.get_border().border_left_style,
-            width: css_style.get_border().border_left_width.0,
+            width: Au::from(css_style.get_border().border_left_width),
             color: css_style.get_border().border_left_color,
             provenance: provenance,
         }
@@ -827,7 +827,7 @@ fn set_inline_position_of_child_flow(
         let column_inline_size = column_computed_inline_sizes[*column_index].size;
         let border_inline_size = match *border_collapse_info {
             Some(_) => Au(0), // FIXME: Make collapsed borders account for colspan/rowspan.
-            None => border_spacing.horizontal.0,
+            None => Au::from(border_spacing.horizontal),
         };
         if reverse_column_order {
             *inline_end_margin_edge += column_inline_size + border_inline_size;
@@ -882,9 +882,9 @@ fn set_inline_position_of_child_flow(
         None => {
             // Take spacing into account.
             if reverse_column_order {
-                *inline_end_margin_edge += border_spacing.horizontal.0;
+                *inline_end_margin_edge += Au::from(border_spacing.horizontal);
             } else {
-                *inline_start_margin_edge += border_spacing.horizontal.0;
+                *inline_start_margin_edge += Au::from(border_spacing.horizontal);
             }
         }
     }
diff --git a/components/layout/table_rowgroup.rs b/components/layout/table_rowgroup.rs
index c3cb764686b..413a3f978b3 100644
--- a/components/layout/table_rowgroup.rs
+++ b/components/layout/table_rowgroup.rs
@@ -22,7 +22,7 @@ use std::iter::{IntoIterator, Iterator, Peekable};
 use style::computed_values::{border_collapse, border_spacing};
 use style::logical_geometry::LogicalSize;
 use style::properties::ComputedValues;
-use style::values::computed::NonNegativeAu;
+use style::values::computed::NonNegativeLength;
 use table::{ColumnIntrinsicInlineSize, InternalTable, TableLikeFlow};
 
 /// A table formatting context.
@@ -57,8 +57,8 @@ impl TableRowGroupFlow {
             block_flow: BlockFlow::from_fragment(fragment),
             column_intrinsic_inline_sizes: Vec::new(),
             spacing: border_spacing::T {
-                horizontal: NonNegativeAu::zero(),
-                vertical: NonNegativeAu::zero(),
+                horizontal: NonNegativeLength::zero(),
+                vertical: NonNegativeLength::zero(),
             },
             collapsed_inline_direction_border_widths_for_table: Vec::new(),
             collapsed_block_direction_border_widths_for_table: Vec::new(),
@@ -163,7 +163,7 @@ impl Flow for TableRowGroupFlow {
 
     fn assign_block_size(&mut self, _: &LayoutContext) {
         debug!("assign_block_size: assigning block_size for table_rowgroup");
-        self.block_flow.assign_block_size_for_table_like_flow(self.spacing.vertical.0)
+        self.block_flow.assign_block_size_for_table_like_flow(Au::from(self.spacing.vertical))
     }
 
     fn compute_stacking_relative_position(&mut self, layout_context: &LayoutContext) {
diff --git a/components/layout/text.rs b/components/layout/text.rs
index 715c356ce4a..23cd69a89db 100644
--- a/components/layout/text.rs
+++ b/components/layout/text.rs
@@ -289,9 +289,10 @@ impl TextRunScanner {
             // example, `finally` with a wide `letter-spacing` renders as `f i n a l l y` and not
             // `fi n a l l y`.
             let mut flags = ShapingFlags::empty();
-            match letter_spacing.value() {
-                Some(&Au(0)) | None => {}
-                Some(_) => flags.insert(IGNORE_LIGATURES_SHAPING_FLAG),
+            if let Some(v) = letter_spacing.value() {
+                if v.px() != 0. {
+                    flags.insert(IGNORE_LIGATURES_SHAPING_FLAG);
+                }
             }
             if text_rendering == text_rendering::T::optimizespeed {
                 flags.insert(IGNORE_LIGATURES_SHAPING_FLAG);
@@ -301,7 +302,7 @@ impl TextRunScanner {
                 flags.insert(KEEP_ALL_FLAG);
             }
             let options = ShapingOptions {
-                letter_spacing: letter_spacing.value().cloned(),
+                letter_spacing: letter_spacing.value().cloned().map(Au::from),
                 word_spacing: word_spacing,
                 script: Script::Common,
                 flags: flags,
@@ -446,11 +447,11 @@ pub fn font_metrics_for_style(font_context: &mut FontContext, font_style: ::Serv
 
 /// Returns the line block-size needed by the given computed style and font size.
 pub fn line_height_from_style(style: &ComputedValues, metrics: &FontMetrics) -> Au {
-    let font_size = style.get_font().font_size.0;
+    let font_size = Au::from(style.get_font().font_size);
     match style.get_inheritedtext().line_height {
-        LineHeight::Normal => metrics.line_gap,
+        LineHeight::Normal => Au::from(metrics.line_gap),
         LineHeight::Number(l) => font_size.scale_by(l.0),
-        LineHeight::Length(l) => l.0
+        LineHeight::Length(l) => Au::from(l)
     }
 }
 
diff --git a/components/layout/webrender_helpers.rs b/components/layout/webrender_helpers.rs
index 4bcd4f337d4..3a67aeedecd 100644
--- a/components/layout/webrender_helpers.rs
+++ b/components/layout/webrender_helpers.rs
@@ -200,7 +200,7 @@ impl ToFilterOps for Vec<Filter> {
         let mut result = Vec::with_capacity(self.len());
         for filter in self.iter() {
             match *filter {
-                GenericFilter::Blur(radius) => result.push(webrender_api::FilterOp::Blur(radius.0.to_f32_px())),
+                GenericFilter::Blur(radius) => result.push(webrender_api::FilterOp::Blur(radius.px())),
                 GenericFilter::Brightness(amount) => result.push(webrender_api::FilterOp::Brightness(amount.0)),
                 GenericFilter::Contrast(amount) => result.push(webrender_api::FilterOp::Contrast(amount.0)),
                 GenericFilter::Grayscale(amount) => result.push(webrender_api::FilterOp::Grayscale(amount.0)),
diff --git a/components/style/gecko/conversions.rs b/components/style/gecko/conversions.rs
index 7b89cb0cefb..dab0eeddc77 100644
--- a/components/style/gecko/conversions.rs
+++ b/components/style/gecko/conversions.rs
@@ -29,7 +29,7 @@ impl From<CalcLengthOrPercentage> for nsStyleCoord_CalcValue {
     fn from(other: CalcLengthOrPercentage) -> nsStyleCoord_CalcValue {
         let has_percentage = other.percentage.is_some();
         nsStyleCoord_CalcValue {
-            mLength: other.unclamped_length().0,
+            mLength: other.unclamped_length().to_i32_au(),
             mPercent: other.percentage.map_or(0., |p| p.0),
             mHasPercent: has_percentage,
         }
@@ -43,16 +43,16 @@ impl From<nsStyleCoord_CalcValue> for CalcLengthOrPercentage {
         } else {
             None
         };
-        Self::new(Au(other.mLength), percentage)
+        Self::new(Au(other.mLength).into(), percentage)
     }
 }
 
 impl From<LengthOrPercentage> for nsStyleCoord_CalcValue {
     fn from(other: LengthOrPercentage) -> nsStyleCoord_CalcValue {
         match other {
-            LengthOrPercentage::Length(au) => {
+            LengthOrPercentage::Length(px) => {
                 nsStyleCoord_CalcValue {
-                    mLength: au.0,
+                    mLength: px.to_i32_au(),
                     mPercent: 0.0,
                     mHasPercent: false,
                 }
@@ -73,9 +73,9 @@ impl LengthOrPercentageOrAuto {
     /// Convert this value in an appropriate `nsStyleCoord::CalcValue`.
     pub fn to_calc_value(&self) -> Option<nsStyleCoord_CalcValue> {
         match *self {
-            LengthOrPercentageOrAuto::Length(au) => {
+            LengthOrPercentageOrAuto::Length(px) => {
                 Some(nsStyleCoord_CalcValue {
-                    mLength: au.0,
+                    mLength: px.to_i32_au(),
                     mPercent: 0.0,
                     mHasPercent: false,
                 })
@@ -96,7 +96,7 @@ impl LengthOrPercentageOrAuto {
 impl From<nsStyleCoord_CalcValue> for LengthOrPercentage {
     fn from(other: nsStyleCoord_CalcValue) -> LengthOrPercentage {
         match (other.mHasPercent, other.mLength) {
-            (false, _) => LengthOrPercentage::Length(Au(other.mLength)),
+            (false, _) => LengthOrPercentage::Length(Au(other.mLength).into()),
             (true, 0) => LengthOrPercentage::Percentage(Percentage(other.mPercent)),
             _ => LengthOrPercentage::Calc(other.into()),
         }
@@ -106,7 +106,7 @@ impl From<nsStyleCoord_CalcValue> for LengthOrPercentage {
 impl From<nsStyleCoord_CalcValue> for LengthOrPercentageOrAuto {
     fn from(other: nsStyleCoord_CalcValue) -> LengthOrPercentageOrAuto {
         match (other.mHasPercent, other.mLength) {
-            (false, _) => LengthOrPercentageOrAuto::Length(Au(other.mLength)),
+            (false, _) => LengthOrPercentageOrAuto::Length(Au(other.mLength).into()),
             (true, 0) => LengthOrPercentageOrAuto::Percentage(Percentage(other.mPercent)),
             _ => LengthOrPercentageOrAuto::Calc(other.into()),
         }
@@ -328,8 +328,9 @@ impl nsStyleImage {
                 match shape {
                     EndingShape::Circle(Circle::Radius(length)) => {
                         unsafe {
-                            (*gecko_gradient).mRadiusX.set_value(CoordDataValue::Coord(length.0));
-                            (*gecko_gradient).mRadiusY.set_value(CoordDataValue::Coord(length.0));
+                            let au = length.to_i32_au();
+                            (*gecko_gradient).mRadiusX.set_value(CoordDataValue::Coord(au));
+                            (*gecko_gradient).mRadiusY.set_value(CoordDataValue::Coord(au));
                         }
                     },
                     EndingShape::Ellipse(Ellipse::Radii(x, y)) => {
diff --git a/components/style/gecko/generated/bindings.rs b/components/style/gecko/generated/bindings.rs
index 5893669015e..fdf32c538cd 100644
--- a/components/style/gecko/generated/bindings.rs
+++ b/components/style/gecko/generated/bindings.rs
@@ -1342,10 +1342,6 @@ extern "C" {
     pub fn Gecko_CSSValue_GetArrayItemConst(css_value: nsCSSValueBorrowed,
                                             index: i32) -> nsCSSValueBorrowed;
 }
-extern "C" {
-    pub fn Gecko_CSSValue_GetAbsoluteLength(css_value: nsCSSValueBorrowed)
-     -> nscoord;
-}
 extern "C" {
     pub fn Gecko_CSSValue_GetKeyword(aCSSValue: nsCSSValueBorrowed)
      -> nsCSSKeyword;
@@ -1360,10 +1356,6 @@ extern "C" {
     pub fn Gecko_CSSValue_GetCalc(aCSSValue: nsCSSValueBorrowed)
      -> nsStyleCoord_CalcValue;
 }
-extern "C" {
-    pub fn Gecko_CSSValue_SetAbsoluteLength(css_value: nsCSSValueBorrowedMut,
-                                            len: nscoord);
-}
 extern "C" {
     pub fn Gecko_CSSValue_SetNumber(css_value: nsCSSValueBorrowedMut,
                                     number: f32);
@@ -1376,6 +1368,10 @@ extern "C" {
     pub fn Gecko_CSSValue_SetPercentage(css_value: nsCSSValueBorrowedMut,
                                         percent: f32);
 }
+extern "C" {
+    pub fn Gecko_CSSValue_SetPixelLength(aCSSValue: nsCSSValueBorrowedMut,
+                                         aLen: f32);
+}
 extern "C" {
     pub fn Gecko_CSSValue_SetCalc(css_value: nsCSSValueBorrowedMut,
                                   calc: nsStyleCoord_CalcValue);
diff --git a/components/style/gecko/media_queries.rs b/components/style/gecko/media_queries.rs
index 175b24eff1e..1f9a5585fcb 100644
--- a/components/style/gecko/media_queries.rs
+++ b/components/style/gecko/media_queries.rs
@@ -71,7 +71,7 @@ impl Device {
             pres_context: pres_context,
             default_values: ComputedValues::default_values(unsafe { &*pres_context }),
             // FIXME(bz): Seems dubious?
-            root_font_size: AtomicIsize::new(font_size::get_initial_value().value() as isize),
+            root_font_size: AtomicIsize::new(font_size::get_initial_value().0.to_i32_au() as isize),
             used_root_font_size: AtomicBool::new(false),
             used_viewport_size: AtomicBool::new(false),
         }
@@ -713,7 +713,7 @@ impl Expression {
                 return match *actual_value {
                     BoolInteger(v) => v,
                     Integer(v) => v != 0,
-                    Length(ref l) => l.to_computed_value(&context) != Au(0),
+                    Length(ref l) => l.to_computed_value(&context).px() != 0.,
                     _ => true,
                 }
             }
@@ -722,8 +722,8 @@ impl Expression {
         // FIXME(emilio): Handle the possible floating point errors?
         let cmp = match (required_value, actual_value) {
             (&Length(ref one), &Length(ref other)) => {
-                one.to_computed_value(&context)
-                    .cmp(&other.to_computed_value(&context))
+                one.to_computed_value(&context).to_i32_au()
+                    .cmp(&other.to_computed_value(&context).to_i32_au())
             }
             (&Integer(one), &Integer(ref other)) => one.cmp(other),
             (&BoolInteger(one), &BoolInteger(ref other)) => one.cmp(other),
diff --git a/components/style/gecko/values.rs b/components/style/gecko/values.rs
index 0ad22c872a6..ac9a37d4395 100644
--- a/components/style/gecko/values.rs
+++ b/components/style/gecko/values.rs
@@ -17,10 +17,10 @@ use media_queries::Device;
 use nsstring::{nsACString, nsCString};
 use std::cmp::max;
 use values::{Auto, Either, ExtremumLength, None_, Normal};
-use values::computed::{Angle, LengthOrPercentage, LengthOrPercentageOrAuto};
+use values::computed::{Angle, Length, LengthOrPercentage, LengthOrPercentageOrAuto};
 use values::computed::{LengthOrPercentageOrNone, Number, NumberOrPercentage};
 use values::computed::{MaxLength, MozLength, Percentage};
-use values::computed::{NonNegativeAu, NonNegativeLengthOrPercentage, NonNegativeNumber};
+use values::computed::{NonNegativeLength, NonNegativeLengthOrPercentage, NonNegativeNumber};
 use values::computed::basic_shape::ShapeRadius as ComputedShapeRadius;
 use values::generics::{CounterStyleOrNone, NonNegative};
 use values::generics::basic_shape::ShapeRadius;
@@ -106,7 +106,7 @@ impl GeckoStyleCoordConvertible for NumberOrPercentage {
 impl GeckoStyleCoordConvertible for LengthOrPercentage {
     fn to_gecko_style_coord<T: CoordDataMut>(&self, coord: &mut T) {
         let value = match *self {
-            LengthOrPercentage::Length(au) => CoordDataValue::Coord(au.0),
+            LengthOrPercentage::Length(px) => CoordDataValue::Coord(px.to_i32_au()),
             LengthOrPercentage::Percentage(p) => CoordDataValue::Percent(p.0),
             LengthOrPercentage::Calc(calc) => CoordDataValue::Calc(calc.into()),
         };
@@ -115,7 +115,7 @@ impl GeckoStyleCoordConvertible for LengthOrPercentage {
 
     fn from_gecko_style_coord<T: CoordData>(coord: &T) -> Option<Self> {
         match coord.as_value() {
-            CoordDataValue::Coord(coord) => Some(LengthOrPercentage::Length(Au(coord))),
+            CoordDataValue::Coord(coord) => Some(LengthOrPercentage::Length(Au(coord).into())),
             CoordDataValue::Percent(p) => Some(LengthOrPercentage::Percentage(Percentage(p))),
             CoordDataValue::Calc(calc) => Some(LengthOrPercentage::Calc(calc.into())),
             _ => None,
@@ -133,26 +133,26 @@ impl GeckoStyleCoordConvertible for NonNegativeLengthOrPercentage {
     }
 }
 
-impl GeckoStyleCoordConvertible for Au {
+impl GeckoStyleCoordConvertible for Length {
     fn to_gecko_style_coord<T: CoordDataMut>(&self, coord: &mut T) {
-        coord.set_value(CoordDataValue::Coord(self.0));
+        coord.set_value(CoordDataValue::Coord(self.to_i32_au()));
     }
 
     fn from_gecko_style_coord<T: CoordData>(coord: &T) -> Option<Self> {
         match coord.as_value() {
-            CoordDataValue::Coord(coord) => Some(Au(coord)),
+            CoordDataValue::Coord(coord) => Some(Au(coord).into()),
             _ => None,
         }
     }
 }
 
-impl GeckoStyleCoordConvertible for NonNegativeAu {
+impl GeckoStyleCoordConvertible for NonNegativeLength {
     fn to_gecko_style_coord<T: CoordDataMut>(&self, coord: &mut T) {
         self.0.to_gecko_style_coord(coord);
     }
 
     fn from_gecko_style_coord<T: CoordData>(coord: &T) -> Option<Self> {
-        Au::from_gecko_style_coord(coord).map(NonNegative::<Au>)
+        Length::from_gecko_style_coord(coord).map(NonNegative::<Length>)
     }
 }
 
@@ -169,7 +169,7 @@ impl GeckoStyleCoordConvertible for NonNegativeNumber {
 impl GeckoStyleCoordConvertible for LengthOrPercentageOrAuto {
     fn to_gecko_style_coord<T: CoordDataMut>(&self, coord: &mut T) {
         let value = match *self {
-            LengthOrPercentageOrAuto::Length(au) => CoordDataValue::Coord(au.0),
+            LengthOrPercentageOrAuto::Length(px) => CoordDataValue::Coord(px.to_i32_au()),
             LengthOrPercentageOrAuto::Percentage(p) => CoordDataValue::Percent(p.0),
             LengthOrPercentageOrAuto::Auto => CoordDataValue::Auto,
             LengthOrPercentageOrAuto::Calc(calc) => CoordDataValue::Calc(calc.into()),
@@ -179,7 +179,7 @@ impl GeckoStyleCoordConvertible for LengthOrPercentageOrAuto {
 
     fn from_gecko_style_coord<T: CoordData>(coord: &T) -> Option<Self> {
         match coord.as_value() {
-            CoordDataValue::Coord(coord) => Some(LengthOrPercentageOrAuto::Length(Au(coord))),
+            CoordDataValue::Coord(coord) => Some(LengthOrPercentageOrAuto::Length(Au(coord).into())),
             CoordDataValue::Percent(p) => Some(LengthOrPercentageOrAuto::Percentage(Percentage(p))),
             CoordDataValue::Auto => Some(LengthOrPercentageOrAuto::Auto),
             CoordDataValue::Calc(calc) => Some(LengthOrPercentageOrAuto::Calc(calc.into())),
@@ -191,7 +191,7 @@ impl GeckoStyleCoordConvertible for LengthOrPercentageOrAuto {
 impl GeckoStyleCoordConvertible for LengthOrPercentageOrNone {
     fn to_gecko_style_coord<T: CoordDataMut>(&self, coord: &mut T) {
         let value = match *self {
-            LengthOrPercentageOrNone::Length(au) => CoordDataValue::Coord(au.0),
+            LengthOrPercentageOrNone::Length(px) => CoordDataValue::Coord(px.to_i32_au()),
             LengthOrPercentageOrNone::Percentage(p) => CoordDataValue::Percent(p.0),
             LengthOrPercentageOrNone::None => CoordDataValue::None,
             LengthOrPercentageOrNone::Calc(calc) => CoordDataValue::Calc(calc.into()),
@@ -201,7 +201,7 @@ impl GeckoStyleCoordConvertible for LengthOrPercentageOrNone {
 
     fn from_gecko_style_coord<T: CoordData>(coord: &T) -> Option<Self> {
         match coord.as_value() {
-            CoordDataValue::Coord(coord) => Some(LengthOrPercentageOrNone::Length(Au(coord))),
+            CoordDataValue::Coord(coord) => Some(LengthOrPercentageOrNone::Length(Au(coord).into())),
             CoordDataValue::Percent(p) => Some(LengthOrPercentageOrNone::Percentage(Percentage(p))),
             CoordDataValue::None => Some(LengthOrPercentageOrNone::None),
             CoordDataValue::Calc(calc) => Some(LengthOrPercentageOrNone::Calc(calc.into())),
diff --git a/components/style/gecko_bindings/sugar/ns_css_shadow_item.rs b/components/style/gecko_bindings/sugar/ns_css_shadow_item.rs
index d6258809c36..17afb55b870 100644
--- a/components/style/gecko_bindings/sugar/ns_css_shadow_item.rs
+++ b/components/style/gecko_bindings/sugar/ns_css_shadow_item.rs
@@ -15,7 +15,7 @@ impl nsCSSShadowItem {
     #[inline]
     pub fn set_from_box_shadow(&mut self, shadow: BoxShadow) {
         self.set_from_simple_shadow(shadow.base);
-        self.mSpread = shadow.spread.0;
+        self.mSpread = shadow.spread.to_i32_au();
         self.mInset = shadow.inset;
     }
 
@@ -24,7 +24,7 @@ impl nsCSSShadowItem {
     pub fn to_box_shadow(&self) -> BoxShadow {
         BoxShadow {
             base: self.extract_simple_shadow(),
-            spread: Au(self.mSpread),
+            spread: Au(self.mSpread).into(),
             inset: self.mInset,
         }
     }
@@ -32,9 +32,9 @@ impl nsCSSShadowItem {
     /// Sets this item from the given simple shadow.
     #[inline]
     pub fn set_from_simple_shadow(&mut self, shadow: SimpleShadow) {
-        self.mXOffset = shadow.horizontal.0;
-        self.mYOffset = shadow.vertical.0;
-        self.mRadius = shadow.blur.value();
+        self.mXOffset = shadow.horizontal.to_i32_au();
+        self.mYOffset = shadow.vertical.to_i32_au();
+        self.mRadius = shadow.blur.0.to_i32_au();
         self.mSpread = 0;
         self.mInset = false;
         if let Some(color) = shadow.color {
@@ -62,8 +62,8 @@ impl nsCSSShadowItem {
     fn extract_simple_shadow(&self) -> SimpleShadow {
         SimpleShadow {
             color: self.extract_color(),
-            horizontal: Au(self.mXOffset),
-            vertical: Au(self.mYOffset),
+            horizontal: Au(self.mXOffset).into(),
+            vertical: Au(self.mYOffset).into(),
             blur: Au(self.mRadius).into(),
         }
     }
diff --git a/components/style/gecko_bindings/sugar/ns_css_value.rs b/components/style/gecko_bindings/sugar/ns_css_value.rs
index e3e0ee9c898..9c57b788ef1 100644
--- a/components/style/gecko_bindings/sugar/ns_css_value.rs
+++ b/components/style/gecko_bindings/sugar/ns_css_value.rs
@@ -4,7 +4,6 @@
 
 //! Little helpers for `nsCSSValue`.
 
-use app_units::Au;
 use gecko_bindings::bindings;
 use gecko_bindings::structs;
 use gecko_bindings::structs::{nsCSSValue, nsCSSUnit};
@@ -75,8 +74,8 @@ impl nsCSSValue {
     /// Sets LengthOrPercentage value to this nsCSSValue.
     pub unsafe fn set_lop(&mut self, lop: LengthOrPercentage) {
         match lop {
-            LengthOrPercentage::Length(au) => {
-                bindings::Gecko_CSSValue_SetAbsoluteLength(self, au.0)
+            LengthOrPercentage::Length(px) => {
+                bindings::Gecko_CSSValue_SetPixelLength(self, px.px())
             }
             LengthOrPercentage::Percentage(pc) => {
                 bindings::Gecko_CSSValue_SetPercentage(self, pc.0)
@@ -89,9 +88,10 @@ impl nsCSSValue {
 
     /// Returns LengthOrPercentage value.
     pub unsafe fn get_lop(&self) -> LengthOrPercentage {
+        use values::computed::Length;
         match self.mUnit {
             nsCSSUnit::eCSSUnit_Pixel => {
-                LengthOrPercentage::Length(Au(bindings::Gecko_CSSValue_GetAbsoluteLength(self)))
+                LengthOrPercentage::Length(Length::new(bindings::Gecko_CSSValue_GetNumber(self)))
             },
             nsCSSUnit::eCSSUnit_Percent => {
                 LengthOrPercentage::Percentage(Percentage(bindings::Gecko_CSSValue_GetPercentage(self)))
diff --git a/components/style/matching.rs b/components/style/matching.rs
index cbef380f40b..1f140feeb8a 100644
--- a/components/style/matching.rs
+++ b/components/style/matching.rs
@@ -533,6 +533,7 @@ pub trait MatchMethods : TElement {
         mut new_styles: ElementStyles,
         important_rules_changed: bool,
     ) -> ChildCascadeRequirement {
+        use app_units::Au;
         use dom::TNode;
         use std::cmp;
         use std::mem;
@@ -581,7 +582,7 @@ pub trait MatchMethods : TElement {
 
             if old_styles.primary.as_ref().map_or(true, |s| s.get_font().clone_font_size() != new_font_size) {
                 debug_assert!(self.owner_doc_matches_for_testing(device));
-                device.set_root_font_size(new_font_size.0);
+                device.set_root_font_size(Au::from(new_font_size));
                 // If the root font-size changed since last time, and something
                 // in the document did use rem units, ensure we recascade the
                 // entire tree.
diff --git a/components/style/properties/gecko.mako.rs b/components/style/properties/gecko.mako.rs
index 480e080acbc..965bf955127 100644
--- a/components/style/properties/gecko.mako.rs
+++ b/components/style/properties/gecko.mako.rs
@@ -61,7 +61,7 @@ use servo_arc::{Arc, RawOffsetArc};
 use std::mem::{forget, uninitialized, transmute, zeroed};
 use std::{cmp, ops, ptr};
 use values::{self, Auto, CustomIdent, Either, KeyframesName, None_};
-use values::computed::{NonNegativeAu, ToComputedValue, Percentage};
+use values::computed::{NonNegativeLength, ToComputedValue, Percentage};
 use values::computed::effects::{BoxShadow, Filter, SimpleShadow};
 use computed_values::border_style;
 
@@ -530,13 +530,13 @@ def set_gecko_property(ffi_name, expr):
 <%def name="impl_absolute_length(ident, gecko_ffi_name, need_clone=False)">
     #[allow(non_snake_case)]
     pub fn set_${ident}(&mut self, v: longhands::${ident}::computed_value::T) {
-        ${set_gecko_property(gecko_ffi_name, "v.0")}
+        ${set_gecko_property(gecko_ffi_name, "v.to_i32_au()")}
     }
     <%call expr="impl_simple_copy(ident, gecko_ffi_name)"></%call>
     % if need_clone:
         #[allow(non_snake_case)]
         pub fn clone_${ident}(&self) -> longhands::${ident}::computed_value::T {
-            Au(self.gecko.${gecko_ffi_name})
+            Au(self.gecko.${gecko_ffi_name}).into()
         }
     % endif
 </%def>
@@ -633,7 +633,7 @@ def set_gecko_property(ffi_name, expr):
                 SvgLengthOrPercentageOrNumber::Number(number),
             CoordDataValue::Coord(coord) =>
                 SvgLengthOrPercentageOrNumber::LengthOrPercentage(
-                    LengthOrPercentage::Length(Au(coord))),
+                    LengthOrPercentage::Length(Au(coord).into())),
             CoordDataValue::Percent(p) =>
                 SvgLengthOrPercentageOrNumber::LengthOrPercentage(
                     LengthOrPercentage::Percentage(Percentage(p))),
@@ -810,16 +810,16 @@ def set_gecko_property(ffi_name, expr):
     }
 </%def>
 
-<%def name="impl_non_negative_app_units(ident, gecko_ffi_name, need_clone, inherit_from=None,
-                                        round_to_pixels=False)">
+<%def name="impl_non_negative_length(ident, gecko_ffi_name, need_clone, inherit_from=None,
+                                     round_to_pixels=False)">
     #[allow(non_snake_case)]
     pub fn set_${ident}(&mut self, v: longhands::${ident}::computed_value::T) {
         let value = {
             % if round_to_pixels:
             let au_per_device_px = Au(self.gecko.mTwipsPerPixel);
-            round_border_to_device_pixels(v.0, au_per_device_px).0
+            round_border_to_device_pixels(Au::from(v), au_per_device_px).0
             % else:
-            v.value()
+            v.0.to_i32_au()
             % endif
         };
 
@@ -1385,11 +1385,11 @@ fn static_assert() {
 
     <% impl_color("border_%s_color" % side.ident, "(mBorderColor)[%s]" % side.index, need_clone=True) %>
 
-    <% impl_non_negative_app_units("border_%s_width" % side.ident,
-                                   "mComputedBorder.%s" % side.ident,
-                                   inherit_from="mBorder.%s" % side.ident,
-                                   need_clone=True,
-                                   round_to_pixels=True) %>
+    <% impl_non_negative_length("border_%s_width" % side.ident,
+                                "mComputedBorder.%s" % side.ident,
+                                inherit_from="mBorder.%s" % side.ident,
+                                need_clone=True,
+                                round_to_pixels=True) %>
 
     pub fn border_${side.ident}_has_nonzero_width(&self) -> bool {
         self.gecko.mComputedBorder.${side.ident} != 0
@@ -2110,9 +2110,9 @@ fn static_assert() {
         }
     }
 
-    <% impl_non_negative_app_units("outline_width", "mActualOutlineWidth",
-                                   inherit_from="mOutlineWidth",
-                                   need_clone=True, round_to_pixels=True) %>
+    <% impl_non_negative_length("outline_width", "mActualOutlineWidth",
+                                inherit_from="mOutlineWidth",
+                                need_clone=True, round_to_pixels=True) %>
 
     % for corner in CORNERS:
     <% impl_corner_style_coord("_moz_outline_radius_%s" % corner.ident.replace("_", ""),
@@ -2248,15 +2248,15 @@ fn static_assert() {
     }
 
     pub fn set_font_size(&mut self, v: longhands::font_size::computed_value::T) {
-        self.gecko.mSize = v.value();
-        self.gecko.mScriptUnconstrainedSize = v.value();
+        self.gecko.mSize = v.0.to_i32_au();
+        self.gecko.mScriptUnconstrainedSize = v.0.to_i32_au();
     }
 
     /// Set font size, taking into account scriptminsize and scriptlevel
     /// Returns Some(size) if we have to recompute the script unconstrained size
     pub fn apply_font_size(&mut self, v: longhands::font_size::computed_value::T,
                            parent: &Self,
-                           device: &Device) -> Option<NonNegativeAu> {
+                           device: &Device) -> Option<NonNegativeLength> {
         let (adjusted_size, adjusted_unconstrained_size) =
             self.calculate_script_level_size(parent, device);
         // In this case, we have been unaffected by scriptminsize, ignore it
@@ -2266,7 +2266,7 @@ fn static_assert() {
             self.fixup_font_min_size(device);
             None
         } else {
-            self.gecko.mSize = v.value();
+            self.gecko.mSize = v.0.to_i32_au();
             self.fixup_font_min_size(device);
             Some(Au(parent.gecko.mScriptUnconstrainedSize).into())
         }
@@ -2276,8 +2276,8 @@ fn static_assert() {
         unsafe { bindings::Gecko_nsStyleFont_FixupMinFontSize(&mut self.gecko, device.pres_context()) }
     }
 
-    pub fn apply_unconstrained_font_size(&mut self, v: NonNegativeAu) {
-        self.gecko.mScriptUnconstrainedSize = v.value();
+    pub fn apply_unconstrained_font_size(&mut self, v: NonNegativeLength) {
+        self.gecko.mScriptUnconstrainedSize = v.0.to_i32_au();
     }
 
     /// Calculates the constrained and unconstrained font sizes to be inherited
@@ -2387,7 +2387,7 @@ fn static_assert() {
     ///
     /// Returns true if the inherited keyword size was actually used
     pub fn inherit_font_size_from(&mut self, parent: &Self,
-                                  kw_inherited_size: Option<NonNegativeAu>,
+                                  kw_inherited_size: Option<NonNegativeLength>,
                                   device: &Device) -> bool {
         let (adjusted_size, adjusted_unconstrained_size)
             = self.calculate_script_level_size(parent, device);
@@ -2413,9 +2413,9 @@ fn static_assert() {
             false
         } else if let Some(size) = kw_inherited_size {
             // Parent element was a keyword-derived size.
-            self.gecko.mSize = size.value();
+            self.gecko.mSize = size.0.to_i32_au();
             // MathML constraints didn't apply here, so we can ignore this.
-            self.gecko.mScriptUnconstrainedSize = size.value();
+            self.gecko.mScriptUnconstrainedSize = size.0.to_i32_au();
             self.fixup_font_min_size(device);
             true
         } else {
@@ -3020,7 +3020,7 @@ fn static_assert() {
             # First %s substituted with the call to GetArrayItem, the second
             # %s substituted with the corresponding variable
             css_value_setters = {
-                "length" : "bindings::Gecko_CSSValue_SetAbsoluteLength(%s, %s.0)",
+                "length" : "bindings::Gecko_CSSValue_SetPixelLength(%s, %s.px())",
                 "percentage" : "bindings::Gecko_CSSValue_SetPercentage(%s, %s.0)",
                 # Note: This is an integer type, but we use it as a percentage value in Gecko, so
                 #       need to cast it to f32.
@@ -3122,7 +3122,7 @@ fn static_assert() {
         <%
             # %s is substituted with the call to GetArrayItem.
             css_value_getters = {
-                "length" : "Au(bindings::Gecko_CSSValue_GetAbsoluteLength(%s))",
+                "length" : "Length::new(bindings::Gecko_CSSValue_GetNumber(%s))",
                 "lop" : "%s.get_lop()",
                 "angle" : "%s.get_angle()",
                 "number" : "bindings::Gecko_CSSValue_GetNumber(%s)",
@@ -3166,7 +3166,7 @@ fn static_assert() {
         use properties::longhands::transform::computed_value::ComputedMatrix;
         use properties::longhands::transform::computed_value::ComputedOperation;
         use properties::longhands::transform::computed_value::T as TransformList;
-        use values::computed::Percentage;
+        use values::computed::{Length, Percentage};
 
         let convert_shared_list_to_operations = |value: &structs::nsCSSValue|
                                                 -> Vec<ComputedOperation> {
@@ -3460,13 +3460,13 @@ fn static_assert() {
 
     pub fn clone_transform_origin(&self) -> longhands::transform_origin::computed_value::T {
         use properties::longhands::transform_origin::computed_value::T;
-        use values::computed::LengthOrPercentage;
+        use values::computed::{Length, LengthOrPercentage};
         T {
             horizontal: LengthOrPercentage::from_gecko_style_coord(&self.gecko.mTransformOrigin[0])
                 .expect("clone for LengthOrPercentage failed"),
             vertical: LengthOrPercentage::from_gecko_style_coord(&self.gecko.mTransformOrigin[1])
                 .expect("clone for LengthOrPercentage failed"),
-            depth: Au::from_gecko_style_coord(&self.gecko.mTransformOrigin[2])
+            depth: Length::from_gecko_style_coord(&self.gecko.mTransformOrigin[2])
                 .expect("clone for Length failed"),
         }
     }
@@ -4205,14 +4205,14 @@ fn static_assert() {
                 self.gecko.mImageRegion.height = 0;
             }
             Either::First(rect) => {
-                self.gecko.mImageRegion.x = rect.left.unwrap_or(Au(0)).0;
-                self.gecko.mImageRegion.y = rect.top.unwrap_or(Au(0)).0;
+                self.gecko.mImageRegion.x = rect.left.map(Au::from).unwrap_or(Au(0)).0;
+                self.gecko.mImageRegion.y = rect.top.map(Au::from).unwrap_or(Au(0)).0;
                 self.gecko.mImageRegion.height = match rect.bottom {
-                    Some(value) => value.0 - self.gecko.mImageRegion.y,
+                    Some(value) => (Au::from(value) - Au(self.gecko.mImageRegion.y)).0,
                     None => 0,
                 };
                 self.gecko.mImageRegion.width = match rect.right {
-                    Some(value) => value.0 - self.gecko.mImageRegion.x,
+                    Some(value) => (Au::from(value) - Au(self.gecko.mImageRegion.x)).0,
                     None => 0,
                 };
             }
@@ -4234,10 +4234,10 @@ fn static_assert() {
         }
 
         Either::First(ClipRect {
-            top: Some(Au(self.gecko.mImageRegion.y)),
-            right: Some(Au(self.gecko.mImageRegion.width) + Au(self.gecko.mImageRegion.x)),
-            bottom: Some(Au(self.gecko.mImageRegion.height) + Au(self.gecko.mImageRegion.y)),
-            left: Some(Au(self.gecko.mImageRegion.x)),
+            top: Some(Au(self.gecko.mImageRegion.y).into()),
+            right: Some(Au(self.gecko.mImageRegion.width + self.gecko.mImageRegion.x).into()),
+            bottom: Some(Au(self.gecko.mImageRegion.height + self.gecko.mImageRegion.y).into()),
+            left: Some(Au(self.gecko.mImageRegion.x).into()),
         })
     }
 
@@ -4293,28 +4293,28 @@ fn static_assert() {
             Either::First(rect) => {
                 self.gecko.mClipFlags = NS_STYLE_CLIP_RECT as u8;
                 if let Some(left) = rect.left {
-                    self.gecko.mClip.x = left.0;
+                    self.gecko.mClip.x = left.to_i32_au();
                 } else {
                     self.gecko.mClip.x = 0;
                     self.gecko.mClipFlags |= NS_STYLE_CLIP_LEFT_AUTO as u8;
                 }
 
                 if let Some(top) = rect.top {
-                    self.gecko.mClip.y = top.0;
+                    self.gecko.mClip.y = top.to_i32_au();
                 } else {
                     self.gecko.mClip.y = 0;
                     self.gecko.mClipFlags |= NS_STYLE_CLIP_TOP_AUTO as u8;
                 }
 
                 if let Some(bottom) = rect.bottom {
-                    self.gecko.mClip.height = (bottom - Au(self.gecko.mClip.y)).0;
+                    self.gecko.mClip.height = (Au::from(bottom) - Au(self.gecko.mClip.y)).0;
                 } else {
                     self.gecko.mClip.height = 1 << 30; // NS_MAXSIZE
                     self.gecko.mClipFlags |= NS_STYLE_CLIP_BOTTOM_AUTO as u8;
                 }
 
                 if let Some(right) = rect.right {
-                    self.gecko.mClip.width = (right - Au(self.gecko.mClip.x)).0;
+                    self.gecko.mClip.width = (Au::from(right) - Au(self.gecko.mClip.x)).0;
                 } else {
                     self.gecko.mClip.width = 1 << 30; // NS_MAXSIZE
                     self.gecko.mClipFlags |= NS_STYLE_CLIP_RIGHT_AUTO as u8;
@@ -4355,28 +4355,28 @@ fn static_assert() {
                 debug_assert!(self.gecko.mClip.x == 0);
                 None
             } else {
-                Some(Au(self.gecko.mClip.x))
+                Some(Au(self.gecko.mClip.x).into())
             };
 
             let top = if self.gecko.mClipFlags & NS_STYLE_CLIP_TOP_AUTO as u8 != 0 {
                 debug_assert!(self.gecko.mClip.y == 0);
                 None
             } else {
-                Some(Au(self.gecko.mClip.y))
+                Some(Au(self.gecko.mClip.y).into())
             };
 
             let bottom = if self.gecko.mClipFlags & NS_STYLE_CLIP_BOTTOM_AUTO as u8 != 0 {
                 debug_assert!(self.gecko.mClip.height == 1 << 30); // NS_MAXSIZE
                 None
             } else {
-                Some(Au(self.gecko.mClip.y + self.gecko.mClip.height))
+                Some(Au(self.gecko.mClip.y + self.gecko.mClip.height).into())
             };
 
             let right = if self.gecko.mClipFlags & NS_STYLE_CLIP_RIGHT_AUTO as u8 != 0 {
                 debug_assert!(self.gecko.mClip.width == 1 << 30); // NS_MAXSIZE
                 None
             } else {
-                Some(Au(self.gecko.mClip.x + self.gecko.mClip.width))
+                Some(Au(self.gecko.mClip.x + self.gecko.mClip.width).into())
             };
 
             Either::First(ClipRect { top: top, right: right, bottom: bottom, left: left, })
@@ -4430,7 +4430,7 @@ fn static_assert() {
                                                gecko_filter),
                 % endfor
                 Blur(length) => fill_filter(NS_STYLE_FILTER_BLUR,
-                                            CoordDataValue::Coord(length.value()),
+                                            CoordDataValue::Coord(length.0.to_i32_au()),
                                             gecko_filter),
 
                 HueRotate(angle) => fill_filter(NS_STYLE_FILTER_HUE_ROTATE,
@@ -4498,7 +4498,7 @@ fn static_assert() {
                 },
                 % endfor
                 NS_STYLE_FILTER_BLUR => {
-                    filters.push(Filter::Blur(NonNegativeAu::from_gecko_style_coord(
+                    filters.push(Filter::Blur(NonNegativeLength::from_gecko_style_coord(
                         &filter.mFilterParameter).unwrap()));
                 },
                 NS_STYLE_FILTER_HUE_ROTATE => {
@@ -4590,8 +4590,8 @@ fn static_assert() {
                   skip_longhands="border-spacing">
 
     pub fn set_border_spacing(&mut self, v: longhands::border_spacing::computed_value::T) {
-        self.gecko.mBorderSpacingCol = v.horizontal.value();
-        self.gecko.mBorderSpacingRow = v.vertical.value();
+        self.gecko.mBorderSpacingCol = v.horizontal.0.to_i32_au();
+        self.gecko.mBorderSpacingRow = v.vertical.0.to_i32_au();
     }
 
     pub fn copy_border_spacing_from(&mut self, other: &Self) {
@@ -4651,7 +4651,7 @@ fn static_assert() {
         // FIXME: Align binary representations and ditch |match| for cast + static_asserts
         let en = match v {
             LineHeight::Normal => CoordDataValue::Normal,
-            LineHeight::Length(val) => CoordDataValue::Coord(val.value()),
+            LineHeight::Length(val) => CoordDataValue::Coord(val.0.to_i32_au()),
             LineHeight::Number(val) => CoordDataValue::Factor(val.0),
             LineHeight::MozBlockHeight =>
                     CoordDataValue::Enumerated(structs::NS_STYLE_LINE_HEIGHT_BLOCK_HEIGHT),
@@ -4682,13 +4682,14 @@ fn static_assert() {
     }
 
     pub fn clone_letter_spacing(&self) -> longhands::letter_spacing::computed_value::T {
+        use values::computed::Length;
         use values::generics::text::Spacing;
         debug_assert!(
             matches!(self.gecko.mLetterSpacing.as_value(),
                      CoordDataValue::Normal |
                      CoordDataValue::Coord(_)),
             "Unexpected computed value for letter-spacing");
-        Au::from_gecko_style_coord(&self.gecko.mLetterSpacing).map_or(Spacing::Normal, Spacing::Value)
+        Length::from_gecko_style_coord(&self.gecko.mLetterSpacing).map_or(Spacing::Normal, Spacing::Value)
     }
 
     <%call expr="impl_coord_copy('letter_spacing', 'mLetterSpacing')"></%call>
@@ -4798,9 +4799,9 @@ fn static_assert() {
         })
     }
 
-    <%call expr="impl_non_negative_app_units('_webkit_text_stroke_width',
-                                             'mWebkitTextStrokeWidth',
-                                             need_clone=True)"></%call>
+    <%call expr="impl_non_negative_length('_webkit_text_stroke_width',
+                                          'mWebkitTextStrokeWidth',
+                                          need_clone=True)"></%call>
 
     #[allow(non_snake_case)]
     pub fn set__moz_tab_size(&mut self, v: longhands::_moz_tab_size::computed_value::T) {
@@ -4810,8 +4811,8 @@ fn static_assert() {
             Either::Second(non_negative_number) => {
                 self.gecko.mTabSize.set_value(CoordDataValue::Factor(non_negative_number.0));
             }
-            Either::First(non_negative_au) => {
-                self.gecko.mTabSize.set(non_negative_au.0);
+            Either::First(non_negative_length) => {
+                self.gecko.mTabSize.set(non_negative_length);
             }
         }
     }
@@ -5209,7 +5210,7 @@ clip-path
                     vec.push(SvgLengthOrPercentageOrNumber::Number(number.into())),
                 CoordDataValue::Coord(coord) =>
                     vec.push(SvgLengthOrPercentageOrNumber::LengthOrPercentage(
-                        LengthOrPercentage::Length(Au(coord)).into())),
+                        LengthOrPercentage::Length(Au(coord).into()).into())),
                 CoordDataValue::Percent(p) =>
                     vec.push(SvgLengthOrPercentageOrNumber::LengthOrPercentage(
                         LengthOrPercentage::Percentage(Percentage(p)).into())),
@@ -5461,8 +5462,8 @@ clip-path
         }
     }
 
-    <% impl_non_negative_app_units("column_rule_width", "mColumnRuleWidth", need_clone=True,
-                                   round_to_pixels=True) %>
+    <% impl_non_negative_length("column_rule_width", "mColumnRuleWidth", need_clone=True,
+                                round_to_pixels=True) %>
 </%self:impl_trait>
 
 <%self:impl_trait style_struct_name="Counters"
diff --git a/components/style/properties/helpers/animated_properties.mako.rs b/components/style/properties/helpers/animated_properties.mako.rs
index 278dcf2138d..0f1db632c91 100644
--- a/components/style/properties/helpers/animated_properties.mako.rs
+++ b/components/style/properties/helpers/animated_properties.mako.rs
@@ -6,7 +6,6 @@
 
 <% from data import to_idl_name, SYSTEM_FONT_LONGHANDS %>
 
-use app_units::Au;
 use cssparser::Parser;
 #[cfg(feature = "gecko")] use gecko_bindings::bindings::RawServoAnimationValueMap;
 #[cfg(feature = "gecko")] use gecko_bindings::structs::RawGeckoGfxMatrix4x4;
@@ -47,8 +46,8 @@ use values::animated::effects::FilterList as AnimatedFilterList;
 use values::animated::effects::TextShadowList as AnimatedTextShadowList;
 use values::computed::{Angle, BorderCornerRadius, CalcLengthOrPercentage};
 use values::computed::{ClipRect, Context, ComputedUrl};
-use values::computed::{LengthOrPercentage, LengthOrPercentageOrAuto};
-use values::computed::{LengthOrPercentageOrNone, MaxLength, NonNegativeAu};
+use values::computed::{Length, LengthOrPercentage, LengthOrPercentageOrAuto};
+use values::computed::{LengthOrPercentageOrNone, MaxLength, NonNegativeLength};
 use values::computed::{NonNegativeNumber, Number, NumberOrPercentage, Percentage};
 use values::computed::{PositiveIntegerOrAuto, ToComputedValue};
 #[cfg(feature = "gecko")] use values::computed::MozLength;
@@ -813,7 +812,7 @@ impl ToAnimatedZero for LengthOrPercentageOrAuto {
             LengthOrPercentageOrAuto::Length(_) |
             LengthOrPercentageOrAuto::Percentage(_) |
             LengthOrPercentageOrAuto::Calc(_) => {
-                Ok(LengthOrPercentageOrAuto::Length(Au(0)))
+                Ok(LengthOrPercentageOrAuto::Length(Length::new(0.)))
             },
             LengthOrPercentageOrAuto::Auto => Err(()),
         }
@@ -827,7 +826,7 @@ impl ToAnimatedZero for LengthOrPercentageOrNone {
             LengthOrPercentageOrNone::Length(_) |
             LengthOrPercentageOrNone::Percentage(_) |
             LengthOrPercentageOrNone::Calc(_) => {
-                Ok(LengthOrPercentageOrNone::Length(Au(0)))
+                Ok(LengthOrPercentageOrNone::Length(Length::new(0.)))
             },
             LengthOrPercentageOrNone::None => Err(()),
         }
@@ -1094,7 +1093,8 @@ impl<H, V> RepeatableListAnimatable for generic_position::Position<H, V>
 impl Animate for ClipRect {
     #[inline]
     fn animate(&self, other: &Self, procedure: Procedure) -> Result<Self, ()> {
-        let animate_component = |this: &Option<Au>, other: &Option<Au>| {
+        use values::computed::Length;
+        let animate_component = |this: &Option<Length>, other: &Option<Length>| {
             match (this.animate(other, procedure)?, procedure) {
                 (None, Procedure::Interpolate { .. }) => Ok(None),
                 (None, _) => Err(()),
@@ -1244,11 +1244,11 @@ impl Animate for TransformOperation {
             ) => {
                 let mut fd_matrix = ComputedMatrix::identity();
                 let mut td_matrix = ComputedMatrix::identity();
-                if fd.0 > 0 {
-                    fd_matrix.m34 = -1. / fd.to_f32_px();
+                if fd.px() > 0. {
+                    fd_matrix.m34 = -1. / fd.px();
                 }
-                if td.0 > 0 {
-                    td_matrix.m34 = -1. / td.to_f32_px();
+                if td.px() > 0. {
+                    td_matrix.m34 = -1. / td.px();
                 }
                 Ok(TransformOperation::Matrix(
                     fd_matrix.animate(&td_matrix, procedure)?,
@@ -2313,9 +2313,9 @@ impl ComputeSquaredDistance for TransformOperation {
                 // convert Au into px.
                 let extract_pixel_length = |lop: &LengthOrPercentage| {
                     match *lop {
-                        LengthOrPercentage::Length(au) => au.to_f64_px(),
+                        LengthOrPercentage::Length(px) => px.px(),
                         LengthOrPercentage::Percentage(_) => 0.,
-                        LengthOrPercentage::Calc(calc) => calc.length().to_f64_px(),
+                        LengthOrPercentage::Calc(calc) => calc.length().px(),
                     }
                 };
 
@@ -2327,7 +2327,7 @@ impl ComputeSquaredDistance for TransformOperation {
                 Ok(
                     fx.compute_squared_distance(&tx)? +
                     fy.compute_squared_distance(&ty)? +
-                    fz.to_f64_px().compute_squared_distance(&tz.to_f64_px())?,
+                    fz.compute_squared_distance(&tz)?,
                 )
             },
             (
@@ -2364,12 +2364,12 @@ impl ComputeSquaredDistance for TransformOperation {
             ) => {
                 let mut fd_matrix = ComputedMatrix::identity();
                 let mut td_matrix = ComputedMatrix::identity();
-                if fd.0 > 0 {
-                    fd_matrix.m34 = -1. / fd.to_f32_px();
+                if fd.px() > 0. {
+                    fd_matrix.m34 = -1. / fd.px();
                 }
 
-                if td.0 > 0 {
-                    td_matrix.m34 = -1. / td.to_f32_px();
+                if td.px() > 0. {
+                    td_matrix.m34 = -1. / td.px();
                 }
                 fd_matrix.compute_squared_distance(&td_matrix)
             }
@@ -2381,8 +2381,8 @@ impl ComputeSquaredDistance for TransformOperation {
                 &TransformOperation::Perspective(ref p),
             ) => {
                 let mut p_matrix = ComputedMatrix::identity();
-                if p.0 > 0 {
-                    p_matrix.m34 = -1. / p.to_f32_px();
+                if p.px() > 0. {
+                    p_matrix.m34 = -1. / p.px();
                 }
                 p_matrix.compute_squared_distance(&m)
             }
@@ -2464,7 +2464,7 @@ impl From<NonNegativeNumber> for NumberOrPercentage {
 impl From<LengthOrPercentage> for NumberOrPercentage {
     fn from(lop: LengthOrPercentage) -> NumberOrPercentage {
         match lop {
-            LengthOrPercentage::Length(len) => NumberOrPercentage::Number(len.to_f32_px()),
+            LengthOrPercentage::Length(len) => NumberOrPercentage::Number(len.px()),
             LengthOrPercentage::Percentage(p) => NumberOrPercentage::Percentage(p),
             LengthOrPercentage::Calc(_) => {
                 panic!("We dont't expected calc interpolation for SvgLengthOrPercentageOrNumber");
diff --git a/components/style/properties/longhand/border.mako.rs b/components/style/properties/longhand/border.mako.rs
index b6dd5338938..25460d010d9 100644
--- a/components/style/properties/longhand/border.mako.rs
+++ b/components/style/properties/longhand/border.mako.rs
@@ -42,11 +42,11 @@
 
     ${helpers.predefined_type("border-%s-width" % side_name,
                               "BorderSideWidth",
-                              "::values::computed::NonNegativeAu::from_px(3)",
-                              computed_type="::values::computed::NonNegativeAu",
+                              "::values::computed::NonNegativeLength::new(3.)",
+                              computed_type="::values::computed::NonNegativeLength",
                               alias=maybe_moz_logical_alias(product, side, "-moz-border-%s-width"),
                               spec=maybe_logical_spec(side, "width"),
-                              animation_value_type="NonNegativeAu",
+                              animation_value_type="NonNegativeLength",
                               logical=is_logical,
                               flags="APPLIES_TO_FIRST_LETTER",
                               allow_quirks=not is_logical)}
diff --git a/components/style/properties/longhand/box.mako.rs b/components/style/properties/longhand/box.mako.rs
index b30a11c50fe..52befd9c67d 100644
--- a/components/style/properties/longhand/box.mako.rs
+++ b/components/style/properties/longhand/box.mako.rs
@@ -620,7 +620,6 @@ ${helpers.predefined_type(
                    animation_value_type="ComputedValue"
                    flags="CREATES_STACKING_CONTEXT FIXPOS_CB"
                    spec="https://drafts.csswg.org/css-transforms/#propdef-transform">
-    use app_units::Au;
     use values::computed::{LengthOrPercentageOrNumber as ComputedLoPoNumber, LengthOrNumber as ComputedLoN};
     use values::computed::{LengthOrPercentage as ComputedLoP, Length as ComputedLength};
     use values::generics::transform::Matrix;
@@ -631,7 +630,6 @@ ${helpers.predefined_type(
     use std::fmt;
 
     pub mod computed_value {
-        use app_units::Au;
         use values::CSSFloat;
         use values::computed;
         use values::computed::{Length, LengthOrPercentage};
@@ -673,7 +671,7 @@ ${helpers.predefined_type(
                     m21: 0.0, m22: 1.0, m23: 0.0, m24: 0.0,
                     m31: 0.0, m32: 0.0, m33: 1.0, m34: 0.0,
                     m41: LengthOrPercentage::zero(), m42: LengthOrPercentage::zero(),
-                    m43: Au(0), m44: 1.0
+                    m43: Length::new(0.), m44: 1.0
                 }
             }
         }
@@ -1252,7 +1250,7 @@ ${helpers.predefined_type(
                         result.push(computed_value::ComputedOperation::Translate(
                             tx,
                             computed::length::LengthOrPercentage::zero(),
-                            computed::length::Length::new(0)));
+                            computed::length::Length::new(0.)));
                     }
                     SpecifiedOperation::Translate(ref tx, Some(ref ty)) => {
                         let tx = tx.to_computed_value(context);
@@ -1260,21 +1258,21 @@ ${helpers.predefined_type(
                         result.push(computed_value::ComputedOperation::Translate(
                             tx,
                             ty,
-                            computed::length::Length::new(0)));
+                            computed::length::Length::new(0.)));
                     }
                     SpecifiedOperation::TranslateX(ref tx) => {
                         let tx = tx.to_computed_value(context);
                         result.push(computed_value::ComputedOperation::Translate(
                             tx,
                             computed::length::LengthOrPercentage::zero(),
-                            computed::length::Length::new(0)));
+                            computed::length::Length::new(0.)));
                     }
                     SpecifiedOperation::TranslateY(ref ty) => {
                         let ty = ty.to_computed_value(context);
                         result.push(computed_value::ComputedOperation::Translate(
                             computed::length::LengthOrPercentage::zero(),
                             ty,
-                            computed::length::Length::new(0)));
+                            computed::length::Length::new(0.)));
                     }
                     SpecifiedOperation::TranslateZ(ref tz) => {
                         let tz = tz.to_computed_value(context);
@@ -1482,10 +1480,10 @@ ${helpers.predefined_type(
     }
 
     // Converts computed LengthOrPercentageOrNumber into computed
-    // LengthOrPercentage. Number maps into Length
+    // LengthOrPercentage. Number maps into Length (pixel unit)
     fn lopon_to_lop(value: &ComputedLoPoNumber) -> ComputedLoP {
         match *value {
-            Either::First(number) => ComputedLoP::Length(Au::from_f32_px(number)),
+            Either::First(number) => ComputedLoP::Length(ComputedLength::new(number)),
             Either::Second(length_or_percentage) => length_or_percentage,
         }
     }
@@ -1495,7 +1493,7 @@ ${helpers.predefined_type(
     fn lon_to_length(value: &ComputedLoN) -> ComputedLength {
         match *value {
             Either::First(length) => length,
-            Either::Second(number) => Au::from_f32_px(number),
+            Either::Second(number) => ComputedLength::new(number),
         }
     }
 </%helpers:longhand>
diff --git a/components/style/properties/longhand/column.mako.rs b/components/style/properties/longhand/column.mako.rs
index d2f7dd6d0b1..ddce1a518a8 100644
--- a/components/style/properties/longhand/column.mako.rs
+++ b/components/style/properties/longhand/column.mako.rs
@@ -39,12 +39,12 @@ ${helpers.single_keyword("column-fill", "balance auto", extra_prefixes="moz",
 
 ${helpers.predefined_type("column-rule-width",
                           "BorderSideWidth",
-                          "::values::computed::NonNegativeAu::from_px(3)",
+                          "::values::computed::NonNegativeLength::new(3.)",
                           initial_specified_value="specified::BorderSideWidth::Medium",
-                          computed_type="::values::computed::NonNegativeAu",
+                          computed_type="::values::computed::NonNegativeLength",
                           products="gecko",
                           spec="https://drafts.csswg.org/css-multicol/#propdef-column-rule-width",
-                          animation_value_type="NonNegativeAu",
+                          animation_value_type="NonNegativeLength",
                           extra_prefixes="moz")}
 
 // https://drafts.csswg.org/css-multicol-1/#crc
diff --git a/components/style/properties/longhand/font.mako.rs b/components/style/properties/longhand/font.mako.rs
index d56bea05dc7..eafff197287 100644
--- a/components/style/properties/longhand/font.mako.rs
+++ b/components/style/properties/longhand/font.mako.rs
@@ -589,7 +589,7 @@ ${helpers.single_keyword_system("font-variant-caps",
     }
 </%helpers:longhand>
 
-<%helpers:longhand name="font-size" need_clone="True" animation_value_type="NonNegativeAu"
+<%helpers:longhand name="font-size" need_clone="True" animation_value_type="NonNegativeLength"
                    flags="APPLIES_TO_FIRST_LETTER APPLIES_TO_FIRST_LINE APPLIES_TO_PLACEHOLDER"
                    allow_quirks="True" spec="https://drafts.csswg.org/css-fonts/#propdef-font-size">
     use app_units::Au;
@@ -597,7 +597,7 @@ ${helpers.single_keyword_system("font-variant-caps",
     use std::fmt;
     use style_traits::ToCss;
     use values::FONT_MEDIUM_PX;
-    use values::computed::NonNegativeAu;
+    use values::computed::NonNegativeLength;
     use values::specified::{AllowQuirks, FontRelativeLength, LengthOrPercentage, NoCalcLength};
     use values::specified::length::FontBaseSize;
 
@@ -627,7 +627,7 @@ ${helpers.single_keyword_system("font-variant-caps",
         /// go into the ratio, and the remaining units all computed together
         /// will go into the offset.
         /// See bug 1355707.
-        Keyword(KeywordSize, f32, NonNegativeAu),
+        Keyword(KeywordSize, f32, NonNegativeLength),
         Smaller,
         Larger,
         System(SystemFont)
@@ -640,8 +640,8 @@ ${helpers.single_keyword_system("font-variant-caps",
     }
 
     pub mod computed_value {
-        use values::computed::NonNegativeAu;
-        pub type T = NonNegativeAu;
+        use values::computed::NonNegativeLength;
+        pub type T = NonNegativeLength;
     }
 
     /// CSS font keywords
@@ -716,7 +716,7 @@ ${helpers.single_keyword_system("font-variant-caps",
 
     % if product == "servo":
         impl ToComputedValue for KeywordSize {
-            type ComputedValue = NonNegativeAu;
+            type ComputedValue = NonNegativeLength;
             #[inline]
             fn to_computed_value(&self, _: &Context) -> computed_value::T {
                 // https://drafts.csswg.org/css-fonts-3/#font-size-prop
@@ -740,7 +740,7 @@ ${helpers.single_keyword_system("font-variant-caps",
         }
     % else:
         impl ToComputedValue for KeywordSize {
-            type ComputedValue = NonNegativeAu;
+            type ComputedValue = NonNegativeLength;
             #[inline]
             fn to_computed_value(&self, cx: &Context) -> computed_value::T {
                 use gecko_bindings::structs::nsIAtom;
@@ -776,7 +776,7 @@ ${helpers.single_keyword_system("font-variant-caps",
                 let base_size_px = au_to_int_px(base_size as f32);
                 let html_size = self.html_size() as usize;
                 if base_size_px >= 9 && base_size_px <= 16 {
-                    NonNegativeAu::from_px(FONT_SIZE_MAPPING[(base_size_px - 9) as usize][html_size])
+                    NonNegativeLength::new(FONT_SIZE_MAPPING[(base_size_px - 9) as usize][html_size] as f32)
                 } else {
                     Au(FONT_SIZE_FACTORS[html_size] * base_size / 100).into()
                 }
@@ -811,17 +811,17 @@ ${helpers.single_keyword_system("font-variant-caps",
 
         /// If this value is specified as a ratio of the parent font (em units
         /// or percent) return the ratio
-        pub fn as_font_ratio(&self, context: &Context) -> Option<(f32, NonNegativeAu)> {
+        pub fn as_font_ratio(&self, context: &Context) -> Option<(f32, NonNegativeLength)> {
             match *self {
                 SpecifiedValue::Length(ref lop) => {
                     match *lop {
                         LengthOrPercentage::Percentage(pc) => {
-                            Some((pc.0, Au(0).into()))
+                            Some((pc.0, NonNegativeLength::zero()))
                         }
                         LengthOrPercentage::Length(ref nocalc) => {
                             match *nocalc {
                                 NoCalcLength::FontRelative(FontRelativeLength::Em(em)) => {
-                                    Some((em, Au(0).into()))
+                                    Some((em, NonNegativeLength::zero()))
                                 }
                                 _ => None,
                             }
@@ -837,7 +837,7 @@ ${helpers.single_keyword_system("font-variant-caps",
                             // to do here -- Gecko recascades as if the font had changed, we instead track the changes
                             // and reapply, which means that we carry over old computed ex/ch values whilst Gecko
                             // recomputes new ones. This is enough of an edge case to not really matter.
-                            let abs = calc.to_computed_value_zoomed(context, FontBaseSize::Custom(Au(0).into()))
+                            let abs = calc.to_computed_value_zoomed(context, FontBaseSize::Custom(Au(0)))
                                           .length_component().into();
                             Some((ratio, abs))
                         }
@@ -854,7 +854,7 @@ ${helpers.single_keyword_system("font-variant-caps",
             &self,
             context: &Context,
             base_size: FontBaseSize,
-        ) -> NonNegativeAu {
+        ) -> NonNegativeLength {
             use values::specified::length::FontRelativeLength;
             match *self {
                 SpecifiedValue::Length(LengthOrPercentage::Length(
@@ -867,7 +867,7 @@ ${helpers.single_keyword_system("font-variant-caps",
                 }
                 SpecifiedValue::Length(LengthOrPercentage::Length(
                         NoCalcLength::Absolute(ref l))) => {
-                    context.maybe_zoom_text(l.to_computed_value(context).into())
+                    context.maybe_zoom_text(l.to_computed_value(context)).into()
                 }
                 SpecifiedValue::Length(LengthOrPercentage::Length(ref l)) => {
                     l.to_computed_value(context).into()
@@ -880,7 +880,8 @@ ${helpers.single_keyword_system("font-variant-caps",
                     calc.to_used_value(Some(base_size.resolve(context))).unwrap().into()
                 }
                 SpecifiedValue::Keyword(ref key, fraction, offset) => {
-                    context.maybe_zoom_text(key.to_computed_value(context).scale_by(fraction) + offset)
+                    let key_len = key.to_computed_value(context).scale_by(fraction) + offset;
+                    context.maybe_zoom_text(key_len.0).into()
                 }
                 SpecifiedValue::Smaller => {
                     FontRelativeLength::Em(1. / LARGER_FONT_SIZE_RATIO)
@@ -903,7 +904,7 @@ ${helpers.single_keyword_system("font-variant-caps",
     #[inline]
     #[allow(missing_docs)]
     pub fn get_initial_value() -> computed_value::T {
-        NonNegativeAu::from_px(FONT_MEDIUM_PX)
+        NonNegativeLength::new(FONT_MEDIUM_PX as f32)
     }
 
     #[inline]
@@ -970,7 +971,7 @@ ${helpers.single_keyword_system("font-variant-caps",
     #[allow(unused_mut)]
     pub fn cascade_specified_font_size(context: &mut Context,
                                        specified_value: &SpecifiedValue,
-                                       mut computed: NonNegativeAu) {
+                                       mut computed: NonNegativeLength) {
         if let SpecifiedValue::Keyword(kw, fraction, offset) = *specified_value {
             context.builder.font_size_keyword = Some((kw, fraction, offset));
         } else if let Some((ratio, abs)) = specified_value.as_font_ratio(context) {
@@ -982,7 +983,7 @@ ${helpers.single_keyword_system("font-variant-caps",
             // See bug 1355707
             if let Some((kw, fraction, old_abs)) = *context.builder.inherited_font_computation_data() {
                 context.builder.font_size_keyword =
-                    Some((kw, fraction * ratio, abs + old_abs.0.scale_by(ratio).into()));
+                    Some((kw, fraction * ratio, abs + old_abs.scale_by(ratio)));
             } else {
                 context.builder.font_size_keyword = None;
             }
@@ -1001,7 +1002,8 @@ ${helpers.single_keyword_system("font-variant-caps",
                context.builder.get_font().gecko().mGenericID !=
                context.builder.get_parent_font().gecko().mGenericID {
                 if let Some((kw, ratio, offset)) = context.builder.font_size_keyword {
-                    computed = context.maybe_zoom_text(kw.to_computed_value(context).scale_by(ratio) + offset);
+                    let len = kw.to_computed_value(context).scale_by(ratio) + offset;
+                    computed = context.maybe_zoom_text(len.0).into();
                 }
             }
         % endif
@@ -1017,7 +1019,7 @@ ${helpers.single_keyword_system("font-variant-caps",
         if let Some(parent) = parent_unconstrained {
             let new_unconstrained =
                 specified_value
-                    .to_computed_value_against(context, FontBaseSize::Custom(parent.0));
+                    .to_computed_value_against(context, FontBaseSize::Custom(Au::from(parent)));
             context.builder
                    .mutate_font()
                    .apply_unconstrained_font_size(new_unconstrained);
@@ -1031,7 +1033,8 @@ ${helpers.single_keyword_system("font-variant-caps",
         // changes using the font_size_keyword. We also need to do this to
         // handle mathml scriptlevel changes
         let kw_inherited_size = context.builder.font_size_keyword.map(|(kw, ratio, offset)| {
-            context.maybe_zoom_text(SpecifiedValue::Keyword(kw, ratio, offset).to_computed_value(context))
+            let len = SpecifiedValue::Keyword(kw, ratio, offset).to_computed_value(context);
+            context.maybe_zoom_text(len.0).into()
         });
         let parent_kw;
         let device = context.builder.device;
@@ -1058,8 +1061,8 @@ ${helpers.single_keyword_system("font-variant-caps",
         // compute to the same value and depends on the font
         let computed = context.maybe_zoom_text(
                             longhands::font_size::get_initial_specified_value()
-                                .to_computed_value(context)
-                        );
+                                .to_computed_value(context).0
+                        ).into();
         context.builder.mutate_font().set_font_size(computed);
         % if product == "gecko":
             let device = context.builder.device;
@@ -2351,21 +2354,21 @@ ${helpers.single_keyword("-moz-math-variant",
                    predefined_type="Length" gecko_ffi_name="mScriptMinSize"
                    spec="Internal (not web-exposed)"
                    internal="True">
-    use app_units::Au;
     use gecko_bindings::structs::NS_MATHML_DEFAULT_SCRIPT_MIN_SIZE_PT;
-    use values::specified::length::{AU_PER_PT, FontBaseSize, NoCalcLength};
+    use values::computed::Length;
+    use values::specified::length::{AU_PER_PT, AU_PER_PX, FontBaseSize, NoCalcLength};
 
     #[derive(Clone, Debug, PartialEq, ToCss)]
     pub struct SpecifiedValue(pub NoCalcLength);
 
     pub mod computed_value {
-        pub type T = super::Au;
+        pub type T = ::values::computed::Length;
     }
 
     impl ToComputedValue for SpecifiedValue {
         type ComputedValue = computed_value::T;
 
-        fn to_computed_value(&self, cx: &Context) -> Au {
+        fn to_computed_value(&self, cx: &Context) -> Length {
             // this value is used in the computation of font-size, so
             // we use the parent size
             let base_size = FontBaseSize::InheritedStyle;
@@ -2388,7 +2391,7 @@ ${helpers.single_keyword("-moz-math-variant",
 
     #[inline]
     pub fn get_initial_value() -> computed_value::T {
-        Au((NS_MATHML_DEFAULT_SCRIPT_MIN_SIZE_PT as f32 * AU_PER_PT) as i32)
+        Length::new(NS_MATHML_DEFAULT_SCRIPT_MIN_SIZE_PT as f32 * (AU_PER_PT / AU_PER_PX))
     }
 
     pub fn parse<'i, 't>(_context: &ParserContext, _input: &mut Parser<'i, 't>)
diff --git a/components/style/properties/longhand/inherited_svg.mako.rs b/components/style/properties/longhand/inherited_svg.mako.rs
index 7ab12214619..41039b2954b 100644
--- a/components/style/properties/longhand/inherited_svg.mako.rs
+++ b/components/style/properties/longhand/inherited_svg.mako.rs
@@ -65,7 +65,7 @@ ${helpers.predefined_type(
 
 ${helpers.predefined_type(
     "stroke-width", "SVGWidth",
-    "::values::computed::NonNegativeAu::from_px(1).into()",
+    "::values::computed::NonNegativeLength::new(1.).into()",
     products="gecko",
     boxed="True",
     animation_value_type="::values::computed::SVGWidth",
diff --git a/components/style/properties/longhand/inherited_table.mako.rs b/components/style/properties/longhand/inherited_table.mako.rs
index c7e060124bf..f234d7f1a60 100644
--- a/components/style/properties/longhand/inherited_table.mako.rs
+++ b/components/style/properties/longhand/inherited_table.mako.rs
@@ -27,13 +27,13 @@ ${helpers.single_keyword("caption-side", "top bottom",
 
     pub mod computed_value {
         use values::animated::{ToAnimatedValue, ToAnimatedZero};
-        use values::computed::NonNegativeAu;
+        use values::computed::NonNegativeLength;
 
         #[cfg_attr(feature = "servo", derive(HeapSizeOf))]
         #[derive(Animate, Clone, ComputeSquaredDistance, Copy, Debug, PartialEq, ToCss)]
         pub struct T {
-            pub horizontal: NonNegativeAu,
-            pub vertical: NonNegativeAu,
+            pub horizontal: NonNegativeLength,
+            pub vertical: NonNegativeLength,
         }
 
         impl ToAnimatedZero for T {
@@ -68,10 +68,10 @@ ${helpers.single_keyword("caption-side", "top bottom",
 
     #[inline]
     pub fn get_initial_value() -> computed_value::T {
-        use values::computed::NonNegativeAu;
+        use values::computed::NonNegativeLength as ComputedNonNegativeLength;
         computed_value::T {
-            horizontal: NonNegativeAu::zero(),
-            vertical: NonNegativeAu::zero(),
+            horizontal: ComputedNonNegativeLength::zero(),
+            vertical: ComputedNonNegativeLength::zero(),
         }
     }
 
diff --git a/components/style/properties/longhand/inherited_text.mako.rs b/components/style/properties/longhand/inherited_text.mako.rs
index 29483ba43f7..82967ee2440 100644
--- a/components/style/properties/longhand/inherited_text.mako.rs
+++ b/components/style/properties/longhand/inherited_text.mako.rs
@@ -39,7 +39,7 @@ ${helpers.single_keyword("-moz-text-size-adjust", "auto none",
 
 ${helpers.predefined_type("text-indent",
                           "LengthOrPercentage",
-                          "computed::LengthOrPercentage::Length(Au(0))",
+                          "computed::LengthOrPercentage::Length(computed::Length::new(0.))",
                           animation_value_type="ComputedValue",
                           spec="https://drafts.csswg.org/css-text/#propdef-text-indent",
                           allow_quirks=True)}
@@ -741,9 +741,9 @@ ${helpers.predefined_type(
 
 ${helpers.predefined_type("-webkit-text-stroke-width",
                           "BorderSideWidth",
-                          "::values::computed::NonNegativeAu::from_px(0)",
+                          "::values::computed::NonNegativeLength::new(0.)",
                           initial_specified_value="specified::BorderSideWidth::Length(specified::Length::zero())",
-                          computed_type="::values::computed::NonNegativeAu",
+                          computed_type="::values::computed::NonNegativeLength",
                           products="gecko",
                           flags="APPLIES_TO_FIRST_LETTER APPLIES_TO_FIRST_LINE APPLIES_TO_PLACEHOLDER",
                           spec="https://compat.spec.whatwg.org/#the-webkit-text-stroke-width",
diff --git a/components/style/properties/longhand/margin.mako.rs b/components/style/properties/longhand/margin.mako.rs
index 243adcafe5f..948faeed06f 100644
--- a/components/style/properties/longhand/margin.mako.rs
+++ b/components/style/properties/longhand/margin.mako.rs
@@ -13,7 +13,7 @@
             spec = "https://drafts.csswg.org/css-logical-props/#propdef-margin-%s" % side[1]
     %>
     ${helpers.predefined_type("margin-%s" % side[0], "LengthOrPercentageOrAuto",
-                              "computed::LengthOrPercentageOrAuto::Length(Au(0))",
+                              "computed::LengthOrPercentageOrAuto::Length(computed::Length::new(0.))",
                               alias=maybe_moz_logical_alias(product, side, "-moz-margin-%s"),
                               allow_quirks=not side[1],
                               animation_value_type="ComputedValue", logical = side[1], spec = spec,
diff --git a/components/style/properties/longhand/outline.mako.rs b/components/style/properties/longhand/outline.mako.rs
index 6adb743da1f..ee7dcf604d0 100644
--- a/components/style/properties/longhand/outline.mako.rs
+++ b/components/style/properties/longhand/outline.mako.rs
@@ -69,10 +69,10 @@ ${helpers.predefined_type(
 
 ${helpers.predefined_type("outline-width",
                           "BorderSideWidth",
-                          "::values::computed::NonNegativeAu::from_px(3)",
+                          "::values::computed::NonNegativeLength::new(3.)",
                           initial_specified_value="specified::BorderSideWidth::Medium",
-                          computed_type="::values::computed::NonNegativeAu",
-                          animation_value_type="NonNegativeAu",
+                          computed_type="::values::computed::NonNegativeLength",
+                          animation_value_type="NonNegativeLength",
                           spec="https://drafts.csswg.org/css-ui/#propdef-outline-width")}
 
 // The -moz-outline-radius-* properties are non-standard and not on a standards track.
@@ -85,6 +85,6 @@ ${helpers.predefined_type("outline-width",
         spec="Nonstandard (https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-outline-radius)")}
 % endfor
 
-${helpers.predefined_type("outline-offset", "Length", "Au(0)", products="servo gecko",
-                          animation_value_type="ComputedValue",
+${helpers.predefined_type("outline-offset", "Length", "::values::computed::Length::new(0.)",
+                          products="servo gecko", animation_value_type="ComputedValue",
                           spec="https://drafts.csswg.org/css-ui/#propdef-outline-offset")}
diff --git a/components/style/properties/longhand/position.mako.rs b/components/style/properties/longhand/position.mako.rs
index c92ffcf4f42..d3989dc90ed 100644
--- a/components/style/properties/longhand/position.mako.rs
+++ b/components/style/properties/longhand/position.mako.rs
@@ -209,7 +209,7 @@ ${helpers.predefined_type("order", "Integer", "0",
                                   animation_value_type="ComputedValue", logical = logical)}
         ${helpers.predefined_type("min-%s" % size,
                                   "LengthOrPercentage",
-                                  "computed::LengthOrPercentage::Length(Au(0))",
+                                  "computed::LengthOrPercentage::Length(computed::Length::new(0.))",
                                   "parse_non_negative",
                                   spec=spec % ("min-%s" % size),
                                   animation_value_type="ComputedValue",
diff --git a/components/style/properties/properties.mako.rs b/components/style/properties/properties.mako.rs
index b66a1a44ec3..60004dda59a 100644
--- a/components/style/properties/properties.mako.rs
+++ b/components/style/properties/properties.mako.rs
@@ -44,7 +44,7 @@ use stylesheets::{CssRuleType, Origin, UrlExtraData};
 #[cfg(feature = "servo")] use values::Either;
 use values::generics::text::LineHeight;
 use values::computed;
-use values::computed::NonNegativeAu;
+use values::computed::NonNegativeLength;
 use rule_tree::{CascadeLevel, StrongRuleNode};
 use self::computed_value_flags::ComputedValueFlags;
 use style_adjuster::StyleAdjuster;
@@ -110,7 +110,7 @@ pub trait MaybeBoxed<Out> {
 /// When this is Some, we compute font sizes by computing the keyword against
 /// the generic font, and then multiplying it by the ratio (as well as adding any
 /// absolute offset from calcs)
-pub type FontComputationData = Option<(longhands::font_size::KeywordSize, f32, NonNegativeAu)>;
+pub type FontComputationData = Option<(longhands::font_size::KeywordSize, f32, NonNegativeLength)>;
 
 /// Default value for FontComputationData
 pub fn default_font_size_keyword() -> FontComputationData {
@@ -1690,7 +1690,7 @@ pub mod style_structs {
     use std::hash::{Hash, Hasher};
     use logical_geometry::WritingMode;
     use media_queries::Device;
-    use values::computed::NonNegativeAu;
+    use values::computed::NonNegativeLength;
 
     % for style_struct in data.active_style_structs():
         % if style_struct.name == "Font":
@@ -1790,7 +1790,7 @@ pub mod style_structs {
                     /// Whether the border-${side} property has nonzero width.
                     #[allow(non_snake_case)]
                     pub fn border_${side}_has_nonzero_width(&self) -> bool {
-                        self.border_${side}_width != NonNegativeAu::zero()
+                        self.border_${side}_width != NonNegativeLength::zero()
                     }
                 % endfor
             % elif style_struct.name == "Font":
@@ -1808,7 +1808,7 @@ pub mod style_structs {
 
                 /// (Servo does not handle MathML, so this just calls copy_font_size_from)
                 pub fn inherit_font_size_from(&mut self, parent: &Self,
-                                              _: Option<NonNegativeAu>,
+                                              _: Option<NonNegativeLength>,
                                               _: &Device) -> bool {
                     self.copy_font_size_from(parent);
                     false
@@ -1817,19 +1817,19 @@ pub mod style_structs {
                 pub fn apply_font_size(&mut self,
                                        v: longhands::font_size::computed_value::T,
                                        _: &Self,
-                                       _: &Device) -> Option<NonNegativeAu> {
+                                       _: &Device) -> Option<NonNegativeLength> {
                     self.set_font_size(v);
                     None
                 }
                 /// (Servo does not handle MathML, so this does nothing)
-                pub fn apply_unconstrained_font_size(&mut self, _: NonNegativeAu) {
+                pub fn apply_unconstrained_font_size(&mut self, _: NonNegativeLength) {
                 }
 
             % elif style_struct.name == "Outline":
                 /// Whether the outline-width property is non-zero.
                 #[inline]
                 pub fn outline_has_nonzero_width(&self) -> bool {
-                    self.outline_width != NonNegativeAu::zero()
+                    self.outline_width != NonNegativeLength::zero()
                 }
             % elif style_struct.name == "Text":
                 /// Whether the text decoration has an underline.
@@ -2241,10 +2241,10 @@ impl ComputedValuesInner {
     pub fn border_width_for_writing_mode(&self, writing_mode: WritingMode) -> LogicalMargin<Au> {
         let border_style = self.get_border();
         LogicalMargin::from_physical(writing_mode, SideOffsets2D::new(
-            border_style.border_top_width.0,
-            border_style.border_right_width.0,
-            border_style.border_bottom_width.0,
-            border_style.border_left_width.0,
+            Au::from(border_style.border_top_width),
+            Au::from(border_style.border_right_width),
+            Au::from(border_style.border_bottom_width),
+            Au::from(border_style.border_left_width),
         ))
     }
 
@@ -2326,7 +2326,7 @@ impl ComputedValuesInner {
                         }
                     }
                     computed_values::transform::ComputedOperation::Translate(_, _, z) => {
-                        if z != Au(0) {
+                        if z.px() != 0. {
                             return true;
                         }
                     }
@@ -3407,7 +3407,7 @@ pub fn adjust_border_width(style: &mut StyleBuilder) {
         // Like calling to_computed_value, which wouldn't type check.
         if style.get_border().clone_border_${side}_style().none_or_hidden() &&
            style.get_border().border_${side}_has_nonzero_width() {
-            style.set_border_${side}_width(NonNegativeAu::zero());
+            style.set_border_${side}_width(NonNegativeLength::zero());
         }
     % endfor
 }
@@ -3431,7 +3431,7 @@ pub fn modify_border_style_for_inline_sides(style: &mut Arc<ComputedValues>,
                 PhysicalSide::Top =>    (border.border_top_width,    border.border_top_style),
                 PhysicalSide::Bottom => (border.border_bottom_width, border.border_bottom_style),
             };
-            if current_style == (NonNegativeAu::zero(), BorderStyle::none) {
+            if current_style == (NonNegativeLength::zero(), BorderStyle::none) {
                 return;
             }
         }
@@ -3439,19 +3439,19 @@ pub fn modify_border_style_for_inline_sides(style: &mut Arc<ComputedValues>,
         let border = Arc::make_mut(&mut style.border);
         match side {
             PhysicalSide::Left => {
-                border.border_left_width = NonNegativeAu::zero();
+                border.border_left_width = NonNegativeLength::zero();
                 border.border_left_style = BorderStyle::none;
             }
             PhysicalSide::Right => {
-                border.border_right_width = NonNegativeAu::zero();
+                border.border_right_width = NonNegativeLength::zero();
                 border.border_right_style = BorderStyle::none;
             }
             PhysicalSide::Bottom => {
-                border.border_bottom_width = NonNegativeAu::zero();
+                border.border_bottom_width = NonNegativeLength::zero();
                 border.border_bottom_style = BorderStyle::none;
             }
             PhysicalSide::Top => {
-                border.border_top_width = NonNegativeAu::zero();
+                border.border_top_width = NonNegativeLength::zero();
                 border.border_top_style = BorderStyle::none;
             }
         }
diff --git a/components/style/servo/media_queries.rs b/components/style/servo/media_queries.rs
index 43e38554a32..dff545e1746 100644
--- a/components/style/servo/media_queries.rs
+++ b/components/style/servo/media_queries.rs
@@ -65,7 +65,7 @@ impl Device {
             viewport_size,
             device_pixel_ratio,
             // FIXME(bz): Seems dubious?
-            root_font_size: AtomicIsize::new(font_size::get_initial_value().value() as isize),
+            root_font_size: AtomicIsize::new(font_size::get_initial_value().0.to_i32_au() as isize),
             used_root_font_size: AtomicBool::new(false),
             used_viewport_units: AtomicBool::new(false),
         }
@@ -260,9 +260,9 @@ impl Range<specified::Length> {
         };
 
         match *self {
-            Range::Min(ref width) => Range::Min(width.to_computed_value(&context)),
-            Range::Max(ref width) => Range::Max(width.to_computed_value(&context)),
-            Range::Eq(ref width) => Range::Eq(width.to_computed_value(&context))
+            Range::Min(ref width) => Range::Min(Au::from(width.to_computed_value(&context))),
+            Range::Max(ref width) => Range::Max(Au::from(width.to_computed_value(&context))),
+            Range::Eq(ref width) => Range::Eq(Au::from(width.to_computed_value(&context)))
         }
     }
 }
diff --git a/components/style/stylesheets/viewport_rule.rs b/components/style/stylesheets/viewport_rule.rs
index 22d41f992e0..a3dd8183e0a 100644
--- a/components/style/stylesheets/viewport_rule.rs
+++ b/components/style/stylesheets/viewport_rule.rs
@@ -735,7 +735,7 @@ impl MaybeNew for ViewportConstraints {
                     match *$value {
                         ViewportLength::Specified(ref length) => match *length {
                             LengthOrPercentageOrAuto::Length(ref value) =>
-                                Some(value.to_computed_value(&context)),
+                                Some(Au::from(value.to_computed_value(&context))),
                             LengthOrPercentageOrAuto::Percentage(value) =>
                                 Some(initial_viewport.$dimension.scale_by(value.0)),
                             LengthOrPercentageOrAuto::Auto => None,
diff --git a/components/style/values/animated/mod.rs b/components/style/values/animated/mod.rs
index 1af8f6409e1..3a9764d33de 100644
--- a/components/style/values/animated/mod.rs
+++ b/components/style/values/animated/mod.rs
@@ -19,7 +19,7 @@ use values::computed::ComputedUrl;
 use values::computed::GreaterThanOrEqualToOneNumber as ComputedGreaterThanOrEqualToOneNumber;
 use values::computed::MaxLength as ComputedMaxLength;
 use values::computed::MozLength as ComputedMozLength;
-use values::computed::NonNegativeAu;
+use values::computed::NonNegativeLength as ComputedNonNegativeLength;
 use values::computed::NonNegativeLengthOrPercentage as ComputedNonNegativeLengthOrPercentage;
 use values::computed::NonNegativeNumber as ComputedNonNegativeNumber;
 use values::computed::PositiveInteger as ComputedPositiveInteger;
@@ -296,7 +296,7 @@ impl ToAnimatedValue for ComputedGreaterThanOrEqualToOneNumber {
     }
 }
 
-impl ToAnimatedValue for NonNegativeAu {
+impl ToAnimatedValue for ComputedNonNegativeLength {
     type AnimatedValue = Self;
 
     #[inline]
@@ -306,7 +306,7 @@ impl ToAnimatedValue for NonNegativeAu {
 
     #[inline]
     fn from_animated_value(animated: Self::AnimatedValue) -> Self {
-        max(animated.0, Au(0)).into()
+        ComputedNonNegativeLength::new(animated.px().max(0.))
     }
 }
 
@@ -363,12 +363,12 @@ impl ToAnimatedValue for ComputedMaxLength {
 
     #[inline]
     fn from_animated_value(animated: Self::AnimatedValue) -> Self {
-        use values::computed::{LengthOrPercentageOrNone, Percentage};
+        use values::computed::{Length, LengthOrPercentageOrNone, Percentage};
         match animated {
             ComputedMaxLength::LengthOrPercentageOrNone(lopn) => {
                 let result = match lopn {
-                    LengthOrPercentageOrNone::Length(au) => {
-                        LengthOrPercentageOrNone::Length(max(au, Au(0)))
+                    LengthOrPercentageOrNone::Length(px) => {
+                        LengthOrPercentageOrNone::Length(Length::new(px.px().max(0.)))
                     },
                     LengthOrPercentageOrNone::Percentage(percentage) => {
                         LengthOrPercentageOrNone::Percentage(Percentage(percentage.0.max(0.)))
@@ -392,12 +392,12 @@ impl ToAnimatedValue for ComputedMozLength {
 
     #[inline]
     fn from_animated_value(animated: Self::AnimatedValue) -> Self {
-        use values::computed::{LengthOrPercentageOrAuto, Percentage};
+        use values::computed::{Length, LengthOrPercentageOrAuto, Percentage};
         match animated {
             ComputedMozLength::LengthOrPercentageOrAuto(lopa) => {
                 let result = match lopa {
-                    LengthOrPercentageOrAuto::Length(au) => {
-                        LengthOrPercentageOrAuto::Length(max(au, Au(0)))
+                    LengthOrPercentageOrAuto::Length(px) => {
+                        LengthOrPercentageOrAuto::Length(Length::new(px.px().max(0.)))
                     },
                     LengthOrPercentageOrAuto::Percentage(percentage) => {
                         LengthOrPercentageOrAuto::Percentage(Percentage(percentage.0.max(0.)))
diff --git a/components/style/values/computed/background.rs b/components/style/values/computed/background.rs
index f3180c54ebe..1adf8ec0aa5 100644
--- a/components/style/values/computed/background.rs
+++ b/components/style/values/computed/background.rs
@@ -30,12 +30,11 @@ impl ToAnimatedValue for BackgroundSize {
 
     #[inline]
     fn from_animated_value(animated: Self::AnimatedValue) -> Self {
-        use app_units::Au;
-        use values::computed::Percentage;
+        use values::computed::{Length, Percentage};
         let clamp_animated_value = |value: LengthOrPercentageOrAuto| -> LengthOrPercentageOrAuto {
             match value {
                 LengthOrPercentageOrAuto::Length(len) => {
-                    LengthOrPercentageOrAuto::Length(Au(::std::cmp::max(len.0, 0)))
+                    LengthOrPercentageOrAuto::Length(Length::new(len.px().max(0.)))
                 },
                 LengthOrPercentageOrAuto::Percentage(percent) => {
                     LengthOrPercentageOrAuto::Percentage(Percentage(percent.0.max(0.)))
diff --git a/components/style/values/computed/length.rs b/components/style/values/computed/length.rs
index a0ebfda3171..a83e86bd1e6 100644
--- a/components/style/values/computed/length.rs
+++ b/components/style/values/computed/length.rs
@@ -4,15 +4,16 @@
 
 //! `<length>` computed values, and related ones.
 
-use app_units::{Au, AU_PER_PX};
+use app_units::Au;
 use ordered_float::NotNaN;
 use std::fmt;
+use std::ops::{Add, Neg};
 use style_traits::ToCss;
-use style_traits::values::specified::AllowedLengthType;
+use style_traits::values::specified::AllowedNumericType;
 use super::{Number, ToComputedValue, Context, Percentage};
 use values::{Auto, CSSFloat, Either, ExtremumLength, None_, Normal, specified};
 use values::animated::{Animate, Procedure, ToAnimatedZero};
-use values::computed::{NonNegativeAu, NonNegativeNumber};
+use values::computed::NonNegativeNumber;
 use values::distance::{ComputeSquaredDistance, SquaredDistance};
 use values::generics::NonNegative;
 use values::specified::length::{AbsoluteLength, FontBaseSize, FontRelativeLength};
@@ -22,10 +23,10 @@ pub use super::image::Image;
 pub use values::specified::{Angle, BorderStyle, Time, UrlOrNone};
 
 impl ToComputedValue for specified::NoCalcLength {
-    type ComputedValue = Au;
+    type ComputedValue = CSSPixelLength;
 
     #[inline]
-    fn to_computed_value(&self, context: &Context) -> Au {
+    fn to_computed_value(&self, context: &Context) -> Self::ComputedValue {
         match *self {
             specified::NoCalcLength::Absolute(length) =>
                 length.to_computed_value(context),
@@ -34,7 +35,7 @@ impl ToComputedValue for specified::NoCalcLength {
             specified::NoCalcLength::ViewportPercentage(length) =>
                 length.to_computed_value(context.viewport_size_for_viewport_unit_resolution()),
             specified::NoCalcLength::ServoCharacterWidth(length) =>
-                length.to_computed_value(context.style().get_font().clone_font_size().0),
+                length.to_computed_value(Au::from(context.style().get_font().clone_font_size())),
             #[cfg(feature = "gecko")]
             specified::NoCalcLength::Physical(length) =>
                 length.to_computed_value(context),
@@ -42,16 +43,16 @@ impl ToComputedValue for specified::NoCalcLength {
     }
 
     #[inline]
-    fn from_computed_value(computed: &Au) -> Self {
-        specified::NoCalcLength::Absolute(AbsoluteLength::Px(computed.to_f32_px()))
+    fn from_computed_value(computed: &Self::ComputedValue) -> Self {
+        specified::NoCalcLength::Absolute(AbsoluteLength::Px(computed.px()))
     }
 }
 
 impl ToComputedValue for specified::Length {
-    type ComputedValue = Au;
+    type ComputedValue = CSSPixelLength;
 
     #[inline]
-    fn to_computed_value(&self, context: &Context) -> Au {
+    fn to_computed_value(&self, context: &Context) -> Self::ComputedValue {
         match *self {
             specified::Length::NoCalc(l) => l.to_computed_value(context),
             specified::Length::Calc(ref calc) => calc.to_computed_value(context).length(),
@@ -59,7 +60,7 @@ impl ToComputedValue for specified::Length {
     }
 
     #[inline]
-    fn from_computed_value(computed: &Au) -> Self {
+    fn from_computed_value(computed: &Self::ComputedValue) -> Self {
         specified::Length::NoCalc(specified::NoCalcLength::from_computed_value(computed))
     }
 }
@@ -69,8 +70,8 @@ impl ToComputedValue for specified::Length {
 #[derive(Clone, Copy, Debug, PartialEq, ToAnimatedZero)]
 pub struct CalcLengthOrPercentage {
     #[animation(constant)]
-    pub clamping_mode: AllowedLengthType,
-    length: Au,
+    pub clamping_mode: AllowedNumericType,
+    length: Length,
     pub percentage: Option<Percentage>,
 }
 
@@ -80,8 +81,7 @@ impl ComputeSquaredDistance for CalcLengthOrPercentage {
         // FIXME(nox): This looks incorrect to me, to add a distance between lengths
         // with a distance between percentages.
         Ok(
-            self.unclamped_length().to_f64_px().compute_squared_distance(
-                &other.unclamped_length().to_f64_px())? +
+            self.unclamped_length().compute_squared_distance(&other.unclamped_length())? +
             self.percentage().compute_squared_distance(&other.percentage())?,
         )
     }
@@ -90,15 +90,15 @@ impl ComputeSquaredDistance for CalcLengthOrPercentage {
 impl CalcLengthOrPercentage {
     /// Returns a new `CalcLengthOrPercentage`.
     #[inline]
-    pub fn new(length: Au, percentage: Option<Percentage>) -> Self {
-        Self::with_clamping_mode(length, percentage, AllowedLengthType::All)
+    pub fn new(length: Length, percentage: Option<Percentage>) -> Self {
+        Self::with_clamping_mode(length, percentage, AllowedNumericType::All)
     }
 
     /// Returns a new `CalcLengthOrPercentage` with a specific clamping mode.
     #[inline]
-    pub fn with_clamping_mode(length: Au,
+    pub fn with_clamping_mode(length: Length,
                               percentage: Option<Percentage>,
-                              clamping_mode: AllowedLengthType)
+                              clamping_mode: AllowedNumericType)
                               -> Self {
         Self {
             clamping_mode: clamping_mode,
@@ -111,35 +111,42 @@ impl CalcLengthOrPercentage {
     ///
     /// Panics in debug mode if a percentage is present in the expression.
     #[inline]
-    pub fn length(&self) -> Au {
+    pub fn length(&self) -> CSSPixelLength {
         debug_assert!(self.percentage.is_none());
         self.length_component()
     }
 
     /// Returns the length component of this `calc()`
     #[inline]
-    pub fn length_component(&self) -> Au {
-        self.clamping_mode.clamp(self.length)
+    pub fn length_component(&self) -> CSSPixelLength {
+        CSSPixelLength::new(self.clamping_mode.clamp(self.length.px()))
     }
 
     /// Returns the `<length>` component of this `calc()`, unclamped.
     #[inline]
-    pub fn unclamped_length(&self) -> Au {
+    pub fn unclamped_length(&self) -> CSSPixelLength {
         self.length
     }
 
+    /// Return the percentage value as CSSFloat.
     #[inline]
-    #[allow(missing_docs)]
     pub fn percentage(&self) -> CSSFloat {
         self.percentage.map_or(0., |p| p.0)
     }
 
+    /// Convert the computed value into used value.
+    #[inline]
+    pub fn to_used_value(&self, container_len: Option<Au>) -> Option<Au> {
+        self.to_pixel_length(container_len).map(Au::from)
+    }
+
     /// If there are special rules for computing percentages in a value (e.g. the height property),
     /// they apply whenever a calc() expression contains percentages.
-    pub fn to_used_value(&self, container_len: Option<Au>) -> Option<Au> {
+    pub fn to_pixel_length(&self, container_len: Option<Au>) -> Option<Length> {
         match (container_len, self.percentage) {
             (Some(len), Some(percent)) => {
-                Some(self.clamping_mode.clamp(self.length + len.scale_by(percent.0)))
+                let pixel = self.length.px() + len.scale_by(percent.0).to_f32_px();
+                Some(Length::new(self.clamping_mode.clamp(pixel)))
             },
             (_, None) => Some(self.length()),
             _ => None,
@@ -151,7 +158,7 @@ impl From<LengthOrPercentage> for CalcLengthOrPercentage {
     fn from(len: LengthOrPercentage) -> CalcLengthOrPercentage {
         match len {
             LengthOrPercentage::Percentage(this) => {
-                CalcLengthOrPercentage::new(Au(0), Some(this))
+                CalcLengthOrPercentage::new(Length::new(0.), Some(this))
             }
             LengthOrPercentage::Length(this) => {
                 CalcLengthOrPercentage::new(this, None)
@@ -167,7 +174,7 @@ impl From<LengthOrPercentageOrAuto> for Option<CalcLengthOrPercentage> {
     fn from(len: LengthOrPercentageOrAuto) -> Option<CalcLengthOrPercentage> {
         match len {
             LengthOrPercentageOrAuto::Percentage(this) => {
-                Some(CalcLengthOrPercentage::new(Au(0), Some(this)))
+                Some(CalcLengthOrPercentage::new(Length::new(0.), Some(this)))
             }
             LengthOrPercentageOrAuto::Length(this) => {
                 Some(CalcLengthOrPercentage::new(this, None))
@@ -186,7 +193,7 @@ impl From<LengthOrPercentageOrNone> for Option<CalcLengthOrPercentage> {
     fn from(len: LengthOrPercentageOrNone) -> Option<CalcLengthOrPercentage> {
         match len {
             LengthOrPercentageOrNone::Percentage(this) => {
-                Some(CalcLengthOrPercentage::new(Au(0), Some(this)))
+                Some(CalcLengthOrPercentage::new(Length::new(0.), Some(this)))
             }
             LengthOrPercentageOrNone::Length(this) => {
                 Some(CalcLengthOrPercentage::new(this, None))
@@ -207,14 +214,14 @@ impl ToCss for CalcLengthOrPercentage {
 
         let (length, percentage) = match (self.length, self.percentage) {
             (l, None) => return l.to_css(dest),
-            (l, Some(p)) if l == Au(0) => return p.to_css(dest),
+            (l, Some(p)) if l.px() == 0. => return p.to_css(dest),
             (l, Some(p)) => (l, p),
         };
 
         dest.write_str("calc(")?;
         percentage.to_css(dest)?;
 
-        dest.write_str(if length < Zero::zero() { " - " } else { " + " })?;
+        dest.write_str(if length.px() < Zero::zero() { " - " } else { " + " })?;
         length.abs().to_css(dest)?;
 
         dest.write_str(")")
@@ -225,11 +232,12 @@ impl specified::CalcLengthOrPercentage {
     /// Compute the value, zooming any absolute units by the zoom function.
     fn to_computed_value_with_zoom<F>(&self, context: &Context, zoom_fn: F,
                                       base_size: FontBaseSize) -> CalcLengthOrPercentage
-        where F: Fn(Au) -> Au {
-        let mut length = Au(0);
+        where F: Fn(Length) -> Length {
+        use std::f32;
+        let mut length = 0.;
 
         if let Some(absolute) = self.absolute {
-            length += zoom_fn(absolute.to_computed_value(context));
+            length += zoom_fn(absolute.to_computed_value(context)).px();
         }
 
         for val in &[self.vw.map(ViewportPercentageLength::Vw),
@@ -237,7 +245,8 @@ impl specified::CalcLengthOrPercentage {
                      self.vmin.map(ViewportPercentageLength::Vmin),
                      self.vmax.map(ViewportPercentageLength::Vmax)] {
             if let Some(val) = *val {
-                length += val.to_computed_value(context.viewport_size_for_viewport_unit_resolution());
+                let viewport_size = context.viewport_size_for_viewport_unit_resolution();
+                length += val.to_computed_value(viewport_size).px();
             }
         }
 
@@ -246,20 +255,20 @@ impl specified::CalcLengthOrPercentage {
                      self.ex.map(FontRelativeLength::Ex),
                      self.rem.map(FontRelativeLength::Rem)] {
             if let Some(val) = *val {
-                length += val.to_computed_value(context, base_size);
+                length += val.to_computed_value(context, base_size).px();
             }
         }
 
         CalcLengthOrPercentage {
             clamping_mode: self.clamping_mode,
-            length: length,
+            length: Length::new(length.min(f32::MAX).max(f32::MIN)),
             percentage: self.percentage,
         }
     }
 
     /// Compute font-size or line-height taking into account text-zoom if necessary.
     pub fn to_computed_value_zoomed(&self, context: &Context, base_size: FontBaseSize) -> CalcLengthOrPercentage {
-        self.to_computed_value_with_zoom(context, |abs| context.maybe_zoom_text(abs.into()).0, base_size)
+        self.to_computed_value_with_zoom(context, |abs| context.maybe_zoom_text(abs), base_size)
     }
 }
 
@@ -290,7 +299,7 @@ impl ToComputedValue for specified::CalcLengthOrPercentage {
 #[derive(ToAnimatedZero, ToCss)]
 #[distance(fallback = "Self::compute_squared_distance_fallback")]
 pub enum LengthOrPercentage {
-    Length(Au),
+    Length(Length),
     Percentage(Percentage),
     Calc(CalcLengthOrPercentage),
 }
@@ -330,7 +339,7 @@ impl LengthOrPercentage {
 impl From<Au> for LengthOrPercentage {
     #[inline]
     fn from(length: Au) -> Self {
-        LengthOrPercentage::Length(length)
+        LengthOrPercentage::Length(length.into())
     }
 }
 
@@ -338,13 +347,13 @@ impl LengthOrPercentage {
     #[inline]
     #[allow(missing_docs)]
     pub fn zero() -> LengthOrPercentage {
-        LengthOrPercentage::Length(Au(0))
+        LengthOrPercentage::Length(Length::new(0.))
     }
 
     #[inline]
     /// 1px length value for SVG defaults
     pub fn one() -> LengthOrPercentage {
-        LengthOrPercentage::Length(Au(AU_PER_PX))
+        LengthOrPercentage::Length(Length::new(1.))
     }
 
     /// Returns true if the computed value is absolute 0 or 0%.
@@ -354,29 +363,36 @@ impl LengthOrPercentage {
     pub fn is_definitely_zero(&self) -> bool {
         use self::LengthOrPercentage::*;
         match *self {
-            Length(Au(0)) => true,
+            Length(l) => l.px() == 0.0,
             Percentage(p) => p.0 == 0.0,
-            Length(_) | Calc(_) => false
+            Calc(_) => false
         }
     }
 
+    // CSSFloat doesn't implement Hash, so does CSSPixelLength. Therefore, we still use Au as the
+    // hash key.
     #[allow(missing_docs)]
     pub fn to_hash_key(&self) -> (Au, NotNaN<f32>) {
         use self::LengthOrPercentage::*;
         match *self {
-            Length(l) => (l, NotNaN::new(0.0).unwrap()),
+            Length(l) => (Au::from(l), NotNaN::new(0.0).unwrap()),
             Percentage(p) => (Au(0), NotNaN::new(p.0).unwrap()),
-            Calc(c) => (c.unclamped_length(), NotNaN::new(c.percentage()).unwrap()),
+            Calc(c) => (Au::from(c.unclamped_length()), NotNaN::new(c.percentage()).unwrap()),
         }
     }
 
     /// Returns the used value.
     pub fn to_used_value(&self, containing_length: Au) -> Au {
+        Au::from(self.to_pixel_length(containing_length))
+    }
+
+    /// Returns the used value as CSSPixelLength.
+    pub fn to_pixel_length(&self, containing_length: Au) -> Length {
         match *self {
             LengthOrPercentage::Length(length) => length,
-            LengthOrPercentage::Percentage(p) => containing_length.scale_by(p.0),
+            LengthOrPercentage::Percentage(p) => containing_length.scale_by(p.0).into(),
             LengthOrPercentage::Calc(ref calc) => {
-                calc.to_used_value(Some(containing_length)).unwrap()
+                calc.to_pixel_length(Some(containing_length)).unwrap()
             },
         }
     }
@@ -386,7 +402,7 @@ impl LengthOrPercentage {
     pub fn clamp_to_non_negative(self) -> Self {
         match self {
             LengthOrPercentage::Length(length) => {
-                LengthOrPercentage::Length(Au(::std::cmp::max(length.0, 0)))
+                LengthOrPercentage::Length(Length::new(length.px().max(0.)))
             },
             LengthOrPercentage::Percentage(percentage) => {
                 LengthOrPercentage::Percentage(Percentage(percentage.0.max(0.)))
@@ -439,7 +455,7 @@ impl ToComputedValue for specified::LengthOrPercentage {
 #[derive(Animate, Clone, ComputeSquaredDistance, Copy, PartialEq, ToCss)]
 #[distance(fallback = "Self::compute_squared_distance_fallback")]
 pub enum LengthOrPercentageOrAuto {
-    Length(Au),
+    Length(Length),
     Percentage(Percentage),
     Auto,
     Calc(CalcLengthOrPercentage),
@@ -479,9 +495,9 @@ impl LengthOrPercentageOrAuto {
     pub fn is_definitely_zero(&self) -> bool {
         use self::LengthOrPercentageOrAuto::*;
         match *self {
-            Length(Au(0)) => true,
+            Length(l) => l.px() == 0.0,
             Percentage(p) => p.0 == 0.0,
-            Length(_) | Calc(_) | Auto => false
+            Calc(_) | Auto => false
         }
     }
 }
@@ -535,7 +551,7 @@ impl ToComputedValue for specified::LengthOrPercentageOrAuto {
 #[derive(Animate, Clone, ComputeSquaredDistance, Copy, PartialEq, ToCss)]
 #[distance(fallback = "Self::compute_squared_distance_fallback")]
 pub enum LengthOrPercentageOrNone {
-    Length(Au),
+    Length(Length),
     Percentage(Percentage),
     Calc(CalcLengthOrPercentage),
     None,
@@ -571,7 +587,7 @@ impl LengthOrPercentageOrNone {
     pub fn to_used_value(&self, containing_length: Au) -> Option<Au> {
         match *self {
             LengthOrPercentageOrNone::None => None,
-            LengthOrPercentageOrNone::Length(length) => Some(length),
+            LengthOrPercentageOrNone::Length(length) => Some(Au::from(length)),
             LengthOrPercentageOrNone::Percentage(percent) => Some(containing_length.scale_by(percent.0)),
             LengthOrPercentageOrNone::Calc(ref calc) => calc.to_used_value(Some(containing_length)),
         }
@@ -623,9 +639,9 @@ impl ToComputedValue for specified::LengthOrPercentageOrNone {
 /// A wrapper of LengthOrPercentage, whose value must be >= 0.
 pub type NonNegativeLengthOrPercentage = NonNegative<LengthOrPercentage>;
 
-impl From<NonNegativeAu> for NonNegativeLengthOrPercentage {
+impl From<NonNegativeLength> for NonNegativeLengthOrPercentage {
     #[inline]
-    fn from(length: NonNegativeAu) -> Self {
+    fn from(length: NonNegativeLength) -> Self {
         LengthOrPercentage::Length(length.0).into()
     }
 }
@@ -664,8 +680,70 @@ impl NonNegativeLengthOrPercentage {
     }
 }
 
-/// A computed `<length>` value.
-pub type Length = Au;
+/// The computed `<length>` value.
+#[cfg_attr(feature = "servo", derive(Deserialize, HeapSizeOf, Serialize))]
+#[derive(Animate, Clone, ComputeSquaredDistance, Copy, Debug, PartialEq, PartialOrd)]
+#[derive(ToAnimatedValue, ToAnimatedZero)]
+pub struct CSSPixelLength(CSSFloat);
+
+impl CSSPixelLength {
+    /// Return a new CSSPixelLength.
+    #[inline]
+    pub fn new(px: CSSFloat) -> Self {
+        CSSPixelLength(px)
+    }
+
+    /// Return the containing pixel value.
+    #[inline]
+    pub fn px(&self) -> CSSFloat {
+        self.0
+    }
+
+    /// Return the length with app_unit i32 type.
+    #[inline]
+    pub fn to_i32_au(&self) -> i32 {
+        Au::from(*self).0
+    }
+
+    /// Return the absolute value of this length.
+    pub fn abs(self) -> Self {
+        CSSPixelLength::new(self.0.abs())
+    }
+}
+
+impl ToCss for CSSPixelLength {
+    #[inline]
+    fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+        self.0.to_css(dest)?;
+        dest.write_str("px")
+    }
+}
+
+impl Neg for CSSPixelLength {
+    type Output = Self;
+
+    #[inline]
+    fn neg(self) -> Self {
+        CSSPixelLength::new(-self.0)
+    }
+}
+
+impl From<CSSPixelLength> for Au {
+    #[inline]
+    fn from(len: CSSPixelLength) -> Self {
+        Au::from_f32_px(len.0)
+    }
+}
+
+impl From<Au> for CSSPixelLength {
+    #[inline]
+    fn from(len: Au) -> Self {
+        CSSPixelLength::new(len.to_f32_px())
+    }
+}
+
+/// An alias of computed `<length>` value.
+pub type Length = CSSPixelLength;
 
 /// Either a computed `<length>` or the `none` keyword.
 pub type LengthOrNone = Either<Length, None_>;
@@ -688,7 +766,63 @@ impl LengthOrNumber {
 pub type LengthOrNormal = Either<Length, Normal>;
 
 /// A wrapper of Length, whose value must be >= 0.
-pub type NonNegativeLength = NonNegativeAu;
+pub type NonNegativeLength = NonNegative<Length>;
+
+impl NonNegativeLength {
+    /// Create a NonNegativeLength.
+    #[inline]
+    pub fn new(px: CSSFloat) -> Self {
+        NonNegative(Length::new(px.max(0.)))
+    }
+
+    /// Return a zero value.
+    #[inline]
+    pub fn zero() -> Self {
+        Self::new(0.)
+    }
+
+    /// Return the pixel value of |NonNegativeLength|.
+    #[inline]
+    pub fn px(&self) -> CSSFloat {
+        self.0.px()
+    }
+
+    /// Scale this NonNegativeLength.
+    /// We scale NonNegativeLength by zero if the factor is negative because it doesn't
+    /// make sense to scale a negative factor on a non-negative length.
+    #[inline]
+    pub fn scale_by(&self, factor: f32) -> Self {
+        Self::new(self.0.px() * factor.max(0.))
+    }
+}
+
+impl Add<NonNegativeLength> for NonNegativeLength {
+    type Output = Self;
+    fn add(self, other: Self) -> Self {
+        NonNegativeLength::new(self.px() + other.px())
+    }
+}
+
+impl From<Length> for NonNegativeLength {
+    #[inline]
+    fn from(len: Length) -> Self {
+        NonNegative(len)
+    }
+}
+
+impl From<Au> for NonNegativeLength {
+    #[inline]
+    fn from(au: Au) -> Self {
+        NonNegative(au.into())
+    }
+}
+
+impl From<NonNegativeLength> for Au {
+    #[inline]
+    fn from(non_negative_len: NonNegativeLength) -> Self {
+        Au::from(non_negative_len.0)
+    }
+}
 
 /// Either a computed NonNegativeLength or the `auto` keyword.
 pub type NonNegativeLengthOrAuto = Either<NonNegativeLength, Auto>;
diff --git a/components/style/values/computed/mod.rs b/components/style/values/computed/mod.rs
index aedb8ca31f2..cad3db03aa7 100644
--- a/components/style/values/computed/mod.rs
+++ b/components/style/values/computed/mod.rs
@@ -14,7 +14,7 @@ use properties;
 use properties::{ComputedValues, StyleBuilder};
 #[cfg(feature = "servo")]
 use servo_url::ServoUrl;
-use std::{f32, fmt, ops};
+use std::{f32, fmt};
 #[cfg(feature = "servo")]
 use std::sync::Arc;
 use style_traits::ToCss;
@@ -46,7 +46,7 @@ pub use super::{Auto, Either, None_};
 pub use super::specified::BorderStyle;
 pub use self::length::{CalcLengthOrPercentage, Length, LengthOrNone, LengthOrNumber, LengthOrPercentage};
 pub use self::length::{LengthOrPercentageOrAuto, LengthOrPercentageOrNone, MaxLength, MozLength};
-pub use self::length::NonNegativeLengthOrPercentage;
+pub use self::length::{CSSPixelLength, NonNegativeLength, NonNegativeLengthOrPercentage};
 pub use self::percentage::Percentage;
 pub use self::position::Position;
 pub use self::svg::{SVGLength, SVGOpacity, SVGPaint, SVGPaintKind, SVGStrokeDashArray, SVGWidth};
@@ -146,12 +146,12 @@ impl<'a> Context<'a> {
 
     /// Apply text-zoom if enabled.
     #[cfg(feature = "gecko")]
-    pub fn maybe_zoom_text(&self, size: NonNegativeAu) -> NonNegativeAu {
+    pub fn maybe_zoom_text(&self, size: CSSPixelLength) -> CSSPixelLength {
         // We disable zoom for <svg:text> by unsetting the
         // -x-text-zoom property, which leads to a false value
         // in mAllowZoom
         if self.style().get_font().gecko.mAllowZoom {
-            self.device().zoom_text(size.0).into()
+            self.device().zoom_text(Au::from(size)).into()
         } else {
             size
         }
@@ -159,7 +159,7 @@ impl<'a> Context<'a> {
 
     /// (Servo doesn't do text-zoom)
     #[cfg(feature = "servo")]
-    pub fn maybe_zoom_text(&self, size: NonNegativeAu) -> NonNegativeAu {
+    pub fn maybe_zoom_text(&self, size: CSSPixelLength) -> CSSPixelLength {
         size
     }
 }
@@ -450,13 +450,13 @@ pub type NonNegativeLengthOrPercentageOrNumber = Either<NonNegativeNumber, NonNe
 
 #[allow(missing_docs)]
 #[cfg_attr(feature = "servo", derive(HeapSizeOf))]
-#[derive(Clone, ComputeSquaredDistance, Copy, Debug, Eq, PartialEq)]
+#[derive(Clone, ComputeSquaredDistance, Copy, Debug, PartialEq)]
 /// A computed cliprect for clip and image-region
 pub struct ClipRect {
-    pub top: Option<Au>,
-    pub right: Option<Au>,
-    pub bottom: Option<Au>,
-    pub left: Option<Au>,
+    pub top: Option<Length>,
+    pub right: Option<Length>,
+    pub bottom: Option<Length>,
+    pub left: Option<Length>,
 }
 
 impl ToCss for ClipRect {
@@ -529,50 +529,6 @@ impl ClipRectOrAuto {
 /// <color> | auto
 pub type ColorOrAuto = Either<Color, Auto>;
 
-/// A wrapper of Au, but the value >= 0.
-pub type NonNegativeAu = NonNegative<Au>;
-
-impl NonNegativeAu {
-    /// Return a zero value.
-    #[inline]
-    pub fn zero() -> Self {
-        NonNegative::<Au>(Au(0))
-    }
-
-    /// Return a NonNegativeAu from pixel.
-    #[inline]
-    pub fn from_px(px: i32) -> Self {
-        NonNegative::<Au>(Au::from_px(::std::cmp::max(px, 0)))
-    }
-
-    /// Get the inner value of |NonNegativeAu.0|.
-    #[inline]
-    pub fn value(self) -> i32 {
-        (self.0).0
-    }
-
-    /// Scale this NonNegativeAu.
-    #[inline]
-    pub fn scale_by(self, factor: f32) -> Self {
-        // scale this by zero if factor is negative.
-        NonNegative::<Au>(self.0.scale_by(factor.max(0.)))
-    }
-}
-
-impl ops::Add<NonNegativeAu> for NonNegativeAu {
-    type Output = NonNegativeAu;
-    fn add(self, other: Self) -> Self {
-        (self.0 + other.0).into()
-    }
-}
-
-impl From<Au> for NonNegativeAu {
-    #[inline]
-    fn from(au: Au) -> NonNegativeAu {
-        NonNegative::<Au>(au)
-    }
-}
-
 /// The computed value of a CSS `url()`, resolved relative to the stylesheet URL.
 #[cfg(feature = "servo")]
 #[derive(Clone, Debug, Deserialize, HeapSizeOf, PartialEq, Serialize)]
diff --git a/components/style/values/computed/svg.rs b/components/style/values/computed/svg.rs
index b4d66b3cec5..1791c18f69d 100644
--- a/components/style/values/computed/svg.rs
+++ b/components/style/values/computed/svg.rs
@@ -6,7 +6,7 @@
 
 use app_units::Au;
 use values::RGBA;
-use values::computed::{ComputedUrl, LengthOrPercentage, NonNegativeAu};
+use values::computed::{ComputedUrl, LengthOrPercentage, NonNegativeLength};
 use values::computed::{NonNegativeNumber, NonNegativeLengthOrPercentage, Number};
 use values::computed::Opacity;
 use values::generics::svg as generic;
@@ -72,8 +72,8 @@ impl Into<NonNegativeSvgLengthOrPercentageOrNumber> for SvgLengthOrPercentageOrN
 /// An non-negative wrapper of SVGLength.
 pub type SVGWidth = generic::SVGLength<NonNegativeSvgLengthOrPercentageOrNumber>;
 
-impl From<NonNegativeAu> for SVGWidth {
-    fn from(length: NonNegativeAu) -> Self {
+impl From<NonNegativeLength> for SVGWidth {
+    fn from(length: NonNegativeLength) -> Self {
         generic::SVGLength::Length(
             generic::SvgLengthOrPercentageOrNumber::LengthOrPercentage(length.into()))
     }
diff --git a/components/style/values/computed/text.rs b/components/style/values/computed/text.rs
index 2c81d4d4d3d..ec55d27399b 100644
--- a/components/style/values/computed/text.rs
+++ b/components/style/values/computed/text.rs
@@ -6,7 +6,7 @@
 
 use values::{CSSInteger, CSSFloat};
 use values::animated::ToAnimatedZero;
-use values::computed::{NonNegativeAu, NonNegativeNumber};
+use values::computed::{NonNegativeLength, NonNegativeNumber};
 use values::computed::length::{Length, LengthOrPercentage};
 use values::generics::text::InitialLetter as GenericInitialLetter;
 use values::generics::text::LineHeight as GenericLineHeight;
@@ -22,7 +22,7 @@ pub type LetterSpacing = Spacing<Length>;
 pub type WordSpacing = Spacing<LengthOrPercentage>;
 
 /// A computed value for the `line-height` property.
-pub type LineHeight = GenericLineHeight<NonNegativeNumber, NonNegativeAu>;
+pub type LineHeight = GenericLineHeight<NonNegativeNumber, NonNegativeLength>;
 
 impl ToAnimatedZero for LineHeight {
     #[inline]
diff --git a/components/style/values/computed/transform.rs b/components/style/values/computed/transform.rs
index 02de6298444..21c98c50d99 100644
--- a/components/style/values/computed/transform.rs
+++ b/components/style/values/computed/transform.rs
@@ -30,7 +30,7 @@ impl TransformOrigin {
         Self::new(
             LengthOrPercentage::Percentage(Percentage(0.5)),
             LengthOrPercentage::Percentage(Percentage(0.5)),
-            Length::from_px(0),
+            Length::new(0.),
         )
     }
 }
@@ -72,9 +72,9 @@ impl TransformList {
 
         let extract_pixel_length = |lop: &LengthOrPercentage| {
             match *lop {
-                LengthOrPercentage::Length(au) => au.to_f32_px(),
+                LengthOrPercentage::Length(px) => px.px(),
                 LengthOrPercentage::Percentage(_) => 0.,
-                LengthOrPercentage::Calc(calc) => calc.length().to_f32_px(),
+                LengthOrPercentage::Calc(calc) => calc.length().px(),
             }
         };
 
@@ -87,7 +87,7 @@ impl TransformList {
                     Transform3D::create_rotation(ax, ay, az, theta.into())
                 }
                 ComputedOperation::Perspective(d) => {
-                    Self::create_perspective_matrix(d)
+                    Self::create_perspective_matrix(d.px())
                 }
                 ComputedOperation::Scale(sx, sy, sz) => {
                     Transform3D::create_scale(sx, sy, sz)
@@ -95,8 +95,8 @@ impl TransformList {
                 ComputedOperation::Translate(tx, ty, tz) => {
                     let (tx, ty) = match reference_box {
                         Some(relative_border_box) => {
-                            (tx.to_used_value(relative_border_box.size.width).to_f32_px(),
-                             ty.to_used_value(relative_border_box.size.height).to_f32_px())
+                            (tx.to_pixel_length(relative_border_box.size.width).px(),
+                             ty.to_pixel_length(relative_border_box.size.height).px())
                         },
                         None => {
                             // If we don't have reference box, we cannot resolve the used value,
@@ -105,7 +105,7 @@ impl TransformList {
                             (extract_pixel_length(&tx), extract_pixel_length(&ty))
                         }
                     };
-                    let tz = tz.to_f32_px();
+                    let tz = tz.px();
                     Transform3D::create_translation(tx, ty, tz)
                 }
                 ComputedOperation::Matrix(m) => {
@@ -137,7 +137,7 @@ impl TransformList {
 
     /// Return the transform matrix from a perspective length.
     #[inline]
-    pub fn create_perspective_matrix(d: Au) -> Transform3D<f32> {
+    pub fn create_perspective_matrix(d: CSSFloat) -> Transform3D<f32> {
         // TODO(gw): The transforms spec says that perspective length must
         // be positive. However, there is some confusion between the spec
         // and browser implementations as to handling the case of 0 for the
@@ -145,7 +145,6 @@ impl TransformList {
         // that a provided perspective value of <= 0.0 doesn't cause panics
         // and behaves as it does in other browsers.
         // See https://lists.w3.org/Archives/Public/www-style/2016Jan/0020.html for more details.
-        let d = d.to_f32_px();
         if d <= 0.0 {
             Transform3D::identity()
         } else {
diff --git a/components/style/values/specified/border.rs b/components/style/values/specified/border.rs
index 19863b5d1de..a857d66000b 100644
--- a/components/style/values/specified/border.rs
+++ b/components/style/values/specified/border.rs
@@ -7,7 +7,7 @@
 use cssparser::Parser;
 use parser::{Parse, ParserContext};
 use style_traits::ParseError;
-use values::computed::{Context, NonNegativeAu, ToComputedValue};
+use values::computed::{Context, NonNegativeLength, ToComputedValue};
 use values::generics::border::BorderCornerRadius as GenericBorderCornerRadius;
 use values::generics::border::BorderImageSideWidth as GenericBorderImageSideWidth;
 use values::generics::border::BorderImageSlice as GenericBorderImageSlice;
@@ -71,7 +71,7 @@ impl Parse for BorderSideWidth {
 }
 
 impl ToComputedValue for BorderSideWidth {
-    type ComputedValue = NonNegativeAu;
+    type ComputedValue = NonNegativeLength;
 
     #[inline]
     fn to_computed_value(&self, context: &Context) -> Self::ComputedValue {
@@ -82,7 +82,7 @@ impl ToComputedValue for BorderSideWidth {
             BorderSideWidth::Thin => Length::from_px(1.).to_computed_value(context),
             BorderSideWidth::Medium => Length::from_px(3.).to_computed_value(context),
             BorderSideWidth::Thick => Length::from_px(5.).to_computed_value(context),
-            BorderSideWidth::Length(ref length) => length.to_computed_value(context)
+            BorderSideWidth::Length(ref length) => length.to_computed_value(context),
         }.into()
     }
 
diff --git a/components/style/values/specified/calc.rs b/components/style/values/specified/calc.rs
index 408a5f4ab5b..32fcadf7d6f 100644
--- a/components/style/values/specified/calc.rs
+++ b/components/style/values/specified/calc.rs
@@ -11,7 +11,7 @@ use parser::ParserContext;
 use std::ascii::AsciiExt;
 use std::fmt;
 use style_traits::{ToCss, ParseError, StyleParseError};
-use style_traits::values::specified::AllowedLengthType;
+use style_traits::values::specified::AllowedNumericType;
 use values::{CSSInteger, CSSFloat};
 use values::computed;
 use values::specified::{Angle, Time};
@@ -67,7 +67,7 @@ pub enum CalcUnit {
 #[cfg_attr(feature = "servo", derive(HeapSizeOf))]
 #[allow(missing_docs)]
 pub struct CalcLengthOrPercentage {
-    pub clamping_mode: AllowedLengthType,
+    pub clamping_mode: AllowedNumericType,
     pub absolute: Option<AbsoluteLength>,
     pub vw: Option<CSSFloat>,
     pub vh: Option<CSSFloat>,
@@ -291,7 +291,7 @@ impl CalcNode {
 
     /// Tries to simplify this expression into a `<length>` or `<percentage`>
     /// value.
-    fn to_length_or_percentage(&self, clamping_mode: AllowedLengthType)
+    fn to_length_or_percentage(&self, clamping_mode: AllowedNumericType)
                                -> Result<CalcLengthOrPercentage, ()> {
         let mut ret = CalcLengthOrPercentage {
             clamping_mode: clamping_mode,
@@ -565,7 +565,7 @@ impl CalcNode {
     pub fn parse_length_or_percentage<'i, 't>(
         context: &ParserContext,
         input: &mut Parser<'i, 't>,
-        clamping_mode: AllowedLengthType
+        clamping_mode: AllowedNumericType
     ) -> Result<CalcLengthOrPercentage, ParseError<'i>> {
         Self::parse(context, input, CalcUnit::LengthOrPercentage)?
             .to_length_or_percentage(clamping_mode)
@@ -586,7 +586,7 @@ impl CalcNode {
     pub fn parse_length<'i, 't>(
         context: &ParserContext,
         input: &mut Parser<'i, 't>,
-        clamping_mode: AllowedLengthType
+        clamping_mode: AllowedNumericType
     ) -> Result<CalcLengthOrPercentage, ParseError<'i>> {
         Self::parse(context, input, CalcUnit::Length)?
             .to_length_or_percentage(clamping_mode)
diff --git a/components/style/values/specified/length.rs b/components/style/values/specified/length.rs
index 4267c85f45e..33bad5d90cc 100644
--- a/components/style/values/specified/length.rs
+++ b/components/style/values/specified/length.rs
@@ -15,12 +15,12 @@ use std::{cmp, fmt, mem};
 use std::ascii::AsciiExt;
 use std::ops::{Add, Mul};
 use style_traits::{ToCss, ParseError, StyleParseError};
-use style_traits::values::specified::AllowedLengthType;
+use style_traits::values::specified::AllowedNumericType;
 use stylesheets::CssRuleType;
 use super::{AllowQuirks, Number, ToComputedValue, Percentage};
 use values::{Auto, CSSFloat, Either, FONT_MEDIUM_PX, None_, Normal};
 use values::{ExtremumLength, serialize_dimension};
-use values::computed::{self, Context};
+use values::computed::{self, CSSPixelLength, Context};
 use values::generics::NonNegative;
 use values::specified::NonNegativeNumber;
 use values::specified::calc::CalcNode;
@@ -95,16 +95,30 @@ impl FontBaseSize {
     pub fn resolve(&self, context: &Context) -> Au {
         match *self {
             FontBaseSize::Custom(size) => size,
-            FontBaseSize::CurrentStyle => context.style().get_font().clone_font_size().0,
-            FontBaseSize::InheritedStyle => context.style().get_parent_font().clone_font_size().0,
+            FontBaseSize::CurrentStyle => Au::from(context.style().get_font().clone_font_size()),
+            FontBaseSize::InheritedStyle => Au::from(context.style().get_parent_font().clone_font_size()),
         }
     }
 }
 
 impl FontRelativeLength {
-    /// Computes the font-relative length. We use the base_size
-    /// flag to pass a different size for computing font-size and unconstrained font-size
-    pub fn to_computed_value(&self, context: &Context, base_size: FontBaseSize) -> Au {
+    /// Computes the font-relative length.
+    pub fn to_computed_value(&self, context: &Context, base_size: FontBaseSize) -> CSSPixelLength {
+        use std::f32;
+        let (reference_size, length) = self.reference_font_size_and_length(context, base_size);
+        let pixel = (length * reference_size.to_f32_px()).min(f32::MAX).max(f32::MIN);
+        CSSPixelLength::new(pixel)
+    }
+
+    /// Return reference font size. We use the base_size flag to pass a different size
+    /// for computing font-size and unconstrained font-size.
+    /// This returns a pair, the first one is the reference font size, and the second one is the
+    /// unpacked relative length.
+    fn reference_font_size_and_length(
+        &self,
+        context: &Context,
+        base_size: FontBaseSize,
+    ) -> (Au, CSSFloat) {
         fn query_font_metrics(context: &Context, reference_font_size: Au) -> FontMetricsQueryResult {
             context.font_metrics_provider.query(context.style().get_font(),
                                                 reference_font_size,
@@ -116,22 +130,31 @@ impl FontRelativeLength {
         let reference_font_size = base_size.resolve(context);
 
         match *self {
-            FontRelativeLength::Em(length) => reference_font_size.scale_by(length),
+            FontRelativeLength::Em(length) => {
+                (reference_font_size, length)
+            },
             FontRelativeLength::Ex(length) => {
-                match query_font_metrics(context, reference_font_size) {
-                    FontMetricsQueryResult::Available(metrics) => metrics.x_height.scale_by(length),
+                let reference_size = match query_font_metrics(context, reference_font_size) {
+                    FontMetricsQueryResult::Available(metrics) => {
+                        metrics.x_height
+                    },
                     // https://drafts.csswg.org/css-values/#ex
                     //
                     //     In the cases where it is impossible or impractical to
                     //     determine the x-height, a value of 0.5em must be
                     //     assumed.
                     //
-                    FontMetricsQueryResult::NotAvailable => reference_font_size.scale_by(0.5 * length),
-                }
+                    FontMetricsQueryResult::NotAvailable => {
+                        reference_font_size.scale_by(0.5)
+                    },
+                };
+                (reference_size, length)
             },
             FontRelativeLength::Ch(length) => {
-                match query_font_metrics(context, reference_font_size) {
-                    FontMetricsQueryResult::Available(metrics) => metrics.zero_advance_measure.scale_by(length),
+                let reference_size = match query_font_metrics(context, reference_font_size) {
+                    FontMetricsQueryResult::Available(metrics) => {
+                        metrics.zero_advance_measure
+                    },
                     // https://drafts.csswg.org/css-values/#ch
                     //
                     //     In the cases where it is impossible or impractical to
@@ -144,12 +167,13 @@ impl FontRelativeLength {
                     //
                     FontMetricsQueryResult::NotAvailable => {
                         if context.style().writing_mode.is_vertical() {
-                            reference_font_size.scale_by(length)
+                            reference_font_size
                         } else {
-                            reference_font_size.scale_by(0.5 * length)
+                            reference_font_size.scale_by(0.5)
                         }
                     }
-                }
+                };
+                (reference_size, length)
             }
             FontRelativeLength::Rem(length) => {
                 // https://drafts.csswg.org/css-values/#rem:
@@ -158,11 +182,12 @@ impl FontRelativeLength {
                 //     element, the rem units refer to the property’s initial
                 //     value.
                 //
-                if context.is_root_element {
-                    reference_font_size.scale_by(length)
+                let reference_size = if context.is_root_element {
+                    reference_font_size
                 } else {
-                    context.device().root_font_size().scale_by(length)
-                }
+                    context.device().root_font_size()
+                };
+                (reference_size, length)
             }
         }
     }
@@ -197,7 +222,7 @@ impl ToCss for ViewportPercentageLength {
 
 impl ViewportPercentageLength {
     /// Computes the given viewport-relative length for the given viewport size.
-    pub fn to_computed_value(&self, viewport_size: Size2D<Au>) -> Au {
+    pub fn to_computed_value(&self, viewport_size: Size2D<Au>) -> CSSPixelLength {
         let (factor, length) = match *self {
             ViewportPercentageLength::Vw(length) =>
                 (length, viewport_size.width),
@@ -209,10 +234,11 @@ impl ViewportPercentageLength {
                 (length, cmp::max(viewport_size.width, viewport_size.height)),
         };
 
+        // FIXME: Bug 1396535, we need to fix the extremely small viewport length for transform.
         // See bug 989802. We truncate so that adding multiple viewport units
         // that add up to 100 does not overflow due to rounding differences
         let trunc_scaled = ((length.0 as f64) * factor as f64 / 100.).trunc();
-        Au::from_f64_au(trunc_scaled)
+        Au::from_f64_au(trunc_scaled).into()
     }
 }
 
@@ -223,14 +249,15 @@ pub struct CharacterWidth(pub i32);
 
 impl CharacterWidth {
     /// Computes the given character width.
-    pub fn to_computed_value(&self, reference_font_size: Au) -> Au {
+    pub fn to_computed_value(&self, reference_font_size: Au) -> CSSPixelLength {
         // This applies the *converting a character width to pixels* algorithm as specified
         // in HTML5 § 14.5.4.
         //
         // TODO(pcwalton): Find these from the font.
         let average_advance = reference_font_size.scale_by(0.5);
         let max_advance = reference_font_size;
-        average_advance.scale_by(self.0 as CSSFloat - 1.0) + max_advance
+        let au = average_advance.scale_by(self.0 as CSSFloat - 1.0) + max_advance;
+        au.into()
     }
 }
 
@@ -286,32 +313,14 @@ impl AbsoluteLength {
 }
 
 impl ToComputedValue for AbsoluteLength {
-    type ComputedValue = Au;
+    type ComputedValue = CSSPixelLength;
 
-    fn to_computed_value(&self, _: &Context) -> Au {
-        Au::from(*self)
+    fn to_computed_value(&self, _: &Context) -> Self::ComputedValue {
+        CSSPixelLength::new(self.to_px())
     }
 
-    fn from_computed_value(computed: &Au) -> AbsoluteLength {
-        AbsoluteLength::Px(computed.to_f32_px())
-    }
-}
-
-fn au_from_f32_round(x: f32) -> Au {
-    Au::from_f64_au((x as f64).round())
-}
-
-impl From<AbsoluteLength> for Au {
-    fn from(length: AbsoluteLength) -> Au {
-        match length {
-            AbsoluteLength::Px(value) => au_from_f32_round((value * AU_PER_PX)),
-            AbsoluteLength::In(value) => au_from_f32_round((value * AU_PER_IN)),
-            AbsoluteLength::Cm(value) => au_from_f32_round((value * AU_PER_CM)),
-            AbsoluteLength::Mm(value) => au_from_f32_round((value * AU_PER_MM)),
-            AbsoluteLength::Q(value) => au_from_f32_round((value * AU_PER_Q)),
-            AbsoluteLength::Pt(value) => au_from_f32_round((value * AU_PER_PT)),
-            AbsoluteLength::Pc(value) => au_from_f32_round((value * AU_PER_PC)),
-        }
+    fn from_computed_value(computed: &Self::ComputedValue) -> Self {
+        AbsoluteLength::Px(computed.px())
     }
 }
 
@@ -376,18 +385,20 @@ impl PhysicalLength {
     }
 
     /// Computes the given character width.
-    pub fn to_computed_value(&self, context: &Context) -> Au {
+    pub fn to_computed_value(&self, context: &Context) -> CSSPixelLength {
         use gecko_bindings::bindings;
-        // Same as Gecko
-        const MM_PER_INCH: f32 = 25.4;
+        use std::f32;
 
-        let physical_inch = unsafe {
-            bindings::Gecko_GetAppUnitsPerPhysicalInch(context.device().pres_context())
+        // Same as Gecko
+        const INCH_PER_MM: f32 = 1. / 25.4;
+
+        let au_per_physical_inch = unsafe {
+            bindings::Gecko_GetAppUnitsPerPhysicalInch(context.device().pres_context()) as f32
         };
 
-        let inch = self.0 / MM_PER_INCH;
-
-        au_from_f32_round(inch * physical_inch as f32)
+        let px_per_physical_inch = au_per_physical_inch / AU_PER_PX;
+        let pixel = self.0 * px_per_physical_inch * INCH_PER_MM;
+        CSSPixelLength::new(pixel.min(f32::MAX).max(f32::MIN))
     }
 }
 
@@ -631,7 +642,7 @@ impl Length {
     #[inline]
     fn parse_internal<'i, 't>(context: &ParserContext,
                               input: &mut Parser<'i, 't>,
-                              num_context: AllowedLengthType,
+                              num_context: AllowedNumericType,
                               allow_quirks: AllowQuirks)
                               -> Result<Length, ParseError<'i>> {
         // FIXME: remove early returns when lifetimes are non-lexical
@@ -672,7 +683,7 @@ impl Length {
                                              input: &mut Parser<'i, 't>,
                                              allow_quirks: AllowQuirks)
                                              -> Result<Length, ParseError<'i>> {
-        Self::parse_internal(context, input, AllowedLengthType::NonNegative, allow_quirks)
+        Self::parse_internal(context, input, AllowedNumericType::NonNegative, allow_quirks)
     }
 
     /// Get an absolute length from a px value.
@@ -702,7 +713,7 @@ impl Length {
                                 input: &mut Parser<'i, 't>,
                                 allow_quirks: AllowQuirks)
                                 -> Result<Self, ParseError<'i>> {
-        Self::parse_internal(context, input, AllowedLengthType::All, allow_quirks)
+        Self::parse_internal(context, input, AllowedNumericType::All, allow_quirks)
     }
 }
 
@@ -714,7 +725,7 @@ impl<T: Parse> Either<Length, T> {
         if let Ok(v) = input.try(|input| T::parse(context, input)) {
             return Ok(Either::Second(v));
         }
-        Length::parse_internal(context, input, AllowedLengthType::NonNegative, AllowQuirks::No).map(Either::First)
+        Length::parse_internal(context, input, AllowedNumericType::NonNegative, AllowQuirks::No).map(Either::First)
     }
 }
 
@@ -741,7 +752,7 @@ impl<T: Parse> Parse for Either<NonNegativeLength, T> {
         if let Ok(v) = input.try(|input| T::parse(context, input)) {
             return Ok(Either::Second(v));
         }
-        Length::parse_internal(context, input, AllowedLengthType::NonNegative, AllowQuirks::No)
+        Length::parse_internal(context, input, AllowedNumericType::NonNegative, AllowQuirks::No)
             .map(NonNegative::<Length>).map(Either::First)
     }
 }
@@ -825,7 +836,7 @@ impl LengthOrPercentage {
 
     fn parse_internal<'i, 't>(context: &ParserContext,
                               input: &mut Parser<'i, 't>,
-                              num_context: AllowedLengthType,
+                              num_context: AllowedNumericType,
                               allow_quirks: AllowQuirks)
                               -> Result<LengthOrPercentage, ParseError<'i>>
     {
@@ -874,7 +885,7 @@ impl LengthOrPercentage {
                                              input: &mut Parser<'i, 't>,
                                              allow_quirks: AllowQuirks)
                                              -> Result<LengthOrPercentage, ParseError<'i>> {
-        Self::parse_internal(context, input, AllowedLengthType::NonNegative, allow_quirks)
+        Self::parse_internal(context, input, AllowedNumericType::NonNegative, allow_quirks)
     }
 
     /// Parse a length, treating dimensionless numbers as pixels
@@ -935,7 +946,7 @@ impl LengthOrPercentage {
     pub fn parse_quirky<'i, 't>(context: &ParserContext,
                                 input: &mut Parser<'i, 't>,
                                 allow_quirks: AllowQuirks) -> Result<Self, ParseError<'i>> {
-        Self::parse_internal(context, input, AllowedLengthType::All, allow_quirks)
+        Self::parse_internal(context, input, AllowedNumericType::All, allow_quirks)
     }
 }
 
@@ -967,7 +978,7 @@ impl From<computed::Percentage> for LengthOrPercentageOrAuto {
 impl LengthOrPercentageOrAuto {
     fn parse_internal<'i, 't>(context: &ParserContext,
                               input: &mut Parser<'i, 't>,
-                              num_context: AllowedLengthType,
+                              num_context: AllowedNumericType,
                               allow_quirks: AllowQuirks)
                               -> Result<Self, ParseError<'i>> {
         // FIXME: remove early returns when lifetimes are non-lexical
@@ -1019,7 +1030,7 @@ impl LengthOrPercentageOrAuto {
                                              input: &mut Parser<'i, 't>,
                                              allow_quirks: AllowQuirks)
                                              -> Result<Self, ParseError<'i>> {
-        Self::parse_internal(context, input, AllowedLengthType::NonNegative, allow_quirks)
+        Self::parse_internal(context, input, AllowedNumericType::NonNegative, allow_quirks)
     }
 
     /// Returns the `auto` value.
@@ -1052,7 +1063,7 @@ impl LengthOrPercentageOrAuto {
                                 input: &mut Parser<'i, 't>,
                                 allow_quirks: AllowQuirks)
                                 -> Result<Self, ParseError<'i>> {
-        Self::parse_internal(context, input, AllowedLengthType::All, allow_quirks)
+        Self::parse_internal(context, input, AllowedNumericType::All, allow_quirks)
     }
 }
 
@@ -1070,7 +1081,7 @@ pub enum LengthOrPercentageOrNone {
 impl LengthOrPercentageOrNone {
     fn parse_internal<'i, 't>(context: &ParserContext,
                               input: &mut Parser<'i, 't>,
-                              num_context: AllowedLengthType,
+                              num_context: AllowedNumericType,
                               allow_quirks: AllowQuirks)
                               -> Result<LengthOrPercentageOrNone, ParseError<'i>>
     {
@@ -1122,14 +1133,14 @@ impl LengthOrPercentageOrNone {
                                              input: &mut Parser<'i, 't>,
                                              allow_quirks: AllowQuirks)
                                              -> Result<Self, ParseError<'i>> {
-        Self::parse_internal(context, input, AllowedLengthType::NonNegative, allow_quirks)
+        Self::parse_internal(context, input, AllowedNumericType::NonNegative, allow_quirks)
     }
 }
 
 impl Parse for LengthOrPercentageOrNone {
     #[inline]
     fn parse<'i, 't>(context: &ParserContext, input: &mut Parser<'i, 't>) -> Result<Self, ParseError<'i>> {
-        Self::parse_internal(context, input, AllowedLengthType::All, AllowQuirks::No)
+        Self::parse_internal(context, input, AllowedNumericType::All, AllowQuirks::No)
     }
 }
 
diff --git a/components/style/values/specified/position.rs b/components/style/values/specified/position.rs
index fb5e22347e8..a39b6715dd1 100644
--- a/components/style/values/specified/position.rs
+++ b/components/style/values/specified/position.rs
@@ -210,7 +210,8 @@ impl<S: Side> ToComputedValue for PositionComponent<S> {
                     },
                     ComputedLengthOrPercentage::Calc(calc) => {
                         let p = Percentage(1. - calc.percentage.map_or(0., |p| p.0));
-                        ComputedLengthOrPercentage::Calc(CalcLengthOrPercentage::new(-calc.unclamped_length(), Some(p)))
+                        let l = -calc.unclamped_length();
+                        ComputedLengthOrPercentage::Calc(CalcLengthOrPercentage::new(l, Some(p)))
                     },
                 }
             },
diff --git a/components/style/values/specified/text.rs b/components/style/values/specified/text.rs
index 0f4163c3fdd..e8f0b899760 100644
--- a/components/style/values/specified/text.rs
+++ b/components/style/values/specified/text.rs
@@ -84,6 +84,7 @@ impl ToComputedValue for LineHeight {
 
     #[inline]
     fn to_computed_value(&self, context: &Context) -> Self::ComputedValue {
+        use values::computed::Length as ComputedLength;
         use values::specified::length::FontBaseSize;
         match *self {
             GenericLineHeight::Normal => {
@@ -99,35 +100,36 @@ impl ToComputedValue for LineHeight {
             GenericLineHeight::Length(ref non_negative_lop) => {
                 let result = match non_negative_lop.0 {
                     LengthOrPercentage::Length(NoCalcLength::Absolute(ref abs)) => {
-                        context.maybe_zoom_text(abs.to_computed_value(context).into())
+                        context.maybe_zoom_text(abs.to_computed_value(context))
                     }
                     LengthOrPercentage::Length(ref length) => {
-                        length.to_computed_value(context).into()
+                        length.to_computed_value(context)
                     },
                     LengthOrPercentage::Percentage(ref p) => {
                         FontRelativeLength::Em(p.0)
                             .to_computed_value(
                                 context,
                                 FontBaseSize::CurrentStyle,
-                            ).into()
+                            )
                     }
                     LengthOrPercentage::Calc(ref calc) => {
-                        let computed_calc = calc.to_computed_value_zoomed(context, FontBaseSize::CurrentStyle);
+                        let computed_calc =
+                            calc.to_computed_value_zoomed(context, FontBaseSize::CurrentStyle);
                         let font_relative_length =
                             FontRelativeLength::Em(computed_calc.percentage())
                                 .to_computed_value(
                                     context,
                                     FontBaseSize::CurrentStyle,
-                                );
+                                ).px();
 
-                        let absolute_length = computed_calc.unclamped_length();
-                        computed_calc
+                        let absolute_length = computed_calc.unclamped_length().px();
+                        let pixel = computed_calc
                             .clamping_mode
-                            .clamp(absolute_length + font_relative_length)
-                            .into()
+                            .clamp(absolute_length + font_relative_length);
+                        ComputedLength::new(pixel)
                     }
                 };
-                GenericLineHeight::Length(result)
+                GenericLineHeight::Length(result.into())
             }
         }
     }
diff --git a/components/style_traits/values.rs b/components/style_traits/values.rs
index 8d669d3496a..6e2d2856901 100644
--- a/components/style_traits/values.rs
+++ b/components/style_traits/values.rs
@@ -469,49 +469,6 @@ macro_rules! __define_css_keyword_enum__actual {
 /// Helper types for the handling of specified values.
 pub mod specified {
     use ParsingMode;
-    use app_units::Au;
-    use std::cmp;
-
-    /// Whether to allow negative lengths or not.
-    #[repr(u8)]
-    #[cfg_attr(feature = "servo", derive(HeapSizeOf))]
-    #[derive(Clone, Copy, Debug, Eq, PartialEq)]
-    pub enum AllowedLengthType {
-        /// Allow all kind of lengths.
-        All,
-        /// Allow only non-negative lengths.
-        NonNegative
-    }
-
-    impl Default for AllowedLengthType {
-        #[inline]
-        fn default() -> Self {
-            AllowedLengthType::All
-        }
-    }
-
-    impl AllowedLengthType {
-        /// Whether value is valid for this allowed length type.
-        #[inline]
-        pub fn is_ok(&self, parsing_mode: ParsingMode, value: f32) -> bool {
-            if parsing_mode.allows_all_numeric_values() {
-                return true;
-            }
-            match *self {
-                AllowedLengthType::All => true,
-                AllowedLengthType::NonNegative => value >= 0.,
-            }
-        }
-
-        /// Clamp the value following the rules of this numeric type.
-        #[inline]
-        pub fn clamp(&self, val: Au) -> Au {
-            match *self {
-                AllowedLengthType::All => val,
-                AllowedLengthType::NonNegative => cmp::max(Au(0), val),
-            }
-        }
-    }
 
     /// Whether to allow negative lengths or not.
     #[repr(u8)]
@@ -526,6 +483,13 @@ pub mod specified {
         AtLeastOne,
     }
 
+    impl Default for AllowedNumericType {
+        #[inline]
+        fn default() -> Self {
+            AllowedNumericType::All
+        }
+    }
+
     impl AllowedNumericType {
         /// Whether the value fits the rules of this numeric type.
         #[inline]
diff --git a/components/style_traits/viewport.rs b/components/style_traits/viewport.rs
index d688f131ccf..fc34209af8a 100644
--- a/components/style_traits/viewport.rs
+++ b/components/style_traits/viewport.rs
@@ -107,7 +107,7 @@ impl Zoom {
     pub fn parse<'i, 't>(input: &mut Parser<'i, 't>) -> Result<Zoom, ParseError<'i>> {
         use PARSING_MODE_DEFAULT;
         use cssparser::Token;
-        use values::specified::AllowedLengthType::NonNegative;
+        use values::specified::AllowedNumericType::NonNegative;
 
         match *input.next()? {
             // TODO: This parse() method should take ParserContext as an
diff --git a/tests/unit/style/animated_properties.rs b/tests/unit/style/animated_properties.rs
index 7043bd0a8ca..bdaa65dde7f 100644
--- a/tests/unit/style/animated_properties.rs
+++ b/tests/unit/style/animated_properties.rs
@@ -2,7 +2,6 @@
  * 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 app_units::Au;
 use cssparser::RGBA;
 use style::properties::longhands::transform::computed_value::ComputedOperation as TransformOperation;
 use style::properties::longhands::transform::computed_value::T as TransformList;
@@ -65,42 +64,44 @@ fn test_rgba_color_interepolation_out_of_range_clamped_2() {
 // Transform
 #[test]
 fn test_transform_interpolation_on_translate() {
-    use style::values::computed::{CalcLengthOrPercentage, LengthOrPercentage};
+    use style::values::computed::{CalcLengthOrPercentage, Length, LengthOrPercentage};
 
     let from = TransformList(Some(vec![
-        TransformOperation::Translate(LengthOrPercentage::Length(Au(0)),
-                                      LengthOrPercentage::Length(Au(100)),
-                                      Au(25))]));
+        TransformOperation::Translate(LengthOrPercentage::Length(Length::new(0.)),
+                                      LengthOrPercentage::Length(Length::new(100.)),
+                                      Length::new(25.))]));
     let to = TransformList(Some(vec![
-        TransformOperation::Translate(LengthOrPercentage::Length(Au(100)),
-                                      LengthOrPercentage::Length(Au(0)),
-                                      Au(75))]));
+        TransformOperation::Translate(LengthOrPercentage::Length(Length::new(100.)),
+                                      LengthOrPercentage::Length(Length::new(0.)),
+                                      Length::new(75.))]));
     assert_eq!(
         from.animate(&to, Procedure::Interpolate { progress: 0.5 }).unwrap(),
         TransformList(Some(vec![TransformOperation::Translate(
-            LengthOrPercentage::Length(Au(50)),
-            LengthOrPercentage::Length(Au(50)),
-            Au(50),
+            LengthOrPercentage::Length(Length::new(50.)),
+            LengthOrPercentage::Length(Length::new(50.)),
+            Length::new(50.),
         )]))
     );
 
     let from = TransformList(Some(vec![TransformOperation::Translate(
         LengthOrPercentage::Percentage(Percentage(0.5)),
         LengthOrPercentage::Percentage(Percentage(1.0)),
-        Au(25),
+        Length::new(25.),
     )]));
     let to = TransformList(Some(vec![
-        TransformOperation::Translate(LengthOrPercentage::Length(Au(100)),
-                                      LengthOrPercentage::Length(Au(50)),
-                                      Au(75))]));
+        TransformOperation::Translate(LengthOrPercentage::Length(Length::new(100.)),
+                                      LengthOrPercentage::Length(Length::new(50.)),
+                                      Length::new(75.))]));
     assert_eq!(
         from.animate(&to, Procedure::Interpolate { progress: 0.5 }).unwrap(),
         TransformList(Some(vec![TransformOperation::Translate(
             // calc(50px + 25%)
-            LengthOrPercentage::Calc(CalcLengthOrPercentage::new(Au(50), Some(Percentage(0.25)))),
+            LengthOrPercentage::Calc(CalcLengthOrPercentage::new(Length::new(50.),
+                                                                 Some(Percentage(0.25)))),
             // calc(25px + 50%)
-            LengthOrPercentage::Calc(CalcLengthOrPercentage::new(Au(25), Some(Percentage(0.5)))),
-            Au(50),
+            LengthOrPercentage::Calc(CalcLengthOrPercentage::new(Length::new(25.),
+                                                                 Some(Percentage(0.5)))),
+            Length::new(50.),
         )]))
     );
 }
@@ -150,14 +151,14 @@ fn test_transform_interpolation_on_skew() {
 
 #[test]
 fn test_transform_interpolation_on_mismatched_lists() {
-    use style::values::computed::{Angle, LengthOrPercentage, Percentage};
+    use style::values::computed::{Angle, Length, LengthOrPercentage};
 
     let from = TransformList(Some(vec![TransformOperation::Rotate(0.0, 0.0, 1.0,
                                                                   Angle::from_radians(100.0))]));
     let to = TransformList(Some(vec![
-        TransformOperation::Translate(LengthOrPercentage::Length(Au(100)),
-                                      LengthOrPercentage::Length(Au(0)),
-                                      Au(0))]));
+        TransformOperation::Translate(LengthOrPercentage::Length(Length::new(100.)),
+                                      LengthOrPercentage::Length(Length::new(0.)),
+                                      Length::new(0.))]));
     assert_eq!(
         from.animate(&to, Procedure::Interpolate { progress: 0.5 }).unwrap(),
         TransformList(Some(vec![TransformOperation::InterpolateMatrix {
diff --git a/tests/unit/style/attr.rs b/tests/unit/style/attr.rs
index 8c04de5caa0..9fc56ff82bb 100644
--- a/tests/unit/style/attr.rs
+++ b/tests/unit/style/attr.rs
@@ -8,12 +8,12 @@ use style::values::computed::{CalcLengthOrPercentage, Percentage};
 
 #[test]
 fn test_length_calc() {
-    let calc = CalcLengthOrPercentage::new(Au(10), Some(Percentage(0.2)));
+    let calc = CalcLengthOrPercentage::new(Au(10).into(), Some(Percentage(0.2)));
     assert_eq!(calc.to_used_value(Some(Au(10))), Some(Au(12)));
     assert_eq!(calc.to_used_value(Some(Au(0))), Some(Au(10)));
     assert_eq!(calc.to_used_value(None), None);
 
-    let calc = CalcLengthOrPercentage::new(Au(10), None);
+    let calc = CalcLengthOrPercentage::new(Au(10).into(), None);
     assert_eq!(calc.to_used_value(Some(Au(0))), Some(Au(10)));
     assert_eq!(calc.to_used_value(None), Some(Au(10)));
 }
diff --git a/tests/wpt/metadata-css/css-transforms-1_dev/html/transform-rounding-001.htm.ini b/tests/wpt/metadata-css/css-transforms-1_dev/html/transform-rounding-001.htm.ini
deleted file mode 100644
index c8859a8ce3f..00000000000
--- a/tests/wpt/metadata-css/css-transforms-1_dev/html/transform-rounding-001.htm.ini
+++ /dev/null
@@ -1,3 +0,0 @@
-[transform-rounding-001.htm]
-  type: reftest
-  expected: FAIL