diff --git a/components/layout_2020/flexbox/layout.rs b/components/layout_2020/flexbox/layout.rs
index 0f93c7da1c1..1a86058bde7 100644
--- a/components/layout_2020/flexbox/layout.rs
+++ b/components/layout_2020/flexbox/layout.rs
@@ -243,8 +243,8 @@ impl FlexContainer {
             ),
             // https://drafts.csswg.org/css-flexbox/#definite-sizes
             container_definite_inner_size: flex_axis.vec2_to_flex_relative(LogicalVec2 {
-                inline: Some(containing_block.inline_size),
-                block: containing_block.block_size.non_auto(),
+                inline: Some(containing_block.inline_size.into()),
+                block: containing_block.block_size.non_auto().map(|t| t.into()),
             }),
         };
 
@@ -273,9 +273,9 @@ impl FlexContainer {
         // https://drafts.csswg.org/css-flexbox/#algo-flex
         let flex_lines = collect_flex_lines(
             &mut flex_context,
-            container_main_size,
+            container_main_size.into(),
             &mut flex_items,
-            |flex_context, mut line| line.layout(flex_context, container_main_size),
+            |flex_context, mut line| line.layout(flex_context, container_main_size.into()),
         );
 
         let content_cross_size = flex_lines
@@ -343,7 +343,7 @@ impl FlexContainer {
                 // And we’ll need to change the signature of `IndependentFormattingContext::layout`
                 // to allow the inner formatting context to “negotiate” a used inline-size
                 // with the outer one somehow.
-                container_main_size
+                container_main_size.into()
             },
         };
 
@@ -1091,12 +1091,12 @@ impl<'a> FlexItem<'a> {
                     },
                     IndependentFormattingContext::NonReplaced(non_replaced) => {
                         let block_size = match used_cross_size_override {
-                            Some(s) => LengthOrAuto::LengthPercentage(s),
-                            None => self.content_box_size.cross,
+                            Some(s) => AuOrAuto::LengthPercentage(s.into()),
+                            None => self.content_box_size.cross.map(|t| t.into()),
                         };
 
                         let item_as_containing_block = ContainingBlock {
-                            inline_size: used_main_size,
+                            inline_size: used_main_size.into(),
                             block_size,
                             style: &non_replaced.style,
                         };
diff --git a/components/layout_2020/flow/float.rs b/components/layout_2020/flow/float.rs
index 4ddb1878912..96bdf91ee62 100644
--- a/components/layout_2020/flow/float.rs
+++ b/components/layout_2020/flow/float.rs
@@ -918,10 +918,10 @@ impl FloatBox {
 
                         let tentative_inline_size = box_size.inline.auto_is(|| {
                             let available_size =
-                                containing_block.inline_size - pbm_sums.inline_sum().into();
+                                containing_block.inline_size - pbm_sums.inline_sum();
                             non_replaced
                                 .inline_content_sizes(layout_context)
-                                .shrink_to_fit(available_size.into())
+                                .shrink_to_fit(available_size)
                                 .into()
                         });
                         let inline_size = tentative_inline_size
@@ -931,8 +931,8 @@ impl FloatBox {
                         // https://drafts.csswg.org/css2/#block-root-margin
                         // FIXME(pcwalton): Is a tree rank of zero correct here?
                         let containing_block_for_children = ContainingBlock {
-                            inline_size,
-                            block_size: box_size.block,
+                            inline_size: inline_size.into(),
+                            block_size: box_size.block.map(|t| t.into()),
                             style: &non_replaced.style,
                         };
                         let independent_layout = non_replaced.layout(
diff --git a/components/layout_2020/flow/inline.rs b/components/layout_2020/flow/inline.rs
index 0df7f1cb894..6a7f5d20eb4 100644
--- a/components/layout_2020/flow/inline.rs
+++ b/components/layout_2020/flow/inline.rs
@@ -793,7 +793,7 @@ impl<'a, 'b> InlineFormattingContextState<'a, 'b> {
                 block: block_start_position.into(),
             },
             size: LogicalVec2 {
-                inline: self.containing_block.inline_size,
+                inline: self.containing_block.inline_size.into(),
                 block: effective_block_advance.resolve(),
             },
         };
@@ -868,7 +868,7 @@ impl<'a, 'b> InlineFormattingContextState<'a, 'b> {
                 placement_among_floats.start_corner.inline,
                 placement_among_floats.size.inline,
             ),
-            None => (Length::zero(), self.containing_block.inline_size),
+            None => (Length::zero(), self.containing_block.inline_size.into()),
         };
 
         // Properly handling text-indent requires that we do not align the text
@@ -945,7 +945,7 @@ impl<'a, 'b> InlineFormattingContextState<'a, 'b> {
 
         let available_inline_size = match self.current_line.placement_among_floats.get() {
             Some(placement_among_floats) => placement_among_floats.size.inline,
-            None => self.containing_block.inline_size,
+            None => self.containing_block.inline_size.into(),
         } - line_inline_size_without_trailing_whitespace;
 
         // If this float doesn't fit on the current line or a previous float didn't fit on
@@ -1034,7 +1034,7 @@ impl<'a, 'b> InlineFormattingContextState<'a, 'b> {
                 .clone()
         } else {
             LogicalVec2 {
-                inline: self.containing_block.inline_size,
+                inline: self.containing_block.inline_size.into(),
                 block: Length::new(f32::INFINITY),
             }
         };
@@ -1067,7 +1067,7 @@ impl<'a, 'b> InlineFormattingContextState<'a, 'b> {
 
         // If the potential line is larger than the containing block we do not even need to consider
         // floats. We definitely have to do a linebreak.
-        if potential_line_size.inline > self.containing_block.inline_size {
+        if potential_line_size.inline > self.containing_block.inline_size.into() {
             return true;
         }
 
@@ -1443,7 +1443,7 @@ impl InlineFormattingContext {
                 .style
                 .get_inherited_text()
                 .text_indent
-                .to_used_value(containing_block.inline_size.into())
+                .to_used_value(containing_block.inline_size)
                 .into()
         } else {
             Length::zero()
@@ -1873,11 +1873,10 @@ impl IndependentFormattingContext {
 
                 // https://drafts.csswg.org/css2/visudet.html#inlineblock-width
                 let tentative_inline_size = box_size.inline.auto_is(|| {
-                    let available_size =
-                        ifc.containing_block.inline_size - pbm_sums.inline_sum().into();
+                    let available_size = ifc.containing_block.inline_size - pbm_sums.inline_sum();
                     non_replaced
                         .inline_content_sizes(layout_context)
-                        .shrink_to_fit(available_size.into())
+                        .shrink_to_fit(available_size)
                         .into()
                 });
 
@@ -1888,8 +1887,8 @@ impl IndependentFormattingContext {
                     .clamp_between_extremums(min_box_size.inline, max_box_size.inline);
 
                 let containing_block_for_children = ContainingBlock {
-                    inline_size,
-                    block_size: box_size.block,
+                    inline_size: inline_size.into(),
+                    block_size: box_size.block.map(|t| t.into()),
                     style: &non_replaced.style,
                 };
                 assert_eq!(
diff --git a/components/layout_2020/flow/mod.rs b/components/layout_2020/flow/mod.rs
index e04670c42c1..618c8c63643 100644
--- a/components/layout_2020/flow/mod.rs
+++ b/components/layout_2020/flow/mod.rs
@@ -28,7 +28,7 @@ use crate::formatting_contexts::{
 use crate::fragment_tree::{
     BaseFragmentInfo, BoxFragment, CollapsedBlockMargins, CollapsedMargin, Fragment,
 };
-use crate::geom::{LogicalRect, LogicalSides, LogicalVec2};
+use crate::geom::{AuOrAuto, LogicalRect, LogicalSides, LogicalVec2};
 use crate::positioned::{AbsolutelyPositionedBox, PositioningContext, PositioningContextLength};
 use crate::replaced::ReplacedContent;
 use crate::sizing::{self, ContentSizes};
@@ -141,18 +141,17 @@ impl BlockLevelBox {
             .auto_is(|| {
                 let margin_inline_start = pbm.margin.inline_start.auto_is(Length::zero);
                 let margin_inline_end = pbm.margin.inline_end.auto_is(Length::zero);
-                containing_block.inline_size -
-                    pbm.padding_border_sums.inline.into() -
+                Length::from(containing_block.inline_size - pbm.padding_border_sums.inline) -
                     margin_inline_start -
                     margin_inline_end
             })
             .clamp_between_extremums(min_inline_size, max_inline_size);
 
         // The block size is irrelevant here.
-        let block_size = LengthOrAuto::Auto;
+        let block_size = AuOrAuto::Auto;
 
         let containing_block_for_children = ContainingBlock {
-            inline_size,
+            inline_size: inline_size.into(),
             block_size,
             style,
         };
@@ -213,9 +212,7 @@ impl BlockFormattingContext {
         containing_block: &ContainingBlock,
     ) -> IndependentLayout {
         let mut sequential_layout_state = if self.contains_floats || !layout_context.use_rayon {
-            Some(SequentialLayoutState::new(
-                containing_block.inline_size.into(),
-            ))
+            Some(SequentialLayoutState::new(containing_block.inline_size))
         } else {
             None
         };
@@ -706,7 +703,7 @@ fn layout_in_flow_non_replaced_block_level_same_formatting_context(
                 block_start: sequential_layout_state.bfc_relative_block_position,
                 block_start_margins_not_collapsed: sequential_layout_state.current_margin,
                 inline_start,
-                inline_end: inline_start + containing_block_for_children.inline_size.into(),
+                inline_end: inline_start + containing_block_for_children.inline_size,
             };
             parent_containing_block_position_info = Some(
                 sequential_layout_state.replace_containing_block_position_info(new_cb_offsets),
@@ -755,7 +752,9 @@ fn layout_in_flow_non_replaced_block_level_same_formatting_context(
         (computed_min_block_size.is_definitely_zero() || computed_min_block_size.is_auto());
 
     let block_size = containing_block_for_children.block_size.auto_is(|| {
-        content_block_size.clamp_between_extremums(min_box_size.block, max_box_size.block)
+        content_block_size
+            .clamp_between_extremums(min_box_size.block, max_box_size.block)
+            .into()
     });
 
     if let Some(ref mut sequential_layout_state) = sequential_layout_state {
@@ -774,9 +773,7 @@ fn layout_in_flow_non_replaced_block_level_same_formatting_context(
         // the block direction. In that case, the ceiling for floats is effectively raised
         // as long as no floats in the overflowing content lowered it.
         sequential_layout_state.advance_block_position(
-            Au::from(block_size - content_block_size) +
-                pbm.padding.block_end +
-                pbm.border.block_end,
+            block_size - content_block_size.into() + pbm.padding.block_end + pbm.border.block_end,
         );
 
         if !end_margin_can_collapse_with_children {
@@ -793,8 +790,8 @@ fn layout_in_flow_non_replaced_block_level_same_formatting_context(
             inline: pbm.padding.inline_start + pbm.border.inline_start + margin.inline_start.into(),
         },
         size: LogicalVec2 {
-            block: block_size.into(),
-            inline: containing_block_for_children.inline_size.into(),
+            block: block_size,
+            inline: containing_block_for_children.inline_size,
         },
     };
 
@@ -852,13 +849,10 @@ impl NonReplacedFormattingContext {
         );
 
         let block_size = containing_block_for_children.block_size.auto_is(|| {
-            layout
-                .content_block_size
-                .clamp_between_extremums(
-                    min_box_size.block.into(),
-                    max_box_size.block.map(|t| t.into()),
-                )
-                .into()
+            layout.content_block_size.clamp_between_extremums(
+                min_box_size.block.into(),
+                max_box_size.block.map(|t| t.into()),
+            )
         });
 
         let content_rect = LogicalRect {
@@ -869,8 +863,8 @@ impl NonReplacedFormattingContext {
                     margin.inline_start.into(),
             },
             size: LogicalVec2 {
-                block: block_size.into(),
-                inline: containing_block_for_children.inline_size.into(),
+                block: block_size,
+                inline: containing_block_for_children.inline_size,
             },
         };
 
@@ -937,8 +931,8 @@ impl NonReplacedFormattingContext {
                 layout_context,
                 positioning_context,
                 &ContainingBlock {
-                    inline_size,
-                    block_size,
+                    inline_size: inline_size.into(),
+                    block_size: block_size.map(|t| t.into()),
                     style: &self.style,
                 },
             );
@@ -1007,8 +1001,8 @@ impl NonReplacedFormattingContext {
                     layout_context,
                     positioning_context,
                     &ContainingBlock {
-                        inline_size: proposed_inline_size,
-                        block_size,
+                        inline_size: proposed_inline_size.into(),
+                        block_size: block_size.map(|t| t.into()),
                         style: &self.style,
                     },
                 );
@@ -1241,8 +1235,7 @@ fn solve_containing_block_padding_border_and_margin_for_in_flow_box<'a>(
         .auto_is(|| {
             let margin_inline_start = pbm.margin.inline_start.auto_is(Length::zero);
             let margin_inline_end = pbm.margin.inline_end.auto_is(Length::zero);
-            containing_block.inline_size -
-                pbm.padding_border_sums.inline.into() -
+            Length::from(containing_block.inline_size - pbm.padding_border_sums.inline) -
                 margin_inline_start -
                 margin_inline_end
         })
@@ -1266,8 +1259,8 @@ fn solve_containing_block_padding_border_and_margin_for_in_flow_box<'a>(
     }
 
     let containing_block_for_children = ContainingBlock {
-        inline_size,
-        block_size,
+        inline_size: inline_size.into(),
+        block_size: block_size.map(|t| t.into()),
         style,
     };
     // https://drafts.csswg.org/css-writing-modes/#orthogonal-flows
@@ -1337,7 +1330,8 @@ fn solve_inline_margins_avoiding_floats(
         (LengthOrAuto::Auto, _) => inline_adjustment + free_space,
         _ => inline_adjustment,
     };
-    let margin_inline_end = containing_block.inline_size - inline_size - margin_inline_start;
+    let margin_inline_end =
+        Length::from(containing_block.inline_size) - inline_size - margin_inline_start;
     (margin_inline_start, margin_inline_end)
 }
 
@@ -1353,7 +1347,7 @@ fn solve_inline_margins_for_in_flow_block_level(
     inline_size: Length,
 ) -> (Length, Length) {
     let free_space =
-        containing_block.inline_size - pbm.padding_border_sums.inline.into() - inline_size;
+        Length::from(containing_block.inline_size - pbm.padding_border_sums.inline) - inline_size;
     let margin_inline_start = match (pbm.margin.inline_start, pbm.margin.inline_end) {
         (LengthOrAuto::Auto, LengthOrAuto::Auto) => Length::zero().max(free_space / 2.),
         (LengthOrAuto::Auto, LengthOrAuto::LengthPercentage(end)) => {
diff --git a/components/layout_2020/geom.rs b/components/layout_2020/geom.rs
index 0540111fd03..d827d11cf3e 100644
--- a/components/layout_2020/geom.rs
+++ b/components/layout_2020/geom.rs
@@ -136,10 +136,10 @@ impl LogicalVec2<LengthPercentageOrAuto<'_>> {
         LogicalVec2 {
             inline: self
                 .inline
-                .percentage_relative_to(containing_block.inline_size),
-            block: self
-                .block
-                .maybe_percentage_relative_to(containing_block.block_size.non_auto()),
+                .percentage_relative_to(containing_block.inline_size.into()),
+            block: self.block.maybe_percentage_relative_to(
+                containing_block.block_size.map(|t| t.into()).non_auto(),
+            ),
         }
     }
 }
@@ -152,9 +152,11 @@ impl LogicalVec2<Option<&'_ LengthPercentage>> {
         LogicalVec2 {
             inline: self
                 .inline
-                .map(|lp| lp.percentage_relative_to(containing_block.inline_size)),
+                .map(|lp| lp.percentage_relative_to(containing_block.inline_size.into())),
             block: self.block.and_then(|lp| {
-                lp.maybe_percentage_relative_to(containing_block.block_size.non_auto())
+                lp.maybe_percentage_relative_to(
+                    containing_block.block_size.map(|t| t.into()).non_auto(),
+                )
             }),
         }
     }
diff --git a/components/layout_2020/lib.rs b/components/layout_2020/lib.rs
index 8f25291fd75..a46c94b8543 100644
--- a/components/layout_2020/lib.rs
+++ b/components/layout_2020/lib.rs
@@ -28,14 +28,14 @@ pub mod traversal;
 use app_units::Au;
 pub use flow::BoxTree;
 pub use fragment_tree::FragmentTree;
+use geom::AuOrAuto;
 use style::properties::ComputedValues;
-use style::values::computed::{Length, LengthOrAuto};
 
 use crate::geom::LogicalVec2;
 
 pub struct ContainingBlock<'a> {
-    inline_size: Length,
-    block_size: LengthOrAuto,
+    inline_size: Au,
+    block_size: AuOrAuto,
     style: &'a ComputedValues,
 }
 
@@ -47,8 +47,8 @@ struct DefiniteContainingBlock<'a> {
 impl<'a> From<&'_ DefiniteContainingBlock<'a>> for ContainingBlock<'a> {
     fn from(definite: &DefiniteContainingBlock<'a>) -> Self {
         ContainingBlock {
-            inline_size: definite.size.inline.into(),
-            block_size: LengthOrAuto::LengthPercentage(definite.size.block.into()),
+            inline_size: definite.size.inline,
+            block_size: AuOrAuto::LengthPercentage(definite.size.block),
             style: definite.style,
         }
     }
diff --git a/components/layout_2020/positioned.rs b/components/layout_2020/positioned.rs
index b3ffbc97352..c0b71f30a90 100644
--- a/components/layout_2020/positioned.rs
+++ b/components/layout_2020/positioned.rs
@@ -2,6 +2,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
+use app_units::Au;
 use rayon::iter::IntoParallelRefMutIterator;
 use rayon::prelude::{IndexedParallelIterator, ParallelIterator};
 use serde::Serialize;
@@ -19,7 +20,9 @@ use crate::formatting_contexts::IndependentFormattingContext;
 use crate::fragment_tree::{
     AbsoluteBoxOffsets, BoxFragment, CollapsedBlockMargins, Fragment, HoistedSharedFragment,
 };
-use crate::geom::{LengthOrAuto, LengthPercentageOrAuto, LogicalRect, LogicalSides, LogicalVec2};
+use crate::geom::{
+    AuOrAuto, LengthOrAuto, LengthPercentageOrAuto, LogicalRect, LogicalSides, LogicalVec2,
+};
 use crate::style_ext::{ComputedValuesExt, DisplayInside};
 use crate::{ContainingBlock, DefiniteContainingBlock};
 
@@ -601,7 +604,7 @@ impl HoistedAbsolutelyPositionedBox {
                     // percentages may be resolved incorrectly.
                     let mut try_layout = |size| {
                         let containing_block_for_children = ContainingBlock {
-                            inline_size,
+                            inline_size: inline_size.into(),
                             block_size: size,
                             style: &non_replaced.style,
                         };
@@ -623,18 +626,17 @@ impl HoistedAbsolutelyPositionedBox {
                             &mut positioning_context,
                             &containing_block_for_children,
                         );
-                        let block_size =
-                            size.auto_is(|| independent_layout.content_block_size.into());
+                        let block_size = size.auto_is(|| independent_layout.content_block_size);
                         Result {
                             content_size: LogicalVec2 {
                                 inline: inline_size,
-                                block: block_size,
+                                block: block_size.into(),
                             },
                             fragments: independent_layout.fragments,
                         }
                     };
 
-                    let mut result = try_layout(block_axis.size);
+                    let mut result = try_layout(block_axis.size.map(|t| t.into()));
 
                     // If the tentative used block size is greater than ‘max-block-size’,
                     // recalculate the block size and margins with ‘max-block-size’ as the
@@ -645,7 +647,7 @@ impl HoistedAbsolutelyPositionedBox {
                         if result.content_size.block > max {
                             block_axis = block_axis_solver
                                 .solve_for_size(LengthOrAuto::LengthPercentage(max));
-                            result = try_layout(LengthOrAuto::LengthPercentage(max));
+                            result = try_layout(AuOrAuto::LengthPercentage(max.into()));
                         }
                     }
 
@@ -657,7 +659,7 @@ impl HoistedAbsolutelyPositionedBox {
                     if result.content_size.block < min_size.block {
                         block_axis = block_axis_solver
                             .solve_for_size(LengthOrAuto::LengthPercentage(min_size.block));
-                        result = try_layout(LengthOrAuto::LengthPercentage(min_size.block));
+                        result = try_layout(AuOrAuto::LengthPercentage(min_size.block.into()));
                     }
 
                     content_size = result.content_size;
@@ -875,12 +877,12 @@ pub(crate) fn relative_adjustement(
     // positioned, the value computes to 'auto'.""
     // https://www.w3.org/TR/CSS2/visudet.html#the-height-property
     let cbis = containing_block.inline_size;
-    let cbbs = containing_block.block_size.auto_is(Length::zero);
+    let cbbs = containing_block.block_size.auto_is(Au::zero);
     let box_offsets = style
         .box_offsets(containing_block)
         .map_inline_and_block_axes(
-            |v| v.percentage_relative_to(cbis),
-            |v| v.percentage_relative_to(cbbs),
+            |v| v.percentage_relative_to(cbis.into()),
+            |v| v.percentage_relative_to(cbbs.into()),
         );
     fn adjust(start: LengthOrAuto, end: LengthOrAuto) -> Length {
         match (start, end) {
diff --git a/components/layout_2020/style_ext.rs b/components/layout_2020/style_ext.rs
index 7399614e34e..1b0adc305ec 100644
--- a/components/layout_2020/style_ext.rs
+++ b/components/layout_2020/style_ext.rs
@@ -349,7 +349,7 @@ impl ComputedValuesExt for ComputedValues {
         let cbis = containing_block.inline_size;
         let padding = self
             .padding(containing_block.style.writing_mode)
-            .percentages_relative_to(cbis);
+            .percentages_relative_to(cbis.into());
         let border = self.border_width(containing_block.style.writing_mode);
         PaddingBorderMargin {
             padding_border_sums: LogicalVec2 {
@@ -360,7 +360,7 @@ impl ComputedValuesExt for ComputedValues {
             border: border.into(),
             margin: self
                 .margin(containing_block.style.writing_mode)
-                .percentages_relative_to(cbis),
+                .percentages_relative_to(cbis.into()),
         }
     }
 
diff --git a/components/layout_2020/table/layout.rs b/components/layout_2020/table/layout.rs
index 9cf4cd02c31..90e61d6db46 100644
--- a/components/layout_2020/table/layout.rs
+++ b/components/layout_2020/table/layout.rs
@@ -9,7 +9,7 @@ use euclid::num::Zero;
 use log::warn;
 use style::computed_values::border_collapse::T as BorderCollapse;
 use style::logical_geometry::WritingMode;
-use style::values::computed::{CSSPixelLength, Length, LengthOrAuto, Percentage};
+use style::values::computed::{CSSPixelLength, Length, Percentage};
 use style::values::generics::box_::{GenericVerticalAlign as VerticalAlign, VerticalAlignKeyword};
 use style::values::generics::length::GenericLengthPercentageOrAuto::{Auto, LengthPercentage};
 
@@ -17,7 +17,7 @@ use super::{Table, TableSlot, TableSlotCell};
 use crate::context::LayoutContext;
 use crate::formatting_contexts::{Baselines, IndependentLayout};
 use crate::fragment_tree::{AnonymousFragment, BoxFragment, CollapsedBlockMargins, Fragment};
-use crate::geom::{LogicalRect, LogicalSides, LogicalVec2};
+use crate::geom::{AuOrAuto, LogicalRect, LogicalSides, LogicalVec2};
 use crate::positioned::{PositioningContext, PositioningContextLength};
 use crate::sizing::ContentSizes;
 use crate::style_ext::{Clamp, ComputedValuesExt, PaddingBorderMargin};
@@ -601,7 +601,7 @@ impl<'a> TableLayout<'a> {
             },
             Auto => grid_min_and_max
                 .max_content
-                .min(containing_block.inline_size.into())
+                .min(containing_block.inline_size)
                 .max(used_min_width_of_table),
         };
 
@@ -937,8 +937,8 @@ impl<'a> TableLayout<'a> {
                 total_width = total_width.max(Length::zero());
 
                 let containing_block_for_children = ContainingBlock {
-                    inline_size: total_width,
-                    block_size: LengthOrAuto::Auto,
+                    inline_size: total_width.into(),
+                    block_size: AuOrAuto::Auto,
                     style: &cell.style,
                 };
                 let collect_for_nearest_positioned_ancestor =