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/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..a98b34169ce 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
diff --git a/components/layout/fragment.rs b/components/layout/fragment.rs
index ece57c0ed46..471548214b3 100644
--- a/components/layout/fragment.rs
+++ b/components/layout/fragment.rs
@@ -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/multicol.rs b/components/layout/multicol.rs
index 3e7cb66c2c9..b1ffc704d77 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);
                 }
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..da3aae833a3 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)
     }
 }
 
@@ -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..014bb4fe7dd 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(),
@@ -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..af3ee5978e2 100644
--- a/components/style/gecko/conversions.rs
+++ b/components/style/gecko/conversions.rs
@@ -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..dd4c7a9297d 100644
--- a/components/style/gecko/generated/bindings.rs
+++ b/components/style/gecko/generated/bindings.rs
@@ -1376,6 +1376,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..ac7afb97a17 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;
@@ -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>)
     }
 }
 
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/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..7856889a904 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>
@@ -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);
             }
         }
     }
@@ -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..585774da3b7 100644
--- a/components/style/properties/helpers/animated_properties.mako.rs
+++ b/components/style/properties/helpers/animated_properties.mako.rs
@@ -48,7 +48,7 @@ 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::{LengthOrPercentageOrNone, MaxLength, NonNegativeLength};
 use values::computed::{NonNegativeNumber, Number, NumberOrPercentage, Percentage};
 use values::computed::{PositiveIntegerOrAuto, ToComputedValue};
 #[cfg(feature = "gecko")] use values::computed::MozLength;
@@ -1094,7 +1094,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 +1245,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)?,
@@ -2327,7 +2328,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 +2365,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 +2382,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)
             }
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..09db21c3b26 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);
@@ -1484,6 +1482,7 @@ ${helpers.predefined_type(
     // Converts computed LengthOrPercentageOrNumber into computed
     // LengthOrPercentage. Number maps into Length
     fn lopon_to_lop(value: &ComputedLoPoNumber) -> ComputedLoP {
+        use app_units::Au;
         match *value {
             Either::First(number) => ComputedLoP::Length(Au::from_f32_px(number)),
             Either::Second(length_or_percentage) => length_or_percentage,
@@ -1495,7 +1494,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..d02d241ff8d 100644
--- a/components/style/properties/longhand/inherited_text.mako.rs
+++ b/components/style/properties/longhand/inherited_text.mako.rs
@@ -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/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/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..4289d1759f2 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.))
     }
 }
 
diff --git a/components/style/values/computed/length.rs b/components/style/values/computed/length.rs
index a0ebfda3171..5b4b4784de1 100644
--- a/components/style/values/computed/length.rs
+++ b/components/style/values/computed/length.rs
@@ -7,12 +7,13 @@
 use app_units::{Au, AU_PER_PX};
 use ordered_float::NotNaN;
 use std::fmt;
+use std::ops::Add;
 use style_traits::ToCss;
 use style_traits::values::specified::AllowedLengthType;
 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,24 +43,24 @@ 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(),
+            specified::Length::Calc(ref calc) => calc.to_computed_value(context).length().into(),
         }
     }
 
     #[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))
     }
 }
@@ -229,7 +230,7 @@ impl specified::CalcLengthOrPercentage {
         let mut length = Au(0);
 
         if let Some(absolute) = self.absolute {
-            length += zoom_fn(absolute.to_computed_value(context));
+            length += zoom_fn(Au::from(absolute.to_computed_value(context)));
         }
 
         for val in &[self.vw.map(ViewportPercentageLength::Vw),
@@ -237,7 +238,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 += Au::from(val.to_computed_value(viewport_size));
             }
         }
 
@@ -246,7 +248,7 @@ 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 += Au::from(val.to_computed_value(context, base_size));
             }
         }
 
@@ -259,7 +261,7 @@ impl specified::CalcLengthOrPercentage {
 
     /// 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| Au::from(context.maybe_zoom_text(abs.into())), base_size)
     }
 }
 
@@ -275,7 +277,7 @@ impl ToComputedValue for specified::CalcLengthOrPercentage {
     fn from_computed_value(computed: &CalcLengthOrPercentage) -> Self {
         specified::CalcLengthOrPercentage {
             clamping_mode: computed.clamping_mode,
-            absolute: Some(AbsoluteLength::from_computed_value(&computed.length)),
+            absolute: Some(AbsoluteLength::from_computed_value(&computed.length.into())),
             percentage: computed.percentage,
             ..Default::default()
         }
@@ -402,7 +404,7 @@ impl ToComputedValue for specified::LengthOrPercentage {
     fn to_computed_value(&self, context: &Context) -> LengthOrPercentage {
         match *self {
             specified::LengthOrPercentage::Length(ref value) => {
-                LengthOrPercentage::Length(value.to_computed_value(context))
+                LengthOrPercentage::Length(Au::from(value.to_computed_value(context)))
             }
             specified::LengthOrPercentage::Percentage(value) => {
                 LengthOrPercentage::Percentage(value)
@@ -417,7 +419,7 @@ impl ToComputedValue for specified::LengthOrPercentage {
         match *computed {
             LengthOrPercentage::Length(value) => {
                 specified::LengthOrPercentage::Length(
-                    ToComputedValue::from_computed_value(&value)
+                    ToComputedValue::from_computed_value(&value.into())
                 )
             }
             LengthOrPercentage::Percentage(value) => {
@@ -493,7 +495,7 @@ impl ToComputedValue for specified::LengthOrPercentageOrAuto {
     fn to_computed_value(&self, context: &Context) -> LengthOrPercentageOrAuto {
         match *self {
             specified::LengthOrPercentageOrAuto::Length(ref value) => {
-                LengthOrPercentageOrAuto::Length(value.to_computed_value(context))
+                LengthOrPercentageOrAuto::Length(Au::from(value.to_computed_value(context)))
             }
             specified::LengthOrPercentageOrAuto::Percentage(value) => {
                 LengthOrPercentageOrAuto::Percentage(value)
@@ -513,7 +515,7 @@ impl ToComputedValue for specified::LengthOrPercentageOrAuto {
             LengthOrPercentageOrAuto::Auto => specified::LengthOrPercentageOrAuto::Auto,
             LengthOrPercentageOrAuto::Length(value) => {
                 specified::LengthOrPercentageOrAuto::Length(
-                    ToComputedValue::from_computed_value(&value)
+                    ToComputedValue::from_computed_value(&value.into())
                 )
             }
             LengthOrPercentageOrAuto::Percentage(value) => {
@@ -585,7 +587,7 @@ impl ToComputedValue for specified::LengthOrPercentageOrNone {
     fn to_computed_value(&self, context: &Context) -> LengthOrPercentageOrNone {
         match *self {
             specified::LengthOrPercentageOrNone::Length(ref value) => {
-                LengthOrPercentageOrNone::Length(value.to_computed_value(context))
+                LengthOrPercentageOrNone::Length(Au::from(value.to_computed_value(context)))
             }
             specified::LengthOrPercentageOrNone::Percentage(value) => {
                 LengthOrPercentageOrNone::Percentage(value)
@@ -605,7 +607,7 @@ impl ToComputedValue for specified::LengthOrPercentageOrNone {
             LengthOrPercentageOrNone::None => specified::LengthOrPercentageOrNone::None,
             LengthOrPercentageOrNone::Length(value) => {
                 specified::LengthOrPercentageOrNone::Length(
-                    ToComputedValue::from_computed_value(&value)
+                    ToComputedValue::from_computed_value(&value.into())
                 )
             }
             LengthOrPercentageOrNone::Percentage(value) => {
@@ -623,10 +625,10 @@ 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 {
-        LengthOrPercentage::Length(length.0).into()
+    fn from(length: NonNegativeLength) -> Self {
+        LengthOrPercentage::Length(Au::from(length.0)).into()
     }
 }
 
@@ -664,8 +666,56 @@ 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
+    }
+}
+
+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 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 +738,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..48ba575b8a2 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.),
         )
     }
 }
@@ -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)
@@ -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/length.rs b/components/style/values/specified/length.rs
index 4267c85f45e..8f190fdd072 100644
--- a/components/style/values/specified/length.rs
+++ b/components/style/values/specified/length.rs
@@ -20,7 +20,7 @@ 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))
     }
 }
 
diff --git a/components/style/values/specified/text.rs b/components/style/values/specified/text.rs
index 0f4163c3fdd..3e766fb6f67 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 app_units::Au;
         use values::specified::length::FontBaseSize;
         match *self {
             GenericLineHeight::Normal => {
@@ -99,7 +100,7 @@ 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)).into()
                     }
                     LengthOrPercentage::Length(ref length) => {
                         length.to_computed_value(context).into()
@@ -123,7 +124,7 @@ impl ToComputedValue for LineHeight {
                         let absolute_length = computed_calc.unclamped_length();
                         computed_calc
                             .clamping_mode
-                            .clamp(absolute_length + font_relative_length)
+                            .clamp(absolute_length + Au::from(font_relative_length))
                             .into()
                     }
                 };
diff --git a/tests/unit/style/animated_properties.rs b/tests/unit/style/animated_properties.rs
index 7043bd0a8ca..f08c3c81c56 100644
--- a/tests/unit/style/animated_properties.rs
+++ b/tests/unit/style/animated_properties.rs
@@ -65,34 +65,34 @@ 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))]));
+                                      Length::new(25.))]));
     let to = TransformList(Some(vec![
         TransformOperation::Translate(LengthOrPercentage::Length(Au(100)),
                                       LengthOrPercentage::Length(Au(0)),
-                                      Au(75))]));
+                                      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),
+            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))]));
+                                      Length::new(75.))]));
     assert_eq!(
         from.animate(&to, Procedure::Interpolate { progress: 0.5 }).unwrap(),
         TransformList(Some(vec![TransformOperation::Translate(
@@ -100,7 +100,7 @@ fn test_transform_interpolation_on_translate() {
             LengthOrPercentage::Calc(CalcLengthOrPercentage::new(Au(50), Some(Percentage(0.25)))),
             // calc(25px + 50%)
             LengthOrPercentage::Calc(CalcLengthOrPercentage::new(Au(25), Some(Percentage(0.5)))),
-            Au(50),
+            Length::new(50.),
         )]))
     );
 }
@@ -150,14 +150,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))]));
+                                      Length::new(0.))]));
     assert_eq!(
         from.animate(&to, Procedure::Interpolate { progress: 0.5 }).unwrap(),
         TransformList(Some(vec![TransformOperation::InterpolateMatrix {