diff --git a/masonry/README.md b/masonry/README.md
index 108c2d688..c953c4cf6 100644
--- a/masonry/README.md
+++ b/masonry/README.md
@@ -133,7 +133,7 @@ pub fn make_widget_tree() -> NewWidget<impl Widget> {
     let list = Flex::column()
         .with_fixed(
             NewWidget::new(Flex::row().with(text_input, 1.0).with_fixed(button))
-                .with_props(PropertySet::new().with(Padding::all(WIDGET_SPACING.get()))),
+                .with_props(PropertySet::new().with(Padding::all(WIDGET_SPACING))),
         )
         .with_fixed_spacer(WIDGET_SPACING);
 
diff --git a/masonry/examples/calc_masonry.rs b/masonry/examples/calc_masonry.rs
index be14fb0d5..12f310872 100644
--- a/masonry/examples/calc_masonry.rs
+++ b/masonry/examples/calc_masonry.rs
@@ -255,7 +255,7 @@ pub fn build_calc() -> NewWidget<impl Widget> {
     NewWidget::new(root_widget).with_props(
         PropertySet::new()
             .with(Background::Color(AlphaColor::from_str("#794869").unwrap()))
-            .with(Padding::all(2.0))
+            .with(Padding::all(2.px()))
             .with(Gap::new(1.px())),
     )
 }
@@ -274,7 +274,7 @@ fn custom_property_set() -> DefaultProperties {
         PropertySet::new()
             .with(Background::Color(BLUE))
             .with(BorderColor::new(Color::TRANSPARENT))
-            .with(BorderWidth::all(2.0)),
+            .with(BorderWidth::all(2.px())),
     );
     stack.push(
         Selector::classes(&["op_button"]).with_active(true),
@@ -285,7 +285,7 @@ fn custom_property_set() -> DefaultProperties {
         PropertySet::new()
             .with(Background::Color(GRAY))
             .with(BorderColor::new(Color::TRANSPARENT))
-            .with(BorderWidth::all(2.0)),
+            .with(BorderWidth::all(2.px())),
     );
     stack.push(
         Selector::classes(&["digit_button"]).with_active(true),
diff --git a/masonry/examples/custom_widget.rs b/masonry/examples/custom_widget.rs
index 0d2671cd7..b9cab1efe 100644
--- a/masonry/examples/custom_widget.rs
+++ b/masonry/examples/custom_widget.rs
@@ -16,7 +16,7 @@ use masonry::core::{
 };
 use masonry::imaging::Painter;
 use masonry::kurbo::{Affine, Axis, BezPath, Point, Rect, Size, Stroke};
-use masonry::layout::LenReq;
+use masonry::layout::{AsUnit, LenReq, Length};
 use masonry::parley::FontFamilyName;
 use masonry::parley::style::{FontFamily, GenericFamily, StyleProperty};
 use masonry::peniko::{Color, ImageBrush, ImageFormat};
@@ -80,16 +80,16 @@ impl Widget for CustomWidget {
         _props: &PropertiesRef<'_>,
         axis: Axis,
         len_req: LenReq,
-        _cross_length: Option<f64>,
-    ) -> f64 {
+        _cross_length: Option<Length>,
+    ) -> Length {
         // We currently just define our preferred min/max,
         // but often it takes actual work to derive these.
         let min_size = Size::new(100., 50.);
         let max_size = Size::new(200., 200.);
 
         // Measurement is per axis, so we only care about a single dimension right now
-        let min_length = min_size.get_coord(axis);
-        let max_length = max_size.get_coord(axis);
+        let min_length = min_size.get_coord(axis).px();
+        let max_length = max_size.get_coord(axis).px();
 
         // Return a result based on the parent's request
         match len_req {
@@ -113,10 +113,9 @@ impl Widget for CustomWidget {
         painter: &mut Painter<'_>,
     ) {
         // Clear the whole widget with the color of your choice
-        // (ctx.content_box_size() returns the size of the content rect we're painting in)
-        let size = ctx.content_box_size();
-        let rect = ctx.content_box();
-        painter.fill(rect, palette::css::WHITE).draw();
+        let content_box = ctx.content_box();
+        let size = content_box.size();
+        painter.fill(content_box, palette::css::WHITE).draw();
 
         // Create an arbitrary bezier path
         let mut path = BezPath::new();
@@ -166,7 +165,7 @@ impl Widget for CustomWidget {
             width: 256,
             height: 256,
         });
-        let transform = ObjectFit::Stretch.affine(size, Size::new(256., 256.));
+        let transform = ObjectFit::Stretch.affine(content_box, Rect::new(0., 0., 256., 256.));
         painter.draw_image(&image_data, transform);
     }
 
diff --git a/masonry/examples/gallery/badge.rs b/masonry/examples/gallery/badge.rs
index b4c1a7a3d..b1f767048 100644
--- a/masonry/examples/gallery/badge.rs
+++ b/masonry/examples/gallery/badge.rs
@@ -6,7 +6,7 @@ use masonry::core::{
     ErasedAction, Handled, NewWidget, PropertySet, StyleProperty, Widget, WidgetId, WidgetTag,
 };
 use masonry::kurbo::Vec2;
-use masonry::layout::Length;
+use masonry::layout::{AsUnit, Length};
 use masonry::parley::style::FontWeight;
 use masonry::peniko::Color;
 use masonry::properties::types::CrossAxisAlignment;
@@ -93,7 +93,7 @@ impl DemoPage for BadgeDemo {
         let outline_badge = NewWidget::new(Badge::with_text("99+")).with_props(
             PropertySet::new()
                 .with(Background::Color(Color::TRANSPARENT))
-                .with(BorderWidth { width: 1.0 })
+                .with(BorderWidth { width: 1.px() })
                 .with(BorderColor {
                     color: Color::from_rgb8(0x71, 0x71, 0x7a),
                 }),
@@ -155,8 +155,8 @@ impl DemoPage for BadgeDemo {
         .with_props(
             PropertySet::new()
                 .with(Background::Color(Color::from_rgb8(0x3f, 0x3f, 0x46)))
-                .with(CornerRadius { radius: 999.0 })
-                .with(Padding::all(0.0)),
+                .with(CornerRadius { radius: 999.px() })
+                .with(Padding::ZERO),
         );
 
         let online_dot = NewWidget::new(Badge::new(
@@ -166,9 +166,9 @@ impl DemoPage for BadgeDemo {
         ))
         .with_props(
             PropertySet::new()
-                .with(Padding::all(0.0))
-                .with(CornerRadius { radius: 999.0 })
-                .with(BorderWidth { width: 0.0 })
+                .with(Padding::ZERO)
+                .with(CornerRadius { radius: 999.px() })
+                .with(BorderWidth { width: 0.px() })
                 .with(Background::Color(Color::from_rgb8(0x22, 0xc5, 0x5e))),
         );
 
diff --git a/masonry/examples/gallery/image.rs b/masonry/examples/gallery/image.rs
index 1a3025d47..aa16d8cb3 100644
--- a/masonry/examples/gallery/image.rs
+++ b/masonry/examples/gallery/image.rs
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 use masonry::core::{NewWidget, PropertySet, StyleProperty, Widget};
-use masonry::layout::AsUnit as _;
+use masonry::layout::AsUnit;
 use masonry::peniko::{ImageAlphaType, ImageData, ImageFormat};
 use masonry::properties::ObjectFit;
 use masonry::properties::types::CrossAxisAlignment;
@@ -54,7 +54,7 @@ impl DemoPage for ImageDemo {
                     .prepare(),
             )
             .with_fixed_spacer(CONTENT_GAP)
-            .with_fixed(SizedBox::new(image).size(420.0.px(), 280.0.px()).prepare());
+            .with_fixed(SizedBox::new(image).size(420.px(), 280.px()).prepare());
 
         wrap_in_shell(self.shell, NewWidget::new(body).erased())
     }
diff --git a/masonry/examples/gallery/kitchen_sink.rs b/masonry/examples/gallery/kitchen_sink.rs
index 6bf2ff18d..9e7a29c37 100644
--- a/masonry/examples/gallery/kitchen_sink.rs
+++ b/masonry/examples/gallery/kitchen_sink.rs
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 use masonry::core::{NewWidget, PropertySet, StyleProperty, Widget};
-use masonry::layout::{AsUnit as _, UnitPoint};
+use masonry::layout::{AsUnit, UnitPoint};
 use masonry::peniko::Color;
 use masonry::properties::types::CrossAxisAlignment;
 use masonry::properties::{Background, Padding};
@@ -43,10 +43,10 @@ impl DemoPage for KitchenSinkDemo {
         let grid = NewWidget::new(SizedBox::new(grid.prepare())).with_props(
             PropertySet::new()
                 .with(Background::Color(Color::from_rgb8(0x24, 0x24, 0x24)))
-                .with(Padding::all(12.0)),
+                .with(Padding::all(12.px())),
         );
 
-        let bg = NewWidget::new(SizedBox::empty().size(220.0.px(), 120.0.px())).with_props(
+        let bg = NewWidget::new(SizedBox::empty().size(220.px(), 120.px())).with_props(
             PropertySet::one(Background::Color(Color::from_rgb8(0x44, 0x22, 0x66))),
         );
 
diff --git a/masonry/examples/gallery/main.rs b/masonry/examples/gallery/main.rs
index beaf20028..23c373ce4 100644
--- a/masonry/examples/gallery/main.rs
+++ b/masonry/examples/gallery/main.rs
@@ -32,6 +32,7 @@ mod transforms;
 
 use masonry::core::{ErasedAction, NewWidget, StyleProperty, Widget as _, WidgetId, WidgetTag};
 use masonry::dpi::LogicalSize;
+use masonry::layout::Length;
 use masonry::parley::style::FontWeight;
 use masonry::properties::Padding;
 use masonry::properties::types::CrossAxisAlignment;
@@ -45,11 +46,11 @@ use masonry_winit::winit::window::Window;
 use crate::demo::{DemoPage, new_demo_shell_tags};
 use crate::switch::SwitchDemo;
 
-const SIDEBAR_WIDTH: masonry::layout::Length = masonry::layout::Length::const_px(240.0);
-const SIDEBAR_SCROLLBAR_INSET: f64 = 12.0;
-const LEFT_PANE_TOP_PADDING: f64 = 12.0;
-const LEFT_PANE_LEFT_PADDING: f64 = 12.0;
-const RIGHT_PANE_PADDING: f64 = 12.0;
+const SIDEBAR_WIDTH: Length = Length::const_px(240.0);
+const SIDEBAR_SCROLLBAR_INSET: Length = Length::const_px(12.0);
+const LEFT_PANE_TOP_PADDING: Length = Length::const_px(12.0);
+const LEFT_PANE_LEFT_PADDING: Length = Length::const_px(12.0);
+const RIGHT_PANE_PADDING: Length = Length::const_px(12.0);
 
 const DEMO_TITLE_FONT_SIZE: f32 = 20.0;
 
@@ -222,7 +223,7 @@ fn main() {
     // scrollbar doesn't sit on top of the buttons.
     let list = NewWidget::new(SizedBox::new(list.prepare())).with_props(Padding {
         top: LEFT_PANE_TOP_PADDING,
-        bottom: 0.0,
+        bottom: Length::ZERO,
         left: LEFT_PANE_LEFT_PADDING,
         right: SIDEBAR_SCROLLBAR_INSET,
     });
diff --git a/masonry/examples/gallery/spinner.rs b/masonry/examples/gallery/spinner.rs
index fafe54a0f..1048362e8 100644
--- a/masonry/examples/gallery/spinner.rs
+++ b/masonry/examples/gallery/spinner.rs
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 use masonry::core::{NewWidget, Widget};
-use masonry::layout::AsUnit as _;
+use masonry::layout::AsUnit;
 use masonry::properties::types::CrossAxisAlignment;
 use masonry::widgets::{Flex, SizedBox, Spinner};
 
@@ -32,7 +32,7 @@ impl DemoPage for SpinnerDemo {
             .cross_axis_alignment(CrossAxisAlignment::Center)
             .with_fixed(
                 SizedBox::new(Spinner::new().prepare())
-                    .size(80.0.px(), 80.0.px())
+                    .size(80.px(), 80.px())
                     .prepare(),
             );
 
diff --git a/masonry/examples/gallery/split.rs b/masonry/examples/gallery/split.rs
index 5a5e9ed93..142524cab 100644
--- a/masonry/examples/gallery/split.rs
+++ b/masonry/examples/gallery/split.rs
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 use masonry::core::{NewWidget, PropertySet, StyleProperty, Widget};
-use masonry::layout::AsUnit as _;
+use masonry::layout::AsUnit;
 use masonry::peniko::Color;
 use masonry::properties::{Background, Padding};
 use masonry::widgets::{Label, SizedBox, Split};
@@ -37,7 +37,7 @@ impl DemoPage for SplitDemo {
         .with_props(
             PropertySet::new()
                 .with(Background::Color(Color::from_rgb8(0x1f, 0x2a, 0x44)))
-                .with(Padding::all(12.0)),
+                .with(Padding::all(12.px())),
         );
 
         let right = NewWidget::new(SizedBox::new(
@@ -48,11 +48,11 @@ impl DemoPage for SplitDemo {
         .with_props(
             PropertySet::new()
                 .with(Background::Color(Color::from_rgb8(0x2b, 0x3c, 0x2f)))
-                .with(Padding::all(12.0)),
+                .with(Padding::all(12.px())),
         );
 
-        let body = SizedBox::new(Split::new(left, right).split_fraction(0.33).prepare())
-            .height(260.0.px());
+        let body =
+            SizedBox::new(Split::new(left, right).split_fraction(0.33).prepare()).height(260.px());
 
         wrap_in_shell(self.shell, NewWidget::new(body).erased())
     }
diff --git a/masonry/examples/gallery/step_input.rs b/masonry/examples/gallery/step_input.rs
index 3dad7c9f6..785af4b87 100644
--- a/masonry/examples/gallery/step_input.rs
+++ b/masonry/examples/gallery/step_input.rs
@@ -72,7 +72,7 @@ impl DemoPage for StepInputDemo {
 
         stack.push(
             Selector::new(),
-            (BorderWidth::all(2.), CornerRadius::all(20.)),
+            (BorderWidth::all(2.px()), CornerRadius::all(20.px())),
         );
 
         stack.push(
diff --git a/masonry/examples/gallery/transforms.rs b/masonry/examples/gallery/transforms.rs
index 4a424f059..0dc94bed4 100644
--- a/masonry/examples/gallery/transforms.rs
+++ b/masonry/examples/gallery/transforms.rs
@@ -6,7 +6,7 @@ use masonry::core::{
     ErasedAction, Handled, NewWidget, PropertySet, StyleProperty, Widget, WidgetId, WidgetTag,
 };
 use masonry::kurbo::{Affine, Vec2};
-use masonry::layout::AsUnit as _;
+use masonry::layout::AsUnit;
 use masonry::peniko::Color;
 use masonry::properties::types::CrossAxisAlignment;
 use masonry::properties::{Background, Padding};
@@ -108,13 +108,13 @@ impl DemoPage for TransformsDemo {
                     .with_style(StyleProperty::FontSize(14.0))
                     .prepare(),
             )
-            .size(160.0.px(), 160.0.px()),
+            .size(160.px(), 160.px()),
         )
         .with_tag(self.target)
         .with_props(
             PropertySet::new()
                 .with(Background::Color(Color::from_rgb8(0x35, 0x35, 0x35)))
-                .with(Padding::all(12.0)),
+                .with(Padding::all(12.px())),
         );
 
         let body = Flex::column()
diff --git a/masonry/examples/grid_masonry.rs b/masonry/examples/grid_masonry.rs
index 92dd95b08..d287be9b1 100644
--- a/masonry/examples/grid_masonry.rs
+++ b/masonry/examples/grid_masonry.rs
@@ -11,7 +11,7 @@ use masonry::core::{
     ErasedAction, NewWidget, PointerButton, PropertySet, StyleProperty, Widget as _, WidgetId,
 };
 use masonry::dpi::LogicalSize;
-use masonry::layout::Length;
+use masonry::layout::{AsUnit, Length};
 use masonry::peniko::Color;
 use masonry::properties::{BorderColor, BorderWidth, Gap};
 use masonry::theme::default_property_set;
@@ -69,7 +69,7 @@ pub fn make_grid(grid_gap: f64) -> NewWidget<Grid> {
 
     let props = PropertySet::new()
         .with(BorderColor::new(Color::from_rgb8(40, 40, 80)))
-        .with(BorderWidth::all(1.0));
+        .with(BorderWidth::all(1.px()));
     let label = SizedBox::new(NewWidget::new(label).with_props(props));
 
     let button_inputs = vec![
diff --git a/masonry/examples/layers.rs b/masonry/examples/layers.rs
index e5115b3b1..3e577ba9f 100644
--- a/masonry/examples/layers.rs
+++ b/masonry/examples/layers.rs
@@ -15,7 +15,7 @@ use masonry::core::{
 use masonry::imaging::Painter;
 use masonry::kurbo::{Axis, Point, Size, Vec2};
 use masonry::layers::Tooltip;
-use masonry::layout::{AsUnit, LayoutSize, LenReq, SizeDef};
+use masonry::layout::{AsUnit, LayoutSize, LenReq, Length, SizeDef};
 use masonry::parley::FontWeight;
 use masonry::peniko::Color;
 use masonry::properties::{Background, BorderColor, BorderWidth, ContentColor};
@@ -117,8 +117,8 @@ impl Widget for OverlayBox {
         _props: &PropertiesRef<'_>,
         axis: Axis,
         len_req: LenReq,
-        cross_length: Option<f64>,
-    ) -> f64 {
+        cross_length: Option<Length>,
+    ) -> Length {
         let auto_length = len_req.into();
         let context_size = LayoutSize::maybe(axis.cross(), cross_length);
 
@@ -178,7 +178,7 @@ fn main() {
                 .with_props(PropertySet::one(ContentColor::new(Color::BLACK))),
         ))
         .with_props(PropertySet::from((
-            BorderWidth::all(1.),
+            BorderWidth::all(1.px()),
             BorderColor::new(Color::BLACK),
             Background::Color(Color::WHITE),
         )))
diff --git a/masonry/examples/to_do_list.rs b/masonry/examples/to_do_list.rs
index 5a44311d7..21947a2a5 100644
--- a/masonry/examples/to_do_list.rs
+++ b/masonry/examples/to_do_list.rs
@@ -77,7 +77,7 @@ pub fn make_widget_tree() -> NewWidget<impl Widget> {
     let root = Flex::column()
         .with_fixed(
             NewWidget::new(Flex::row().with(text_input, 1.0).with_fixed(button))
-                .with_props(PropertySet::new().with(Padding::all(WIDGET_SPACING.get()))),
+                .with_props(PropertySet::new().with(Padding::all(WIDGET_SPACING))),
         )
         .with_fixed_spacer(WIDGET_SPACING)
         .with(portal, 1.0);
diff --git a/masonry/screenshots/badged_button.png b/masonry/screenshots/badged_button.png
index 217ad96e5..98a1ab018 100644
Binary files a/masonry/screenshots/badged_button.png and b/masonry/screenshots/badged_button.png differ
diff --git a/masonry/screenshots/badged_button_no_badge.png b/masonry/screenshots/badged_button_no_badge.png
index 36a03d008..87a4ae694 100644
Binary files a/masonry/screenshots/badged_button_no_badge.png and b/masonry/screenshots/badged_button_no_badge.png differ
diff --git a/masonry/screenshots/example_calc_masonry_initial.png b/masonry/screenshots/example_calc_masonry_initial.png
index 9d4bf69e2..768d67acc 100644
Binary files a/masonry/screenshots/example_calc_masonry_initial.png and b/masonry/screenshots/example_calc_masonry_initial.png differ
diff --git a/masonry/screenshots/example_grid_masonry_initial.png b/masonry/screenshots/example_grid_masonry_initial.png
index efd83a0b2..4e75d4f3e 100644
Binary files a/masonry/screenshots/example_grid_masonry_initial.png and b/masonry/screenshots/example_grid_masonry_initial.png differ
diff --git a/masonry/screenshots/flex_row_baselines_four_center_and_first.png b/masonry/screenshots/flex_row_baselines_four_center_and_first.png
index d2b42e2c1..dc36c4ed5 100644
Binary files a/masonry/screenshots/flex_row_baselines_four_center_and_first.png and b/masonry/screenshots/flex_row_baselines_four_center_and_first.png differ
diff --git a/masonry/screenshots/flex_row_baselines_four_center_and_last.png b/masonry/screenshots/flex_row_baselines_four_center_and_last.png
index b3e3a3971..803b2d621 100644
Binary files a/masonry/screenshots/flex_row_baselines_four_center_and_last.png and b/masonry/screenshots/flex_row_baselines_four_center_and_last.png differ
diff --git a/masonry/screenshots/flex_row_baselines_four_first_and_first.png b/masonry/screenshots/flex_row_baselines_four_first_and_first.png
index 431ad2246..279326283 100644
Binary files a/masonry/screenshots/flex_row_baselines_four_first_and_first.png and b/masonry/screenshots/flex_row_baselines_four_first_and_first.png differ
diff --git a/masonry/screenshots/flex_row_baselines_four_first_and_last.png b/masonry/screenshots/flex_row_baselines_four_first_and_last.png
index 431ad2246..279326283 100644
Binary files a/masonry/screenshots/flex_row_baselines_four_first_and_last.png and b/masonry/screenshots/flex_row_baselines_four_first_and_last.png differ
diff --git a/masonry/screenshots/flex_row_baselines_four_last_and_first.png b/masonry/screenshots/flex_row_baselines_four_last_and_first.png
index 2ed3890a3..c19cf1c30 100644
Binary files a/masonry/screenshots/flex_row_baselines_four_last_and_first.png and b/masonry/screenshots/flex_row_baselines_four_last_and_first.png differ
diff --git a/masonry/screenshots/flex_row_baselines_four_last_and_last.png b/masonry/screenshots/flex_row_baselines_four_last_and_last.png
index 2ed3890a3..c19cf1c30 100644
Binary files a/masonry/screenshots/flex_row_baselines_four_last_and_last.png and b/masonry/screenshots/flex_row_baselines_four_last_and_last.png differ
diff --git a/masonry/screenshots/flex_row_baselines_one_first_three_last_and_first.png b/masonry/screenshots/flex_row_baselines_one_first_three_last_and_first.png
index 17141532c..dafb84307 100644
Binary files a/masonry/screenshots/flex_row_baselines_one_first_three_last_and_first.png and b/masonry/screenshots/flex_row_baselines_one_first_three_last_and_first.png differ
diff --git a/masonry/screenshots/flex_row_baselines_one_first_three_last_and_last.png b/masonry/screenshots/flex_row_baselines_one_first_three_last_and_last.png
index 578275990..c6b96253a 100644
Binary files a/masonry/screenshots/flex_row_baselines_one_first_three_last_and_last.png and b/masonry/screenshots/flex_row_baselines_one_first_three_last_and_last.png differ
diff --git a/masonry/screenshots/flex_row_baselines_three_first_one_last_and_first.png b/masonry/screenshots/flex_row_baselines_three_first_one_last_and_first.png
index d2a25ff36..bbd7b7977 100644
Binary files a/masonry/screenshots/flex_row_baselines_three_first_one_last_and_first.png and b/masonry/screenshots/flex_row_baselines_three_first_one_last_and_first.png differ
diff --git a/masonry/screenshots/flex_row_baselines_three_first_one_last_and_last.png b/masonry/screenshots/flex_row_baselines_three_first_one_last_and_last.png
index 5aa586657..e59c5ed84 100644
Binary files a/masonry/screenshots/flex_row_baselines_three_first_one_last_and_last.png and b/masonry/screenshots/flex_row_baselines_three_first_one_last_and_last.png differ
diff --git a/masonry/screenshots/flex_row_baselines_two_first_two_last_and_first.png b/masonry/screenshots/flex_row_baselines_two_first_two_last_and_first.png
index 25e94f918..8c9ad38b6 100644
Binary files a/masonry/screenshots/flex_row_baselines_two_first_two_last_and_first.png and b/masonry/screenshots/flex_row_baselines_two_first_two_last_and_first.png differ
diff --git a/masonry/screenshots/flex_row_baselines_two_first_two_last_and_last.png b/masonry/screenshots/flex_row_baselines_two_first_two_last_and_last.png
index 0eb63d4fb..bbec528ed 100644
Binary files a/masonry/screenshots/flex_row_baselines_two_first_two_last_and_last.png and b/masonry/screenshots/flex_row_baselines_two_first_two_last_and_last.png differ
diff --git a/masonry/screenshots/grid_baselines_first.png b/masonry/screenshots/grid_baselines_first.png
index 5917fb908..bf57978a7 100644
Binary files a/masonry/screenshots/grid_baselines_first.png and b/masonry/screenshots/grid_baselines_first.png differ
diff --git a/masonry/screenshots/grid_baselines_last.png b/masonry/screenshots/grid_baselines_last.png
index 128f950eb..77d65a580 100644
Binary files a/masonry/screenshots/grid_baselines_last.png and b/masonry/screenshots/grid_baselines_last.png differ
diff --git a/masonry/src/doc/color_rectangle.rs b/masonry/src/doc/color_rectangle.rs
index 930ab9bff..be3498409 100644
--- a/masonry/src/doc/color_rectangle.rs
+++ b/masonry/src/doc/color_rectangle.rs
@@ -25,13 +25,14 @@ use masonry::core::{Update, UpdateCtx};
 // ---
 use masonry::core::{LayoutCtx, MeasureCtx, PropertiesRef};
 use masonry::kurbo::{Axis, Size};
-use masonry::layout::LenReq;
+use masonry::layout::{LenReq, Length};
 // ---
 use masonry::accesskit::{Node, Role};
 use masonry::core::{AccessCtx, PaintCtx};
 use masonry::imaging::Painter;
 // ---
 use masonry::core::WidgetId;
+use masonry_core::layout::AsUnit;
 use tracing::{Span, trace_span};
 // ---
 use masonry::core::{ChildrenIds, RegisterCtx};
@@ -130,16 +131,12 @@ impl Widget for ColorRectangle {
         _props: &PropertiesRef<'_>,
         axis: Axis,
         len_req: LenReq,
-        _cross_length: Option<f64>,
-    ) -> f64 {
-        // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-        //       https://github.com/linebender/xilem/issues/1264
-        let scale = 1.0;
-
+        _cross_length: Option<Length>,
+    ) -> Length {
         match len_req {
             LenReq::MinContent | LenReq::MaxContent => match axis {
-                Axis::Horizontal => 200. * scale,
-                Axis::Vertical => 100. * scale,
+                Axis::Horizontal => 200.px(),
+                Axis::Vertical => 100.px(),
             },
             LenReq::FitContent(space) => space,
         }
diff --git a/masonry/src/doc/implementing_container_widget.md b/masonry/src/doc/implementing_container_widget.md
index c41430a20..ae4fdad8d 100644
--- a/masonry/src/doc/implementing_container_widget.md
+++ b/masonry/src/doc/implementing_container_widget.md
@@ -54,7 +54,7 @@ A container widget needs to pay special attention to these methods:
 trait Widget {
     // ...
 
-    fn measure(&mut self, ctx: &mut MeasureCtx<'_>, props: &PropertiesRef<'_>, axis: Axis, len_req: LenReq, cross_length: Option<f64>) -> f64;
+    fn measure(&mut self, ctx: &mut MeasureCtx<'_>, props: &PropertiesRef<'_>, axis: Axis, len_req: LenReq, cross_length: Option<Length>) -> Length;
     fn layout(&mut self, ctx: &mut LayoutCtx<'_>, props: &PropertiesRef<'_>, size: Size);
     fn compose(&mut self, ctx: &mut ComposeCtx<'_>);
 
@@ -87,7 +87,7 @@ For our `VerticalStack`, we'll lay out our children in a vertical line, with a g
 ```rust,ignore
 use masonry::core::{LayoutCtx, MeasureCtx, PropertiesRef};
 use masonry::kurbo::{Axis, Point, Size};
-use masonry::layout::{LayoutSize, LenDef, LenReq, SizeDef};
+use masonry::layout::{AsUnit, LayoutSize, Length, LenDef, LenReq, SizeDef};
 
 impl Widget for VerticalStack {
     // ...
@@ -98,28 +98,29 @@ impl Widget for VerticalStack {
         _props: &PropertiesRef<'_>,
         axis: Axis,
         len_req: LenReq,
-        cross_length: Option<f64>,
-    ) -> f64 {
+        cross_length: Option<Length>,
+    ) -> Length {
         let (len_req, min_result) = match len_req {
-            LenReq::MinContent | LenReq::MaxContent => (len_req, 0.),
+            LenReq::MinContent | LenReq::MaxContent => (len_req, Length::ZERO),
             LenReq::FitContent(space) => (LenReq::MinContent, space),
         };
 
         let auto_length = len_req.into();
         let context_size = LayoutSize::maybe(axis.cross(), cross_length);
         
-        let mut length: f64 = 0.;
+        let mut length = Length::ZERO;
         for child in &mut self.children {
             let child_length = ctx.compute_length(child, auto_length, context_size, axis, cross_length);
             match axis {
                 Axis::Horizontal => length = length.max(child_length),
-                Axis::Vertical => length += child_length,
+                Axis::Vertical => length = length.saturating_add(child_length),
             }
         }
 
         if axis == Axis::Vertical {
             let gap_count = (self.children.len() - 1) as f64;
-            length += gap_count * self.gap;
+            let gaps_length = gap_count * self.gap;
+            length = length.saturating_add(gaps_length.px());
         }
 
         min_result.max(length)
@@ -135,8 +136,8 @@ impl Widget for VerticalStack {
         let total_child_vertical_space = size.height - self.gap * gap_count;
         let child_vertical_space = total_child_vertical_space / self.children.len() as f64;
 
-        let width_def = LenDef::FitContent(size.width);
-        let height_def = LenDef::FitContent(child_vertical_space.max(0.));
+        let width_def = LenDef::FitContent(size.width.px());
+        let height_def = LenDef::FitContent(child_vertical_space.max(0.).px());
         let auto_size = SizeDef::new(width_def, height_def);
         let context_size = size.into();
 
diff --git a/masonry/src/doc/implementing_widget.md b/masonry/src/doc/implementing_widget.md
index 44e135cf3..c72e1be55 100644
--- a/masonry/src/doc/implementing_widget.md
+++ b/masonry/src/doc/implementing_widget.md
@@ -32,7 +32,7 @@ trait Widget {
     fn on_anim_frame(&mut self, ctx: &mut UpdateCtx<'_>, props: &mut PropertiesMut<'_>, interval: u64);
     fn update(&mut self, ctx: &mut UpdateCtx<'_>, props: &mut PropertiesMut<'_>, event: &Update);
 
-    fn measure(&mut self, ctx: &mut MeasureCtx<'_>, props: &PropertiesRef<'_>, axis: Axis, len_req: LenReq, cross_length: Option<f64>) -> f64;
+    fn measure(&mut self, ctx: &mut MeasureCtx<'_>, props: &PropertiesRef<'_>, axis: Axis, len_req: LenReq, cross_length: Option<Length>) -> Length;
     fn layout(&mut self, ctx: &mut LayoutCtx<'_>, props: &PropertiesRef<'_>, size: Size);
 
     fn paint(&mut self, ctx: &mut PaintCtx<'_>, props: &PropertiesRef<'_>, painter: &mut Painter<'_>);
@@ -169,7 +169,7 @@ Next we implement layout:
 ```rust,ignore
 use masonry::core::{LayoutCtx, MeasureCtx, PropertiesRef};
 use masonry::kurbo::{Axis, Size};
-use masonry::layout::LenReq;
+use masonry::layout::{Length, LenReq};
 
 impl Widget for ColorRectangle {
     // ...
@@ -180,16 +180,13 @@ impl Widget for ColorRectangle {
         _props: &PropertiesRef<'_>,
         axis: Axis,
         len_req: LenReq,
-        _cross_length: Option<f64>,
-    ) -> f64 {
-        // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-        //       https://github.com/linebender/xilem/issues/1264
-        let scale = 1.0;
+        _cross_length: Option<Length>,
+    ) -> Length {
 
         match len_req {
             LenReq::MinContent | LenReq::MaxContent => match axis {
-                Axis::Horizontal => 200. * scale,
-                Axis::Vertical => 100. * scale,
+                Axis::Horizontal => 200.px(),
+                Axis::Vertical => 100.px(),
             }
             LenReq::FitContent(space) => space,
         }
diff --git a/masonry/src/doc/vertical_stack.rs b/masonry/src/doc/vertical_stack.rs
index 880d57218..cb19b8641 100644
--- a/masonry/src/doc/vertical_stack.rs
+++ b/masonry/src/doc/vertical_stack.rs
@@ -21,7 +21,7 @@ use masonry::core::{Widget, WidgetPod};
 // ---
 use masonry::core::{LayoutCtx, MeasureCtx, PropertiesRef};
 use masonry::kurbo::{Axis, Point, Size};
-use masonry::layout::{LayoutSize, LenDef, LenReq, SizeDef};
+use masonry::layout::{AsUnit, LayoutSize, LenDef, LenReq, Length, SizeDef};
 // ---
 use masonry::core::ComposeCtx;
 // ---
@@ -94,28 +94,29 @@ impl Widget for VerticalStack {
         _props: &PropertiesRef<'_>,
         axis: Axis,
         len_req: LenReq,
-        cross_length: Option<f64>,
-    ) -> f64 {
+        cross_length: Option<Length>,
+    ) -> Length {
         let (len_req, min_result) = match len_req {
-            LenReq::MinContent | LenReq::MaxContent => (len_req, 0.),
+            LenReq::MinContent | LenReq::MaxContent => (len_req, Length::ZERO),
             LenReq::FitContent(space) => (LenReq::MinContent, space),
         };
 
         let auto_length = len_req.into();
         let context_size = LayoutSize::maybe(axis.cross(), cross_length);
         
-        let mut length: f64 = 0.;
+        let mut length = Length::ZERO;
         for child in &mut self.children {
             let child_length = ctx.compute_length(child, auto_length, context_size, axis, cross_length);
             match axis {
                 Axis::Horizontal => length = length.max(child_length),
-                Axis::Vertical => length += child_length,
+                Axis::Vertical => length = length.saturating_add(child_length),
             }
         }
 
         if axis == Axis::Vertical {
             let gap_count = (self.children.len() - 1) as f64;
-            length += gap_count * self.gap;
+            let gaps_length = gap_count * self.gap;
+            length = length.saturating_add(gaps_length.px());
         }
 
         min_result.max(length)
@@ -131,8 +132,8 @@ impl Widget for VerticalStack {
         let total_child_vertical_space = size.height - self.gap * gap_count;
         let child_vertical_space = total_child_vertical_space / self.children.len() as f64;
 
-        let width_def = LenDef::FitContent(size.width);
-        let height_def = LenDef::FitContent(child_vertical_space.max(0.));
+        let width_def = LenDef::FitContent(size.width.px());
+        let height_def = LenDef::FitContent(child_vertical_space.max(0.).px());
         let auto_size = SizeDef::new(width_def, height_def);
         let context_size = size.into();
 
diff --git a/masonry/src/layers/selector_menu.rs b/masonry/src/layers/selector_menu.rs
index 460322211..7a1a836a1 100644
--- a/masonry/src/layers/selector_menu.rs
+++ b/masonry/src/layers/selector_menu.rs
@@ -12,7 +12,7 @@ use crate::core::{
 };
 use crate::imaging::Painter;
 use crate::kurbo::{Axis, Point, Size};
-use crate::layout::{LayoutSize, LenDef, LenReq, SizeDef};
+use crate::layout::{AsUnit, LayoutSize, LenDef, LenReq, Length, SizeDef};
 use crate::properties::Gap;
 use crate::widgets::{SelectionChanged, Selector};
 
@@ -236,58 +236,51 @@ impl Widget for SelectorMenu {
         props: &PropertiesRef<'_>,
         axis: Axis,
         len_req: LenReq,
-        cross_length: Option<f64>,
-    ) -> f64 {
-        // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-        //       https://github.com/linebender/xilem/issues/1264
-        let scale = 1.0;
-
+        cross_length: Option<Length>,
+    ) -> Length {
         let cache = ctx.property_cache();
         let gap = props.get::<Gap>(cache);
 
-        let gap_length = gap.gap.dp(scale);
+        let gap_length = gap.gap.get();
 
         let (len_req, min_result) = match len_req {
-            LenReq::MinContent | LenReq::MaxContent => (len_req, 0.),
+            LenReq::MinContent | LenReq::MaxContent => (len_req, Length::ZERO),
             LenReq::FitContent(space) => (LenReq::MinContent, space),
         };
 
         let auto_length = len_req.into();
         let context_size = LayoutSize::maybe(axis.cross(), cross_length);
 
-        let mut length: f64 = 0.;
+        let mut length = Length::ZERO;
         for child in &mut self.children {
             let child_length =
                 ctx.compute_length(child, auto_length, context_size, axis, cross_length);
             match axis {
                 Axis::Horizontal => length = length.max(child_length),
-                Axis::Vertical => length += child_length,
+                Axis::Vertical => length = length.saturating_add(child_length),
             }
         }
 
         if axis == Axis::Vertical {
             let gap_count = (self.children.len() - 1) as f64;
-            length += gap_count * gap_length;
+            let gaps_length = gap_count * gap_length;
+            length = length.saturating_add(gaps_length.px());
         }
 
         min_result.max(length)
     }
 
     fn layout(&mut self, ctx: &mut LayoutCtx<'_>, props: &PropertiesRef<'_>, size: Size) {
-        // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-        //       https://github.com/linebender/xilem/issues/1264
-        let scale = 1.0;
-
         let cache = ctx.property_cache();
         let gap = props.get::<Gap>(cache);
 
         let gap_count = (self.children.len() - 1) as f64;
-        let gap_length = gap.gap.dp(scale);
+        let gap_length = gap.gap.get();
         let total_child_vertical_space = size.height - gap_length * gap_count;
         let child_vertical_space = total_child_vertical_space / self.children.len() as f64;
 
-        let width_def = LenDef::FitContent(size.width);
-        let height_def = LenDef::FitContent(child_vertical_space.max(0.));
+        let width_def = LenDef::FitContent(size.width.px());
+        let height_def = LenDef::FitContent(child_vertical_space.max(0.).px());
         let auto_size = SizeDef::new(width_def, height_def);
         let context_size = size.into();
 
@@ -302,12 +295,12 @@ impl Widget for SelectorMenu {
 
         if !self.children.is_empty() {
             let first_child = self.children.first().unwrap();
-            let (first_baseline, _) = ctx.child_aligned_baselines(first_child);
+            let (first_baseline, _) = ctx.child_baselines(first_child);
             let first_child_origin = ctx.child_origin(first_child);
             let first_baseline = first_child_origin.y + first_baseline;
 
             let last_child = self.children.last().unwrap();
-            let (_, last_baseline) = ctx.child_aligned_baselines(last_child);
+            let (_, last_baseline) = ctx.child_baselines(last_child);
             let last_child_origin = ctx.child_origin(last_child);
             let last_baseline = last_child_origin.y + last_baseline;
 
@@ -370,7 +363,7 @@ impl Layer for SelectorMenu {
             PointerEvent::Down(PointerButtonEvent { state, .. }) => {
                 let local_pos = ctx.local_position(state.position);
 
-                !ctx.border_box_size().to_rect().contains(local_pos)
+                !ctx.border_box().contains(local_pos)
             }
             PointerEvent::Cancel(..) => true,
             _ => false,
diff --git a/masonry/src/layers/tooltip.rs b/masonry/src/layers/tooltip.rs
index 2e489919d..78953fff6 100644
--- a/masonry/src/layers/tooltip.rs
+++ b/masonry/src/layers/tooltip.rs
@@ -13,7 +13,7 @@ use crate::core::{
 };
 use crate::imaging::Painter;
 use crate::kurbo::{Axis, Size};
-use crate::layout::{LayoutSize, LenReq, SizeDef};
+use crate::layout::{LayoutSize, LenReq, Length, SizeDef};
 
 /// A [`Layer`] representing a simple tooltip showing some content until the mouse moves.
 pub struct Tooltip {
@@ -94,8 +94,8 @@ impl Widget for Tooltip {
         _props: &PropertiesRef<'_>,
         axis: Axis,
         len_req: LenReq,
-        cross_length: Option<f64>,
-    ) -> f64 {
+        cross_length: Option<Length>,
+    ) -> Length {
         let auto_length = len_req.into();
         let context_size = LayoutSize::maybe(axis.cross(), cross_length);
 
diff --git a/masonry/src/lib.rs b/masonry/src/lib.rs
index 57e24e869..9baf3fe54 100644
--- a/masonry/src/lib.rs
+++ b/masonry/src/lib.rs
@@ -103,7 +103,7 @@
 //!     let list = Flex::column()
 //!         .with_fixed(
 //!             NewWidget::new(Flex::row().with(text_input, 1.0).with_fixed(button))
-//!                 .with_props(PropertySet::new().with(Padding::all(WIDGET_SPACING.get()))),
+//!                 .with_props(PropertySet::new().with(Padding::all(WIDGET_SPACING))),
 //!         )
 //!         .with_fixed_spacer(WIDGET_SPACING);
 //!
diff --git a/masonry/src/properties/object_fit.rs b/masonry/src/properties/object_fit.rs
index caf9f3bbf..4fe8cb2da 100644
--- a/masonry/src/properties/object_fit.rs
+++ b/masonry/src/properties/object_fit.rs
@@ -2,8 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 
 use crate::core::Property;
-use crate::kurbo::{Affine, Axis, Size};
-use crate::layout::LenReq;
+use crate::kurbo::{Affine, Axis, Rect, Size};
+use crate::layout::{LenReq, Length};
 use crate::util::Sanitize;
 
 // These are based on https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
@@ -67,8 +67,6 @@ impl Default for ObjectFit {
     }
 }
 
-// TODO - Need to write tests for this, in a way that's relatively easy to visualize.
-
 impl ObjectFit {
     /// Calculates an [`Affine`] transform to fit `content` inside `container`.
     ///
@@ -76,25 +74,22 @@ impl ObjectFit {
     ///
     /// # Panics
     ///
-    /// Panics if either `content` or `container` is non-finite or negative
+    /// Panics if either `content` or `container` has non-finite or negative size
     /// and debug assertions are enabled.
-    pub fn affine(self, container: Size, content: Size) -> Affine {
+    pub fn affine(self, container: Rect, content: Rect) -> Affine {
         // Guard against invalid input
-        let container = Size::new(
-            container.width.sanitize("container width"),
-            container.height.sanitize("container height"),
-        );
-        let content = Size::new(
-            content.width.sanitize("content width"),
-            content.height.sanitize("content height"),
-        );
+        let container_width = container.width().sanitize("container width");
+        let container_height = container.height().sanitize("container height");
+        let content_width = content.width().sanitize("content width");
+        let content_height = content.height().sanitize("content height");
+
         // Guard against division by zero
-        if content.width == 0. || content.height == 0. {
+        if content_width == 0. || content_height == 0. {
             return Affine::IDENTITY;
         }
 
-        let raw_scalex = container.width / content.width;
-        let raw_scaley = container.height / content.height;
+        let raw_scalex = container_width / content_width;
+        let raw_scaley = container_height / content_height;
 
         let (scalex, scaley) = match self {
             Self::Contain => {
@@ -115,13 +110,20 @@ impl ObjectFit {
             Self::Stretch => (raw_scalex, raw_scaley),
         };
 
-        let origin_x = (container.width - (content.width * scalex)) * 0.5;
-        let origin_y = (container.height - (content.height * scaley)) * 0.5;
+        let origin_x = container.x0 + (container_width - (content_width * scalex)) * 0.5;
+        let origin_y = container.y0 + (container_height - (content_height * scaley)) * 0.5;
 
-        Affine::new([scalex, 0., 0., scaley, origin_x, origin_y])
+        Affine::new([
+            scalex,
+            0.,
+            0.,
+            scaley,
+            origin_x - content.x0 * scalex,
+            origin_y - content.y0 * scaley,
+        ])
     }
 
-    /// Calculates the length of `axis`.
+    /// Calculates the [`Length`] of `axis`.
     ///
     /// `preferred_size` is the natural size that is used for
     /// both aspect ratio and minimum preferred size.
@@ -129,15 +131,15 @@ impl ObjectFit {
         self,
         axis: Axis,
         len_req: LenReq,
-        cross_length: Option<f64>,
+        cross_length: Option<Length>,
         preferred_size: Size,
-    ) -> f64 {
+    ) -> Length {
         let preferred_length = preferred_size.get_coord(axis);
 
         let (space, space_or_preferred) = match len_req {
-            LenReq::MinContent => return preferred_length,
+            LenReq::MinContent => return Length::px(preferred_length),
             LenReq::MaxContent => (f64::INFINITY, preferred_length),
-            LenReq::FitContent(space) => (space, space),
+            LenReq::FitContent(space) => (space.get(), space.get()),
         };
 
         let mut ar = preferred_size.get_coord(axis) / preferred_size.get_coord(axis.cross());
@@ -145,11 +147,11 @@ impl ObjectFit {
             ar = 1.;
         }
 
-        match self {
+        let length = match self {
             // Use all available space or if cross is known attempt to maintain AR,
             // but don't exceed available space (will letterbox cross).
             Self::Contain => cross_length
-                .map(|cl| (cl * ar).min(space))
+                .map(|cl| (cl.get() * ar).min(space))
                 .unwrap_or(space_or_preferred),
             // Always use all available space.
             Self::Cover | Self::Stretch => space_or_preferred,
@@ -157,7 +159,7 @@ impl ObjectFit {
             // Greedily take all horizontal space unless cross is known.
             Self::FitHeight => match axis {
                 Axis::Horizontal => cross_length
-                    .map(|cl| (cl * ar).min(space))
+                    .map(|cl| (cl.get() * ar).min(space))
                     .unwrap_or(space_or_preferred),
                 Axis::Vertical => space_or_preferred,
             },
@@ -166,16 +168,18 @@ impl ObjectFit {
             Self::FitWidth => match axis {
                 Axis::Horizontal => space_or_preferred,
                 Axis::Vertical => cross_length
-                    .map(|cl| (cl * ar).min(space))
+                    .map(|cl| (cl.get() * ar).min(space))
                     .unwrap_or(space_or_preferred),
             },
             // None == preferred size
             Self::None => preferred_length,
             // ScaleDown == min(Contain, None)
             Self::ScaleDown => cross_length
-                .map(|cl| (cl * ar).min(space))
+                .map(|cl| (cl.get() * ar).min(space))
                 .unwrap_or(space_or_preferred)
                 .min(preferred_length),
-        }
+        };
+
+        Length::px(length)
     }
 }
diff --git a/masonry/src/properties/slider.rs b/masonry/src/properties/slider.rs
index 28f01de32..66a6eb4f6 100644
--- a/masonry/src/properties/slider.rs
+++ b/masonry/src/properties/slider.rs
@@ -4,16 +4,17 @@
 use std::any::TypeId;
 
 use crate::core::{Property, UpdateCtx};
+use crate::layout::Length;
 use crate::peniko::Color;
 use crate::theme;
 
-/// The thickness of a slider's track, in logical pixels.
+/// The thickness of a slider's track.
 #[derive(Default, Clone, Copy, Debug, PartialEq)]
-pub struct TrackThickness(pub f64);
+pub struct TrackThickness(pub Length);
 
 impl Property for TrackThickness {
     fn static_default() -> &'static Self {
-        static DEFAULT: TrackThickness = TrackThickness(4.);
+        static DEFAULT: TrackThickness = TrackThickness(Length::const_px(4.));
         &DEFAULT
     }
 }
@@ -27,13 +28,13 @@ impl TrackThickness {
     }
 }
 
-/// The radius of a slider's thumb, in logical pixels.
+/// The radius of a slider's thumb.
 #[derive(Default, Clone, Copy, Debug, PartialEq)]
-pub struct ThumbRadius(pub f64);
+pub struct ThumbRadius(pub Length);
 
 impl Property for ThumbRadius {
     fn static_default() -> &'static Self {
-        static DEFAULT: ThumbRadius = ThumbRadius(6.);
+        static DEFAULT: ThumbRadius = ThumbRadius(Length::const_px(6.));
         &DEFAULT
     }
 }
diff --git a/masonry/src/tests/action.rs b/masonry/src/tests/action.rs
index 0c3cd1544..212307e9b 100644
--- a/masonry/src/tests/action.rs
+++ b/masonry/src/tests/action.rs
@@ -8,7 +8,7 @@ use assert_matches::assert_matches;
 
 use crate::core::{ChildrenIds, Widget};
 use crate::kurbo::Point;
-use crate::layout::{AsUnit, LayoutSize};
+use crate::layout::{AsUnit, LayoutSize, Length};
 use crate::properties::Dimensions;
 use crate::testing::{ModularWidget, TestHarness};
 use crate::theme::test_property_set;
@@ -61,7 +61,7 @@ fn action_source_removed() {
 
                 ctx.compute_length(child, auto_length, context_size, axis, cross_length)
             } else {
-                0.
+                Length::ZERO
             }
         })
         .layout_fn(move |child, ctx, _props, size| {
diff --git a/masonry/src/tests/compose.rs b/masonry/src/tests/compose.rs
index fb28558f5..7a1140141 100644
--- a/masonry/src/tests/compose.rs
+++ b/masonry/src/tests/compose.rs
@@ -2,11 +2,12 @@
 // SPDX-License-Identifier: Apache-2.0
 
 use assert_matches::assert_matches;
-use masonry_testing::{ModularWidget, Record, TestHarness, TestWidgetExt};
 
 use crate::core::{ChildrenIds, NewWidget, Widget, WidgetPod, WidgetTag};
-use crate::kurbo::{Affine, Point, Vec2};
-use crate::layout::SizeDef;
+use crate::kurbo::{Affine, Point, Rect, Size, Vec2};
+use crate::layout::{AsUnit, Length, SizeDef};
+use crate::testing::{ModularWidget, Record, TestHarness, TestWidgetExt};
+use crate::tests::assert_rect_approx_eq;
 use crate::theme::test_property_set;
 use crate::widgets::SizedBox;
 
@@ -29,7 +30,7 @@ fn request_compose() {
     };
 
     let parent = ModularWidget::new(child)
-        .measure_fn(|_state, _ctx, _props, _axis, _len_req, _cross_length| 0.)
+        .measure_fn(|_state, _ctx, _props, _axis, _len_req, _cross_length| Length::ZERO)
         .layout_fn(|state, ctx, _props, size| {
             let child_size = ctx.compute_size(&mut state.child, SizeDef::fit(size), size.into());
             ctx.run_layout(&mut state.child, child_size);
@@ -71,13 +72,180 @@ fn request_compose() {
     });
 
     // Origin should be "parent_origin + pos + scroll_offset"
-    let origin = harness.get_widget(child_tag).ctx().window_origin();
+    let border_box = harness.get_widget(child_tag).ctx().border_box();
+    let origin = harness
+        .get_widget(child_tag)
+        .ctx()
+        .to_window(border_box.origin());
     assert_eq!(
         origin.to_vec2(),
         Vec2::new(7., 7.) + Point::new(30., 30.).to_vec2() + Vec2::new(8., 8.)
     );
 }
 
+#[test]
+fn pixel_snapping() {
+    let child_tag = WidgetTag::named("child");
+    let child = NewWidget::new(SizedBox::empty().size(10.3.px(), 10.3.px())).with_tag(child_tag);
+    let pos = Point::new(5.1, 5.3);
+    let parent = ModularWidget::new_parent(child).layout_fn(move |child, ctx, _, size| {
+        let child_size = ctx.compute_size(child, SizeDef::fit(size), size.into());
+        ctx.run_layout(child, child_size);
+        ctx.place_child(child, pos);
+        ctx.set_baselines(2.4, 2.6);
+    });
+    let parent_tag = WidgetTag::named("parent");
+    let parent = NewWidget::new(parent).with_tag(parent_tag);
+
+    let harness = TestHarness::create(test_property_set(), parent);
+
+    let child = harness.get_widget(child_tag);
+    let ctx = child.ctx();
+    let border_box = ctx.border_box();
+    let content_box = ctx.content_box();
+    let layout_content_box = ctx.layout_content_box();
+    let child_pos = ctx.to_window(border_box.origin());
+    let first_baseline = harness.get_widget(parent_tag).ctx().first_baseline();
+    let last_baseline = harness.get_widget(parent_tag).ctx().last_baseline();
+
+    assert_eq!(child_pos, Point::new(5.0, 5.0));
+    assert_eq!(content_box.origin(), Point::ORIGIN);
+    assert_rect_approx_eq(
+        "layout_content_box",
+        layout_content_box,
+        Rect::from_origin_size(Point::new(0.1, 0.3), Size::new(10.3, 10.3)),
+    );
+    assert_eq!(border_box.size(), Size::new(10., 11.));
+    assert_eq!(first_baseline, 2.4);
+    assert_eq!(last_baseline, 2.6);
+}
+
+#[test]
+fn pixel_snapping_after_window_transforms() {
+    #[track_caller]
+    fn assert_has_fractional_edge(name: &str, rect: Rect) {
+        let edges = [rect.x0, rect.y0, rect.x1, rect.y1];
+        assert!(
+            edges.iter().any(|edge| (edge - edge.round()).abs() > 1e-9),
+            "{name}: expected at least one fractional layout edge, got {rect:?}"
+        );
+    }
+
+    let translated_tag = WidgetTag::unique();
+    let scaled_tag = WidgetTag::unique();
+    let flipped_tag = WidgetTag::unique();
+    let nested_tag = WidgetTag::unique();
+
+    let translated = NewWidget::new(SizedBox::empty().size(12.2.px(), 8.4.px()))
+        .with_tag(translated_tag)
+        .with_transform(Affine::translate(Vec2::new(0.37, 0.61)))
+        .erased();
+    let scaled = NewWidget::new(SizedBox::empty().size(9.3.px(), 11.7.px()))
+        .with_tag(scaled_tag)
+        .with_transform(Affine::scale_non_uniform(1.25, 0.8).then_translate(Vec2::new(0.41, 0.29)))
+        .erased();
+    let flipped = NewWidget::new(SizedBox::empty().size(10.6.px(), 7.5.px()))
+        .with_tag(flipped_tag)
+        .with_transform(
+            Affine::scale_non_uniform(-0.75, 1.4).then_translate(Vec2::new(0.48, -0.33)),
+        )
+        .erased();
+    let nested = NewWidget::new(SizedBox::empty().size(8.2.px(), 6.6.px()))
+        .with_tag(nested_tag)
+        .with_transform(Affine::scale_non_uniform(0.6, 1.35).then_translate(Vec2::new(0.27, 0.43)))
+        .erased();
+
+    let inner = ModularWidget::new_parent(nested)
+        .layout_fn(|child, ctx, _, size| {
+            let child_size = ctx.compute_size(child, SizeDef::fit(size), size.into());
+            ctx.run_layout(child, child_size);
+            ctx.place_child(child, Point::new(1.7, 2.2));
+        })
+        .compose_fn(|child, ctx| {
+            ctx.set_child_scroll_translation(child, Vec2::new(0.33, -0.47));
+        });
+    let inner = NewWidget::new(inner)
+        .with_transform(Affine::scale_non_uniform(1.5, -0.9).then_translate(Vec2::new(0.19, 0.71)))
+        .erased();
+
+    let outer = ModularWidget::new_parent(inner)
+        .layout_fn(|child, ctx, _, size| {
+            let child_size = ctx.compute_size(child, SizeDef::fit(size), size.into());
+            ctx.run_layout(child, child_size);
+            ctx.place_child(child, Point::new(4.6, 3.9));
+        })
+        .compose_fn(|child, ctx| {
+            ctx.set_child_scroll_translation(child, Vec2::new(-0.22, 0.35));
+        });
+    let outer = NewWidget::new(outer)
+        .with_transform(Affine::scale_non_uniform(-1.2, 0.7).then_translate(Vec2::new(0.52, -0.24)))
+        .erased();
+
+    let positions = [
+        Point::new(2.3, 4.7),
+        Point::new(19.4, 3.6),
+        Point::new(37.8, 8.2),
+        Point::new(57.1, 5.4),
+    ];
+    let scroll_offsets = [
+        Vec2::new(0.21, 0.36),
+        Vec2::new(-0.44, 0.52),
+        Vec2::new(0.68, -0.17),
+        Vec2::new(-0.31, 0.49),
+    ];
+
+    let root = ModularWidget::new(vec![
+        translated.to_pod(),
+        scaled.to_pod(),
+        flipped.to_pod(),
+        outer.to_pod(),
+    ])
+    .layout_fn(move |children, ctx, _, size| {
+        for (idx, child) in children.iter_mut().enumerate() {
+            let child_size = ctx.compute_size(child, SizeDef::fit(size), size.into());
+            ctx.run_layout(child, child_size);
+            ctx.place_child(child, positions[idx]);
+        }
+    })
+    .compose_fn(move |children, ctx| {
+        for (idx, child) in children.iter_mut().enumerate() {
+            ctx.set_child_scroll_translation(child, scroll_offsets[idx]);
+        }
+    })
+    .register_children_fn(|children, ctx| {
+        for child in children {
+            ctx.register_child(child);
+        }
+    })
+    .children_fn(|children| children.iter().map(|child| child.id()).collect())
+    .prepare();
+
+    let harness = TestHarness::create_with_size(test_property_set(), root, (200, 120));
+
+    let assert_snapped = |name: &str, tag: WidgetTag<SizedBox>| {
+        let widget = harness.get_widget(tag);
+        let ctx = widget.ctx();
+        let layout_window = ctx
+            .window_transform()
+            .transform_rect_bbox(ctx.layout_border_box());
+        let visual_window = ctx.window_transform().transform_rect_bbox(ctx.border_box());
+        let expected_visual_window = Rect::new(
+            layout_window.x0.round(),
+            layout_window.y0.round(),
+            layout_window.x1.round(),
+            layout_window.y1.round(),
+        );
+
+        assert_has_fractional_edge(name, layout_window);
+        assert_rect_approx_eq(name, visual_window, expected_visual_window);
+    };
+
+    assert_snapped("translated", translated_tag);
+    assert_snapped("scaled", scaled_tag);
+    assert_snapped("flipped", flipped_tag);
+    assert_snapped("nested", nested_tag);
+}
+
 #[test]
 fn scroll_pixel_snap() {
     let child_tag = WidgetTag::named("child");
@@ -93,7 +261,12 @@ fn scroll_pixel_snap() {
 
     let harness = TestHarness::create(test_property_set(), parent);
 
+    let border_box = harness.get_widget(child_tag).ctx().border_box();
+    let origin = harness
+        .get_widget(child_tag)
+        .ctx()
+        .to_window(border_box.origin());
+
     // Origin should be rounded to (0., 1.) by pixel-snapping.
-    let origin = harness.get_widget(child_tag).ctx().window_origin();
     assert_eq!(origin, Point::new(0., 1.));
 }
diff --git a/masonry/src/tests/event.rs b/masonry/src/tests/event.rs
index 1afdae6e0..28d2db98d 100644
--- a/masonry/src/tests/event.rs
+++ b/masonry/src/tests/event.rs
@@ -28,7 +28,7 @@ fn create_capture_target() -> ModularWidget<()> {
                 ctx.capture_pointer();
             }
         })
-        .measure_fn(|_, _, _, _, _, _| 10.)
+        .measure_fn(|_, _, _, _, _, _| 10.px())
 }
 
 #[test]
diff --git a/masonry/src/tests/layout.rs b/masonry/src/tests/layout.rs
index 37e23274d..aa6bc5d5c 100644
--- a/masonry/src/tests/layout.rs
+++ b/masonry/src/tests/layout.rs
@@ -4,10 +4,11 @@
 use assert_matches::assert_matches;
 
 use crate::core::{NewWidget, Widget, WidgetTag};
-use crate::kurbo::{Insets, Point, Rect, Size};
+use crate::kurbo::{Affine, Insets, Point, Rect, Size, Vec2};
 use crate::layout::{AsUnit, Length, SizeDef};
 use crate::properties::{BorderWidth, Dimensions, Padding};
 use crate::testing::{ModularWidget, TestHarness, TestWidgetExt, assert_debug_panics};
+use crate::tests::{assert_point_approx_eq, assert_rect_approx_eq, assert_vec2_approx_eq};
 use crate::theme::test_property_set;
 use crate::widgets::{Button, ChildAlignment, Flex, Portal, SizedBox, ZStack};
 
@@ -38,8 +39,8 @@ fn layout_simple() {
 
     let harness = TestHarness::create(test_property_set(), widget);
 
-    let first_box_size = harness.get_widget(tag_1).ctx().border_box_size();
-    let first_box_paint_rect = harness.get_widget(tag_1).ctx().paint_box();
+    let first_box_size = harness.get_widget(tag_1).ctx().layout_border_box().size();
+    let first_box_paint_rect = harness.get_widget(tag_1).ctx().layout_paint_box();
 
     assert_eq!(first_box_size.width, BOX_WIDTH);
     assert_eq!(first_box_size.height, BOX_WIDTH);
@@ -53,7 +54,7 @@ fn layout_simple() {
 #[test]
 fn forget_to_recurse_layout() {
     let widget = ModularWidget::new_parent(Flex::row().prepare())
-        .measure_fn(|_, _, _, _, _, _| 0.)
+        .measure_fn(|_, _, _, _, _, _| Length::ZERO)
         .layout_fn(|_child, _ctx, _, _| {
             // We forget to call ctx.run_layout();
         })
@@ -83,7 +84,7 @@ fn forget_to_call_place_child() {
 #[test]
 fn call_place_child_before_layout() {
     let widget = ModularWidget::new_parent(Flex::row().prepare())
-        .measure_fn(|_, _, _, _, _, _| 0.)
+        .measure_fn(|_, _, _, _, _, _| Length::ZERO)
         .layout_fn(|child, ctx, _, _| {
             // We call ctx.place_child(), but forget run_layout
             ctx.place_child(child, Point::ORIGIN);
@@ -194,33 +195,6 @@ fn skip_layout_when_cached() {
     assert_matches!(button_records[..], []);
 }
 
-#[test]
-fn pixel_snapping() {
-    let child_tag = WidgetTag::named("child");
-    let child = NewWidget::new(SizedBox::empty().size(10.3.px(), 10.3.px())).with_tag(child_tag);
-    let pos = Point::new(5.1, 5.3);
-    let parent = ModularWidget::new_parent(child).layout_fn(move |child, ctx, _, size| {
-        let child_size = ctx.compute_size(child, SizeDef::fit(size), size.into());
-        ctx.run_layout(child, child_size);
-        ctx.place_child(child, pos);
-        ctx.set_baselines(2.4, 2.6);
-    });
-    let parent_tag = WidgetTag::named("parent");
-    let parent = NewWidget::new(parent).with_tag(parent_tag);
-
-    let harness = TestHarness::create(test_property_set(), parent);
-
-    let child_pos = harness.get_widget(child_tag).ctx().window_origin();
-    let child_size = harness.get_widget(child_tag).ctx().border_box_size();
-    let first_baseline = harness.get_widget(parent_tag).ctx().first_baseline();
-    let last_baseline = harness.get_widget(parent_tag).ctx().last_baseline();
-
-    assert_eq!(child_pos, Point::new(5.0, 5.0));
-    assert_eq!(child_size, Size::new(10., 11.));
-    assert_eq!(first_baseline, 2.4);
-    assert_eq!(last_baseline, 2.6);
-}
-
 #[test]
 fn layout_insets() {
     const BOX_WIDTH: f64 = 50.;
@@ -229,7 +203,7 @@ fn layout_insets() {
     let parent_tag = WidgetTag::named("parent");
 
     let child_widget = ModularWidget::new(())
-        .measure_fn(|_, _, _, _, _, _| BOX_WIDTH)
+        .measure_fn(|_, _, _, _, _, _| BOX_WIDTH.px())
         .layout_fn(|_, ctx, _, _| {
             // this widget paints twenty points above and below its layout bounds
             ctx.set_paint_insets(Insets::uniform_xy(0., 20.));
@@ -244,8 +218,8 @@ fn layout_insets() {
 
     let harness = TestHarness::create(test_property_set(), root_widget);
 
-    let child_paint_rect = harness.get_widget(child_tag).ctx().paint_box();
-    let parent_paint_rect = harness.get_widget(parent_tag).ctx().paint_box();
+    let child_paint_rect = harness.get_widget(child_tag).ctx().layout_paint_box();
+    let parent_paint_rect = harness.get_widget(parent_tag).ctx().layout_paint_box();
     let parent_bounding_rect = harness.get_widget(parent_tag).ctx().bounding_box();
 
     // The child's paint box is affected by its paint insets
@@ -274,12 +248,12 @@ fn content_box() {
     let props = (
         Dimensions::fixed(100.px(), 100.px()),
         Padding {
-            left: 1.,
-            right: 2.,
-            top: 3.,
-            bottom: 4.,
+            left: 1.px(),
+            right: 2.px(),
+            top: 3.px(),
+            bottom: 4.px(),
         },
-        BorderWidth::all(1.),
+        BorderWidth::all(1.px()),
     );
 
     let hero = NewWidget::new(Button::with_text("Hero"))
@@ -288,10 +262,10 @@ fn content_box() {
 
     let harness = TestHarness::create(test_property_set(), hero);
 
-    let border_box = harness.get_widget(tag).ctx().border_box();
-    let border_box_size = harness.get_widget(tag).ctx().border_box_size();
-    let content_box = harness.get_widget(tag).ctx().content_box();
-    let content_box_size = harness.get_widget(tag).ctx().content_box_size();
+    let border_box = harness.get_widget(tag).ctx().layout_border_box();
+    let border_box_size = border_box.size();
+    let content_box = harness.get_widget(tag).ctx().layout_content_box();
+    let content_box_size = content_box.size();
     let border_box_translation = harness.get_widget(tag).ctx().border_box_translation();
 
     let expected_border_box_size = Size::new(100., 100.);
@@ -319,3 +293,276 @@ fn content_box() {
     assert_eq!(border_box, expected_border_box);
     assert_eq!(content_box, expected_content_box);
 }
+
+#[test]
+fn boxes_match_without_insets_or_snapping() {
+    let tag = WidgetTag::unique();
+    let child = NewWidget::new(SizedBox::empty().size(10.px(), 8.px())).with_tag(tag);
+    let root = ModularWidget::new_parent(child)
+        .layout_fn(|child, ctx, _, size| {
+            let child_size = ctx.compute_size(child, SizeDef::fit(size), size.into());
+            ctx.run_layout(child, child_size);
+            ctx.place_child(child, Point::new(2., 3.));
+        })
+        .prepare();
+
+    let harness = TestHarness::create(test_property_set(), root);
+    let child = harness.get_widget(tag);
+    let ctx = child.ctx();
+
+    // Everything besides the bounding box will be exactly the same
+    let local_box = Rect::new(0., 0., 10., 8.);
+    assert_rect_approx_eq("content_box", ctx.content_box(), local_box);
+    assert_rect_approx_eq("layout_content_box", ctx.layout_content_box(), local_box);
+    assert_rect_approx_eq("border_box", ctx.border_box(), local_box);
+    assert_rect_approx_eq("layout_border_box", ctx.layout_border_box(), local_box);
+    assert_rect_approx_eq("paint_box", ctx.paint_box(), local_box);
+    assert_rect_approx_eq("layout_paint_box", ctx.layout_paint_box(), local_box);
+    assert_rect_approx_eq(
+        "bounding_box",
+        ctx.bounding_box(),
+        Rect::new(2., 3., 12., 11.),
+    );
+}
+
+#[test]
+fn boxes_use_visual_content_box_coordinates() {
+    let tag = WidgetTag::unique();
+
+    let child = ModularWidget::new(())
+        .layout_fn(|_, ctx, _, _| {
+            ctx.set_paint_insets(Insets::new(5.9, 6.1, 7.4, 8.2));
+        })
+        .prepare()
+        .with_tag(tag)
+        .with_props((
+            Dimensions::fixed(23.4.px(), 17.6.px()),
+            BorderWidth::all(0.7.px()),
+            Padding {
+                left: 1.2.px(),
+                right: 2.3.px(),
+                top: 3.4.px(),
+                bottom: 4.5.px(),
+            },
+        ));
+
+    let root = ModularWidget::new_parent(child)
+        .layout_fn(|child, ctx, _, size| {
+            let child_size = ctx.compute_size(child, SizeDef::fit(size), size.into());
+            ctx.run_layout(child, child_size);
+            ctx.place_child(child, Point::new(5.3, 7.6));
+        })
+        .prepare()
+        .with_props(Dimensions::fixed(80.px(), 80.px()));
+
+    let harness = TestHarness::create(test_property_set(), root);
+    let child = harness.get_widget(tag);
+    let ctx = child.ctx();
+
+    // (5.3,7.6)..(28.7,25.2) snaps to (5,8)..(29,25), so visual origin is (-0.3,0.4).
+    assert_vec2_approx_eq(
+        "visual_translation",
+        ctx.visual_translation(),
+        Vec2::new(-0.3, 0.4),
+    );
+    // Border 0.7 + padding (1.2,3.4) gives top-left content inset (1.9,4.1).
+    assert_vec2_approx_eq(
+        "border_box_translation",
+        ctx.border_box_translation(),
+        Vec2::new(1.9, 4.1),
+    );
+
+    // Visual size (24,17) minus insets (1.9+3.0,4.1+5.2) gives content size (19.1,7.7).
+    assert_rect_approx_eq(
+        "content_box",
+        ctx.content_box(),
+        Rect::new(0., 0., 19.1, 7.7),
+    );
+    // Layout content (0,0)..(18.5,8.3) minus visual origin (-0.3,0.4) gives (0.3,-0.4)..(18.8,7.9).
+    assert_rect_approx_eq(
+        "layout_content_box",
+        ctx.layout_content_box(),
+        Rect::new(0.3, -0.4, 18.8, 7.9),
+    );
+    // Visual border box (-0.3,0.4)..(23.7,17.4) minus visual+border-box translation (1.6,4.5).
+    assert_rect_approx_eq(
+        "border_box",
+        ctx.border_box(),
+        Rect::new(-1.9, -4.1, 22.1, 12.9),
+    );
+    // Layout border box (0,0)..(23.4,17.6) minus visual+border-box translation (1.6,4.5).
+    assert_rect_approx_eq(
+        "layout_border_box",
+        ctx.layout_border_box(),
+        Rect::new(-1.6, -4.5, 21.8, 13.1),
+    );
+    // Paint insets become (4,2,4.4,3); visual border box + those,
+    // minus visual+border-box translation (1.6,4.5).
+    assert_rect_approx_eq(
+        "paint_box",
+        ctx.paint_box(),
+        Rect::new(-5.9, -6.1, 26.5, 15.9),
+    );
+    // Layout border box + paint insets (4,2,4.4,3), minus visual+border-box translation (1.6,4.5).
+    assert_rect_approx_eq(
+        "layout_paint_box",
+        ctx.layout_paint_box(),
+        Rect::new(-5.6, -6.5, 26.2, 16.1),
+    );
+    // Visual paint box (-4.3,-1.6)..(28.1,20.4) plus layout origin (5.3,7.6).
+    assert_rect_approx_eq(
+        "bounding_box",
+        ctx.bounding_box(),
+        Rect::new(1., 6., 33.4, 28.),
+    );
+
+    // Local origin (== visual content box) maps to
+    // visual+border-box translation (1.6,4.5) plus layout origin (5.3,7.6).
+    assert_point_approx_eq(
+        "to_window content box origin",
+        ctx.to_window(Point::ORIGIN),
+        Point::new(6.9, 12.1),
+    );
+    // Border box origin (-1.9,-4.1) plus visual+border-box translation (1.6,4.5)
+    // gives visual origin (-0.3,0.4), then plus layout origin (5.3,7.6).
+    assert_point_approx_eq(
+        "to_window border box origin",
+        ctx.to_window(ctx.border_box().origin()),
+        Point::new(5., 8.),
+    );
+    // Inverse of content box window origin: (6.9,12.1) - (5.3,7.6) - (1.6,4.5) = (0,0).
+    assert_point_approx_eq(
+        "to_local content box origin",
+        ctx.to_local(Point::new(6.9, 12.1)),
+        Point::ORIGIN,
+    );
+    // window_transform adds visual+border-box translation (1.6,4.5) and layout origin (5.3,7.6).
+    assert_point_approx_eq(
+        "window_transform",
+        ctx.window_transform() * Point::new(2., 1.),
+        Point::new(8.9, 13.1),
+    );
+}
+
+#[test]
+fn visual_content_box_clamps_when_snapping_shrinks_below_insets() {
+    let tag = WidgetTag::unique();
+
+    let child = ModularWidget::new(()).prepare().with_tag(tag).with_props((
+        Dimensions::fixed(2.5.px(), 2.5.px()),
+        BorderWidth::all(0.5.px()),
+        Padding {
+            left: 0.7.px(),
+            right: 0.8.px(),
+            top: 0.6.px(),
+            bottom: 0.9.px(),
+        },
+    ));
+
+    let root = ModularWidget::new_parent(child)
+        .layout_fn(|child, ctx, _, size| {
+            let child_size = ctx.compute_size(child, SizeDef::fit(size), size.into());
+            ctx.run_layout(child, child_size);
+            ctx.place_child(child, Point::new(0.6, 0.6));
+        })
+        .prepare()
+        .with_props(Dimensions::fixed(20.px(), 20.px()));
+
+    let harness = TestHarness::create(test_property_set(), root);
+    let child = harness.get_widget(tag);
+    let ctx = child.ctx();
+
+    // (0.6,0.6)..(3.1,3.1) snaps to (1,1)..(3,3), so visual origin is (0.4,0.4).
+    assert_vec2_approx_eq(
+        "visual_translation",
+        ctx.visual_translation(),
+        Vec2::new(0.4, 0.4),
+    );
+    // Border 0.5 + padding (0.7,0.6) gives top-left content inset (1.2,1.1).
+    assert_vec2_approx_eq(
+        "border_box_translation",
+        ctx.border_box_translation(),
+        Vec2::new(1.2, 1.1),
+    );
+    // Visual border box (0.4,0.4)..(2.4,2.4) minus visual+border-box translation (1.6,1.5).
+    assert_rect_approx_eq(
+        "border_box",
+        ctx.border_box(),
+        Rect::new(-1.2, -1.1, 0.8, 0.9),
+    );
+    // Visual size (2,2) is smaller than inset sums (1.2+1.3, 1.1+1.4), so content clamps to zero.
+    assert_rect_approx_eq("content_box", ctx.content_box(), Rect::ZERO);
+    // Layout content size is 2.5 - (1.2+1.3) = 0, then subtract visual origin (0.4,0.4).
+    assert_rect_approx_eq(
+        "layout_content_box",
+        ctx.layout_content_box(),
+        Rect::new(-0.4, -0.4, -0.4, -0.4),
+    );
+}
+
+#[test]
+fn transforms_handle_visual_content_box_space_translation() {
+    let tag = WidgetTag::unique();
+    let child = NewWidget::new(SizedBox::empty().size(10.px(), 8.px()))
+        .with_tag(tag)
+        .with_transform(Affine::scale_non_uniform(2., 3.))
+        .with_props((
+            BorderWidth::all(0.5.px()),
+            Padding {
+                left: 1.px(),
+                right: 0.5.px(),
+                top: 2.px(),
+                bottom: 1.5.px(),
+            },
+        ));
+
+    let root = ModularWidget::new_parent(child)
+        .layout_fn(|child, ctx, _, size| {
+            let child_size = ctx.compute_size(child, SizeDef::fit(size), size.into());
+            ctx.run_layout(child, child_size);
+            ctx.place_child(child, Point::new(5., 7.));
+        })
+        .prepare()
+        .with_props(Dimensions::fixed(40.px(), 40.px()));
+
+    let harness = TestHarness::create(test_property_set(), root);
+    let child = harness.get_widget(tag);
+    let ctx = child.ctx();
+
+    // Border 0.5 + padding (1.0,2.0) gives top-left content inset (1.5,2.5).
+    assert_vec2_approx_eq(
+        "border_box_translation",
+        ctx.border_box_translation(),
+        Vec2::new(1.5, 2.5),
+    );
+    // (0,0) + content inset (1.5,2.5), then scale (2,3) and add layout origin (5,7).
+    assert_point_approx_eq(
+        "to_window content origin",
+        ctx.to_window(Point::ORIGIN),
+        Point::new(8., 14.5),
+    );
+    // (2,1) + content inset (1.5,2.5) = (3.5,3.5), then scale (2,3) and add (5,7).
+    assert_point_approx_eq(
+        "to_window local point",
+        ctx.to_window(Point::new(2., 1.)),
+        Point::new(12., 17.5),
+    );
+    // Border box origin (-1.5,-2.5) cancels content inset, leaving the layout origin (5,7).
+    assert_point_approx_eq(
+        "to_window border origin",
+        ctx.to_window(ctx.border_box().origin()),
+        Point::new(5., 7.),
+    );
+    // Inverse: ((12,17.5) - (5,7)) / (2,3) = (3.5,3.5), then subtract inset (1.5,2.5).
+    assert_point_approx_eq(
+        "to_local",
+        ctx.to_local(Point::new(12., 17.5)),
+        Point::new(2., 1.),
+    );
+    // window_transform bakes in the required calculations and achieves the same result.
+    assert_point_approx_eq(
+        "window_transform",
+        ctx.window_transform() * Point::new(2., 1.),
+        Point::new(12., 17.5),
+    );
+}
diff --git a/masonry/src/tests/mod.rs b/masonry/src/tests/mod.rs
index 64da0e86a..560f4e615 100644
--- a/masonry/src/tests/mod.rs
+++ b/masonry/src/tests/mod.rs
@@ -5,6 +5,8 @@
 //! both to centralize tests in a single crate and to have access to the `masonry`
 //! widget/property set in our tests if needed.
 
+use crate::kurbo::{Point, Rect, Vec2};
+
 mod accessibility;
 mod action;
 mod anim;
@@ -16,3 +18,31 @@ mod paint;
 mod properties;
 mod update;
 mod widget_tag;
+
+#[track_caller]
+pub(crate) fn assert_approx_eq(name: &str, actual: f64, expected: f64) {
+    assert!(
+        (actual - expected).abs() <= 1e-9,
+        "{name}: expected {expected}, got {actual}"
+    );
+}
+
+#[track_caller]
+pub(crate) fn assert_point_approx_eq(name: &str, actual: Point, expected: Point) {
+    assert_approx_eq(&format!("{name}.x"), actual.x, expected.x);
+    assert_approx_eq(&format!("{name}.y"), actual.y, expected.y);
+}
+
+#[track_caller]
+pub(crate) fn assert_vec2_approx_eq(name: &str, actual: Vec2, expected: Vec2) {
+    assert_approx_eq(&format!("{name}.x"), actual.x, expected.x);
+    assert_approx_eq(&format!("{name}.y"), actual.y, expected.y);
+}
+
+#[track_caller]
+pub(crate) fn assert_rect_approx_eq(name: &str, actual: Rect, expected: Rect) {
+    assert_approx_eq(&format!("{name}.x0"), actual.x0, expected.x0);
+    assert_approx_eq(&format!("{name}.y0"), actual.y0, expected.y0);
+    assert_approx_eq(&format!("{name}.x1"), actual.x1, expected.x1);
+    assert_approx_eq(&format!("{name}.y1"), actual.y1, expected.y1);
+}
diff --git a/masonry/src/tests/paint.rs b/masonry/src/tests/paint.rs
index 708406250..5852d5895 100644
--- a/masonry/src/tests/paint.rs
+++ b/masonry/src/tests/paint.rs
@@ -76,7 +76,7 @@ fn paint_order() {
     let children = vec![child1, child2, child3];
     let parent = NewWidget::new(
         ModularWidget::new_multi_parent(children)
-            .measure_fn(|_, _, _, _, _, _| SQUARE_SIZE * 2.)
+            .measure_fn(|_, _, _, _, _, _| (SQUARE_SIZE * 2.).px())
             .layout_fn(move |children, ctx, _props, size| {
                 let mut pos = Point::ZERO;
                 for child in children {
@@ -122,7 +122,7 @@ fn paint_clipping() {
 
     let parent = NewWidget::new(
         ModularWidget::new(())
-            .measure_fn(|_, _, _, _, _, _| SQUARE_SIZE)
+            .measure_fn(|_, _, _, _, _, _| SQUARE_SIZE.px())
             .layout_fn(|_, ctx, _, size| {
                 ctx.set_clip_path(size.to_rect());
             })
@@ -159,14 +159,14 @@ fn paint_clipping() {
 fn make_layer_split_tree(isolate_trailing_box: bool) -> NewWidget<impl Widget> {
     let leading = NewWidget::new(
         ModularWidget::new(())
-            .measure_fn(|_, _, _, _, _, _| 20.)
+            .measure_fn(|_, _, _, _, _, _| 20.px())
             .paint_fn(|_, ctx, _, scene| {
                 scene.fill(ctx.content_box(), RED).draw();
             }),
     );
     let trailing = NewWidget::new(
         ModularWidget::new(isolate_trailing_box)
-            .measure_fn(|_, _, _, _, _, _| 20.)
+            .measure_fn(|_, _, _, _, _, _| 20.px())
             .paint_fn(|isolate, ctx, _, scene| {
                 if *isolate {
                     ctx.set_paint_layer_mode(PaintLayerMode::IsolatedScene);
@@ -184,14 +184,14 @@ fn make_layer_split_tree(isolate_trailing_box: bool) -> NewWidget<impl Widget> {
 fn make_external_placeholder_tree() -> NewWidget<impl Widget> {
     let leading = NewWidget::new(
         ModularWidget::new(())
-            .measure_fn(|_, _, _, _, _, _| 20.)
+            .measure_fn(|_, _, _, _, _, _| 20.px())
             .paint_fn(|_, ctx, _, scene| {
                 scene.fill(ctx.content_box(), RED).draw();
             }),
     );
     let placeholder = NewWidget::new(
         ModularWidget::new(())
-            .measure_fn(|_, _, _, _, _, _| 20.)
+            .measure_fn(|_, _, _, _, _, _| 20.px())
             .layout_fn(|_, ctx, _, size| {
                 ctx.set_clip_path(size.to_rect());
             })
@@ -201,7 +201,7 @@ fn make_external_placeholder_tree() -> NewWidget<impl Widget> {
     );
     let trailing = NewWidget::new(
         ModularWidget::new(())
-            .measure_fn(|_, _, _, _, _, _| 20.)
+            .measure_fn(|_, _, _, _, _, _| 20.px())
             .paint_fn(|_, ctx, _, scene| {
                 scene.fill(ctx.content_box(), BLUE).draw();
             }),
@@ -330,7 +330,7 @@ fn paint_transparency() {
         GridParams::new(13, 0, 3, 1),
     );
 
-    let props = (Padding::all(20.), Gap::new(10.px()));
+    let props = (Padding::all(20.px()), Gap::new(10.px()));
     let grid_a = grid_a.prepare().with_props(props);
     let grid_b = grid_b.prepare().with_props(props);
 
diff --git a/masonry/src/tests/properties.rs b/masonry/src/tests/properties.rs
index a82b6a081..c99f0365a 100644
--- a/masonry/src/tests/properties.rs
+++ b/masonry/src/tests/properties.rs
@@ -2,9 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 use crate::core::Widget as _;
-use crate::layout::AsUnit as _;
+use crate::kurbo::Rect;
+use crate::layout::AsUnit;
 use crate::palette::css::BLUE;
-use crate::properties::{ContentColor, Dimensions, Gap};
+use crate::properties::{ContentColor, Dimensions, Gap, ObjectFit};
+use crate::tests::assert_rect_approx_eq;
 use crate::widgets::Button;
 
 #[test]
@@ -30,3 +32,31 @@ fn widget_new_properties() {
     assert_eq!(props.get::<Gap>(), Some(&Gap::ZERO));
     assert_eq!(props.get::<ContentColor>(), Some(&ContentColor::new(BLUE)));
 }
+
+#[test]
+fn object_fit_affine_stretch_maps_rect_to_rect() {
+    let container = Rect::new(10., -20., 110., 30.);
+    let content = Rect::new(-5., 10., 15., 20.);
+
+    let transform = ObjectFit::Stretch.affine(container, content);
+
+    assert_rect_approx_eq(
+        "transformed",
+        transform.transform_rect_bbox(content),
+        container,
+    );
+}
+
+#[test]
+fn object_fit_affine_contain_handles_negative_origins() {
+    let container = Rect::new(-30., -20., 70., 30.);
+    let content = Rect::new(-10., -5., 10., 15.);
+
+    let transform = ObjectFit::Contain.affine(container, content);
+
+    assert_rect_approx_eq(
+        "transformed",
+        transform.transform_rect_bbox(content),
+        Rect::new(-5., -20., 45., 30.),
+    );
+}
diff --git a/masonry/src/tests/transforms.rs b/masonry/src/tests/transforms.rs
index b0c8dba71..bf81b52bd 100644
--- a/masonry/src/tests/transforms.rs
+++ b/masonry/src/tests/transforms.rs
@@ -21,7 +21,7 @@ fn blue_box(inner: impl Widget) -> impl Widget {
     let mut box_props = PropertySet::new();
     box_props.insert(Background::Color(palette::css::BLUE));
     box_props.insert(BorderColor::new(palette::css::TEAL));
-    box_props.insert(BorderWidth::all(2.0));
+    box_props.insert(BorderWidth::all(2.px()));
 
     WrapperWidget::new(
         SizedBox::new(inner.prepare())
diff --git a/masonry/src/tests/update.rs b/masonry/src/tests/update.rs
index 4b5d8c460..f93756449 100644
--- a/masonry/src/tests/update.rs
+++ b/masonry/src/tests/update.rs
@@ -4,17 +4,17 @@
 use std::sync::mpsc;
 
 use assert_matches::assert_matches;
-use masonry_testing::{
-    DebugName, ModularWidget, PRIMARY_MOUSE, Record, TestHarness, TestWidgetExt, assert_any,
-    assert_debug_panics,
-};
 
 use crate::core::pointer::PointerEvent;
 use crate::core::{
     CursorIcon, Ime, NewWidget, PropertySet, TextEvent, Update, Widget, WidgetId, WidgetPod,
     WidgetTag,
 };
-use crate::layout::Length;
+use crate::layout::{AsUnit, Length};
+use crate::testing::{
+    DebugName, ModularWidget, PRIMARY_MOUSE, Record, TestHarness, TestWidgetExt, assert_any,
+    assert_debug_panics,
+};
 use crate::theme::test_property_set;
 use crate::widgets::{Button, Flex, Label, SizedBox, TextArea};
 
@@ -557,7 +557,7 @@ fn create_icon_widget() -> ModularWidget<()> {
             }
         })
         .cursor_icon(CursorIcon::Crosshair)
-        .measure_fn(|_, _, _, _, _, _| 10.)
+        .measure_fn(|_, _, _, _, _, _| 10.px())
 }
 
 #[test]
@@ -648,12 +648,11 @@ fn change_hovered_when_widget_changes() {
     let parent_tag = WidgetTag::named("parent");
 
     let child =
-        NewWidget::new(ModularWidget::new(BOX_SIZE).measure_fn(|size, _, _, _, _, _| size.get()))
+        NewWidget::new(ModularWidget::new(BOX_SIZE).measure_fn(|size, _, _, _, _, _| *size))
             .with_tag(child_tag);
-    let parent = NewWidget::new(
-        ModularWidget::new_parent(child).measure_fn(|_, _, _, _, _, _| BOX_SIZE.get()),
-    )
-    .with_tag(parent_tag);
+    let parent =
+        NewWidget::new(ModularWidget::new_parent(child).measure_fn(|_, _, _, _, _, _| BOX_SIZE))
+            .with_tag(parent_tag);
 
     let mut harness = TestHarness::create(test_property_set(), parent);
     let child_id = harness.get_widget(child_tag).id();
@@ -697,7 +696,7 @@ fn make_reporter_parent(
                 ctx.set_handled();
             }
         })
-        .measure_fn(|_, _, _, _, _, _| 100.)
+        .measure_fn(|_, _, _, _, _, _| 100.px())
         .update_fn(move |_, _, _, event| {
             sender.send((event.short_name().to_string(), n)).unwrap();
         })
diff --git a/masonry/src/theme.rs b/masonry/src/theme.rs
index b58e751db..ce8b6b47d 100644
--- a/masonry/src/theme.rs
+++ b/masonry/src/theme.rs
@@ -8,7 +8,7 @@
 use crate::core::{
     DefaultProperties, PropertySet, PropertyStack, Selector, StyleProperty, StyleSet,
 };
-use crate::layout::Length;
+use crate::layout::{AsUnit, Length};
 use crate::palette::css::DIM_GRAY;
 use crate::parley::{GenericFamily, LineHeight};
 use crate::peniko::Color;
@@ -23,7 +23,7 @@ use crate::widgets::*;
 /// it should clear with this color by default.
 pub const BACKGROUND_COLOR: Color = Color::from_rgb8(0x1D, 0x1D, 0x1D);
 
-pub const BORDER_WIDTH: f64 = 1.;
+pub const BORDER_WIDTH: Length = Length::const_px(1.);
 
 // Zync color variations from https://tailwindcss.com/docs/colors
 pub const ZYNC_900: Color = Color::from_rgb8(0x18, 0x18, 0x1b);
@@ -59,9 +59,9 @@ pub fn default_property_set() -> DefaultProperties {
     let mut properties = DefaultProperties::new();
 
     // Badge
-    properties.insert::<Badge, _>(Padding::from_vh(3., 5.));
-    properties.insert::<Badge, _>(CornerRadius { radius: 999. });
-    properties.insert::<Badge, _>(BorderWidth { width: 0. });
+    properties.insert::<Badge, _>(Padding::from_vh(3.px(), 5.px()));
+    properties.insert::<Badge, _>(CornerRadius { radius: 999.px() });
+    properties.insert::<Badge, _>(BorderWidth { width: 0.px() });
     properties.insert::<Badge, _>(Background::Color(ACCENT_COLOR));
     properties.insert::<Badge, _>(BorderColor { color: ZYNC_700 });
     {
@@ -74,8 +74,8 @@ pub fn default_property_set() -> DefaultProperties {
     }
 
     // Button
-    properties.insert::<Button, _>(Padding::from_vh(6., 16.));
-    properties.insert::<Button, _>(CornerRadius { radius: 6. });
+    properties.insert::<Button, _>(Padding::from_vh(6.px(), 16.px()));
+    properties.insert::<Button, _>(CornerRadius { radius: 6.px() });
     properties.insert::<Button, _>(BorderWidth {
         width: BORDER_WIDTH,
     });
@@ -103,7 +103,7 @@ pub fn default_property_set() -> DefaultProperties {
     }
 
     // Checkbox
-    properties.insert::<Checkbox, _>(CornerRadius { radius: 4. });
+    properties.insert::<Checkbox, _>(CornerRadius { radius: 4.px() });
     properties.insert::<Checkbox, _>(BorderWidth {
         width: BORDER_WIDTH,
     });
@@ -142,21 +142,21 @@ pub fn default_property_set() -> DefaultProperties {
         Length::const_px(16.),
         Length::const_px(16.),
     ));
-    properties.insert::<DisclosureButton, _>(Padding::all(4.));
+    properties.insert::<DisclosureButton, _>(Padding::all(4.px()));
 
     // Divider
     properties.insert::<Divider, _>(ContentColor::new(ZYNC_500));
 
     // Switch
-    properties.insert::<Switch, _>(CornerRadius { radius: 10. }); // Full pill shape
+    properties.insert::<Switch, _>(CornerRadius { radius: 10.px() }); // Full pill shape
     properties.insert::<Switch, _>(BorderWidth {
         width: BORDER_WIDTH,
     });
     properties.insert::<Switch, _>(Background::Color(ZYNC_700));
     properties.insert::<Switch, _>(BorderColor { color: ZYNC_700 });
     properties.insert::<Switch, _>(ThumbColor(Color::WHITE));
-    properties.insert::<Switch, _>(ThumbRadius(8.0));
-    properties.insert::<Switch, _>(TrackThickness(20.0));
+    properties.insert::<Switch, _>(ThumbRadius(8.px()));
+    properties.insert::<Switch, _>(TrackThickness(20.px()));
     {
         let mut stack = PropertyStack::new();
         stack.push(
@@ -186,8 +186,8 @@ pub fn default_property_set() -> DefaultProperties {
     use crate::widgets::Selector as SelectorButton;
 
     // Selector
-    properties.insert::<SelectorButton, _>(Padding::from_vh(6., 16.));
-    properties.insert::<SelectorButton, _>(CornerRadius { radius: 2. });
+    properties.insert::<SelectorButton, _>(Padding::from_vh(6.px(), 16.px()));
+    properties.insert::<SelectorButton, _>(CornerRadius { radius: 2.px() });
     properties.insert::<SelectorButton, _>(BorderWidth {
         width: BORDER_WIDTH,
     });
@@ -216,7 +216,7 @@ pub fn default_property_set() -> DefaultProperties {
     }
 
     // SelectorItem
-    properties.insert::<SelectorItem, _>(Padding::from_vh(6., 16.));
+    properties.insert::<SelectorItem, _>(Padding::from_vh(6.px(), 16.px()));
     properties.insert::<SelectorItem, _>(Background::Color(ZYNC_900));
     {
         let mut stack = PropertyStack::new();
@@ -238,8 +238,8 @@ pub fn default_property_set() -> DefaultProperties {
     properties.insert::<Grid, _>(Gap::ZERO);
 
     // TextInput
-    properties.insert::<TextInput, _>(Padding::from_vh(6., 12.));
-    properties.insert::<TextInput, _>(CornerRadius { radius: 4. });
+    properties.insert::<TextInput, _>(Padding::from_vh(6.px(), 12.px()));
+    properties.insert::<TextInput, _>(CornerRadius { radius: 4.px() });
     properties.insert::<TextInput, _>(BorderWidth {
         width: BORDER_WIDTH,
     });
@@ -309,7 +309,7 @@ pub fn default_property_set() -> DefaultProperties {
     }
 
     // ProgressBar
-    properties.insert::<ProgressBar, _>(CornerRadius { radius: 2. });
+    properties.insert::<ProgressBar, _>(CornerRadius { radius: 2.px() });
     properties.insert::<ProgressBar, _>(BorderWidth {
         width: BORDER_WIDTH,
     });
@@ -381,8 +381,8 @@ pub fn default_text_styles(styles: &mut StyleSet) {
 }
 
 fn default_step_input_style<T: Steppable>(properties: &mut DefaultProperties) {
-    properties.insert::<StepInput<T>, _>(Padding::from_vh(6., 0.));
-    properties.insert::<StepInput<T>, _>(CornerRadius { radius: 6. });
+    properties.insert::<StepInput<T>, _>(Padding::from_vh(6.px(), 0.px()));
+    properties.insert::<StepInput<T>, _>(CornerRadius { radius: 6.px() });
     properties.insert::<StepInput<T>, _>(BorderWidth {
         width: BORDER_WIDTH,
     });
diff --git a/masonry/src/widgets/align.rs b/masonry/src/widgets/align.rs
index 68a12183b..bf6445f85 100644
--- a/masonry/src/widgets/align.rs
+++ b/masonry/src/widgets/align.rs
@@ -17,7 +17,7 @@ use crate::core::{
 use crate::core::{MeasureCtx, WidgetMut};
 use crate::imaging::Painter;
 use crate::kurbo::{Axis, Rect, Size};
-use crate::layout::{LayoutSize, LenReq, SizeDef, UnitPoint};
+use crate::layout::{AsUnit, LayoutSize, LenReq, Length, SizeDef, UnitPoint};
 
 // TODO - Have child widget type as generic argument
 
@@ -125,8 +125,8 @@ impl Widget for Align {
         _props: &PropertiesRef<'_>,
         axis: Axis,
         len_req: LenReq,
-        cross_length: Option<f64>,
-    ) -> f64 {
+        cross_length: Option<Length>,
+    ) -> Length {
         let auto_length = len_req.into();
         let context_size = LayoutSize::maybe(axis.cross(), cross_length);
 
@@ -152,7 +152,7 @@ impl Widget for Align {
             Axis::Horizontal => self.width_factor,
             Axis::Vertical => self.height_factor,
         } {
-            length = child_length * factor;
+            length = (child_length.get() * factor).px();
         }
 
         // Never return a length larger than the bounds
@@ -258,7 +258,7 @@ mod tests {
             .with_tag(align_tag)
             .with_props((
                 Dimensions::fixed(50.px(), 50.px()),
-                BorderWidth::all(2.),
+                BorderWidth::all(2.px()),
                 BorderColor::new(palette::css::BLACK),
             ));
         let root = Align::centered(align).prepare();
diff --git a/masonry/src/widgets/badge.rs b/masonry/src/widgets/badge.rs
index 1d15b8b59..39bd8e30b 100644
--- a/masonry/src/widgets/badge.rs
+++ b/masonry/src/widgets/badge.rs
@@ -14,7 +14,7 @@ use crate::core::{
 };
 use crate::imaging::Painter;
 use crate::kurbo::{Axis, Size};
-use crate::layout::{LayoutSize, LenReq, SizeDef};
+use crate::layout::{LayoutSize, LenReq, Length, SizeDef};
 use crate::parley::style::FontWeight;
 use crate::widgets::Label;
 
@@ -165,8 +165,8 @@ impl Widget for Badge {
         _props: &PropertiesRef<'_>,
         axis: Axis,
         len_req: LenReq,
-        cross_length: Option<f64>,
-    ) -> f64 {
+        cross_length: Option<Length>,
+    ) -> Length {
         let auto_length = len_req.into();
         let context_size = LayoutSize::maybe(axis.cross(), cross_length);
 
diff --git a/masonry/src/widgets/badged.rs b/masonry/src/widgets/badged.rs
index 3e2f681b8..c41912f53 100644
--- a/masonry/src/widgets/badged.rs
+++ b/masonry/src/widgets/badged.rs
@@ -11,7 +11,7 @@ use crate::core::{
 };
 use crate::imaging::Painter;
 use crate::kurbo::{Axis, Point, Size, Vec2};
-use crate::layout::{LayoutSize, LenReq, SizeDef};
+use crate::layout::{LayoutSize, LenReq, Length, SizeDef};
 
 /// Where a badge is placed relative to the content.
 #[derive(Clone, Copy, Debug, PartialEq, Eq)]
@@ -185,8 +185,8 @@ impl Widget for Badged {
         _props: &PropertiesRef<'_>,
         axis: Axis,
         len_req: LenReq,
-        cross_length: Option<f64>,
-    ) -> f64 {
+        cross_length: Option<Length>,
+    ) -> Length {
         let auto_length = len_req.into();
         let context_size = LayoutSize::maybe(axis.cross(), cross_length);
         ctx.compute_length(
diff --git a/masonry/src/widgets/button.rs b/masonry/src/widgets/button.rs
index ac81b562a..84c6d43fa 100644
--- a/masonry/src/widgets/button.rs
+++ b/masonry/src/widgets/button.rs
@@ -18,7 +18,7 @@ use crate::core::{
 };
 use crate::imaging::Painter;
 use crate::kurbo::{Axis, Size};
-use crate::layout::{LayoutSize, LenReq, SizeDef};
+use crate::layout::{LayoutSize, LenReq, Length, SizeDef};
 use crate::theme;
 use crate::widgets::Label;
 
@@ -178,12 +178,8 @@ impl Widget for Button {
         _props: &PropertiesRef<'_>,
         axis: Axis,
         len_req: LenReq,
-        cross_length: Option<f64>,
-    ) -> f64 {
-        // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-        //       https://github.com/linebender/xilem/issues/1264
-        let scale = 1.0;
-
+        cross_length: Option<Length>,
+    ) -> Length {
         let auto_length = len_req.into();
         let context_size = LayoutSize::maybe(axis.cross(), cross_length);
 
@@ -202,7 +198,7 @@ impl Widget for Button {
         // we make sure we will have at least the same height as the default text input.
         match axis {
             Axis::Horizontal => length,
-            Axis::Vertical => length.max(theme::BASIC_WIDGET_HEIGHT.dp(scale)),
+            Axis::Vertical => length.max(theme::BASIC_WIDGET_HEIGHT),
         }
     }
 
@@ -373,9 +369,9 @@ mod tests {
 
         harness.edit_root_widget(|mut button| {
             button.insert_prop(BorderColor { color: red });
-            button.insert_prop(BorderWidth { width: 5.0 });
-            button.insert_prop(CornerRadius { radius: 20.0 });
-            button.insert_prop(Padding::from_vh(3., 8.));
+            button.insert_prop(BorderWidth { width: 5.px() });
+            button.insert_prop(CornerRadius { radius: 20.px() });
+            button.insert_prop(Padding::from_vh(3.px(), 8.px()));
 
             let mut label = Button::child_mut(&mut button);
             label.insert_prop(ContentColor::new(red));
@@ -407,7 +403,7 @@ mod tests {
             );
         let root_widget = NewWidget::new(grid).with_props(
             PropertySet::new()
-                .with(Padding::all(20.0))
+                .with(Padding::all(20.px()))
                 .with(Gap::new(40.px())),
         );
 
@@ -427,19 +423,19 @@ mod tests {
             {
                 let mut button = Grid::get_mut(&mut grid, 1);
                 let mut button = button.downcast::<Button>();
-                button.insert_prop(BoxShadow::new(ORANGE, (-10., 10.)).blur(5.0));
+                button.insert_prop(BoxShadow::new(ORANGE, (-10., 10.)).blur(5.px()));
             }
 
             {
                 let mut button = Grid::get_mut(&mut grid, 2);
                 let mut button = button.downcast::<Button>();
-                button.insert_prop(BoxShadow::new(ORANGE, (-10., -10.)).blur(-5.0));
+                button.insert_prop(BoxShadow::new(ORANGE, (-10., -10.)).blur(0.px()));
             }
 
             {
                 let mut button = Grid::get_mut(&mut grid, 3);
                 let mut button = button.downcast::<Button>();
-                button.insert_prop(BoxShadow::new(ORANGE, (0., 0.)).blur(5.0));
+                button.insert_prop(BoxShadow::new(ORANGE, (0., 0.)).blur(5.px()));
             }
         });
 
@@ -452,7 +448,7 @@ mod tests {
             {
                 let mut button = Grid::get_mut(&mut grid, 1);
                 let mut button = button.downcast::<Button>();
-                button.insert_prop(BoxShadow::new(ORANGE, (-10., 10.)).blur(2.5));
+                button.insert_prop(BoxShadow::new(ORANGE, (-10., 10.)).blur(2.5.px()));
             }
         });
         assert_failing_render_snapshot!(harness, "button_shadows");
@@ -464,7 +460,7 @@ mod tests {
     fn validate_noninteractive_child<W: Widget>(child: NewWidget<W>) {
         let child_id = child.id();
         let mut button = Button::new(child).prepare();
-        button.properties.insert(Padding::all(10.));
+        button.properties.insert(Padding::all(10.px()));
         let button_id = button.id();
         let mut harness = TestHarness::create(test_property_set(), button);
 
diff --git a/masonry/src/widgets/canvas.rs b/masonry/src/widgets/canvas.rs
index 7c4ce0b83..d66136e36 100644
--- a/masonry/src/widgets/canvas.rs
+++ b/masonry/src/widgets/canvas.rs
@@ -92,16 +92,12 @@ impl Widget for Canvas {
         _props: &PropertiesRef<'_>,
         _axis: Axis,
         len_req: LenReq,
-        _cross_length: Option<f64>,
-    ) -> f64 {
-        // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-        //       https://github.com/linebender/xilem/issues/1264
-        let scale = 1.0;
-
+        _cross_length: Option<Length>,
+    ) -> Length {
         // We use all the available space or fall back to our const preferred size.
         match len_req {
             LenReq::FitContent(space) => space,
-            _ => DEFAULT_LENGTH.dp(scale),
+            _ => DEFAULT_LENGTH,
         }
     }
 
diff --git a/masonry/src/widgets/checkbox.rs b/masonry/src/widgets/checkbox.rs
index e006e5111..234d5136a 100644
--- a/masonry/src/widgets/checkbox.rs
+++ b/masonry/src/widgets/checkbox.rs
@@ -16,7 +16,7 @@ use crate::core::{
 };
 use crate::imaging::Painter;
 use crate::kurbo::{Axis, BezPath, Cap, Dashes, Join, Point, Size, Stroke};
-use crate::layout::{LayoutSize, LenReq, SizeDef};
+use crate::layout::{LayoutSize, LenReq, Length, SizeDef};
 use crate::properties::{
     BorderColor, BorderWidth, CheckmarkColor, CheckmarkStrokeWidth, CornerRadius,
 };
@@ -187,25 +187,21 @@ impl Widget for Checkbox {
         _props: &PropertiesRef<'_>,
         axis: Axis,
         len_req: LenReq,
-        cross_length: Option<f64>,
-    ) -> f64 {
-        // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-        //       https://github.com/linebender/xilem/issues/1264
-        let scale = 1.0;
-
-        let check_side = theme::BASIC_WIDGET_HEIGHT.dp(scale);
-        let check_padding = theme::WIDGET_CONTROL_COMPONENT_PADDING.dp(scale);
+        cross_length: Option<Length>,
+    ) -> Length {
+        let check_side = theme::BASIC_WIDGET_HEIGHT;
+        let check_padding = theme::WIDGET_CONTROL_COMPONENT_PADDING;
 
         let calc_other_length = |axis| match axis {
-            Axis::Horizontal => check_side + check_padding,
-            Axis::Vertical => 0.,
+            Axis::Horizontal => check_side.saturating_add(check_padding),
+            Axis::Vertical => Length::ZERO,
         };
         let other_length = calc_other_length(axis);
 
         let cross = axis.cross();
         let cross_space = cross_length.map(|cross_length| {
             let cross_other_length = calc_other_length(cross);
-            (cross_length - cross_other_length).max(0.)
+            cross_length.saturating_sub(cross_other_length)
         });
 
         let auto_length = len_req.reduce(other_length).into();
@@ -220,18 +216,14 @@ impl Widget for Checkbox {
         );
 
         match axis {
-            Axis::Horizontal => label_length + other_length,
-            Axis::Vertical => label_length.max(check_side) + other_length,
+            Axis::Horizontal => label_length.saturating_add(other_length),
+            Axis::Vertical => label_length.max(check_side).saturating_add(other_length),
         }
     }
 
     fn layout(&mut self, ctx: &mut LayoutCtx<'_>, _props: &PropertiesRef<'_>, size: Size) {
-        // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-        //       https://github.com/linebender/xilem/issues/1264
-        let scale = 1.0;
-
-        let check_side = theme::BASIC_WIDGET_HEIGHT.dp(scale);
-        let check_padding = theme::WIDGET_CONTROL_COMPONENT_PADDING.dp(scale);
+        let check_side = theme::BASIC_WIDGET_HEIGHT.get();
+        let check_padding = theme::WIDGET_CONTROL_COMPONENT_PADDING.get();
 
         let space = Size::new(
             (size.width - (check_side + check_padding)).max(0.),
@@ -293,11 +285,7 @@ impl Widget for Checkbox {
         props: &PropertiesRef<'_>,
         painter: &mut Painter<'_>,
     ) {
-        // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-        //       https://github.com/linebender/xilem/issues/1264
-        let scale = 1.0;
-
-        let check_side = theme::BASIC_WIDGET_HEIGHT.dp(scale);
+        let check_side = theme::BASIC_WIDGET_HEIGHT.get();
         let check_size = Size::new(check_side, check_side);
 
         let cache = ctx.property_cache();
@@ -309,7 +297,7 @@ impl Widget for Checkbox {
         let border_color = *props.get::<BorderColor>(cache);
 
         // Paint the checkbox box border
-        let border_stroke = Stroke::new(border_width.width).with_join(Join::Miter);
+        let border_stroke = Stroke::new(border_width.width.get()).with_join(Join::Miter);
         painter
             .stroke(border_rect, &border_stroke, border_color.color)
             .draw();
@@ -377,6 +365,7 @@ impl Widget for Checkbox {
 mod tests {
     use super::*;
     use crate::core::{PropertySet, StyleProperty};
+    use crate::layout::AsUnit;
     use crate::properties::{ContentColor, Padding};
     use crate::testing::{TestHarness, TestHarnessParams, assert_render_snapshot};
     use crate::theme::{ACCENT_COLOR, test_property_set};
@@ -437,8 +426,8 @@ mod tests {
 
     #[test]
     fn checkbox_with_padding() {
-        let checkbox =
-            NewWidget::new(Checkbox::new(true, "Padding")).with_props(Padding::from_vh(8., 16.));
+        let checkbox = NewWidget::new(Checkbox::new(true, "Padding"))
+            .with_props(Padding::from_vh(8.px(), 16.px()));
         let checkbox_id = checkbox.id();
         let params =
             TestHarnessParams::size_and_padding((180, 72), TestHarnessParams::ROOT_PADDING);
diff --git a/masonry/src/widgets/collapse_panel.rs b/masonry/src/widgets/collapse_panel.rs
index c379831f6..d90f4e2df 100644
--- a/masonry/src/widgets/collapse_panel.rs
+++ b/masonry/src/widgets/collapse_panel.rs
@@ -9,7 +9,7 @@ use crate::core::{
 };
 use crate::imaging::Painter;
 use crate::kurbo::{Axis, Line, Point, Size, Stroke};
-use crate::layout::{LayoutSize, LenDef, LenReq, Length, SizeDef};
+use crate::layout::{AsUnit, LayoutSize, LenDef, LenReq, Length, SizeDef};
 use crate::properties::{BorderColor, BorderWidth, Dimensions, Padding};
 use crate::widgets::{DisclosureButton, Label};
 use crate::{accesskit, theme};
@@ -18,10 +18,10 @@ use crate::{accesskit, theme};
 const BUTTON_LENGTH: Length = Length::const_px(16.);
 /// Padding around the separator line.
 const SEPARATOR_PAD: Padding = Padding {
-    top: 4.,
-    left: 1.,
-    right: 1.,
-    bottom: 0.,
+    top: Length::const_px(4.),
+    left: Length::const_px(1.),
+    right: Length::const_px(1.),
+    bottom: Length::ZERO,
 };
 
 /// A collapsible panel with a header that contains a child widget.
@@ -134,29 +134,29 @@ impl Widget for CollapsePanel {
         props: &PropertiesRef<'_>,
         axis: Axis,
         len_req: LenReq,
-        cross_length: Option<f64>,
-    ) -> f64 {
-        // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-        //       https://github.com/linebender/xilem/issues/1264
-        let scale = 1.0;
-
+        cross_length: Option<Length>,
+    ) -> Length {
         let cache = ctx.property_cache();
         let border = props.get::<BorderWidth>(cache);
         let header_x_padding = theme::WIDGET_CONTROL_COMPONENT_PADDING;
 
-        let header_x_padding_length = header_x_padding.dp(scale) * 2.;
-        let btn_length = BUTTON_LENGTH.dp(scale);
+        let header_x_padding_length = header_x_padding.saturating_add(header_x_padding);
+        let btn_length = BUTTON_LENGTH;
 
-        let separator_height =
-            border.width * scale + SEPARATOR_PAD.length(Axis::Vertical).dp(scale);
+        let separator_height = border
+            .width
+            .saturating_add(SEPARATOR_PAD.length(Axis::Vertical));
 
         let space: LenDef = len_req.into();
 
         let cross = axis.cross();
         let label_cross_space = match cross {
             // If we know the horizontal space, then we can derive the label's horizontal space.
-            Axis::Horizontal => cross_length
-                .map(|cross_length| (cross_length - header_x_padding_length - btn_length).max(0.)),
+            Axis::Horizontal => cross_length.map(|cross_length| {
+                cross_length
+                    .saturating_sub(header_x_padding_length)
+                    .saturating_sub(btn_length)
+            }),
             // Even if we know our vertical space, we don't know the child's height.
             // So we can't provide an accurate height for the label.
             Axis::Vertical => None,
@@ -164,7 +164,7 @@ impl Widget for CollapsePanel {
         // We don't give any special context to the label, just our full size
         let label_context_size = LayoutSize::maybe(cross, cross_length);
         let label_auto_length = match axis {
-            Axis::Horizontal => space.reduce(header_x_padding_length + btn_length),
+            Axis::Horizontal => space.reduce(header_x_padding_length.saturating_add(btn_length)),
             Axis::Vertical => space,
         };
         let label_length = ctx.compute_length(
@@ -176,7 +176,9 @@ impl Widget for CollapsePanel {
         );
 
         let header_length = match axis {
-            Axis::Horizontal => btn_length + label_length + header_x_padding_length,
+            Axis::Horizontal => btn_length
+                .saturating_add(label_length)
+                .saturating_add(header_x_padding_length),
             Axis::Vertical => btn_length.max(label_length),
         };
 
@@ -195,7 +197,7 @@ impl Widget for CollapsePanel {
             let child_context_size = LayoutSize::maybe(cross, child_cross_space);
             let child_auto_length = match axis {
                 Axis::Horizontal => space,
-                Axis::Vertical => space.reduce(header_length + separator_height),
+                Axis::Vertical => space.reduce(header_length.saturating_add(separator_height)),
             };
             ctx.compute_length(
                 &mut self.child,
@@ -205,7 +207,7 @@ impl Widget for CollapsePanel {
                 child_cross_space,
             )
         } else {
-            0.
+            Length::ZERO
         };
 
         match axis {
@@ -213,7 +215,9 @@ impl Widget for CollapsePanel {
             Axis::Vertical => {
                 let mut length = header_length;
                 if !is_collapsed {
-                    length += child_length + separator_height;
+                    length = length
+                        .saturating_add(child_length)
+                        .saturating_add(separator_height);
                 }
                 length
             }
@@ -221,19 +225,15 @@ impl Widget for CollapsePanel {
     }
 
     fn layout(&mut self, ctx: &mut LayoutCtx<'_>, props: &PropertiesRef<'_>, size: Size) {
-        // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-        //       https://github.com/linebender/xilem/issues/1264
-        let scale = 1.0;
-
         let cache = ctx.property_cache();
         let border = props.get::<BorderWidth>(cache);
         let header_x_padding = theme::WIDGET_CONTROL_COMPONENT_PADDING;
 
-        let separator_height =
-            border.width * scale + SEPARATOR_PAD.length(Axis::Vertical).dp(scale);
+        let border_width = border.width.get();
+        let separator_height = border_width + SEPARATOR_PAD.length(Axis::Vertical).get();
 
-        let button_width = BUTTON_LENGTH.dp(scale);
-        let header_padding_width = header_x_padding.dp(scale);
+        let button_width = BUTTON_LENGTH.get();
+        let header_padding_width = header_x_padding.get();
 
         // Square button
         let button_size = Size::new(button_width, button_width);
@@ -241,9 +241,11 @@ impl Widget for CollapsePanel {
 
         let label_auto_size = SizeDef::new(
             LenDef::FitContent(
-                (size.width - header_padding_width * 2. - button_size.width).max(0.),
+                (size.width - header_padding_width * 2. - button_size.width)
+                    .max(0.)
+                    .px(),
             ),
-            LenDef::FitContent(size.height),
+            LenDef::FitContent(size.height.px()),
         );
         let label_size = ctx.compute_size(&mut self.header_label, label_auto_size, size.into());
 
@@ -284,7 +286,7 @@ impl Widget for CollapsePanel {
             ctx.place_child(&mut self.child, child_origin);
 
             self.separator_line_y =
-                Some(header_height + SEPARATOR_PAD.top * scale + border.width * scale * 0.5);
+                Some(header_height + SEPARATOR_PAD.top.get() + border_width * 0.5);
         } else {
             self.separator_line_y = None;
         }
@@ -298,10 +300,6 @@ impl Widget for CollapsePanel {
         props: &PropertiesRef<'_>,
         painter: &mut Painter<'_>,
     ) {
-        // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-        //       https://github.com/linebender/xilem/issues/1264
-        let scale = 1.0;
-
         if let Some(y) = self.separator_line_y {
             let cache = ctx.property_cache();
             let border_width = *props.get::<BorderWidth>(cache);
@@ -310,12 +308,16 @@ impl Widget for CollapsePanel {
             let border_box = ctx.border_box();
 
             // Only paint the line if it would have a positive width
-            if SEPARATOR_PAD.length(Axis::Horizontal).dp(scale) < border_box.width() {
-                let x1 = border_box.x0 + SEPARATOR_PAD.left * scale;
-                let x2 = border_box.x1 - SEPARATOR_PAD.right * scale;
+            if SEPARATOR_PAD.length(Axis::Horizontal).get() < border_box.width() {
+                let x1 = border_box.x0 + SEPARATOR_PAD.left.get();
+                let x2 = border_box.x1 - SEPARATOR_PAD.right.get();
                 let line = Line::new((x1, y), (x2, y));
                 painter
-                    .stroke(line, &Stroke::new(border_width.width), border_color.color)
+                    .stroke(
+                        line,
+                        &Stroke::new(border_width.width.get()),
+                        border_color.color,
+                    )
                     .draw();
             }
         }
diff --git a/masonry/src/widgets/disclosure_button.rs b/masonry/src/widgets/disclosure_button.rs
index 263e87c08..580cab243 100644
--- a/masonry/src/widgets/disclosure_button.rs
+++ b/masonry/src/widgets/disclosure_button.rs
@@ -144,13 +144,9 @@ impl Widget for DisclosureButton {
         _props: &PropertiesRef<'_>,
         _axis: Axis,
         len_req: LenReq,
-        _cross_length: Option<f64>,
-    ) -> f64 {
-        // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-        //       https://github.com/linebender/xilem/issues/1264
-        let scale = 1.0;
-
-        let length = DEFAULT_LENGTH.dp(scale);
+        _cross_length: Option<Length>,
+    ) -> Length {
+        let length = DEFAULT_LENGTH;
 
         match len_req {
             LenReq::MinContent | LenReq::MaxContent => length,
@@ -166,13 +162,11 @@ impl Widget for DisclosureButton {
         props: &PropertiesRef<'_>,
         painter: &mut Painter<'_>,
     ) {
-        // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-        //       https://github.com/linebender/xilem/issues/1264
-        let scale = 1.0;
         let cache = ctx.property_cache();
         let button_color = props.get::<ContentColor>(cache);
 
-        let size = ctx.content_box_size();
+        let content_box = ctx.content_box();
+        let size = content_box.size();
         let half_size = size * 0.5;
 
         let mut arrow = BezPath::new();
@@ -180,7 +174,7 @@ impl Widget for DisclosureButton {
         arrow.line_to((half_size.width, 0.0));
         arrow.line_to((0.0, half_size.height));
 
-        let mut affine = Affine::translate(half_size.to_vec2());
+        let mut affine = Affine::translate(content_box.center().to_vec2());
 
         // Rotate if it's disclosed
         if self.is_disclosed() {
@@ -190,7 +184,7 @@ impl Widget for DisclosureButton {
         painter
             .stroke(
                 arrow,
-                &Stroke::new(2.0 * scale).with_join(Join::Miter),
+                &Stroke::new(2.0).with_join(Join::Miter),
                 button_color.color,
             )
             .transform(affine)
@@ -200,7 +194,7 @@ impl Widget for DisclosureButton {
             // TODO: Perhaps change the color of the arrow instead?
             let rect = ctx.border_box().to_rounded_rect(2.0);
             painter
-                .stroke(rect, &Stroke::new(1.0 * scale), BrushRef::Solid(LIGHT_BLUE))
+                .stroke(rect, &Stroke::new(1.0), BrushRef::Solid(LIGHT_BLUE))
                 .draw();
         }
     }
diff --git a/masonry/src/widgets/divider.rs b/masonry/src/widgets/divider.rs
index 5e72fdb45..c054cce65 100644
--- a/masonry/src/widgets/divider.rs
+++ b/masonry/src/widgets/divider.rs
@@ -21,7 +21,7 @@ use crate::layout::{LayoutSize, Length, SizeDef, UnitPoint};
 use crate::properties::ContentColor;
 use crate::widgets::Label;
 
-// TODO: Do proper hairline layout/paint after scale rework has happened.
+// TODO: Use snap-aware hairline layout/paint once Masonry has presentation snapping helpers.
 
 /// A line to divide your content.
 ///
@@ -606,27 +606,23 @@ impl Widget for Divider {
         _props: &PropertiesRef<'_>,
         axis: Axis,
         len_req: LenReq,
-        cross_length: Option<f64>,
-    ) -> f64 {
-        // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-        //       https://github.com/linebender/xilem/issues/1264
-        let scale = 1.0;
-
-        const DEFAULT_LENGTH: f64 = 100.;
-        let thickness = self.thickness.map(|t| t.dp(scale)).unwrap_or(1.);
+        cross_length: Option<Length>,
+    ) -> Length {
+        const DEFAULT_LENGTH: Length = Length::const_px(100.);
+        let thickness = self.thickness.unwrap_or(Length::const_px(1.));
 
         let content_length = if let Some(content) = &mut self.content {
             let auto_length = len_req.into();
             let context_size = LayoutSize::maybe(axis.cross(), cross_length);
             ctx.compute_length(content, auto_length, context_size, axis, cross_length)
         } else {
-            0.
+            Length::ZERO
         };
 
         if axis == self.axis {
             match len_req {
                 LenReq::MinContent => content_length,
-                LenReq::MaxContent => (DEFAULT_LENGTH * scale).max(content_length),
+                LenReq::MaxContent => DEFAULT_LENGTH.max(content_length),
                 LenReq::FitContent(space) => space.max(content_length),
             }
         } else {
@@ -635,10 +631,6 @@ impl Widget for Divider {
     }
 
     fn layout(&mut self, ctx: &mut LayoutCtx<'_>, _props: &PropertiesRef<'_>, size: Size) {
-        // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-        //       https://github.com/linebender/xilem/issues/1264
-        let scale = 1.0;
-
         // Clear any previously laid out lines.
         self.lines.clear();
 
@@ -663,10 +655,9 @@ impl Widget for Divider {
             });
         }
 
-        let thickness = self.thickness.map(|t| t.dp(scale)).unwrap_or(1.);
+        let thickness = self.thickness.map(|t| t.get()).unwrap_or(1.);
         let cross_pos = size.get_coord(self.axis.cross()) * 0.5;
-        let mut dashes: SmallVec<[f64; 4]> =
-            self.dash_pattern.iter().map(|l| l.dp(scale)).collect();
+        let mut dashes: SmallVec<[f64; 4]> = self.dash_pattern.iter().map(|l| l.get()).collect();
 
         if let Some(content) = &mut self.content {
             let content_size = ctx.compute_size(content, SizeDef::fit(size), size.into());
@@ -688,7 +679,7 @@ impl Widget for Divider {
 
             ctx.derive_baselines(content);
 
-            let pad = self.pad.dp(scale);
+            let pad = self.pad.get();
             let mut line_space = size.get_coord(self.axis)
                 - self.total_cap_overhang(thickness)
                 - content_size.get_coord(self.axis)
@@ -745,16 +736,12 @@ impl Widget for Divider {
         props: &PropertiesRef<'_>,
         painter: &mut Painter<'_>,
     ) {
-        // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-        //       https://github.com/linebender/xilem/issues/1264
-        let scale = 1.0;
-
-        // TODO: Remove HACK: After scale factor rework this can be a simple 1.
-        let one_dp = 1. / ctx.get_scale_factor();
+        // TODO: Replace with snap-aware paint helper once that exists.
+        let one_dp = 1. / ctx.scale_factor();
 
         let cache = ctx.property_cache();
         let color = props.get::<ContentColor>(cache);
-        let thickness = self.thickness.map(|t| t.dp(scale)).unwrap_or(one_dp);
+        let thickness = self.thickness.map(|t| t.get()).unwrap_or(one_dp);
 
         for line in &self.lines {
             let style = Stroke {
@@ -903,7 +890,7 @@ mod tests {
                 .prepare(),
         )
         .prepare()
-        .with_props(Padding::all(10.));
+        .with_props(Padding::all(10.px()));
 
         let mut harness = TestHarness::create_with_size(test_property_set(), root, (150, 120));
 
@@ -934,7 +921,7 @@ mod tests {
                 .with_props(Background::Color(palette::css::MIDNIGHT_BLUE)),
         )
         .prepare()
-        .with_props(Padding::all(10.));
+        .with_props(Padding::all(10.px()));
 
         let mut harness = TestHarness::create_with_size(test_property_set(), root, (155, 90));
 
diff --git a/masonry/src/widgets/flex.rs b/masonry/src/widgets/flex.rs
index f9e867ae3..32d046a1b 100644
--- a/masonry/src/widgets/flex.rs
+++ b/masonry/src/widgets/flex.rs
@@ -13,7 +13,7 @@ use crate::core::{
 };
 use crate::imaging::Painter;
 use crate::kurbo::{Axis, Size};
-use crate::layout::{LayoutSize, LenDef, LenReq, Length};
+use crate::layout::{AsUnit, LayoutSize, LenDef, LenReq, Length};
 use crate::properties::Gap;
 use crate::properties::types::{CrossAxisAlignment, MainAxisAlignment};
 use crate::util::Sanitize;
@@ -118,7 +118,7 @@ enum Child {
         /// Ephemeral resolved basis.
         ///
         /// It is a logic error to read this value before writing to it in the same method.
-        basis_resolved: f64,
+        basis_resolved: Length,
     },
     Spacer {
         flex: f64,
@@ -126,11 +126,11 @@ enum Child {
         /// Ephemeral resolved basis.
         ///
         /// It is a logic error to read this value before writing to it in the same method.
-        basis_resolved: f64,
+        basis_resolved: Length,
         /// Ephemeral resolved length.
         ///
         /// It is a logic error to read this value before writing to it in the same method.
-        length_resolved: f64,
+        length_resolved: Length,
     },
 }
 
@@ -200,8 +200,8 @@ impl Flex {
         let new_child = Child::Spacer {
             flex: 0.,
             basis: len,
-            basis_resolved: 0.,
-            length_resolved: 0.,
+            basis_resolved: Length::ZERO,
+            length_resolved: Length::ZERO,
         };
         self.children.push(new_child);
         self
@@ -220,8 +220,8 @@ impl Flex {
         let new_child = Child::Spacer {
             flex,
             basis: Length::ZERO,
-            basis_resolved: 0.,
-            length_resolved: 0.,
+            basis_resolved: Length::ZERO,
+            length_resolved: Length::ZERO,
         };
         self.children.push(new_child);
         self
@@ -266,8 +266,8 @@ impl Flex {
         let new_child = Child::Spacer {
             flex: 0.,
             basis: len,
-            basis_resolved: 0.,
-            length_resolved: 0.,
+            basis_resolved: Length::ZERO,
+            length_resolved: Length::ZERO,
         };
         this.widget.children.push(new_child);
         this.ctx.request_layout();
@@ -286,8 +286,8 @@ impl Flex {
         let new_child = Child::Spacer {
             flex,
             basis: Length::ZERO,
-            basis_resolved: 0.,
-            length_resolved: 0.,
+            basis_resolved: Length::ZERO,
+            length_resolved: Length::ZERO,
         };
         this.widget.children.push(new_child);
         this.ctx.request_layout();
@@ -315,8 +315,8 @@ impl Flex {
         let new_child = Child::Spacer {
             flex: 0.,
             basis: len,
-            basis_resolved: 0.,
-            length_resolved: 0.,
+            basis_resolved: Length::ZERO,
+            length_resolved: Length::ZERO,
         };
         this.widget.children.insert(idx, new_child);
         this.ctx.request_layout();
@@ -337,8 +337,8 @@ impl Flex {
         let new_child = Child::Spacer {
             flex,
             basis: Length::ZERO,
-            basis_resolved: 0.,
-            length_resolved: 0.,
+            basis_resolved: Length::ZERO,
+            length_resolved: Length::ZERO,
         };
         this.widget.children.insert(idx, new_child);
         this.ctx.request_layout();
@@ -373,8 +373,8 @@ impl Flex {
         let new_child = Child::Spacer {
             flex: 0.,
             basis: len,
-            basis_resolved: 0.,
-            length_resolved: 0.,
+            basis_resolved: Length::ZERO,
+            length_resolved: Length::ZERO,
         };
         let old_child = std::mem::replace(&mut this.widget.children[idx], new_child);
         if let Child::Widget { widget, .. } = old_child {
@@ -399,8 +399,8 @@ impl Flex {
         let new_child = Child::Spacer {
             flex,
             basis: Length::ZERO,
-            basis_resolved: 0.,
-            length_resolved: 0.,
+            basis_resolved: Length::ZERO,
+            length_resolved: Length::ZERO,
         };
         let old_child = std::mem::replace(&mut this.widget.children[idx], new_child);
         if let Child::Widget { widget, .. } = old_child {
@@ -501,8 +501,8 @@ impl CollectionWidget<FlexParams> for Flex {
             Child::Spacer {
                 flex: 0.,
                 basis: Length::ZERO,
-                basis_resolved: 0.,
-                length_resolved: 0.,
+                basis_resolved: Length::ZERO,
+                length_resolved: Length::ZERO,
             },
         );
         let widget = match child_val {
@@ -632,7 +632,7 @@ fn new_child(params: impl Into<FlexParams>, child: WidgetPod<dyn Widget>) -> Chi
         alignment: params.alignment,
         flex: params.flex,
         basis: params.basis,
-        basis_resolved: 0.,
+        basis_resolved: Length::ZERO,
     }
 }
 
@@ -702,12 +702,8 @@ impl Widget for Flex {
         len_req: LenReq,
         // The usual cross_length input has been named perp_length here,
         // to remove the collision with flex cross, which might not match.
-        perp_length: Option<f64>,
-    ) -> f64 {
-        // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-        //       https://github.com/linebender/xilem/issues/1264
-        let scale = 1.0;
-
+        perp_length: Option<Length>,
+    ) -> Length {
         let perp = measure_axis.cross();
         let main = self.direction;
         let cross = main.cross();
@@ -715,7 +711,7 @@ impl Widget for Flex {
         let cache = ctx.property_cache();
         let gap = props.get::<Gap>(cache);
 
-        let gap_length = gap.gap.dp(scale);
+        let gap_length = gap.gap.get();
         let gap_count = self.children.len().saturating_sub(1);
 
         let (main_space, cross_space) = if perp == main {
@@ -726,7 +722,7 @@ impl Widget for Flex {
         let context_size = LayoutSize::maybe(perp, perp_length);
 
         let (len_req, min_result) = match len_req {
-            LenReq::MinContent | LenReq::MaxContent => (len_req, 0.),
+            LenReq::MinContent | LenReq::MaxContent => (len_req, Length::ZERO),
             // We always want to use up all offered space but may need even more,
             // so we implement FitContent as space.max(MinContent).
             LenReq::FitContent(space) => (LenReq::MinContent, space),
@@ -762,7 +758,7 @@ impl Widget for Flex {
                         FlexBasis::Zero => {
                             // TODO: When min/max constraints become a real thing,
                             //      then need to account for them here.
-                            *basis_resolved = 0.;
+                            *basis_resolved = Length::ZERO;
                         }
                     },
                     Child::Spacer {
@@ -770,13 +766,13 @@ impl Widget for Flex {
                         basis_resolved,
                         ..
                     } => {
-                        *basis_resolved = basis.dp(scale);
+                        *basis_resolved = *basis;
                     }
                 }
             }
         }
 
-        let mut length = 0.;
+        let mut length = Length::ZERO;
         if measure_axis == main {
             // Calculate the main axis length
 
@@ -809,7 +805,7 @@ impl Widget for Flex {
                                     );
                                     // Flexible children with a zero basis want to reach
                                     // their target length purely with flex space.
-                                    child_length / *flex
+                                    child_length.get() / *flex
                                 }
                             }
                         } else {
@@ -828,7 +824,7 @@ impl Widget for Flex {
             }
 
             // Calculate the total space needed for all children
-            length += self
+            let total_space_needed = self
                 .children
                 .iter()
                 .map(|child| match child {
@@ -841,12 +837,14 @@ impl Widget for Flex {
                         flex,
                         basis_resolved,
                         ..
-                    } => *basis_resolved + *flex * flex_fraction,
+                    } => basis_resolved.get() + *flex * flex_fraction,
                 })
                 .sum::<f64>();
+            length = length.saturating_add(total_space_needed.px());
 
             // Add all the gap lengths
-            length += gap_count as f64 * gap_length;
+            let gap_lengths = gap_count as f64 * gap_length;
+            length = length.saturating_add(gap_lengths.px());
         } else {
             // Calculate the cross axis length
 
@@ -869,17 +867,18 @@ impl Widget for Flex {
                             ..
                         } => {
                             flex_sum += *flex;
-                            main_space -= *basis_resolved;
+                            main_space = main_space.saturating_sub(*basis_resolved);
                         }
                     }
                 }
 
                 // Subtract gap lengths
-                main_space -= gap_count as f64 * gap_length;
+                let gap_lengths = gap_count as f64 * gap_length;
+                main_space = main_space.saturating_sub(gap_lengths.px());
 
                 // Calculate the flex fraction, i.e. the amount of space per one flex factor
                 if flex_sum > 0. {
-                    main_space.max(0.) / flex_sum
+                    main_space.get() / flex_sum
                 } else {
                     0.
                 }
@@ -894,8 +893,9 @@ impl Widget for Flex {
                         basis_resolved,
                         ..
                     } => {
-                        let child_main_length = flex_fraction
-                            .map(|flex_fraction| *basis_resolved + *flex * flex_fraction);
+                        let child_main_length = flex_fraction.map(|flex_fraction| {
+                            basis_resolved.saturating_add((*flex * flex_fraction).px())
+                        });
                         let cross_auto = len_req.into();
 
                         let child_cross_length = ctx.compute_length(
@@ -920,27 +920,25 @@ impl Widget for Flex {
     }
 
     fn layout(&mut self, ctx: &mut LayoutCtx<'_>, props: &PropertiesRef<'_>, size: Size) {
-        // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-        //       https://github.com/linebender/xilem/issues/1264
-        let scale = 1.0;
-
         let cache = ctx.property_cache();
         let gap = props.get::<Gap>(cache);
-        let gap_length = gap.gap.dp(scale);
+        let gap_length = gap.gap.get();
         let gap_count = self.children.len().saturating_sub(1);
 
         let main = self.direction;
         let cross = main.cross();
-        let cross_space = size.get_coord(cross);
+        let cross_space = size.get_coord(cross).px();
 
-        let mut main_space = size.get_coord(main) - gap_count as f64 * gap_length;
+        let mut main_space = (size.get_coord(main) - gap_count as f64 * gap_length)
+            .max(0.)
+            .px();
         let mut flex_sum = 0.;
 
         // Helper function to calculate child size when main length is decided
         let compute_child_size =
             |ctx: &mut LayoutCtx<'_>,
              child: &mut WidgetPod<dyn Widget + 'static>,
-             child_main_length: f64,
+             child_main_length: Length,
              alignment: &Option<CrossAxisAlignment>| {
                 let cross_auto = match alignment.unwrap_or(self.cross_alignment) {
                     // Cross stretch is merely an auto fallback, not an immediate choice.
@@ -957,7 +955,7 @@ impl Widget for Flex {
                     Some(child_main_length),
                 );
 
-                main.pack_size(child_main_length, child_cross_length)
+                main.pack_size(child_main_length.get(), child_cross_length.get())
             };
 
         // Sum flex factors, resolve bases, subtract bases from main space,
@@ -982,13 +980,13 @@ impl Widget for Flex {
                                 main,
                                 Some(cross_space),
                             );
-                            main_space -= *basis_resolved;
+                            main_space = main_space.saturating_sub(*basis_resolved);
                         }
                         FlexBasis::Zero => {
                             // TODO: When min/max constraints become a real thing,
                             //      then need to account for them here, and also
                             //      subtract the result for main_space.
-                            *basis_resolved = 0.;
+                            *basis_resolved = Length::ZERO;
                         }
                     }
                     if *flex == 0. {
@@ -1007,8 +1005,8 @@ impl Widget for Flex {
                     basis_resolved,
                     length_resolved,
                 } => {
-                    *basis_resolved = basis.dp(scale);
-                    main_space -= *basis_resolved;
+                    *basis_resolved = *basis;
+                    main_space = main_space.saturating_sub(*basis_resolved);
 
                     if *flex == 0. {
                         *length_resolved = *basis_resolved;
@@ -1021,7 +1019,7 @@ impl Widget for Flex {
 
         // Calculate the flex fraction, i.e. the amount of space per one flex factor
         let flex_fraction = if flex_sum > 0. {
-            main_space.max(0.) / flex_sum
+            main_space.get() / flex_sum
         } else {
             0.
         };
@@ -1040,12 +1038,14 @@ impl Widget for Flex {
                     // When Flex gets configurable grow/shrink support,
                     // and min/max style constraints get implemented,
                     // this distribution will need to evolve into a looped solver.
-                    let child_main_length = *basis_resolved + *flex * flex_fraction;
+                    let child_main_length =
+                        basis_resolved.saturating_add((*flex * flex_fraction).px());
                     let child_size = compute_child_size(ctx, widget, child_main_length, alignment);
 
                     ctx.run_layout(widget, child_size);
 
-                    main_space -= child_main_length - *basis_resolved;
+                    main_space = main_space
+                        .saturating_sub(child_main_length.saturating_sub(*basis_resolved));
                 }
                 Child::Spacer {
                     flex,
@@ -1053,9 +1053,11 @@ impl Widget for Flex {
                     length_resolved,
                     ..
                 } if *flex > 0. => {
-                    let child_main_length = *basis_resolved + *flex * flex_fraction;
+                    let child_main_length =
+                        basis_resolved.saturating_add((*flex * flex_fraction).px());
                     *length_resolved = child_main_length;
-                    main_space -= *length_resolved - *basis_resolved;
+                    main_space =
+                        main_space.saturating_sub(length_resolved.saturating_sub(*basis_resolved));
                 }
                 _ => (),
             }
@@ -1068,7 +1070,7 @@ impl Widget for Flex {
             .filter(|child| child.is_widget())
             .count();
         let (space_before, space_between) =
-            get_spacing(self.main_alignment, main_space.max(0.), widget_count);
+            get_spacing(self.main_alignment, main_space.get(), widget_count);
 
         // Determine the shared cross alignment baselines.
         // As we currently only support the horizontal-tb writing mode, we do it only for rows.
@@ -1128,11 +1130,11 @@ impl Widget for Flex {
                             let (_, last_baseline) = ctx.child_layout_baselines(widget);
                             let descent = child_size.get_coord(cross) - last_baseline;
                             let end_gap = alignment_descent.unwrap() - descent;
-                            let cross_unused = cross_space - child_size.get_coord(cross);
+                            let cross_unused = cross_space.get() - child_size.get_coord(cross);
                             cross_unused - end_gap
                         }
                         _ => {
-                            let cross_unused = cross_space - child_size.get_coord(cross);
+                            let cross_unused = cross_space.get() - child_size.get_coord(cross);
                             alignment.offset(cross_unused)
                         }
                     };
@@ -1147,7 +1149,7 @@ impl Widget for Flex {
                 Child::Spacer {
                     length_resolved, ..
                 } => {
-                    main_offset += *length_resolved;
+                    main_offset += length_resolved.get();
                     main_offset += gap_length;
                     previous_was_widget = false;
                 }
@@ -1188,7 +1190,7 @@ impl Widget for Flex {
                         .unwrap()
                         .widget()
                         .unwrap();
-                    let (first_baseline, _) = ctx.child_aligned_baselines(first_child);
+                    let (first_baseline, _) = ctx.child_baselines(first_child);
                     let first_child_origin = ctx.child_origin(first_child);
                     let first_baseline = first_child_origin.y + first_baseline;
 
@@ -1199,7 +1201,7 @@ impl Widget for Flex {
                         .unwrap()
                         .widget()
                         .unwrap();
-                    let (_, last_baseline) = ctx.child_aligned_baselines(last_child);
+                    let (_, last_baseline) = ctx.child_baselines(last_child);
                     let last_child_origin = ctx.child_origin(last_child);
                     let last_baseline = last_child_origin.y + last_baseline;
 
@@ -1391,7 +1393,7 @@ mod tests {
                 .with_fixed(Label::new("foo").prepare())
                 .with_fixed(Label::new("bar").prepare()),
         )
-        .with_props((BorderWidth::all(2.0), BorderColor::new(ACCENT_COLOR)));
+        .with_props((BorderWidth::all(2.px()), BorderColor::new(ACCENT_COLOR)));
 
         let mut harness = TestHarness::create_with_size(test_property_set(), widget, (200, 150));
 
@@ -1439,7 +1441,7 @@ mod tests {
                     FlexParams::new(2.0, None, CrossAxisAlignment::Start),
                 ),
         )
-        .with_props((BorderWidth::all(2.0), BorderColor::new(ACCENT_COLOR)));
+        .with_props((BorderWidth::all(2.px()), BorderColor::new(ACCENT_COLOR)));
 
         let mut harness = TestHarness::create_with_size(test_property_set(), widget, (200, 150));
 
@@ -1486,7 +1488,7 @@ mod tests {
                 .with_fixed(Label::new("foo").prepare())
                 .with(Label::new("bar").prepare(), CrossAxisAlignment::Start),
         )
-        .with_props((BorderWidth::all(2.0), BorderColor::new(ACCENT_COLOR)));
+        .with_props((BorderWidth::all(2.px()), BorderColor::new(ACCENT_COLOR)));
 
         let mut harness = TestHarness::create_with_size(test_property_set(), widget, (200, 150));
 
@@ -1535,7 +1537,7 @@ mod tests {
                     FlexParams::new(2.0, None, CrossAxisAlignment::Start),
                 ),
         )
-        .with_props((BorderWidth::all(2.0), BorderColor::new(ACCENT_COLOR)));
+        .with_props((BorderWidth::all(2.px()), BorderColor::new(ACCENT_COLOR)));
 
         let mut harness = TestHarness::create_with_size(test_property_set(), widget, (200, 150));
 
@@ -1582,7 +1584,7 @@ mod tests {
                 .with_fixed(Label::new("foo").prepare())
                 .with(Label::new("bar").prepare(), CrossAxisAlignment::Start),
         )
-        .with_props((BorderWidth::all(2.0), BorderColor::new(ACCENT_COLOR)));
+        .with_props((BorderWidth::all(2.px()), BorderColor::new(ACCENT_COLOR)));
 
         let mut harness = TestHarness::create_with_size(test_property_set(), widget, (200, 150));
 
@@ -1626,10 +1628,10 @@ mod tests {
                 Padding {
                     top,
                     bottom,
-                    left: 0.,
-                    right: 0.,
+                    left: Length::ZERO,
+                    right: Length::ZERO,
                 },
-                BorderWidth::all(1.),
+                BorderWidth::all(1.px()),
                 BorderColor::new(palette::css::CYAN),
             )
         };
@@ -1639,34 +1641,50 @@ mod tests {
         let flex = NewWidget::new(
             Flex::row()
                 .cross_axis_alignment(CrossAxisAlignment::Center)
-                .with_fixed(Label::new("Left").prepare().with_props(props(0., 0.)))
-                .with_fixed(Label::new("A\nB").prepare().with_props(props(30., 10.)))
-                .with_fixed(Label::new("C\nD\nE").prepare().with_props(props(20., 115.)))
+                .with_fixed(
+                    Label::new("Left")
+                        .prepare()
+                        .with_props(props(0.px(), 0.px())),
+                )
+                .with_fixed(
+                    Label::new("A\nB")
+                        .prepare()
+                        .with_props(props(30.px(), 10.px())),
+                )
+                .with_fixed(
+                    Label::new("C\nD\nE")
+                        .prepare()
+                        .with_props(props(20.px(), 115.px())),
+                )
                 .with_fixed(
                     Label::new("F\nG\nH\nI")
                         .prepare()
-                        .with_props(props(20., 20.)),
+                        .with_props(props(20.px(), 20.px())),
                 )
                 .with_fixed(
                     Label::new("J\nK\nL\nM\nN")
                         .prepare()
-                        .with_props(props(0., 30.)),
+                        .with_props(props(0.px(), 30.px())),
                 )
                 .with_fixed(
                     Label::new("Right\nToo")
                         .prepare()
-                        .with_props(props(50., 50.)),
+                        .with_props(props(50.px(), 50.px())),
                 ),
         )
         .with_tag(flex_tag)
-        .with_props((BorderWidth::all(2.0), BorderColor::new(ACCENT_COLOR)));
+        .with_props((BorderWidth::all(2.px()), BorderColor::new(ACCENT_COLOR)));
 
         let root = Flex::row()
             .cross_axis_alignment(CrossAxisAlignment::FirstBaseline)
-            .with_fixed(Label::new("Out").prepare().with_props(props(10., 10.)))
+            .with_fixed(
+                Label::new("Out")
+                    .prepare()
+                    .with_props(props(10.px(), 10.px())),
+            )
             .with(flex, 1.0)
             .prepare()
-            .with_props((Gap::new(0.px()), Padding::all(20.)));
+            .with_props((Gap::new(0.px()), Padding::all(20.px())));
 
         let mut harness = TestHarness::create_with_size(test_property_set(), root, (240, 240));
 
@@ -1744,8 +1762,8 @@ mod tests {
             let def = Def { ascent, descent };
             ModularWidget::new(def)
                 .measure_fn(|s, _, _, axis, _, _| match axis {
-                    Axis::Horizontal => 10.,
-                    Axis::Vertical => s.ascent + s.descent,
+                    Axis::Horizontal => 10.px(),
+                    Axis::Vertical => (s.ascent + s.descent).px(),
                 })
                 .layout_fn(|s, ctx, _, _| {
                     ctx.set_baselines(s.ascent, s.ascent);
@@ -1796,7 +1814,7 @@ mod tests {
 
         let props = (
             Gap::new(0.px()),
-            BorderWidth::all(1.),
+            BorderWidth::all(1.px()),
             BorderColor::new(palette::css::DARK_GRAY),
             Dimensions::height(14.px()),
         );
@@ -1806,7 +1824,7 @@ mod tests {
             .with_fixed(first.prepare().with_props(props))
             .with_fixed(last.prepare().with_props(props))
             .prepare()
-            .with_props((Gap::new(2.px()), Padding::all(10.)));
+            .with_props((Gap::new(2.px()), Padding::all(10.px())));
 
         let mut harness = TestHarness::create_with_size(test_property_set(), root, (450, 50));
 
diff --git a/masonry/src/widgets/grid.rs b/masonry/src/widgets/grid.rs
index 0ed691c94..9a2d7983d 100644
--- a/masonry/src/widgets/grid.rs
+++ b/masonry/src/widgets/grid.rs
@@ -13,7 +13,7 @@ use crate::core::{
 };
 use crate::imaging::Painter;
 use crate::kurbo::{Axis, Point, Size};
-use crate::layout::{LayoutSize, LenReq, SizeDef};
+use crate::layout::{AsUnit, LayoutSize, LenReq, Length, SizeDef};
 use crate::properties::Gap;
 use crate::util::debug_panic;
 
@@ -302,25 +302,21 @@ impl Widget for Grid {
         props: &PropertiesRef<'_>,
         axis: Axis,
         len_req: LenReq,
-        cross_length: Option<f64>,
-    ) -> f64 {
-        // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-        //       https://github.com/linebender/xilem/issues/1264
-        let scale = 1.0;
-
+        cross_length: Option<Length>,
+    ) -> Length {
         let cache = ctx.property_cache();
         let gap = props.get::<Gap>(cache);
 
-        let gap_length = gap.gap.dp(scale);
+        let gap_length = gap.gap.get();
 
         let cross = axis.cross();
         let cross_track_cells = self.track_cells(cross) as f64;
         let cross_cell_length = cross_length
             .filter(|_| cross_track_cells > 0.) // Guard against div by zero
-            .map(|cross_length| (cross_length + gap_length) / cross_track_cells);
+            .map(|cross_length| (cross_length.get() + gap_length) / cross_track_cells);
 
         let (len_req, min_result) = match len_req {
-            LenReq::MinContent | LenReq::MaxContent => (len_req, 0.),
+            LenReq::MinContent | LenReq::MaxContent => (len_req, Length::ZERO),
             // We always want to use up all offered space but may need even more,
             // so we implement FitContent as space.max(MinContent).
             LenReq::FitContent(space) => (LenReq::MinContent, space),
@@ -336,7 +332,7 @@ impl Widget for Grid {
                     let length = cross_area_cells * cross_cell_length - gap_length;
                     // Guard against the derived area length becoming negative,
                     // which can happen if total space can't fit all cells and gaps.
-                    length.max(0.)
+                    length.max(0.).px()
                 });
 
                 let auto_length = len_req.into();
@@ -350,26 +346,22 @@ impl Widget for Grid {
                     cross_area_length,
                 );
 
-                (child_length + gap_length) / area_cells
+                (child_length.get() + gap_length) / area_cells
             };
             cell_length = cell_length.max(desired_cell_length);
         }
 
         let track_cells = self.track_cells(axis) as f64;
-        let length = track_cells * cell_length - gap_length;
+        let length = (track_cells * cell_length - gap_length).px();
 
         min_result.max(length)
     }
 
     fn layout(&mut self, ctx: &mut LayoutCtx<'_>, props: &PropertiesRef<'_>, size: Size) {
-        // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-        //       https://github.com/linebender/xilem/issues/1264
-        let scale = 1.0;
-
         let cache = ctx.property_cache();
         let gap = props.get::<Gap>(cache);
 
-        let gap_length = gap.gap.dp(scale);
+        let gap_length = gap.gap.get();
 
         let cell_width = (size.width + gap_length) / self.grid_column_count as f64;
         let cell_height = (size.height + gap_length) / self.grid_row_count as f64;
@@ -406,7 +398,7 @@ impl Widget for Grid {
             min_row_children.sort_by_key(|c| c.x);
             let min_row_child = min_row_children.first().unwrap();
             let min_row_child_origin = ctx.child_origin(&min_row_child.widget);
-            let (first_baseline, _) = ctx.child_aligned_baselines(&min_row_child.widget);
+            let (first_baseline, _) = ctx.child_baselines(&min_row_child.widget);
             let first_baseline = min_row_child_origin.y + first_baseline;
 
             // Find the last occupied cell
@@ -418,7 +410,7 @@ impl Widget for Grid {
             max_row_children.sort_by_key(|c| c.x + c.width);
             let max_row_child = max_row_children.last().unwrap();
             let max_row_child_origin = ctx.child_origin(&max_row_child.widget);
-            let (_, last_baseline) = ctx.child_aligned_baselines(&max_row_child.widget);
+            let (_, last_baseline) = ctx.child_baselines(&max_row_child.widget);
             let last_baseline = max_row_child_origin.y + last_baseline;
 
             // Set the container baselines
@@ -628,28 +620,28 @@ mod tests {
         let grid = Grid::with_dimensions(3, 3)
             .with(
                 Label::new("A\nB").prepare().with_props((
-                    Padding::from_vh(0., 0.),
+                    Padding::from_vh(0.px(), 0.px()),
                     Background::Color(palette::css::ORANGE),
                 )),
                 GridParams::new(1, 0, 1, 1),
             )
             .with(
                 Label::new("C\nD").prepare().with_props((
-                    Padding::from_vh(8., 0.),
+                    Padding::from_vh(8.px(), 0.px()),
                     Background::Color(palette::css::DARK_BLUE),
                 )),
                 GridParams::new(0, 0, 1, 2),
             )
             .with(
                 Label::new("E\nF").prepare().with_props((
-                    Padding::from_vh(16., 0.),
+                    Padding::from_vh(16.px(), 0.px()),
                     Background::Color(palette::css::DARK_SALMON),
                 )),
                 GridParams::new(2, 0, 1, 3),
             )
             .with(
                 Label::new("G\nH").prepare().with_props((
-                    Padding::from_vh(24., 0.),
+                    Padding::from_vh(24.px(), 0.px()),
                     Background::Color(palette::css::DARK_SLATE_BLUE),
                 )),
                 GridParams::new(1, 1, 1, 2),
@@ -662,7 +654,7 @@ mod tests {
             .with_fixed(Label::new("Out").prepare())
             .with_fixed(grid)
             .prepare()
-            .with_props(Padding::all(10.));
+            .with_props(Padding::all(10.px()));
 
         let mut harness = TestHarness::create_with_size(test_property_set(), root, (150, 200));
 
diff --git a/masonry/src/widgets/image.rs b/masonry/src/widgets/image.rs
index dab06afff..263f04cf4 100644
--- a/masonry/src/widgets/image.rs
+++ b/masonry/src/widgets/image.rs
@@ -13,7 +13,7 @@ use crate::core::{
 };
 use crate::imaging::Painter;
 use crate::kurbo::{Axis, Size};
-use crate::layout::LenReq;
+use crate::layout::{LenReq, Length};
 use crate::peniko::ImageBrush;
 use crate::properties::ObjectFit;
 
@@ -113,18 +113,14 @@ impl Image {
 impl Image {
     /// Returns the preferred size of the image.
     ///
-    /// The returned size is in device pixels.
+    /// The returned size is in logical pixels.
     ///
-    /// This takes into account both [`IMAGE_SCALE`] and `scale`, and so the result
-    /// isn't just the image data size which would be const across scale factors.
-    ///
-    /// This method's result will be stable in relation to other widgets at any scale factor.
-    ///
-    /// Basically it provides logical pixels in device pixel space.
-    fn preferred_size(&self, scale: f64) -> Size {
+    /// This takes into account [`IMAGE_SCALE`], so a high-resolution resource can
+    /// have a stable preferred logical size.
+    fn preferred_size(&self) -> Size {
         Size::new(
-            self.image_data.image.width as f64 * scale / IMAGE_SCALE,
-            self.image_data.image.height as f64 * scale / IMAGE_SCALE,
+            self.image_data.image.width as f64 / IMAGE_SCALE,
+            self.image_data.image.height as f64 / IMAGE_SCALE,
         )
     }
 }
@@ -157,15 +153,11 @@ impl Widget for Image {
         props: &PropertiesRef<'_>,
         axis: Axis,
         len_req: LenReq,
-        cross_length: Option<f64>,
-    ) -> f64 {
-        // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-        //       https://github.com/linebender/xilem/issues/1264
-        let scale = 1.0;
-
+        cross_length: Option<Length>,
+    ) -> Length {
         let cache = ctx.property_cache();
         let object_fit = props.get::<ObjectFit>(cache);
-        let preferred_size = self.preferred_size(scale);
+        let preferred_size = self.preferred_size();
 
         object_fit.measure(axis, len_req, cross_length, preferred_size)
     }
@@ -187,7 +179,7 @@ impl Widget for Image {
             self.image_data.image.width as f64,
             self.image_data.image.height as f64,
         );
-        let transform = object_fit.affine(content_box.size(), image_size);
+        let transform = object_fit.affine(content_box, image_size.to_rect());
 
         painter.with_fill_clip(content_box, |painter| {
             painter.draw_image(&self.image_data, transform);
diff --git a/masonry/src/widgets/indexed_stack.rs b/masonry/src/widgets/indexed_stack.rs
index 7356eccf8..ee27d358f 100644
--- a/masonry/src/widgets/indexed_stack.rs
+++ b/masonry/src/widgets/indexed_stack.rs
@@ -13,7 +13,7 @@ use crate::core::{
 };
 use crate::imaging::Painter;
 use crate::kurbo::{Axis, Point, Size};
-use crate::layout::{LayoutSize, LenReq, SizeDef};
+use crate::layout::{LayoutSize, LenReq, Length, SizeDef};
 
 // TODO - Rename "active" widget to "visible" widget?
 // Active already means something else.
@@ -231,8 +231,8 @@ impl Widget for IndexedStack {
         _props: &PropertiesRef<'_>,
         axis: Axis,
         len_req: LenReq,
-        cross_length: Option<f64>,
-    ) -> f64 {
+        cross_length: Option<Length>,
+    ) -> Length {
         if !self.children.is_empty() {
             let auto_length = len_req.into();
             let context_size = LayoutSize::maybe(axis.cross(), cross_length);
@@ -245,7 +245,7 @@ impl Widget for IndexedStack {
                 cross_length,
             )
         } else {
-            0.
+            Length::ZERO
         }
     }
 
diff --git a/masonry/src/widgets/label.rs b/masonry/src/widgets/label.rs
index 325bce466..88c5b05b9 100644
--- a/masonry/src/widgets/label.rs
+++ b/masonry/src/widgets/label.rs
@@ -16,7 +16,7 @@ use crate::core::{
 };
 use crate::imaging::Painter;
 use crate::kurbo::{Affine, Axis, Point, Size};
-use crate::layout::LenReq;
+use crate::layout::{AsUnit, LenReq, Length};
 use crate::parley::{FontContext, Layout, LayoutAccessibility, LayoutContext};
 use crate::properties::{ContentColor, LineBreaking};
 use crate::theme::default_text_styles;
@@ -499,8 +499,8 @@ impl Widget for Label {
         props: &PropertiesRef<'_>,
         axis: Axis,
         len_req: LenReq,
-        cross_length: Option<f64>,
-    ) -> f64 {
+        cross_length: Option<Length>,
+    ) -> Length {
         // Currently we only support the common horizontal-tb writing mode,
         // so we hardcode the assumption that inline axis is horizontal.
         let inline = Axis::Horizontal;
@@ -517,7 +517,7 @@ impl Widget for Label {
                     // This is a common optimization also present on the web.
                     match len_req {
                         // Zero space will get us the length of longest unbreakable word
-                        LenReq::MinContent => Some(0.),
+                        LenReq::MinContent => Some(Length::ZERO),
                         // Unbounded space will get us the length of the unwrapped string
                         LenReq::MaxContent => None,
                         // Attempt to wrap according to the parent's request
@@ -528,7 +528,7 @@ impl Widget for Label {
                     // If there is no explicit cross_length present, we fall back to inline defaults.
                     match len_req {
                         // Fallback is inline axis MinContent
-                        LenReq::MinContent => cross_length.or(Some(0.)),
+                        LenReq::MinContent => cross_length.or(Some(Length::ZERO)),
                         // Fallback is inline axis MaxContent, even for FitContent, because
                         // as we don't have the inline space bound we'll consider it unbounded.
                         LenReq::MaxContent | LenReq::FitContent(_) => cross_length,
@@ -538,7 +538,7 @@ impl Widget for Label {
             // If we're never wrapping, then there's no max advance.
             LineBreaking::Clip | LineBreaking::Overflow => None,
         }
-        .map(|v| v as f32);
+        .map(|v| v.get() as f32);
 
         let (font_ctx, layout_ctx) = ctx.text_contexts();
         let layout_idx = self.build_and_break(font_ctx, layout_ctx, max_advance);
@@ -550,7 +550,7 @@ impl Widget for Label {
             layout.layout.height() // Block length
         };
 
-        length as f64
+        length.px()
     }
 
     fn layout(&mut self, ctx: &mut LayoutCtx<'_>, props: &PropertiesRef<'_>, size: Size) {
@@ -623,7 +623,8 @@ impl Widget for Label {
         props: &PropertiesRef<'_>,
         node: &mut Node,
     ) {
-        let text_origin_in_border_box_space = Point::ORIGIN + ctx.border_box_translation();
+        let text_origin_in_layout_border_box_space =
+            Point::ORIGIN + ctx.visual_translation() + ctx.border_box_translation();
 
         let cache = ctx.property_cache();
         let text_color = props.get::<ContentColor>(cache);
@@ -636,8 +637,8 @@ impl Widget for Label {
             ctx.tree_update(),
             node,
             AccessCtx::next_node_id,
-            text_origin_in_border_box_space.x,
-            text_origin_in_border_box_space.y,
+            text_origin_in_layout_border_box_space.x,
+            text_origin_in_layout_border_box_space.y,
             |node, style| set_accesskit_brush_properties(node, style, &[text_color.color.into()]),
         );
     }
diff --git a/masonry/src/widgets/pagination.rs b/masonry/src/widgets/pagination.rs
index 7b9b9fa78..ad5bc2001 100644
--- a/masonry/src/widgets/pagination.rs
+++ b/masonry/src/widgets/pagination.rs
@@ -13,7 +13,7 @@ use crate::core::{
 };
 use crate::imaging::Painter;
 use crate::kurbo::{Axis, Point, Size};
-use crate::layout::{LayoutSize, LenReq, SizeDef};
+use crate::layout::{LayoutSize, LenReq, Length, SizeDef};
 use crate::widgets::{Button, ButtonPress, Label};
 
 /// Pagination for navigating between different page numbers.
@@ -315,9 +315,9 @@ impl Widget for Pagination {
         _props: &PropertiesRef<'_>,
         axis: Axis,
         len_req: LenReq,
-        cross_length: Option<f64>,
-    ) -> f64 {
-        let mut length = 0.;
+        cross_length: Option<Length>,
+    ) -> Length {
+        let mut length = Length::ZERO;
 
         let context_size = LayoutSize::maybe(axis.cross(), cross_length);
 
@@ -331,7 +331,7 @@ impl Widget for Pagination {
                 cross_length,
             );
             length = match axis {
-                Axis::Horizontal => length + button_length,
+                Axis::Horizontal => length.saturating_add(button_length),
                 Axis::Vertical => length.max(button_length),
             };
         }
diff --git a/masonry/src/widgets/passthrough.rs b/masonry/src/widgets/passthrough.rs
index d3882b7e6..09a9b4f30 100644
--- a/masonry/src/widgets/passthrough.rs
+++ b/masonry/src/widgets/passthrough.rs
@@ -10,7 +10,7 @@ use crate::core::{
 };
 use crate::imaging::Painter;
 use crate::kurbo::{Axis, Point, Size};
-use crate::layout::LenReq;
+use crate::layout::{LenReq, Length};
 
 /// A pass-through container that hosts exactly one child, which may be replaced dynamically.
 ///
@@ -93,8 +93,8 @@ impl Widget for Passthrough {
         _props: &PropertiesRef<'_>,
         axis: Axis,
         _len_req: LenReq,
-        cross_length: Option<f64>,
-    ) -> f64 {
+        cross_length: Option<Length>,
+    ) -> Length {
         ctx.redirect_measurement(&mut self.inner, axis, cross_length)
     }
 
diff --git a/masonry/src/widgets/portal.rs b/masonry/src/widgets/portal.rs
index 9a894d90a..fef6257ea 100644
--- a/masonry/src/widgets/portal.rs
+++ b/masonry/src/widgets/portal.rs
@@ -15,7 +15,7 @@ use crate::core::{
 use crate::dpi::{LogicalPosition, PhysicalPosition};
 use crate::imaging::Painter;
 use crate::kurbo::{Axis, Point, Rect, Size, Vec2};
-use crate::layout::{LayoutSize, LenDef, LenReq, SizeDef};
+use crate::layout::{AsUnit, LayoutSize, LenDef, LenReq, Length, SizeDef};
 use crate::widgets::ScrollBar;
 
 // TODO - refactor - see https://github.com/linebender/xilem/issues/366
@@ -353,7 +353,7 @@ impl<W: Widget + FromDynWidget + ?Sized> Portal<W> {
     ///
     /// A position of zero means no scrolling at all.
     pub fn set_viewport_pos(this: &mut WidgetMut<'_, Self>, position: Point) -> bool {
-        let portal_size = this.ctx.content_box_size();
+        let portal_size = this.ctx.layout_content_box().size();
         let content_size = this.widget.content_size;
 
         let pos_changed = this
@@ -381,7 +381,7 @@ impl<W: Widget + FromDynWidget + ?Sized> Portal<W> {
     /// `target` is in the child's border-box coordinate space, meaning a target
     /// of `(0, 0, 10, 10)` will scroll an item at the top-left of the child into view.
     pub fn pan_viewport_to(this: &mut WidgetMut<'_, Self>, target: Rect) -> bool {
-        let portal_size = this.ctx.content_box_size();
+        let portal_size = this.ctx.layout_content_box().size();
         let viewport = Rect::from_origin_size(this.widget.viewport_pos, portal_size);
 
         let new_pos_x = compute_pan_range(
@@ -409,14 +409,12 @@ impl<W: Widget + FromDynWidget + ?Sized> Widget for Portal<W> {
         _props: &mut PropertiesMut<'_>,
         event: &PointerEvent,
     ) {
-        let portal_size = ctx.content_box_size();
+        let portal_size = ctx.layout_content_box().size();
         let content_size = self.content_size;
 
         match *event {
             PointerEvent::Scroll(PointerScrollEvent { delta, .. }) => {
-                // TODO - Remove reference to scale factor.
-                // See https://github.com/linebender/xilem/issues/1264
-                let scale_factor = ctx.get_scale_factor();
+                let scale_factor = ctx.scale_factor();
                 let line_px = PhysicalPosition {
                     x: 120.0 * scale_factor,
                     y: 120.0 * scale_factor,
@@ -457,7 +455,7 @@ impl<W: Widget + FromDynWidget + ?Sized> Widget for Portal<W> {
         _props: &mut PropertiesMut<'_>,
         event: &TextEvent,
     ) {
-        let portal_size = ctx.content_box_size();
+        let portal_size = ctx.layout_content_box().size();
         let content_size = self.content_size;
         let target = ctx.target();
         let scrollbar_target =
@@ -470,12 +468,8 @@ impl<W: Widget + FromDynWidget + ?Sized> Widget for Portal<W> {
             // the arrow/page/home/end keys.
             && !scrollbar_target
         {
-            // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-            //       https://github.com/linebender/xilem/issues/1264
-            let scale = 1.0;
-
-            let line = 120.0 * scale;
-            let page_y = portal_size.height * scale;
+            let line = 120.0;
+            let page_y = portal_size.height;
 
             use crate::core::keyboard::{Key, NamedKey};
             let mut did_scroll = false;
@@ -565,7 +559,7 @@ impl<W: Widget + FromDynWidget + ?Sized> Widget for Portal<W> {
         _props: &mut PropertiesMut<'_>,
         event: &AccessEvent,
     ) {
-        let portal_size = ctx.content_box_size();
+        let portal_size = ctx.layout_content_box().size();
         let content_size = self.content_size;
         let target = ctx.target();
         let scrollbar_target =
@@ -580,23 +574,19 @@ impl<W: Widget + FromDynWidget + ?Sized> Widget for Portal<W> {
                     | accesskit::Action::ScrollRight
             )
         {
-            // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-            //       https://github.com/linebender/xilem/issues/1264
-            let scale = 1.0;
-
             let unit = if let Some(accesskit::ActionData::ScrollUnit(unit)) = &event.data {
                 *unit
             } else {
                 accesskit::ScrollUnit::Item
             };
-            let line = 120.0 * scale;
+            let line = 120.0;
             let amount = match unit {
                 accesskit::ScrollUnit::Item => line,
                 accesskit::ScrollUnit::Page => match event.action {
                     accesskit::Action::ScrollLeft | accesskit::Action::ScrollRight => {
-                        portal_size.width * scale
+                        portal_size.width
                     }
-                    _ => portal_size.height * scale,
+                    _ => portal_size.height,
                 },
             };
 
@@ -629,7 +619,7 @@ impl<W: Widget + FromDynWidget + ?Sized> Widget for Portal<W> {
     fn update(&mut self, ctx: &mut UpdateCtx<'_>, _props: &mut PropertiesMut<'_>, event: &Update) {
         match event {
             Update::RequestPanToChild(target) => {
-                let portal_size = ctx.content_box_size();
+                let portal_size = ctx.layout_content_box().size();
                 let content_size = self.content_size;
 
                 self.pan_viewport_to_raw(portal_size, content_size, *target);
@@ -662,10 +652,10 @@ impl<W: Widget + FromDynWidget + ?Sized> Widget for Portal<W> {
         _props: &PropertiesRef<'_>,
         axis: Axis,
         len_req: LenReq,
-        cross_length: Option<f64>,
-    ) -> f64 {
+        cross_length: Option<Length>,
+    ) -> Length {
         match len_req {
-            LenReq::MinContent => 0.,
+            LenReq::MinContent => Length::ZERO,
             LenReq::MaxContent => {
                 let context_size = LayoutSize::maybe(axis.cross(), cross_length);
                 let auto_length = len_req.into();
@@ -691,11 +681,11 @@ impl<W: Widget + FromDynWidget + ?Sized> Widget for Portal<W> {
     fn layout(&mut self, ctx: &mut LayoutCtx<'_>, _props: &PropertiesRef<'_>, size: Size) {
         let auto_size = SizeDef::new(
             match self.constrain_horizontal {
-                true => LenDef::FitContent(size.width),
+                true => LenDef::FitContent(size.width.px()),
                 false => LenDef::MaxContent,
             },
             match self.constrain_vertical {
-                true => LenDef::FitContent(size.height),
+                true => LenDef::FitContent(size.height.px()),
                 false => LenDef::MaxContent,
             },
         );
@@ -798,7 +788,7 @@ impl<W: Widget + FromDynWidget + ?Sized> Widget for Portal<W> {
     ) {
         node.set_clips_children();
 
-        let portal_size = ctx.content_box_size();
+        let portal_size = ctx.layout_content_box().size();
         let content_size = self.content_size;
         let scroll_range = (content_size - portal_size).max(Size::ZERO);
 
@@ -882,11 +872,12 @@ mod tests {
                 let context_size = LayoutSize::maybe(axis.cross(), cross_length);
 
                 let other = match axis {
-                    Axis::Horizontal => 0.,
-                    Axis::Vertical => top_pad,
+                    Axis::Horizontal => Length::ZERO,
+                    Axis::Vertical => top_pad.px(),
                 };
 
-                ctx.compute_length(child, auto_length, context_size, axis, cross_length) + other
+                ctx.compute_length(child, auto_length, context_size, axis, cross_length)
+                    .saturating_add(other)
             })
             .layout_fn(move |child, ctx, _props, size| {
                 let child_size = ctx.compute_size(child, SizeDef::fit(size), size.into());
diff --git a/masonry/src/widgets/progress_bar.rs b/masonry/src/widgets/progress_bar.rs
index 890f83731..70a479377 100644
--- a/masonry/src/widgets/progress_bar.rs
+++ b/masonry/src/widgets/progress_bar.rs
@@ -15,7 +15,7 @@ use crate::core::{
 };
 use crate::imaging::Painter;
 use crate::kurbo::{Axis, Size};
-use crate::layout::{LayoutSize, LenReq, SizeDef};
+use crate::layout::{LayoutSize, LenReq, Length, SizeDef};
 use crate::peniko::{Color, Gradient};
 use crate::properties::{BarColor, BorderColor, BorderWidth, CornerRadius, LineBreaking};
 use crate::theme;
@@ -139,14 +139,10 @@ impl Widget for ProgressBar {
         _props: &PropertiesRef<'_>,
         axis: Axis,
         len_req: LenReq,
-        cross_length: Option<f64>,
-    ) -> f64 {
+        cross_length: Option<Length>,
+    ) -> Length {
         // TODO: Move this to theme?
-        const DEFAULT_WIDTH: f64 = 400.; // In logical pixels
-
-        // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-        //       https://github.com/linebender/xilem/issues/1264
-        let scale = 1.0;
+        const DEFAULT_WIDTH: Length = Length::const_px(400.);
 
         let auto_length = len_req.into();
         let context_size = LayoutSize::maybe(axis.cross(), cross_length);
@@ -161,10 +157,10 @@ impl Widget for ProgressBar {
 
         let potential_length = match axis {
             Axis::Horizontal => match len_req {
-                LenReq::MinContent | LenReq::MaxContent => DEFAULT_WIDTH * scale,
+                LenReq::MinContent | LenReq::MaxContent => DEFAULT_WIDTH,
                 LenReq::FitContent(space) => space,
             },
-            Axis::Vertical => theme::BASIC_WIDGET_HEIGHT.dp(scale),
+            Axis::Vertical => theme::BASIC_WIDGET_HEIGHT,
         };
 
         // Make sure we always report a length big enough to fit our painting
@@ -211,7 +207,7 @@ impl Widget for ProgressBar {
         let progress = self.progress.unwrap_or(1.);
         if progress > 0. {
             // The bar width is without the borders.
-            let bar_width = border_box.width() - 2. * border_width.width;
+            let bar_width = border_box.width() - 2. * border_width.width.get();
             if bar_width > 0. {
                 let bar_color = props.get::<BarColor>(cache).0;
                 // Paint with a gradient so we get a straight line slice of the rounded rect.
@@ -275,6 +271,7 @@ impl Widget for ProgressBar {
 mod tests {
     use super::*;
     use crate::core::{NewWidget, PropertySet};
+    use crate::layout::AsUnit;
     use crate::palette;
     use crate::properties::{BorderColor, CornerRadius};
     use crate::testing::{TestHarness, assert_render_snapshot};
@@ -292,8 +289,8 @@ mod tests {
     #[test]
     fn _5_percent_styled_progressbar() {
         let widget = ProgressBar::new(Some(0.05)).prepare().with_props((
-            CornerRadius::all(50.),
-            BorderWidth::all(10.),
+            CornerRadius::all(50.px()),
+            BorderWidth::all(10.px()),
             BorderColor::new(palette::css::PINK),
         ));
         let mut harness = TestHarness::create_with_size(test_property_set(), widget, (150, 60));
@@ -304,8 +301,8 @@ mod tests {
     #[test]
     fn _95_percent_styled_progressbar() {
         let widget = ProgressBar::new(Some(0.95)).prepare().with_props((
-            CornerRadius::all(50.),
-            BorderWidth::all(10.),
+            CornerRadius::all(50.px()),
+            BorderWidth::all(10.px()),
             BorderColor::new(palette::css::PINK),
         ));
         let mut harness = TestHarness::create_with_size(test_property_set(), widget, (150, 60));
diff --git a/masonry/src/widgets/prose.rs b/masonry/src/widgets/prose.rs
index 7d6ec20be..d1aeec79a 100644
--- a/masonry/src/widgets/prose.rs
+++ b/masonry/src/widgets/prose.rs
@@ -12,7 +12,7 @@ use crate::core::{
 };
 use crate::imaging::Painter;
 use crate::kurbo::{Axis, Point, Size};
-use crate::layout::LenReq;
+use crate::layout::{LenReq, Length};
 use crate::widgets::TextArea;
 
 /// The prose widget displays immutable text which can be
@@ -147,8 +147,8 @@ impl Widget for Prose {
         _props: &PropertiesRef<'_>,
         axis: Axis,
         _len_req: LenReq,
-        cross_length: Option<f64>,
-    ) -> f64 {
+        cross_length: Option<Length>,
+    ) -> Length {
         ctx.redirect_measurement(&mut self.text, axis, cross_length)
     }
 
diff --git a/masonry/src/widgets/radio_button.rs b/masonry/src/widgets/radio_button.rs
index 20c3ca08e..e033d4528 100644
--- a/masonry/src/widgets/radio_button.rs
+++ b/masonry/src/widgets/radio_button.rs
@@ -16,7 +16,7 @@ use crate::core::{
 };
 use crate::imaging::Painter;
 use crate::kurbo::{Axis, Cap, Circle, Dashes, Join, Point, Size, Stroke};
-use crate::layout::{LayoutSize, LenReq, SizeDef};
+use crate::layout::{LayoutSize, LenReq, Length, SizeDef};
 use crate::properties::{BorderColor, BorderWidth, CheckmarkColor, CheckmarkStrokeWidth};
 use crate::theme;
 use crate::widgets::{Label, RadioGroup};
@@ -236,25 +236,21 @@ impl Widget for RadioButton {
         _props: &PropertiesRef<'_>,
         axis: Axis,
         len_req: LenReq,
-        cross_length: Option<f64>,
-    ) -> f64 {
-        // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-        //       https://github.com/linebender/xilem/issues/1264
-        let scale = 1.0;
-
-        let check_side = theme::BASIC_WIDGET_HEIGHT.dp(scale);
-        let check_padding = theme::WIDGET_CONTROL_COMPONENT_PADDING.dp(scale);
+        cross_length: Option<Length>,
+    ) -> Length {
+        let check_side = theme::BASIC_WIDGET_HEIGHT;
+        let check_padding = theme::WIDGET_CONTROL_COMPONENT_PADDING;
 
         let calc_other_length = |axis| match axis {
-            Axis::Horizontal => check_side + check_padding,
-            Axis::Vertical => 0.,
+            Axis::Horizontal => check_side.saturating_add(check_padding),
+            Axis::Vertical => Length::ZERO,
         };
         let other_length = calc_other_length(axis);
 
         let cross = axis.cross();
         let cross_space = cross_length.map(|cross_length| {
             let cross_other_length = calc_other_length(cross);
-            (cross_length - cross_other_length).max(0.)
+            cross_length.saturating_sub(cross_other_length)
         });
 
         let auto_length = len_req.reduce(other_length).into();
@@ -269,18 +265,14 @@ impl Widget for RadioButton {
         );
 
         match axis {
-            Axis::Horizontal => label_length + other_length,
-            Axis::Vertical => label_length.max(check_side) + other_length,
+            Axis::Horizontal => label_length.saturating_add(other_length),
+            Axis::Vertical => label_length.max(check_side).saturating_add(other_length),
         }
     }
 
     fn layout(&mut self, ctx: &mut LayoutCtx<'_>, _props: &PropertiesRef<'_>, size: Size) {
-        // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-        //       https://github.com/linebender/xilem/issues/1264
-        let scale = 1.0;
-
-        let check_side = theme::BASIC_WIDGET_HEIGHT.dp(scale);
-        let check_padding = theme::WIDGET_CONTROL_COMPONENT_PADDING.dp(scale);
+        let check_side = theme::BASIC_WIDGET_HEIGHT.get();
+        let check_padding = theme::WIDGET_CONTROL_COMPONENT_PADDING.get();
 
         let space = Size::new(
             (size.width - (check_side + check_padding)).max(0.),
@@ -342,25 +334,21 @@ impl Widget for RadioButton {
         props: &PropertiesRef<'_>,
         painter: &mut Painter<'_>,
     ) {
-        // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-        //       https://github.com/linebender/xilem/issues/1264
-        let scale = 1.0;
-
         let cache = ctx.property_cache();
         let border_color = *props.get::<BorderColor>(cache);
         let border_width = *props.get::<BorderWidth>(cache);
         let brush = *props.get::<CheckmarkColor>(cache);
 
-        let check_side = theme::BASIC_WIDGET_HEIGHT.dp(scale);
+        let check_side = theme::BASIC_WIDGET_HEIGHT.get();
         let check_size = Size::new(check_side, check_side);
 
         let border_circle = Circle::new(
             check_size.to_rect().center(),
-            (check_side - border_width.width) * 0.5,
+            (check_side - border_width.width.get()) * 0.5,
         );
 
         // Paint the radio button border
-        let border_stroke = Stroke::new(border_width.width);
+        let border_stroke = Stroke::new(border_width.width.get());
         painter
             .stroke(border_circle, &border_stroke, border_color.color)
             .draw();
diff --git a/masonry/src/widgets/radio_group.rs b/masonry/src/widgets/radio_group.rs
index f79a11905..774508730 100644
--- a/masonry/src/widgets/radio_group.rs
+++ b/masonry/src/widgets/radio_group.rs
@@ -10,7 +10,7 @@ use crate::core::{
 };
 use crate::imaging::Painter;
 use crate::kurbo::{Axis, Point, Size};
-use crate::layout::LenReq;
+use crate::layout::{LenReq, Length};
 
 /// A radio group container that holds radio buttons.
 pub struct RadioGroup {
@@ -53,8 +53,8 @@ impl Widget for RadioGroup {
         _props: &PropertiesRef<'_>,
         axis: Axis,
         _len_req: LenReq,
-        cross_length: Option<f64>,
-    ) -> f64 {
+        cross_length: Option<Length>,
+    ) -> Length {
         ctx.redirect_measurement(&mut self.child, axis, cross_length)
     }
 
diff --git a/masonry/src/widgets/resize_observer.rs b/masonry/src/widgets/resize_observer.rs
index 155892227..b7d213535 100644
--- a/masonry/src/widgets/resize_observer.rs
+++ b/masonry/src/widgets/resize_observer.rs
@@ -9,14 +9,14 @@ use crate::core::{
 };
 use crate::imaging::Painter;
 use crate::kurbo::{Axis, Point, Size};
-use crate::layout::LenReq;
+use crate::layout::{LenReq, Length};
 
 /// A widget which sends a [`LayoutChanged`] whenever its size changes.
 ///
 /// It reports the child's length as its own in [`measure`], syncing its size with the child's.
 ///
 /// The size of this widget can be accessed through [`MutateCtx`] methods like
-/// [`border_box_size`] and [`content_box_size`].
+/// [`layout_border_box`] and [`layout_content_box`].
 ///
 /// Ensure that `ResizeObserver` has [`Dimensions`] set via props to [`Dimensions::MAX`].
 /// Max preferred size of `ResizeObserver` means that the question of size
@@ -44,8 +44,8 @@ use crate::layout::LenReq;
 /// [`Dimensions`]: crate::properties::Dimensions
 /// [`Dimensions::MAX`]: crate::properties::Dimensions::MAX
 /// [`MutateCtx`]: crate::core::MutateCtx
-/// [`border_box_size`]: crate::core::MutateCtx::border_box_size
-/// [`content_box_size`]: crate::core::MutateCtx::content_box_size
+/// [`layout_border_box`]: crate::core::MutateCtx::layout_border_box
+/// [`layout_content_box`]: crate::core::MutateCtx::layout_content_box
 // TODO: It would be nice to at least catch these loops.
 // We could see how many times layout is executed without us being painted, and setting a threshold.
 // The response if that gets too high (100?) could be debug_panicking, then stopping
@@ -100,11 +100,11 @@ impl ResizeObserver {
 /// Currently only used by [`ResizeObserver`].
 /// Note that this event does not itself include the final size.
 /// That should instead be accessed through [`MutateCtx`] methods like
-/// [`border_box_size`] and [`content_box_size`].
+/// [`layout_border_box`] and [`layout_content_box`].
 ///
 /// [`MutateCtx`]: crate::core::MutateCtx
-/// [`border_box_size`]: crate::core::MutateCtx::border_box_size
-/// [`content_box_size`]: crate::core::MutateCtx::content_box_size
+/// [`layout_border_box`]: crate::core::MutateCtx::layout_border_box
+/// [`layout_content_box`]: crate::core::MutateCtx::layout_content_box
 #[derive(Debug)]
 pub struct LayoutChanged;
 
@@ -126,8 +126,8 @@ impl Widget for ResizeObserver {
         _props: &PropertiesRef<'_>,
         axis: Axis,
         _len_req: LenReq,
-        cross_length: Option<f64>,
-    ) -> f64 {
+        cross_length: Option<Length>,
+    ) -> Length {
         ctx.redirect_measurement(&mut self.child, axis, cross_length)
     }
 
@@ -201,7 +201,8 @@ mod tests {
             harness
                 .get_widget_with_id(observer_id)
                 .ctx()
-                .border_box_size(),
+                .layout_border_box()
+                .size(),
             Size {
                 width: 100.,
                 height: 100.,
@@ -218,7 +219,8 @@ mod tests {
             harness
                 .get_widget_with_id(observer_id)
                 .ctx()
-                .border_box_size(),
+                .layout_border_box()
+                .size(),
             Size {
                 width: 100.,
                 height: 200.,
@@ -250,7 +252,8 @@ mod tests {
             harness
                 .get_widget_with_id(observer_id)
                 .ctx()
-                .border_box_size(),
+                .layout_border_box()
+                .size(),
             Size {
                 width: 200.,
                 height: 200.,
@@ -267,7 +270,8 @@ mod tests {
             harness
                 .get_widget_with_id(observer_id)
                 .ctx()
-                .border_box_size(),
+                .layout_border_box()
+                .size(),
             Size {
                 width: 100.,
                 height: 150.,
diff --git a/masonry/src/widgets/scroll_bar.rs b/masonry/src/widgets/scroll_bar.rs
index f6b3f86a3..9e0ce2df7 100644
--- a/masonry/src/widgets/scroll_bar.rs
+++ b/masonry/src/widgets/scroll_bar.rs
@@ -13,7 +13,7 @@ use crate::core::{
 };
 use crate::imaging::Painter;
 use crate::kurbo::{Axis, Point, Rect, Size, Stroke};
-use crate::layout::LenReq;
+use crate::layout::{AsUnit, LenReq, Length};
 use crate::theme;
 
 // TODO
@@ -181,7 +181,7 @@ impl Widget for ScrollBar {
             PointerEvent::Down(PointerButtonEvent { state, .. }) => {
                 ctx.capture_pointer();
 
-                let size = ctx.content_box_size();
+                let size = ctx.content_box().size();
                 let cursor_min_length = theme::SCROLLBAR_MIN_SIZE;
                 let cursor_rect = self.cursor_rect(size, cursor_min_length);
                 let mouse_pos = ctx.local_position(state.position);
@@ -204,7 +204,7 @@ impl Widget for ScrollBar {
                 if ctx.is_active()
                     && let Some(grab_anchor) = self.grab_anchor
                 {
-                    let size = ctx.content_box_size();
+                    let size = ctx.content_box().size();
                     let cursor_min_length = theme::SCROLLBAR_MIN_SIZE;
                     let progress = self.progress_from_mouse_pos(
                         size,
@@ -236,12 +236,8 @@ impl Widget for ScrollBar {
         if event.state != KeyState::Down {
             return;
         }
-
-        // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-        //       https://github.com/linebender/xilem/issues/1264
-        let scale = 1.0;
-        let line = 120.0 * scale;
-        let page = self.portal_size * scale;
+        let line = 120.0;
+        let page = self.portal_size;
 
         let mut changed = false;
         match (&event.key, self.axis) {
@@ -310,17 +306,13 @@ impl Widget for ScrollBar {
         if !action_matches_axis {
             return;
         }
-
-        // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-        //       https://github.com/linebender/xilem/issues/1264
-        let scale = 1.0;
         let unit = if let Some(accesskit::ActionData::ScrollUnit(unit)) = &event.data {
             *unit
         } else {
             accesskit::ScrollUnit::Item
         };
-        let line = 120.0 * scale;
-        let page = self.portal_size * scale;
+        let line = 120.0;
+        let page = self.portal_size;
         let amount = match unit {
             accesskit::ScrollUnit::Item => line,
             accesskit::ScrollUnit::Page => page,
@@ -352,23 +344,19 @@ impl Widget for ScrollBar {
         _props: &PropertiesRef<'_>,
         axis: Axis,
         len_req: LenReq,
-        _cross_length: Option<f64>,
-    ) -> f64 {
-        // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-        //       https://github.com/linebender/xilem/issues/1264
-        let scale = 1.0;
-
+        _cross_length: Option<Length>,
+    ) -> Length {
         if axis == self.axis {
-            // TODO: Consider .max(theme::SCROLLBAR_MIN_SIZE * scale)
+            // TODO: Consider .max(theme::SCROLLBAR_MIN_SIZE)
             match len_req {
-                LenReq::MinContent | LenReq::MaxContent => self.portal_size,
+                LenReq::MinContent | LenReq::MaxContent => self.portal_size.px(),
                 LenReq::FitContent(space) => space,
             }
         } else {
-            let scrollbar_width = theme::SCROLLBAR_WIDTH * scale;
-            let cursor_padding = theme::SCROLLBAR_PAD * scale;
+            let scrollbar_width = theme::SCROLLBAR_WIDTH;
+            let cursor_padding = theme::SCROLLBAR_PAD;
 
-            scrollbar_width + cursor_padding * 2.0
+            (scrollbar_width + cursor_padding * 2.0).px()
         }
     }
 
@@ -385,7 +373,7 @@ impl Widget for ScrollBar {
         let cursor_padding = theme::SCROLLBAR_PAD;
         let cursor_min_length = theme::SCROLLBAR_MIN_SIZE;
 
-        let size = ctx.content_box_size();
+        let size = ctx.content_box().size();
         let (inset_x, inset_y) = self.axis.pack_xy(0.0, cursor_padding);
         let cursor_rect = self
             .cursor_rect(size, cursor_min_length)
diff --git a/masonry/src/widgets/selector.rs b/masonry/src/widgets/selector.rs
index 7c14099f6..8d3b9264e 100644
--- a/masonry/src/widgets/selector.rs
+++ b/masonry/src/widgets/selector.rs
@@ -13,7 +13,7 @@ use crate::core::{
 use crate::imaging::Painter;
 use crate::kurbo::{Axis, Size, Vec2};
 use crate::layers::SelectorMenu;
-use crate::layout::{LayoutSize, LenReq, SizeDef};
+use crate::layout::{AsUnit, LayoutSize, LenReq, Length, SizeDef};
 use crate::theme;
 use crate::util::debug_panic;
 use crate::widgets::{Label, SelectorItem};
@@ -140,10 +140,11 @@ impl Selector {
         let layer_widget = NewWidget::new(menu);
 
         // TODO: We should ideally create a layer with the same transform as this widget.
+        let border_box = ctx.border_box();
         ctx.create_layer(
             layer_type,
             layer_widget,
-            ctx.window_origin() + Vec2::new(0., ctx.border_box_size().height),
+            ctx.to_window(border_box.origin()) + Vec2::new(0., border_box.size().height),
         );
     }
 }
@@ -227,12 +228,8 @@ impl Widget for Selector {
         _props: &PropertiesRef<'_>,
         axis: Axis,
         len_req: LenReq,
-        cross_length: Option<f64>,
-    ) -> f64 {
-        // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-        //       https://github.com/linebender/xilem/issues/1264
-        let scale = 1.0;
-
+        cross_length: Option<Length>,
+    ) -> Length {
         let auto_length = len_req.into();
         let context_size = LayoutSize::maybe(axis.cross(), cross_length);
 
@@ -251,8 +248,8 @@ impl Widget for Selector {
         // we make sure we will have at least the same height as the default text input.
         // We also set a minimum width.
         match axis {
-            Axis::Horizontal => length.max(theme::SELECTOR_MIN_WIDTH * scale),
-            Axis::Vertical => length.max(theme::BORDERED_WIDGET_HEIGHT * scale),
+            Axis::Horizontal => length.max(theme::SELECTOR_MIN_WIDTH.px()),
+            Axis::Vertical => length.max(theme::BORDERED_WIDGET_HEIGHT.px()),
         }
     }
 
diff --git a/masonry/src/widgets/selector_item.rs b/masonry/src/widgets/selector_item.rs
index 223561dff..5c4795258 100644
--- a/masonry/src/widgets/selector_item.rs
+++ b/masonry/src/widgets/selector_item.rs
@@ -13,7 +13,7 @@ use crate::core::{
 };
 use crate::imaging::Painter;
 use crate::kurbo::{Axis, Size};
-use crate::layout::{LayoutSize, LenReq, SizeDef};
+use crate::layout::{LayoutSize, LenReq, Length, SizeDef};
 use crate::widgets::Label;
 
 /// An option in a [`SelectorMenu`](crate::layers::SelectorMenu).
@@ -91,8 +91,8 @@ impl Widget for SelectorItem {
         _props: &PropertiesRef<'_>,
         axis: Axis,
         len_req: LenReq,
-        cross_length: Option<f64>,
-    ) -> f64 {
+        cross_length: Option<Length>,
+    ) -> Length {
         let auto_length = len_req.into();
         let context_size = LayoutSize::maybe(axis.cross(), cross_length);
 
diff --git a/masonry/src/widgets/sized_box.rs b/masonry/src/widgets/sized_box.rs
index e63e62420..8ffecaa76 100644
--- a/masonry/src/widgets/sized_box.rs
+++ b/masonry/src/widgets/sized_box.rs
@@ -225,22 +225,20 @@ impl Widget for SizedBox {
         props: &PropertiesRef<'_>,
         axis: Axis,
         len_req: LenReq,
-        cross_length: Option<f64>,
-    ) -> f64 {
-        // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-        //       https://github.com/linebender/xilem/issues/1264
-        let scale = 1.0;
-
+        cross_length: Option<Length>,
+    ) -> Length {
         let cache = ctx.property_cache();
         let border = props.get::<BorderWidth>(cache);
         let padding = props.get::<Padding>(cache);
 
-        let border_length = border.length(axis).dp(scale);
-        let padding_length = padding.length(axis).dp(scale);
+        let border_length = border.length(axis);
+        let padding_length = padding.length(axis);
 
         // First see if we have an explicitly defined length
         if let Some(length) = self.length(axis) {
-            return (length.dp(scale) - border_length - padding_length).max(0.);
+            return length
+                .saturating_sub(border_length)
+                .saturating_sub(padding_length);
         }
 
         // Otherwise measure the child
@@ -254,9 +252,9 @@ impl Widget for SizedBox {
                     Axis::Vertical => self.height,
                 };
                 length.map(|length| {
-                    let cross_border_length = border.length(cross).dp(scale);
-                    let cross_padding_length = padding.length(cross).dp(scale);
-                    (length.dp(scale) - cross_border_length - cross_padding_length).max(0.)
+                    length
+                        .saturating_sub(border.length(cross))
+                        .saturating_sub(padding.length(cross))
                 })
             });
 
@@ -265,7 +263,7 @@ impl Widget for SizedBox {
 
             ctx.compute_length(child, auto_length, context_size, axis, cross_length)
         } else {
-            0.
+            Length::ZERO
         }
     }
 
@@ -333,8 +331,8 @@ mod tests {
     fn empty_box() {
         let mut box_props = PropertySet::new();
         box_props.insert(BorderColor::new(palette::css::BLUE));
-        box_props.insert(BorderWidth::all(5.0));
-        box_props.insert(CornerRadius::all(5.0));
+        box_props.insert(BorderWidth::all(5.px()));
+        box_props.insert(CornerRadius::all(5.px()));
 
         let widget = SizedBox::empty()
             .width(20.px())
@@ -351,8 +349,8 @@ mod tests {
     fn label_box_no_size() {
         let mut box_props = PropertySet::new();
         box_props.insert(BorderColor::new(palette::css::BLUE));
-        box_props.insert(BorderWidth::all(5.0));
-        box_props.insert(CornerRadius::all(5.0));
+        box_props.insert(BorderWidth::all(5.px()));
+        box_props.insert(CornerRadius::all(5.px()));
 
         let widget = SizedBox::new(Label::new("hello").prepare())
             .prepare()
@@ -367,8 +365,8 @@ mod tests {
     fn label_box_with_size() {
         let mut box_props = PropertySet::new();
         box_props.insert(BorderColor::new(palette::css::BLUE));
-        box_props.insert(BorderWidth::all(5.0));
-        box_props.insert(CornerRadius::all(5.0));
+        box_props.insert(BorderWidth::all(5.px()));
+        box_props.insert(CornerRadius::all(5.px()));
 
         let widget = SizedBox::new(Label::new("hello").prepare())
             .width(20.px())
@@ -385,9 +383,9 @@ mod tests {
     fn label_box_with_padding() {
         let mut box_props = PropertySet::new();
         box_props.insert(BorderColor::new(palette::css::BLUE));
-        box_props.insert(BorderWidth::all(5.0));
-        box_props.insert(CornerRadius::all(5.0));
-        box_props.insert(Padding::from_vh(15., 10.));
+        box_props.insert(BorderWidth::all(5.px()));
+        box_props.insert(CornerRadius::all(5.px()));
+        box_props.insert(Padding::from_vh(15.px(), 10.px()));
 
         let widget = SizedBox::new(Label::new("hello").prepare())
             .prepare()
@@ -427,8 +425,8 @@ mod tests {
         ]);
         box_props.insert(Background::Gradient(gradient));
         box_props.insert(BorderColor::new(palette::css::LIGHT_SKY_BLUE));
-        box_props.insert(BorderWidth::all(5.0));
-        box_props.insert(CornerRadius::all(10.0));
+        box_props.insert(BorderWidth::all(5.px()));
+        box_props.insert(CornerRadius::all(10.px()));
 
         let widget = SizedBox::empty()
             .width(20.px())
@@ -454,8 +452,8 @@ mod tests {
         ]);
         box_props.insert(Background::Gradient(gradient));
         box_props.insert(BorderColor::new(palette::css::LIGHT_SKY_BLUE));
-        box_props.insert(BorderWidth::all(5.0));
-        box_props.insert(CornerRadius::all(10.0));
+        box_props.insert(BorderWidth::all(5.px()));
+        box_props.insert(CornerRadius::all(10.px()));
 
         let widget = SizedBox::empty()
             .width(20.px())
@@ -481,8 +479,8 @@ mod tests {
         ]);
         box_props.insert(Background::Gradient(gradient));
         box_props.insert(BorderColor::new(palette::css::LIGHT_SKY_BLUE));
-        box_props.insert(BorderWidth::all(5.0));
-        box_props.insert(CornerRadius::all(10.0));
+        box_props.insert(BorderWidth::all(5.px()));
+        box_props.insert(CornerRadius::all(10.px()));
 
         let widget = SizedBox::empty()
             .width(20.px())
@@ -500,8 +498,8 @@ mod tests {
         let mut box_props = PropertySet::new();
         box_props.insert(Background::Color(palette::css::PLUM));
         box_props.insert(BorderColor::new(palette::css::LIGHT_SKY_BLUE));
-        box_props.insert(BorderWidth::all(5.0));
-        box_props.insert(Padding::all(25.));
+        box_props.insert(BorderWidth::all(5.px()));
+        box_props.insert(Padding::all(25.px()));
 
         let widget = SizedBox::new(Label::new("hello").prepare())
             .width(20.px())
@@ -521,11 +519,11 @@ mod tests {
         // Copy-pasted from empty_box
         let mut box_props = PropertySet::new();
         box_props.insert(BorderColor::new(palette::css::BLUE));
-        box_props.insert(BorderWidth::all(5.0));
-        box_props.insert(CornerRadius::all(5.0));
+        box_props.insert(BorderWidth::all(5.px()));
+        box_props.insert(CornerRadius::all(5.px()));
 
         // This is the difference
-        box_props.insert(BorderWidth::all(5.2));
+        box_props.insert(BorderWidth::all(5.2.px()));
 
         let widget = SizedBox::empty()
             .width(20.px())
diff --git a/masonry/src/widgets/slider.rs b/masonry/src/widgets/slider.rs
index b676c5a4c..a4e8062b7 100644
--- a/masonry/src/widgets/slider.rs
+++ b/masonry/src/widgets/slider.rs
@@ -16,7 +16,7 @@ use crate::core::{
 };
 use crate::imaging::{Composite, GroupRef, Painter};
 use crate::kurbo::{Axis, Circle, Point, Rect, Size, Stroke};
-use crate::layout::LenReq;
+use crate::layout::{LenReq, Length};
 use crate::properties::{Background, BarColor, ThumbColor, ThumbRadius, TrackThickness};
 use crate::theme;
 
@@ -73,6 +73,7 @@ impl Slider {
         ThumbRadius(base_thumb_radius): ThumbRadius,
         is_focused: bool,
     ) -> bool {
+        let base_thumb_radius = base_thumb_radius.get();
         let thumb_radius = if is_focused {
             base_thumb_radius + 2.0
         } else {
@@ -171,7 +172,7 @@ impl Widget for Slider {
                 ctx.request_focus();
                 ctx.capture_pointer();
                 let local_pos = ctx.local_position(state.position);
-                let width = ctx.content_box_size().width;
+                let width = ctx.content_box().size().width;
                 let is_focused = ctx.is_focus_target();
                 let cache = ctx.property_cache();
                 if self.update_value_from_position(
@@ -185,7 +186,7 @@ impl Widget for Slider {
             }
             PointerEvent::Move(PointerUpdate { current, .. }) if ctx.is_active() => {
                 let local_pos = ctx.local_position(current.position);
-                let width = ctx.content_box_size().width;
+                let width = ctx.content_box().size().width;
                 let is_focused = ctx.is_focus_target();
                 let cache = ctx.property_cache();
                 if self.update_value_from_position(
@@ -335,16 +336,12 @@ impl Widget for Slider {
         props: &PropertiesRef<'_>,
         axis: Axis,
         len_req: LenReq,
-        _cross_length: Option<f64>,
-    ) -> f64 {
-        // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-        //       https://github.com/linebender/xilem/issues/1264
-        let scale = 1.0;
-
+        _cross_length: Option<Length>,
+    ) -> Length {
         match axis {
             Axis::Horizontal => match len_req {
                 // TODO: Move this 100. to theme?
-                LenReq::MinContent | LenReq::MaxContent => 100. * scale,
+                LenReq::MinContent | LenReq::MaxContent => Length::const_px(100.),
                 LenReq::FitContent(space) => space,
             },
             Axis::Vertical => {
@@ -352,12 +349,14 @@ impl Widget for Slider {
                 let thumb_radius = props.get::<ThumbRadius>(cache);
                 let track_thickness = props.get::<TrackThickness>(cache);
 
-                let thumb_length = thumb_radius.0 * 2.0 * scale;
-                let track_length = track_thickness.0 * scale;
+                let thumb_length = thumb_radius.0.saturating_add(thumb_radius.0);
+                let track_length = track_thickness.0;
                 // TODO: Move the padding 16. to theme or make it otherwise configurable?
-                let padding_length = 16. * scale;
+                let padding_length = Length::const_px(16.);
 
-                thumb_length.max(track_length) + padding_length
+                thumb_length
+                    .max(track_length)
+                    .saturating_add(padding_length)
             }
         }
     }
@@ -376,13 +375,13 @@ impl Widget for Slider {
         let cache = ctx.property_cache();
         let active_track_color = props.get::<BarColor>(cache).0;
         let thumb_color = props.get::<ThumbColor>(cache).0;
-        let track_thickness = props.get::<TrackThickness>(cache).0;
-        let base_thumb_radius = props.get::<ThumbRadius>(cache).0;
+        let track_thickness = props.get::<TrackThickness>(cache).0.get();
+        let base_thumb_radius = props.get::<ThumbRadius>(cache).0.get();
         let track_color = props.get::<Background>(cache);
         let thumb_border_width = 2.0;
 
         // Calculate geometry based on state
-        let size = ctx.content_box_size();
+        let size = ctx.content_box().size();
         let thumb_radius = if ctx.is_active() {
             base_thumb_radius + 2.0
         } else if ctx.is_hovered() || ctx.is_focus_target() {
diff --git a/masonry/src/widgets/spinner.rs b/masonry/src/widgets/spinner.rs
index bfa471e9b..49799765f 100644
--- a/masonry/src/widgets/spinner.rs
+++ b/masonry/src/widgets/spinner.rs
@@ -13,8 +13,8 @@ use crate::core::{
     PropertiesRef, RegisterCtx, Update, UpdateCtx, UsesProperty, Widget, WidgetId,
 };
 use crate::imaging::Painter;
-use crate::kurbo::{Axis, Cap, Line, Point, Size, Stroke, Vec2};
-use crate::layout::LenReq;
+use crate::kurbo::{Axis, Cap, Line, Size, Stroke, Vec2};
+use crate::layout::{LenReq, Length};
 use crate::properties::ContentColor;
 use crate::theme;
 
@@ -87,17 +87,13 @@ impl Widget for Spinner {
         _props: &PropertiesRef<'_>,
         _axis: Axis,
         len_req: LenReq,
-        cross_length: Option<f64>,
-    ) -> f64 {
-        // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-        //       https://github.com/linebender/xilem/issues/1264
-        let scale = 1.0;
-
+        cross_length: Option<Length>,
+    ) -> Length {
         match len_req {
             // For preferred length we try to keep a square aspect ratio,
             // and when the cross length is unknown we fall back to the theme's default.
             LenReq::MinContent | LenReq::MaxContent => {
-                cross_length.unwrap_or(theme::BASIC_WIDGET_HEIGHT.dp(scale))
+                cross_length.unwrap_or(theme::BASIC_WIDGET_HEIGHT)
             }
             LenReq::FitContent(space) => space,
         }
@@ -115,8 +111,9 @@ impl Widget for Spinner {
         let color = props.get::<ContentColor>(cache);
 
         let t = self.t;
-        let size = ctx.content_box_size();
-        let center = Point::new(size.width / 2.0, size.height / 2.0);
+        let content_box = ctx.content_box();
+        let size = content_box.size();
+        let center = content_box.center();
         let scale_factor = size.width.min(size.height) / 40.0;
 
         for step in 1..=12 {
diff --git a/masonry/src/widgets/split.rs b/masonry/src/widgets/split.rs
index 5c3443684..f1b81e5a7 100644
--- a/masonry/src/widgets/split.rs
+++ b/masonry/src/widgets/split.rs
@@ -181,20 +181,20 @@ impl<ChildA: Widget + ?Sized, ChildB: Widget + ?Sized> Split<ChildA, ChildB> {
 impl<ChildA: Widget + ?Sized, ChildB: Widget + ?Sized> Split<ChildA, ChildB> {
     /// Returns the thickness of the splitter bar area.
     #[inline]
-    fn bar_area(&self, scale: f64) -> f64 {
-        self.bar_thickness.max(self.min_bar_area).dp(scale)
+    fn bar_area(&self) -> f64 {
+        self.bar_thickness.max(self.min_bar_area).get()
     }
 
     /// Returns the splitter bar center point.
-    fn bar_center(&self, length: f64, scale: f64) -> f64 {
-        let (edge1, edge2) = self.bar_edges(length, scale);
+    fn bar_center(&self, length: f64) -> f64 {
+        let (edge1, edge2) = self.bar_edges(length);
         (edge1 + edge2) * 0.5
     }
 
     /// Returns the location of the edges of the splitter bar,
     /// given the specified total length.
-    fn bar_edges(&self, length: f64, scale: f64) -> (f64, f64) {
-        let bar_thickness = self.bar_thickness.dp(scale);
+    fn bar_edges(&self, length: f64) -> (f64, f64) {
+        let bar_thickness = self.bar_thickness.get();
         let reduced_length = length - bar_thickness;
         let edge = reduced_length * self.split_point_effective;
         (edge, edge + bar_thickness)
@@ -202,10 +202,10 @@ impl<ChildA: Widget + ?Sized, ChildB: Widget + ?Sized> Split<ChildA, ChildB> {
 
     /// Returns the location of the edges of the splitter bar area,
     /// given the specified total length.
-    fn bar_area_edges(&self, length: f64, scale: f64) -> (f64, f64) {
-        let (edge1, edge2) = self.bar_edges(length, scale);
+    fn bar_area_edges(&self, length: f64) -> (f64, f64) {
+        let (edge1, edge2) = self.bar_edges(length);
         let (space1, space2) = (edge1.max(0.), (length - edge2).max(0.));
-        let padding = self.bar_area(scale) - self.bar_thickness.dp(scale);
+        let padding = self.bar_area() - self.bar_thickness.get();
 
         // Half the padding to the first edge
         let pad1 = (0.5 * padding).min(space1);
@@ -218,16 +218,16 @@ impl<ChildA: Widget + ?Sized, ChildB: Widget + ?Sized> Split<ChildA, ChildB> {
     }
 
     /// Returns `true` if the provided position is on the splitter bar area.
-    fn bar_area_hit_test(&self, length: f64, pos: f64, scale: f64) -> bool {
-        let (edge1, edge2) = self.bar_area_edges(length, scale);
+    fn bar_area_hit_test(&self, length: f64, pos: f64) -> bool {
+        let (edge1, edge2) = self.bar_area_edges(length);
         pos >= edge1 && pos <= edge2
     }
 
     /// Returns the minimum and maximum split coordinate of the provided length.
-    fn split_side_limits(&self, length: f64, scale: f64) -> (f64, f64) {
+    fn split_side_limits(&self, length: f64) -> (f64, f64) {
         let (min_child1, min_child2) = self.min_lengths;
-        let mut min_limit = min_child1.dp(scale);
-        let mut max_limit = (length - min_child2.dp(scale)).max(0.0);
+        let mut min_limit = min_child1.get();
+        let mut max_limit = (length - min_child2.get()).max(0.0);
 
         if min_limit > max_limit {
             min_limit = 0.5 * (min_limit + max_limit);
@@ -237,22 +237,22 @@ impl<ChildA: Widget + ?Sized, ChildB: Widget + ?Sized> Split<ChildA, ChildB> {
         (min_limit, max_limit)
     }
 
-    fn calc_effective_split_point(&self, length: f64, scale: f64) -> f64 {
-        let (min_limit, max_limit) = self.split_side_limits(length, scale);
+    fn calc_effective_split_point(&self, length: f64) -> f64 {
+        let (min_limit, max_limit) = self.split_side_limits(length);
         if length <= f64::EPSILON {
             0.5
         } else {
             let child1_len = match self.split_point_chosen {
                 SplitPoint::Fraction(frac) => length * frac,
-                SplitPoint::FromStart(len) => len.dp(scale),
-                SplitPoint::FromEnd(len) => length - len.dp(scale),
+                SplitPoint::FromStart(len) => len.get(),
+                SplitPoint::FromEnd(len) => length - len.get(),
             };
             (child1_len / length).clamp(min_limit / length, max_limit / length)
         }
     }
 
-    fn set_chosen_from_child1_len(&mut self, length: f64, child1_len: f64, scale: f64) {
-        let (min_limit, max_limit) = self.split_side_limits(length, scale);
+    fn set_chosen_from_child1_len(&mut self, length: f64, child1_len: f64) {
+        let (min_limit, max_limit) = self.split_side_limits(length);
         let child1_len = child1_len.clamp(min_limit, max_limit);
 
         match self.split_point_chosen {
@@ -264,27 +264,20 @@ impl<ChildA: Widget + ?Sized, ChildB: Widget + ?Sized> Split<ChildA, ChildB> {
                 });
             }
             SplitPoint::FromStart(_) => {
-                let logical = child1_len / scale;
-                self.split_point_chosen = SplitPoint::FromStart(Length::px(logical));
+                self.split_point_chosen = SplitPoint::FromStart(Length::px(child1_len));
             }
             SplitPoint::FromEnd(_) => {
                 let child2_len = (length - child1_len).max(0.0);
-                let logical = child2_len / scale;
-                self.split_point_chosen = SplitPoint::FromEnd(Length::px(logical));
+                self.split_point_chosen = SplitPoint::FromEnd(Length::px(child2_len));
             }
         }
     }
 
-    fn update_split_point_from_bar_center(
-        &mut self,
-        total_length: f64,
-        bar_center: f64,
-        scale: f64,
-    ) {
-        let bar_thickness = self.bar_thickness.dp(scale);
+    fn update_split_point_from_bar_center(&mut self, total_length: f64, bar_center: f64) {
+        let bar_thickness = self.bar_thickness.get();
         let split_space = (total_length - bar_thickness).max(0.0);
         let child1_len = bar_center - bar_thickness * 0.5;
-        self.set_chosen_from_child1_len(split_space, child1_len, scale);
+        self.set_chosen_from_child1_len(split_space, child1_len);
     }
 
     /// Returns the color of the splitter bar.
@@ -299,29 +292,23 @@ impl<ChildA: Widget + ?Sized, ChildB: Widget + ?Sized> Split<ChildA, ChildB> {
         }
     }
 
-    fn paint_focus_bar(&mut self, ctx: &mut PaintCtx<'_>, scene: &mut Painter<'_>, scale: f64) {
-        let length = ctx.content_box_size().get_coord(self.split_axis);
-        let (edge1, edge2) = self.bar_edges(length, scale);
+    fn paint_focus_bar(&mut self, ctx: &mut PaintCtx<'_>, scene: &mut Painter<'_>) {
+        let length = ctx.content_box().size().get_coord(self.split_axis);
+        let (edge1, edge2) = self.bar_edges(length);
 
         let mut rect = ctx.border_box();
         rect.set_coords(self.split_axis, edge1, edge2);
-        let rect = rect.inset(2.0 * scale);
+        let rect = rect.inset(2.0);
 
         let focus_color = theme::FOCUS_COLOR.with_alpha(if ctx.is_active() { 1.0 } else { 0.5 });
-        let focus_stroke = Stroke::new(1.0 * scale).with_join(Join::Miter);
+        let focus_stroke = Stroke::new(1.0).with_join(Join::Miter);
 
         scene.stroke(rect, &focus_stroke, focus_color).draw();
     }
 
-    fn paint_solid_bar(
-        &mut self,
-        ctx: &mut PaintCtx<'_>,
-        scene: &mut Painter<'_>,
-        scale: f64,
-        color: Color,
-    ) {
-        let length = ctx.content_box_size().get_coord(self.split_axis);
-        let (edge1, edge2) = self.bar_edges(length, scale);
+    fn paint_solid_bar(&mut self, ctx: &mut PaintCtx<'_>, scene: &mut Painter<'_>, color: Color) {
+        let length = ctx.content_box().size().get_coord(self.split_axis);
+        let (edge1, edge2) = self.bar_edges(length);
 
         let mut rect = ctx.border_box();
         rect.set_coords(self.split_axis, edge1, edge2);
@@ -329,19 +316,13 @@ impl<ChildA: Widget + ?Sized, ChildB: Widget + ?Sized> Split<ChildA, ChildB> {
         scene.fill(rect, color).draw();
     }
 
-    fn paint_stroked_bar(
-        &mut self,
-        ctx: &mut PaintCtx<'_>,
-        scene: &mut Painter<'_>,
-        scale: f64,
-        color: Color,
-    ) {
-        let length = ctx.content_box_size().get_coord(self.split_axis);
+    fn paint_stroked_bar(&mut self, ctx: &mut PaintCtx<'_>, scene: &mut Painter<'_>, color: Color) {
+        let length = ctx.content_box().size().get_coord(self.split_axis);
         // Set the line width to a third of the splitter bar thickness,
         // because we'll paint two equal lines at the edges.
-        let line_width = self.bar_thickness.dp(scale) / 3.0;
+        let line_width = self.bar_thickness.get() / 3.0;
         let line_midpoint = line_width / 2.0;
-        let (edge1, edge2) = self.bar_edges(length, scale);
+        let (edge1, edge2) = self.bar_edges(length);
 
         let edge1_line_pos = edge1 + line_midpoint;
         let edge2_line_pos = edge2 - line_midpoint;
@@ -475,33 +456,29 @@ where
         _props: &mut PropertiesMut<'_>,
         event: &PointerEvent,
     ) {
-        // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-        //       https://github.com/linebender/xilem/issues/1264
-        let scale = 1.0;
-
         if self.draggable {
             match event {
                 PointerEvent::Down(PointerButtonEvent { state, .. }) => {
                     let pos = ctx
                         .local_position(state.position)
                         .get_coord(self.split_axis);
-                    let length = ctx.content_box_size().get_coord(self.split_axis);
-                    if self.bar_area_hit_test(length, pos, scale) {
+                    let length = ctx.content_box().size().get_coord(self.split_axis);
+                    if self.bar_area_hit_test(length, pos) {
                         ctx.set_handled();
                         ctx.capture_pointer();
                         ctx.request_focus();
                         // Save the delta between the click position and the bar center.
-                        self.click_offset = pos - self.bar_center(length, scale);
+                        self.click_offset = pos - self.bar_center(length);
                     }
                 }
                 PointerEvent::Move(PointerUpdate { current, .. }) if ctx.is_active() => {
                     let pos = ctx
                         .local_position(current.position)
                         .get_coord(self.split_axis);
-                    let length = ctx.content_box_size().get_coord(self.split_axis);
+                    let length = ctx.content_box().size().get_coord(self.split_axis);
                     // If widget has pointer capture, assume always it's hovered
                     let effective_center = pos - self.click_offset;
-                    self.update_split_point_from_bar_center(length, effective_center, scale);
+                    self.update_split_point_from_bar_center(length, effective_center);
                     ctx.request_layout();
                 }
                 PointerEvent::Up(..) | PointerEvent::Cancel(..) => {
@@ -529,12 +506,8 @@ where
             return;
         }
 
-        // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-        //       https://github.com/linebender/xilem/issues/1264
-        let scale = 1.0;
-
-        let length = ctx.content_box_size().get_coord(self.split_axis);
-        let bar_thickness = self.bar_thickness.dp(scale);
+        let length = ctx.content_box().size().get_coord(self.split_axis);
+        let bar_thickness = self.bar_thickness.get();
         let split_space = (length - bar_thickness).max(0.0);
         if split_space <= f64::EPSILON {
             return;
@@ -563,15 +536,15 @@ where
                 child1_len += delta;
             }
             Key::Named(NamedKey::Home) => {
-                child1_len = self.split_side_limits(split_space, scale).0;
+                child1_len = self.split_side_limits(split_space).0;
             }
             Key::Named(NamedKey::End) => {
-                child1_len = self.split_side_limits(split_space, scale).1;
+                child1_len = self.split_side_limits(split_space).1;
             }
             _ => return,
         }
 
-        self.set_chosen_from_child1_len(split_space, child1_len, scale);
+        self.set_chosen_from_child1_len(split_space, child1_len);
         ctx.request_layout();
     }
 
@@ -585,12 +558,8 @@ where
             return;
         }
 
-        // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-        //       https://github.com/linebender/xilem/issues/1264
-        let scale = 1.0;
-
-        let length = ctx.content_box_size().get_coord(self.split_axis);
-        let bar_thickness = self.bar_thickness.dp(scale);
+        let length = ctx.content_box().size().get_coord(self.split_axis);
+        let bar_thickness = self.bar_thickness.get();
         let split_space = (length - bar_thickness).max(0.0);
         if split_space <= f64::EPSILON {
             return;
@@ -614,7 +583,7 @@ where
             _ => return,
         }
 
-        self.set_chosen_from_child1_len(split_space, child1_len, scale);
+        self.set_chosen_from_child1_len(split_space, child1_len);
         ctx.request_layout();
     }
 
@@ -641,19 +610,13 @@ where
         _props: &PropertiesRef<'_>,
         axis: Axis,
         len_req: LenReq,
-        cross_length: Option<f64>,
-    ) -> f64 {
-        // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-        //       https://github.com/linebender/xilem/issues/1264
-        let scale = 1.0;
-
-        let bar_thickness = self.bar_thickness.dp(scale);
-
+        cross_length: Option<Length>,
+    ) -> Length {
         if let LenReq::FitContent(space) = len_req {
             // We always want to use up all offered space
             if axis == self.split_axis {
                 // Don't go below the bar thickness, which we always want to paint.
-                return space.max(bar_thickness);
+                return space.max(self.bar_thickness);
             }
             return space;
         }
@@ -665,10 +628,13 @@ where
             .map(|cross_length| {
                 // We need to split the cross length if it's our split axis
                 if cross == self.split_axis {
-                    let cross_space = (cross_length - bar_thickness).max(0.);
-                    let split_point = self.calc_effective_split_point(cross_space, scale);
-                    let child1_cross_space = cross_space * split_point;
-                    (child1_cross_space, cross_space - child1_cross_space)
+                    let cross_space = cross_length.saturating_sub(self.bar_thickness);
+                    let split_point = self.calc_effective_split_point(cross_space.get());
+                    let child1_cross_space = (cross_space.get() * split_point).px();
+                    (
+                        child1_cross_space,
+                        cross_space.saturating_sub(child1_cross_space),
+                    )
                 } else {
                     (cross_length, cross_length)
                 }
@@ -693,23 +659,21 @@ where
         );
 
         if axis == self.split_axis {
-            child1_length + child2_length + bar_thickness
+            child1_length
+                .saturating_add(child2_length)
+                .saturating_add(self.bar_thickness)
         } else {
             child1_length.max(child2_length)
         }
     }
 
     fn layout(&mut self, ctx: &mut LayoutCtx<'_>, _props: &PropertiesRef<'_>, size: Size) {
-        // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-        //       https://github.com/linebender/xilem/issues/1264
-        let scale = 1.0;
-
-        let bar_thickness = self.bar_thickness.dp(scale);
+        let bar_thickness = self.bar_thickness.get();
         let split_space = (size.get_coord(self.split_axis) - bar_thickness).max(0.);
         let cross_space = size.get_coord(self.split_axis.cross());
 
         // Update our effective split point to respect our size
-        self.split_point_effective = self.calc_effective_split_point(split_space, scale);
+        self.split_point_effective = self.calc_effective_split_point(split_space);
 
         let child1_split_space = (split_space * self.split_point_effective).max(0.);
         let child2_split_space = (split_space - child1_split_space).max(0.);
@@ -735,20 +699,16 @@ where
         _props: &PropertiesRef<'_>,
         painter: &mut Painter<'_>,
     ) {
-        // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-        //       https://github.com/linebender/xilem/issues/1264
-        let scale = 1.0;
-
         // TODO - Paint differently if the bar is draggable and hovered.
         let bar_color = self.bar_color(ctx);
         if self.solid {
-            self.paint_solid_bar(ctx, painter, scale, bar_color);
+            self.paint_solid_bar(ctx, painter, bar_color);
         } else {
-            self.paint_stroked_bar(ctx, painter, scale, bar_color);
+            self.paint_stroked_bar(ctx, painter, bar_color);
         }
 
         if ctx.is_focus_target() && self.draggable && !ctx.is_disabled() {
-            self.paint_focus_bar(ctx, painter, scale);
+            self.paint_focus_bar(ctx, painter);
         }
         // TODO: Child painting should probably be clipped, in such a way that
         //       one child won't overflow across the split bar onto the other child.
@@ -756,13 +716,9 @@ where
     }
 
     fn get_cursor(&self, ctx: &QueryCtx<'_>, pos: Point) -> CursorIcon {
-        // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-        //       https://github.com/linebender/xilem/issues/1264
-        let scale = 1.0;
-
-        let length = ctx.content_box_size().get_coord(self.split_axis);
+        let length = ctx.content_box().size().get_coord(self.split_axis);
         let local_pos = ctx.to_local(pos).get_coord(self.split_axis);
-        let is_bar_area_hovered = self.bar_area_hit_test(length, local_pos, scale);
+        let is_bar_area_hovered = self.bar_area_hit_test(length, local_pos);
 
         if self.draggable && (ctx.is_active() || is_bar_area_hovered) {
             match self.split_axis {
@@ -784,14 +740,10 @@ where
         _props: &PropertiesRef<'_>,
         node: &mut Node,
     ) {
-        // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-        //       https://github.com/linebender/xilem/issues/1264
-        let scale = 1.0;
-
-        let length = ctx.content_box_size().get_coord(self.split_axis);
-        let bar_thickness = self.bar_thickness.dp(scale);
+        let length = ctx.content_box().size().get_coord(self.split_axis);
+        let bar_thickness = self.bar_thickness.get();
         let split_space = (length - bar_thickness).max(0.0);
-        let (min_limit, max_limit) = self.split_side_limits(split_space, scale);
+        let (min_limit, max_limit) = self.split_side_limits(split_space);
         let child1_len = split_space * self.split_point_effective;
 
         node.set_orientation(match self.split_axis {
@@ -905,7 +857,7 @@ mod tests {
 
         let child1_initial_width = {
             let root = harness.root_widget();
-            root.children()[0].ctx().border_box_size().width
+            root.children()[0].ctx().layout_border_box().size().width
         };
 
         // Initial bar center with default settings:
@@ -919,8 +871,8 @@ mod tests {
             let root = harness.root_widget();
             let children = root.children();
             (
-                children[0].ctx().border_box_size().width,
-                children[1].ctx().border_box_size().width,
+                children[0].ctx().layout_border_box().size().width,
+                children[1].ctx().layout_border_box().size().width,
             )
         };
 
@@ -941,14 +893,14 @@ mod tests {
 
         let child1_initial_width = {
             let root = harness.root_widget();
-            root.children()[0].ctx().border_box_size().width
+            root.children()[0].ctx().layout_border_box().size().width
         };
 
         harness.process_text_event(TextEvent::key_down(Key::Named(NamedKey::ArrowRight)));
 
         let child1_width = {
             let root = harness.root_widget();
-            root.children()[0].ctx().border_box_size().width
+            root.children()[0].ctx().layout_border_box().size().width
         };
 
         assert!(child1_width > child1_initial_width);
@@ -964,14 +916,14 @@ mod tests {
 
         let child1_width = {
             let root = harness.root_widget();
-            root.children()[0].ctx().border_box_size().width
+            root.children()[0].ctx().layout_border_box().size().width
         };
         assert!((child1_width - 50.0).abs() < 0.01);
 
         harness.process_window_event(WindowEvent::Resize(PhysicalSize::new(300, 100)));
         let child1_width = {
             let root = harness.root_widget();
-            root.children()[0].ctx().border_box_size().width
+            root.children()[0].ctx().layout_border_box().size().width
         };
         assert!((child1_width - 50.0).abs() < 0.01);
     }
@@ -986,14 +938,14 @@ mod tests {
 
         let child2_width = {
             let root = harness.root_widget();
-            root.children()[1].ctx().border_box_size().width
+            root.children()[1].ctx().layout_border_box().size().width
         };
         assert!((child2_width - 50.0).abs() < 0.01);
 
         harness.process_window_event(WindowEvent::Resize(PhysicalSize::new(300, 100)));
         let child2_width = {
             let root = harness.root_widget();
-            root.children()[1].ctx().border_box_size().width
+            root.children()[1].ctx().layout_border_box().size().width
         };
         assert!((child2_width - 50.0).abs() < 0.01);
     }
@@ -1001,8 +953,8 @@ mod tests {
     #[test]
     fn fraction_clamps_when_set() {
         let widget = Split::new(
-            Label::new("Hello").prepare().with_props(Padding::all(0.)),
-            Label::new("World").prepare().with_props(Padding::all(0.)),
+            Label::new("Hello").prepare().with_props(Padding::ZERO),
+            Label::new("World").prepare().with_props(Padding::ZERO),
         )
         .prepare();
 
@@ -1013,7 +965,7 @@ mod tests {
         });
         let child1_width = {
             let root = harness.root_widget();
-            root.children()[0].ctx().border_box_size().width
+            root.children()[0].ctx().layout_border_box().size().width
         };
         assert!((child1_width - 144.0).abs() < 0.01);
 
@@ -1022,7 +974,7 @@ mod tests {
         });
         let child1_width = {
             let root = harness.root_widget();
-            root.children()[0].ctx().border_box_size().width
+            root.children()[0].ctx().layout_border_box().size().width
         };
         assert!((child1_width - 0.0).abs() < 0.01);
     }
diff --git a/masonry/src/widgets/step_input.rs b/masonry/src/widgets/step_input.rs
index 9cb9cb39d..6feeef5aa 100644
--- a/masonry/src/widgets/step_input.rs
+++ b/masonry/src/widgets/step_input.rs
@@ -16,7 +16,7 @@ use crate::core::{
 };
 use crate::imaging::Painter;
 use crate::kurbo::{Affine, Axis, BezPath, Cap, Line, Point, Size, Stroke};
-use crate::layout::{LayoutSize, LenReq, Length, SizeDef};
+use crate::layout::{AsUnit, LayoutSize, LenReq, Length, SizeDef};
 use crate::peniko::Gradient;
 use crate::properties::{BackwardColor, ContentColor, ForwardColor, HeatColor, StepInputStyle};
 use crate::theme;
@@ -1106,9 +1106,9 @@ impl<T: Steppable> Widget for StepInput<T> {
             PointerEvent::Move(pu) => {
                 // If we're hovered, highlight the correct side's button.
                 if ctx.is_hovered() {
-                    let size = ctx.content_box_size();
+                    let content_box_center_x = ctx.content_box().center().x;
                     let local_x = ctx.local_position(pu.current.position).x;
-                    let hover_backward = local_x <= size.width * 0.5;
+                    let hover_backward = local_x <= content_box_center_x;
                     if hover_backward != self.hover_backward {
                         self.hover_backward = hover_backward;
                         ctx.request_paint_only();
@@ -1214,7 +1214,7 @@ impl<T: Steppable> Widget for StepInput<T> {
                 // * The button was previously pressed down on us (active)
                 // * The pointer is still on us (hovered)
                 if self.slide_last.is_none() && ctx.is_active() && ctx.is_hovered() {
-                    let size = ctx.content_box_size();
+                    let content_box_center_x = ctx.content_box().center().x;
                     let local_x = ctx.local_position(pbe.state.position).x;
 
                     // Snap based on modifier
@@ -1225,7 +1225,7 @@ impl<T: Steppable> Widget for StepInput<T> {
                     };
 
                     // Update the active value based on which side was clicked
-                    let value_changed = if local_x <= size.width * 0.5 {
+                    let value_changed = if local_x <= content_box_center_x {
                         if snap {
                             self.prev_snap()
                         } else {
@@ -1316,19 +1316,15 @@ impl<T: Steppable> Widget for StepInput<T> {
         props: &PropertiesRef<'_>,
         axis: Axis,
         len_req: LenReq,
-        cross_length: Option<f64>,
-    ) -> f64 {
-        // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-        //       https://github.com/linebender/xilem/issues/1264
-        let scale = 1.0;
-
-        let content_height = theme::BASIC_WIDGET_HEIGHT.dp(scale);
+        cross_length: Option<Length>,
+    ) -> Length {
+        let content_height = theme::BASIC_WIDGET_HEIGHT;
 
         let cache = ctx.property_cache();
         let style = props.get::<StepInputStyle>(cache);
 
         let (len_req, min_result) = match len_req {
-            LenReq::MinContent | LenReq::MaxContent => (len_req, 0.),
+            LenReq::MinContent | LenReq::MaxContent => (len_req, Length::ZERO),
             // We always want to use up all offered space but may need even more,
             // so we implement FitContent as space.max(MinContent).
             LenReq::FitContent(space) => (LenReq::MinContent, space),
@@ -1339,7 +1335,7 @@ impl<T: Steppable> Widget for StepInput<T> {
                 StepInputStyle::Basic => {
                     let vertical_space = cross_length.unwrap_or(content_height);
                     let (btn_length, btn_edge_pad) =
-                        Self::basic_button_length(vertical_space, None);
+                        Self::basic_button_length(vertical_space.get(), None);
                     match len_req {
                         LenReq::MinContent => 2. * (btn_length + 2. * btn_edge_pad),
                         LenReq::MaxContent => 2. * (btn_length * 3.),
@@ -1349,14 +1345,15 @@ impl<T: Steppable> Widget for StepInput<T> {
                 StepInputStyle::Flow => {
                     let vertical_space = cross_length.unwrap_or(content_height);
                     let (arrow_width, _, arrow_edge_pad) =
-                        Self::flow_button_length(vertical_space, None);
+                        Self::flow_button_length(vertical_space.get(), None);
                     match len_req {
                         LenReq::MinContent => 2. * (2. * arrow_width + arrow_edge_pad),
                         LenReq::MaxContent => 2. * (4. * arrow_width + arrow_edge_pad),
                         LenReq::FitContent(_) => unreachable!(),
                     }
                 }
-            },
+            }
+            .px(),
             Axis::Vertical => content_height,
         };
 
@@ -1369,19 +1366,18 @@ impl<T: Steppable> Widget for StepInput<T> {
         let context_size = LayoutSize::maybe(axis.cross(), cross_length);
         let cross = axis.cross();
         let label_cross_length = match cross {
-            Axis::Horizontal => {
-                cross_length.map(|cross_length| (cross_length - calc_button_length(cross)).max(0.))
-            }
+            Axis::Horizontal => cross_length
+                .map(|cross_length| cross_length.saturating_sub(calc_button_length(cross))),
             Axis::Vertical => cross_length,
         };
         let label_length = if let Some(label) = self.label.as_mut() {
             ctx.compute_length(label, auto_length, context_size, axis, label_cross_length)
         } else {
-            0.
+            Length::ZERO
         };
 
         let length = match axis {
-            Axis::Horizontal => label_length + button_length,
+            Axis::Horizontal => label_length.saturating_add(button_length),
             Axis::Vertical => label_length.max(button_length),
         };
 
@@ -1535,7 +1531,7 @@ impl<T: Steppable> StepInput<T> {
         let color_backward = *props.get::<BackwardColor>(cache);
         let color_forward = *props.get::<ForwardColor>(cache);
 
-        let size = ctx.content_box_size();
+        let size = ctx.content_box().size();
         let (_, forward, backward) = self.visual_speed();
 
         let (btn_length, btn_edge_pad) = Self::basic_button_length(size.height, Some(size.width));
@@ -1608,7 +1604,7 @@ impl<T: Steppable> StepInput<T> {
         let color_forward = *props.get::<ForwardColor>(cache);
         let color_heat = *props.get::<HeatColor>(cache);
 
-        let size = ctx.content_box_size();
+        let size = ctx.content_box().size();
         let (speed, forward, backward) = self.visual_speed();
         let sliding = forward || backward;
 
@@ -2379,7 +2375,7 @@ mod tests {
             ))
             .with_fixed(si(500, (StepInputStyle::Flow, Dimensions::width(100.px()))))
             .prepare()
-            .with_props(Padding::all(10.));
+            .with_props(Padding::all(10.px()));
 
         let mut harness = TestHarness::create_with_size(test_property_set(), root, (150, 525));
 
@@ -2405,7 +2401,7 @@ mod tests {
             .with_fixed(lines_backward)
             .with_fixed(lines_forward)
             .prepare()
-            .with_props(Padding::all(10.));
+            .with_props(Padding::all(10.px()));
 
         let mut harness = TestHarness::create_with_size(test_property_set(), root, (270, 200));
 
@@ -2460,7 +2456,7 @@ mod tests {
             .with_fixed(basic(1234, (Dimensions::fixed(100.px(), 200.px())).into()))
             .with_fixed(flow(1234, (Dimensions::fixed(100.px(), 200.px())).into()))
             .prepare()
-            .with_props(Padding::all(10.));
+            .with_props(Padding::all(10.px()));
 
         let mut harness = TestHarness::create_with_size(test_property_set(), root, (320, 650));
 
diff --git a/masonry/src/widgets/svg.rs b/masonry/src/widgets/svg.rs
index 92e7cfdd7..fa9a6ba10 100644
--- a/masonry/src/widgets/svg.rs
+++ b/masonry/src/widgets/svg.rs
@@ -10,13 +10,13 @@ use resvg::usvg::Tree;
 use tracing::{Span, trace_span};
 
 use crate::core::{
-    AccessCtx, ArcStr, ChildrenIds, LayoutCtx, MeasureCtx, NoAction, PaintCtx, PropertiesMut,
-    PropertiesRef, Property, RegisterCtx, Update, UpdateCtx, UsesProperty, Widget, WidgetId,
-    WidgetMut,
+    AccessCtx, ArcStr, ChildrenIds, ComposeCtx, LayoutCtx, MeasureCtx, NoAction, PaintCtx,
+    PropertiesMut, PropertiesRef, Property, RegisterCtx, Update, UpdateCtx, UsesProperty, Widget,
+    WidgetId, WidgetMut,
 };
 use crate::imaging::Painter;
 use crate::kurbo::{Affine, Axis, Size};
-use crate::layout::LenReq;
+use crate::layout::{LenReq, Length};
 use crate::peniko::{ImageAlphaType, ImageBrush, ImageData, ImageFormat};
 use crate::properties::ObjectFit;
 
@@ -108,19 +108,15 @@ impl Svg {
 impl Svg {
     /// Returns the preferred size of the SVG.
     ///
-    /// The returned size is in device pixels.
+    /// The returned size is in logical pixels.
     ///
-    /// This takes into account both [`SVG_SCALE`] and `scale`, and so the result
-    /// isn't just the SVG data size which would be const across scale factors.
-    ///
-    /// This method's result will be stable in relation to other widgets at any scale factor.
-    ///
-    /// Basically it provides logical pixels in device pixel space.
-    fn preferred_size(&self, scale: f64) -> Size {
+    /// This takes into account [`SVG_SCALE`], so rasterization can use a stable
+    /// preferred logical size.
+    fn preferred_size(&self) -> Size {
         let size = self.tree.size();
         Size::new(
-            size.width() as f64 * scale / SVG_SCALE,
-            size.height() as f64 * scale / SVG_SCALE,
+            size.width() as f64 / SVG_SCALE,
+            size.height() as f64 / SVG_SCALE,
         )
     }
 }
@@ -153,15 +149,11 @@ impl Widget for Svg {
         props: &PropertiesRef<'_>,
         axis: Axis,
         len_req: LenReq,
-        cross_length: Option<f64>,
-    ) -> f64 {
-        // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-        //       https://github.com/linebender/xilem/issues/1264
-        let scale = 1.0;
-
+        cross_length: Option<Length>,
+    ) -> Length {
         let cache = ctx.property_cache();
         let object_fit = props.get::<ObjectFit>(cache);
-        let preferred_size = self.preferred_size(scale);
+        let preferred_size = self.preferred_size();
 
         object_fit.measure(axis, len_req, cross_length, preferred_size)
     }
@@ -170,6 +162,18 @@ impl Widget for Svg {
         self.rasterized = None;
     }
 
+    fn compose(&mut self, ctx: &mut ComposeCtx<'_>) {
+        // Clear the image cache if the size changed.
+        if let Some(rasterized) = &self.rasterized {
+            let content_box = ctx.content_box();
+            let pixmap_width = content_box.width().ceil() as u32;
+            let pixmap_height = content_box.height().ceil() as u32;
+            if rasterized.image.width != pixmap_width || rasterized.image.height != pixmap_height {
+                self.rasterized = None;
+            }
+        }
+    }
+
     fn paint(
         &mut self,
         ctx: &mut PaintCtx<'_>,
@@ -197,7 +201,9 @@ impl Widget for Svg {
             let svg_size = self.tree.size();
             let svg_size = Size::new(svg_size.width() as f64, svg_size.height() as f64);
 
-            let coeffs = object_fit.affine(content_box.size(), svg_size).as_coeffs();
+            let coeffs = object_fit
+                .affine(content_box.size().to_rect(), svg_size.to_rect())
+                .as_coeffs();
             let transform = tiny_skia::Transform::from_row(
                 coeffs[0] as f32,
                 coeffs[1] as f32,
diff --git a/masonry/src/widgets/switch.rs b/masonry/src/widgets/switch.rs
index 7458a6163..9eb0ea41b 100644
--- a/masonry/src/widgets/switch.rs
+++ b/masonry/src/widgets/switch.rs
@@ -15,7 +15,7 @@ use crate::core::{
 };
 use crate::imaging::Painter;
 use crate::kurbo::{Axis, Circle, Join, Point, Rect, Size, Stroke};
-use crate::layout::LenReq;
+use crate::layout::{LenReq, Length};
 use crate::properties::{
     Background, BorderColor, BorderWidth, CornerRadius, ThumbColor, ThumbRadius, TrackThickness,
 };
@@ -80,14 +80,11 @@ impl Switch {
     /// Calculates the track dimensions based on properties.
     ///
     /// Returns `(track_width, track_height)`.
-    fn track_dimensions(track_thickness: f64, thumb_radius: f64, scale: f64) -> (f64, f64) {
-        let track_thickness = track_thickness * scale;
-        let thumb_radius = thumb_radius * scale;
-
+    fn track_dimensions(track_thickness: Length, thumb_radius: Length) -> (Length, Length) {
         // The track height is the larger of track_thickness or thumb diameter
-        let track_height = track_thickness.max(thumb_radius * 2.0);
+        let track_height = track_thickness.max(thumb_radius.saturating_add(thumb_radius));
         // The track width is approximately 2x the height (pill shape)
-        let track_width = track_height * 2.0;
+        let track_width = track_height.saturating_add(track_height);
 
         (track_width, track_height)
     }
@@ -193,17 +190,12 @@ impl Widget for Switch {
         props: &PropertiesRef<'_>,
         axis: Axis,
         _len_req: LenReq,
-        _cross_length: Option<f64>,
-    ) -> f64 {
-        // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-        //       https://github.com/linebender/xilem/issues/1264
-        let scale = 1.0;
-
+        _cross_length: Option<Length>,
+    ) -> Length {
         let cache = ctx.property_cache();
         let track_thickness = props.get::<TrackThickness>(cache).0;
         let thumb_radius = props.get::<ThumbRadius>(cache).0;
-        let (track_width, track_height) =
-            Self::track_dimensions(track_thickness, thumb_radius, scale);
+        let (track_width, track_height) = Self::track_dimensions(track_thickness, thumb_radius);
 
         match axis {
             Axis::Horizontal => track_width,
@@ -228,23 +220,21 @@ impl Widget for Switch {
         props: &PropertiesRef<'_>,
         painter: &mut Painter<'_>,
     ) {
-        // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-        //       https://github.com/linebender/xilem/issues/1264
-        let scale = 1.0;
-
         let is_disabled = ctx.is_disabled();
 
-        let size = ctx.border_box_size();
+        let size = ctx.border_box().size();
 
         let border_box_translation = ctx.border_box_translation();
         let cache = ctx.property_cache();
         let track_thickness_val = props.get::<TrackThickness>(cache).0;
         let thumb_radius_val = props.get::<ThumbRadius>(cache).0;
         let (track_width, track_height) =
-            Self::track_dimensions(track_thickness_val, thumb_radius_val, scale);
-        let thumb_radius = thumb_radius_val * scale;
-        let border_width = props.get::<BorderWidth>(cache).width * scale;
-        let corner_radius = props.get::<CornerRadius>(cache).radius * scale;
+            Self::track_dimensions(track_thickness_val, thumb_radius_val);
+        let track_width = track_width.get();
+        let track_height = track_height.get();
+        let thumb_radius = thumb_radius_val.get();
+        let border_width = props.get::<BorderWidth>(cache).width.get();
+        let corner_radius = props.get::<CornerRadius>(cache).radius.get();
         let thumb_color = props.get::<ThumbColor>(cache).0;
 
         // Center the track within the available space
@@ -407,7 +397,7 @@ mod tests {
     #[test]
     fn measure_dimensions() {
         // Test that the switch measures to expected dimensions based on theme properties.
-        // Theme defaults: ThumbRadius(8.0), TrackThickness(20.0), BorderWidth(1.0)
+        // Theme defaults: ThumbRadius(8px), TrackThickness(20px), BorderWidth(1px)
         // Expected: track_height = max(20, 8*2) = 20, track_width = 20*2 = 40
         // With borders: width = 42, height = 22
         let switch = Switch::new(false).prepare();
@@ -426,7 +416,8 @@ mod tests {
         let size = harness
             .get_widget_with_id(switch_id)
             .ctx()
-            .border_box_size();
+            .layout_border_box()
+            .size();
 
         // Switch should maintain its intrinsic size, not fill available space
         assert_eq!(
diff --git a/masonry/src/widgets/text_area.rs b/masonry/src/widgets/text_area.rs
index 5c870daa9..67a7ff345 100644
--- a/masonry/src/widgets/text_area.rs
+++ b/masonry/src/widgets/text_area.rs
@@ -16,7 +16,7 @@ use crate::core::{
 };
 use crate::imaging::Painter;
 use crate::kurbo::{Affine, Axis, Point, Rect, Size};
-use crate::layout::LenReq;
+use crate::layout::{AsUnit, LenReq, Length};
 use crate::parley::PlainEditor;
 use crate::parley::editing::{Generation, SplitString};
 use crate::properties::{CaretColor, ContentColor, SelectionColor};
@@ -876,8 +876,8 @@ impl<const EDITABLE: bool> Widget for TextArea<EDITABLE> {
         _props: &PropertiesRef<'_>,
         axis: Axis,
         len_req: LenReq,
-        cross_length: Option<f64>,
-    ) -> f64 {
+        cross_length: Option<Length>,
+    ) -> Length {
         // Currently we only support the common horizontal-tb writing mode,
         // so we hardcode the assumption that inline axis is horizontal.
         let inline = Axis::Horizontal;
@@ -894,7 +894,7 @@ impl<const EDITABLE: bool> Widget for TextArea<EDITABLE> {
                     // This is a common optimization also present on the web.
                     match len_req {
                         // Zero space will get us the length of longest unbreakable word
-                        LenReq::MinContent => Some(0.),
+                        LenReq::MinContent => Some(Length::ZERO),
                         // Unbounded space will get us the length of the unwrapped string
                         LenReq::MaxContent => None,
                         // Attempt to wrap according to the parent's request
@@ -905,7 +905,7 @@ impl<const EDITABLE: bool> Widget for TextArea<EDITABLE> {
                     // If there is no explicit cross_length present, we fall back to inline defaults.
                     match len_req {
                         // Fallback is inline axis MinContent
-                        LenReq::MinContent => cross_length.or(Some(0.)),
+                        LenReq::MinContent => cross_length.or(Some(Length::ZERO)),
                         // Fallback is inline axis MaxContent, even for FitContent, because
                         // as we don't have the inline space bound we'll consider it unbounded.
                         LenReq::MaxContent | LenReq::FitContent(_) => cross_length,
@@ -915,7 +915,7 @@ impl<const EDITABLE: bool> Widget for TextArea<EDITABLE> {
             // If we're never wrapping, then there's no max advance.
             false => None,
         }
-        .map(|v| v as f32);
+        .map(|v| v.get() as f32);
 
         let mut reset_max_advance = None;
         if self.last_max_advance != max_advance {
@@ -944,7 +944,7 @@ impl<const EDITABLE: bool> Widget for TextArea<EDITABLE> {
             self.editor.refresh_layout(fctx, lctx);
         }
 
-        length
+        length.px()
     }
 
     fn layout(&mut self, ctx: &mut LayoutCtx<'_>, _props: &PropertiesRef<'_>, size: Size) {
@@ -1061,13 +1061,15 @@ impl<const EDITABLE: bool> Widget for TextArea<EDITABLE> {
 
         let cache = ctx.property_cache();
         let text_color = props.get::<ContentColor>(cache);
+        let text_origin_in_layout_border_box_space =
+            Point::ORIGIN + ctx.visual_translation() + ctx.border_box_translation();
 
         let updated = self.editor.try_accessibility(
             ctx.tree_update(),
             node,
             AccessCtx::next_node_id,
-            0.,
-            0.,
+            text_origin_in_layout_border_box_space.x,
+            text_origin_in_layout_border_box_space.y,
             |node, style| set_accesskit_brush_properties(node, style, &[text_color.color.into()]),
         );
 
diff --git a/masonry/src/widgets/text_input.rs b/masonry/src/widgets/text_input.rs
index 1fd6ced2c..09287af15 100644
--- a/masonry/src/widgets/text_input.rs
+++ b/masonry/src/widgets/text_input.rs
@@ -15,7 +15,7 @@ use crate::core::{
 };
 use crate::imaging::Painter;
 use crate::kurbo::{Axis, Point, Size};
-use crate::layout::{LayoutSize, LenReq};
+use crate::layout::{LayoutSize, LenReq, Length};
 use crate::properties::{CaretColor, ContentColor, LineBreaking, PlaceholderColor, SelectionColor};
 use crate::widgets::{Label, TextArea};
 
@@ -268,8 +268,8 @@ impl Widget for TextInput {
         _props: &PropertiesRef<'_>,
         axis: Axis,
         len_req: LenReq,
-        cross_length: Option<f64>,
-    ) -> f64 {
+        cross_length: Option<Length>,
+    ) -> Length {
         match len_req {
             LenReq::MaxContent | LenReq::MinContent => {
                 let auto_length = len_req.into();
diff --git a/masonry/src/widgets/variable_label.rs b/masonry/src/widgets/variable_label.rs
index 610f1157d..b4153ae86 100644
--- a/masonry/src/widgets/variable_label.rs
+++ b/masonry/src/widgets/variable_label.rs
@@ -13,7 +13,7 @@ use crate::core::{
 };
 use crate::imaging::Painter;
 use crate::kurbo::{Axis, Point, Size};
-use crate::layout::LenReq;
+use crate::layout::{LenReq, Length};
 use crate::parley::style::FontWeight;
 use crate::widgets::Label;
 
@@ -231,8 +231,8 @@ impl Widget for VariableLabel {
         _props: &PropertiesRef<'_>,
         axis: Axis,
         _len_req: LenReq,
-        cross_length: Option<f64>,
-    ) -> f64 {
+        cross_length: Option<Length>,
+    ) -> Length {
         ctx.redirect_measurement(&mut self.label, axis, cross_length)
     }
 
diff --git a/masonry/src/widgets/virtual_scroll.rs b/masonry/src/widgets/virtual_scroll.rs
index 9d15376a7..ea771899b 100644
--- a/masonry/src/widgets/virtual_scroll.rs
+++ b/masonry/src/widgets/virtual_scroll.rs
@@ -15,7 +15,7 @@ use crate::core::{
 use crate::dpi::PhysicalPosition;
 use crate::imaging::Painter;
 use crate::kurbo::{Axis, Point, Size, Vec2};
-use crate::layout::{LenDef, LenReq, SizeDef};
+use crate::layout::{LenDef, LenReq, Length, SizeDef};
 use crate::util::debug_panic;
 
 /// The action type sent by the [`VirtualScroll`] widget.
@@ -480,7 +480,7 @@ impl VirtualScroll {
 
     /// A wrapper to use [`post_scroll`](Self::post_scroll) in event methods.
     fn event_post_scroll(&mut self, ctx: &mut EventCtx<'_>) {
-        match self.post_scroll(ctx.content_box_size()) {
+        match self.post_scroll(ctx.layout_content_box().size()) {
             PostScrollResult::Layout => {
                 ctx.request_layout();
             }
@@ -491,7 +491,7 @@ impl VirtualScroll {
 
     /// A wrapper to use [`post_scroll`](Self::post_scroll) in update methods.
     fn update_post_scroll(&mut self, ctx: &mut UpdateCtx<'_>) {
-        match self.post_scroll(ctx.content_box_size()) {
+        match self.post_scroll(ctx.layout_content_box().size()) {
             PostScrollResult::Layout => {
                 ctx.request_layout();
             }
@@ -536,10 +536,8 @@ impl Widget for VirtualScroll {
     ) {
         match event {
             PointerEvent::Scroll(PointerScrollEvent { delta, .. }) => {
-                let size = ctx.content_box_size();
-                // TODO - Remove reference to scale factor.
-                // See https://github.com/linebender/xilem/issues/1264
-                let scale_factor = ctx.get_scale_factor();
+                let size = ctx.layout_content_box().size();
+                let scale_factor = ctx.scale_factor();
                 let line_px = PhysicalPosition {
                     x: 120.0 * scale_factor,
                     y: 120.0 * scale_factor,
@@ -615,7 +613,7 @@ impl Widget for VirtualScroll {
             };
             let amount = match unit {
                 accesskit::ScrollUnit::Item => self.anchor_height,
-                accesskit::ScrollUnit::Page => ctx.content_box_size().height,
+                accesskit::ScrollUnit::Page => ctx.layout_content_box().size().height,
             };
             if event.action == accesskit::Action::ScrollUp {
                 self.scroll_offset_from_anchor -= amount;
@@ -638,7 +636,7 @@ impl Widget for VirtualScroll {
         match event {
             Update::RequestPanToChild(target) => {
                 let new_pos_y = super::portal::compute_pan_range(
-                    0.0..ctx.content_box_size().height,
+                    0.0..ctx.layout_content_box().size().height,
                     target.min_y()..target.max_y(),
                 )
                 .start;
@@ -655,8 +653,8 @@ impl Widget for VirtualScroll {
         _props: &PropertiesRef<'_>,
         _axis: Axis,
         len_req: LenReq,
-        _cross_length: Option<f64>,
-    ) -> f64 {
+        _cross_length: Option<Length>,
+    ) -> Length {
         // Our preferred size is a const square in logical pixels.
         //
         // It is not clear that a data-derived result would be better.
@@ -672,14 +670,10 @@ impl Widget for VirtualScroll {
         // Still, we would run into complexities with ensuring they are loaded in time for measure.
         //
         // So, for now, we just use a simple O(1) default.
-        const DEFAULT_LENGTH: f64 = 100.;
-
-        // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-        //       https://github.com/linebender/xilem/issues/1264
-        let scale = 1.0;
+        const DEFAULT_LENGTH: Length = Length::const_px(100.);
 
         match len_req {
-            LenReq::MinContent | LenReq::MaxContent => DEFAULT_LENGTH * scale,
+            LenReq::MinContent | LenReq::MaxContent => DEFAULT_LENGTH,
             LenReq::FitContent(space) => space,
         }
     }
@@ -1008,7 +1002,8 @@ impl Widget for VirtualScroll {
             node.add_action(accesskit::Action::ScrollUp);
         }
         let at_end = self.anchor_index + 1 == self.valid_range.end && {
-            let max_scroll = (self.anchor_height - ctx.content_box_size().height / 2.).max(0.0);
+            let max_scroll =
+                (self.anchor_height - ctx.layout_content_box().size().height / 2.).max(0.0);
             self.scroll_offset_from_anchor >= max_scroll
         };
         if !at_end {
diff --git a/masonry/src/widgets/zstack.rs b/masonry/src/widgets/zstack.rs
index 6c04f3bf7..18da58f49 100644
--- a/masonry/src/widgets/zstack.rs
+++ b/masonry/src/widgets/zstack.rs
@@ -11,7 +11,7 @@ use crate::core::{
 };
 use crate::imaging::Painter;
 use crate::kurbo::{Axis, Rect, Size};
-use crate::layout::{LayoutSize, LenReq, SizeDef, UnitPoint};
+use crate::layout::{LayoutSize, LenReq, Length, SizeDef, UnitPoint};
 
 struct Child {
     widget: WidgetPod<dyn Widget>,
@@ -218,12 +218,12 @@ impl Widget for ZStack {
         _props: &PropertiesRef<'_>,
         axis: Axis,
         len_req: LenReq,
-        cross_length: Option<f64>,
-    ) -> f64 {
+        cross_length: Option<Length>,
+    ) -> Length {
         let auto_length = len_req.into();
         let context_size = LayoutSize::maybe(axis.cross(), cross_length);
 
-        let mut length: f64 = 0.;
+        let mut length = Length::ZERO;
         for child in &mut self.children {
             let child_length = ctx.compute_length(
                 &mut child.widget,
@@ -260,7 +260,7 @@ impl Widget for ZStack {
 
             let child_origin = ctx.child_origin(&child.widget);
 
-            let (first_baseline, last_baseline) = ctx.child_aligned_baselines(&child.widget);
+            let (first_baseline, last_baseline) = ctx.child_baselines(&child.widget);
             min_baseline = min_baseline.min(child_origin.y + first_baseline);
             max_baseline = max_baseline.max(child_origin.y + last_baseline);
         }
@@ -327,12 +327,12 @@ mod tests {
         let mut bg_props = PropertySet::new();
         bg_props.insert(Background::Color(palette::css::BLUE));
         bg_props.insert(BorderColor::new(palette::css::TEAL));
-        bg_props.insert(BorderWidth::all(2.0));
+        bg_props.insert(BorderWidth::all(2.px()));
 
         let mut fg_props = PropertySet::new();
         fg_props.insert(Background::Color(palette::css::RED));
         fg_props.insert(BorderColor::new(palette::css::PINK));
-        fg_props.insert(BorderWidth::all(2.0));
+        fg_props.insert(BorderWidth::all(2.px()));
 
         let widget = ZStack::new()
             .with(
diff --git a/masonry_core/src/app/layer_stack.rs b/masonry_core/src/app/layer_stack.rs
index de7293180..d03624ee0 100644
--- a/masonry_core/src/app/layer_stack.rs
+++ b/masonry_core/src/app/layer_stack.rs
@@ -12,7 +12,7 @@ use crate::core::{
     RegisterCtx, UpdateCtx, Widget, WidgetId, WidgetMut, WidgetPod,
 };
 use crate::imaging::Painter;
-use crate::layout::{LenReq, SizeDef};
+use crate::layout::{LenReq, Length, SizeDef};
 
 /// A widget representing the top-level stack of visible layers owned by [`RenderRoot`](crate::app::RenderRoot).
 ///
@@ -39,7 +39,7 @@ pub(crate) struct LayerStack {
 struct LayerEntry {
     /// Root widget owned by this top-level layer entry.
     root: WidgetPod<dyn Widget>,
-    /// Position of this layer entry in the `LayerStack`'s content-box coordinates.
+    /// Position of this layer entry in the `LayerStack`'s layout content-box coordinates.
     position: Point,
 }
 
@@ -75,7 +75,7 @@ impl LayerStack {
 impl LayerStack {
     /// Adds a new layer at the end of the stack, with the given widget as its root, at the given position.
     ///
-    /// The given `pos` must be in this `LayerStack`'s content-box coordinate space.
+    /// The given `pos` must be in this `LayerStack`'s layout content-box coordinate space.
     /// If this `LayerStack` is used as the root widget with no borders, padding, or transforms,
     /// then that coordinate space will exactly match the window's coordinate space.
     pub(crate) fn add_layer(
@@ -131,7 +131,7 @@ impl LayerStack {
 
     /// Repositions the layer with the given widget as root.
     ///
-    /// The given `new_origin` must be in this `LayerStack`'s content-box coordinate space.
+    /// The given `new_origin` must be in this `LayerStack`'s layout content-box coordinate space.
     /// If this `LayerStack` is used as the root widget with no borders, padding, or transforms,
     /// then that coordinate space will exactly match the window's coordinate space.
     ///
@@ -180,12 +180,12 @@ impl Widget for LayerStack {
         _props: &PropertiesRef<'_>,
         axis: Axis,
         _len_req: LenReq,
-        cross_length: Option<f64>,
-    ) -> f64 {
+        cross_length: Option<Length>,
+    ) -> Length {
         // First child is the base layer, for which we do measure passthrough.
         let Some(base_layer) = self.layers.first_mut() else {
             debug_panic!("Missing first layer");
-            return 0.;
+            return Length::ZERO;
         };
         // Let the base layer handle the response
         ctx.redirect_measurement(&mut base_layer.root, axis, cross_length)
diff --git a/masonry_core/src/app/render_root.rs b/masonry_core/src/app/render_root.rs
index 729bb4ef5..3e96f1625 100644
--- a/masonry_core/src/app/render_root.rs
+++ b/masonry_core/src/app/render_root.rs
@@ -112,7 +112,7 @@ pub(crate) struct RenderRootState {
     /// The `WidgetId` is the id of the widget that made the request.
     ///
     /// The `Rect` is the area it wants to be scrolled into view,
-    /// in its border-box coordinate space.
+    /// in its layout border-box coordinate space.
     pub(crate) scroll_request_targets: Vec<(WidgetId, Rect)>,
 
     /// List of ancestors of the currently hovered widget.
@@ -475,7 +475,8 @@ impl RenderRoot {
         match event {
             WindowEvent::Rescale(scale_factor) => {
                 self.global_state.scale_factor = scale_factor;
-                self.request_render_all();
+                self.request_compose_and_render_all();
+                self.run_rewrite_passes();
                 Handled::Yes
             }
             WindowEvent::Resize(size) => {
@@ -880,27 +881,31 @@ impl RenderRoot {
             .emit_signal(RenderRootSignal::RequestRedraw);
     }
 
-    pub(crate) fn request_render_all(&mut self) {
-        fn request_render_all_in(node: ArenaMut<'_, WidgetArenaNode>) {
+    pub(crate) fn request_compose_and_render_all(&mut self) {
+        fn request_compose_and_render_all_in(node: ArenaMut<'_, WidgetArenaNode>) {
             let children = node.children;
             let widget = &mut *node.item.widget;
             let state = &mut node.item.state;
 
+            state.needs_compose = true;
+            state.request_compose = true;
+
             state.needs_paint = true;
-            state.needs_accessibility = true;
             state.request_pre_paint = true;
             state.request_paint = true;
-            state.request_accessibility = true;
             state.request_post_paint = true;
 
+            state.needs_accessibility = true;
+            state.request_accessibility = true;
+
             let id = state.id;
             recurse_on_children(id, widget, children, |node| {
-                request_render_all_in(node);
+                request_compose_and_render_all_in(node);
             });
         }
 
         let root_node = self.widget_arena.get_node_mut(self.root_id());
-        request_render_all_in(root_node);
+        request_compose_and_render_all_in(root_node);
         self.global_state
             .emit_signal(RenderRootSignal::RequestRedraw);
     }
diff --git a/masonry_core/src/core/contexts.rs b/masonry_core/src/core/contexts.rs
index c687c657a..55d1bd5be 100644
--- a/masonry_core/src/core/contexts.rs
+++ b/masonry_core/src/core/contexts.rs
@@ -26,7 +26,7 @@ use crate::core::{
     WidgetState,
 };
 use crate::kurbo::{Affine, Axis, Insets, Point, Rect, Size, Vec2};
-use crate::layout::{LayoutSize, LenDef, SizeDef};
+use crate::layout::{LayoutSize, LenDef, Length, SizeDef};
 use crate::passes::layout::{place_widget, resolve_length, resolve_size, run_layout_on};
 use crate::peniko::Color;
 use crate::util::{ParentLinkedList, get_debug_color};
@@ -221,11 +221,12 @@ impl_context_method!(
         #[allow(dead_code, reason = "Copy-pasted for some types that don't need it")]
         /// Returns the local transform of this widget.
         ///
-        /// This transform is used during the mapping of this widget's border-box coordinate space
-        /// to the parent's border-box coordinate space.
+        /// This transform is used during the mapping of this widget's layout border-box
+        /// coordinate space to the parent's layout border-box coordinate space.
         ///
-        /// When calculating the effective border-box of this widget, first this transform
-        /// will be applied and then `scroll_translation` and `origin` applied on top.
+        /// When mapping this widget's visual border-box into the window's coordinate space,
+        /// first this transform will be applied and then `scroll_translation` and `origin`
+        /// applied on top.
         pub fn transform(&self) -> Affine {
             self.widget_state.transform
         }
@@ -440,11 +441,11 @@ impl EventCtx<'_> {
     /// capture the pointer during any other event.
     ///
     /// A widget normally only receives pointer events when the pointer is inside the widget's
-    /// layout box. Pointer capture causes widget layout boxes to be ignored: when the pointer is
-    /// captured by a widget, that widget will continue receiving pointer events when the pointer
-    /// is outside the widget's layout box. Other widgets the pointer is over will not receive
-    /// events. Events that are not marked as handled by the capturing widget, bubble up to the
-    /// widget's ancestors, ignoring their layout boxes as well.
+    /// visual border-box. Pointer capture causes widget layout boxes to be ignored: when the
+    /// pointer is captured by a widget, that widget will continue receiving pointer events when
+    /// the pointer is outside the widget's visual border-box. Other widgets the pointer is over
+    /// will not receive events. Events that are not marked as handled by the capturing widget,
+    /// bubble up to the widget's ancestors, ignoring their visual border-boxes as well.
     ///
     /// The pointer cannot be captured by multiple widgets at the same time. If a widget has
     /// captured the pointer and another widget captures it, the first widget loses the pointer
@@ -502,10 +503,8 @@ impl EventCtx<'_> {
     }
 
     /// Converts the given position from the window's coordinate space
-    /// to this widget's content-box coordinate space.
+    /// to this widget's visual content-box coordinate space.
     pub fn local_position(&self, p: PhysicalPosition<f64>) -> Point {
-        // TODO: Remove this .to_logical() conversion when scale refactor work happens.
-        //       https://github.com/linebender/xilem/issues/1264
         let LogicalPosition { x, y } = p.to_logical(self.global_state.scale_factor);
         self.to_local(Point { x, y })
     }
@@ -513,9 +512,9 @@ impl EventCtx<'_> {
 
 // Methods shared by event and action handling.
 impl_context_method!(ActionCtx<'_>, EventCtx<'_>, {
-    /// Sends a signal to parent widgets to scroll this widget's border-box into view.
+    /// Sends a signal to parent widgets to scroll this widget's visual border-box into view.
     pub fn request_scroll_to_this(&mut self) {
-        let rect = self.widget_state.border_box_size().to_rect();
+        let rect = self.widget_state.visual_border_box;
         self.global_state
             .scroll_request_targets
             .push((self.widget_state.id, rect));
@@ -523,10 +522,12 @@ impl_context_method!(ActionCtx<'_>, EventCtx<'_>, {
 
     /// Sends a signal to parent widgets to scroll the provided `rect` into view.
     ///
-    /// The `rect` must be in this widget's content-box coordinate space.
+    /// The `rect` must be in this widget's visual content-box coordinate space.
     pub fn request_scroll_to(&mut self, rect: Rect) {
-        // Convert from this widget's content-box space to border-box space.
-        let rect = rect + self.widget_state.border_box_translation();
+        // Convert from this widget's visual content-box space to layout border-box space.
+        let rect = rect
+            + self.widget_state.visual_translation()
+            + self.widget_state.border_box_translation();
         self.global_state
             .scroll_request_targets
             .push((self.widget_state.id, rect));
@@ -607,9 +608,7 @@ impl AccessCtx<'_> {
 
 // --- MARK: COMPUTE LENGTH
 impl_context_method!(MeasureCtx<'_>, LayoutCtx<'_>, {
-    /// Computes the `child`'s preferred border-box length on the given `axis`.
-    ///
-    /// The returned length will be finite, non-negative, and in device pixels.
+    /// Computes the `child`'s preferred border-box [`Length`] on the given `axis`.
     ///
     /// Container widgets usually call this method as part of their [`measure`] logic,
     /// to help them calculate their own length on the given `axis`. They call it as part
@@ -624,10 +623,8 @@ impl_context_method!(MeasureCtx<'_>, LayoutCtx<'_>, {
     /// to ask the child to fit inside the available space. Sometimes a different fallback
     /// makes more sense, e.g. `Grid` uses [`LenDef::Fixed`] to fall back to the exact
     /// allocated child area size.
-    /// `auto_length` values must be finite, non-negative, and in device pixels.
-    /// An invalid `auto_length` will fall back to [`LenDef::MaxContent`].
     ///
-    /// `context_size` is the size, in device pixels, that is used to resolve relative sizes.
+    /// `context_size` is the size that is used to resolve relative sizes.
     /// For example [`Ratio(0.5)`] will result in half the context size.
     /// This is usually the container widget's content-box size, i.e. excluding borders and padding.
     /// Examples of exceptions include `Grid` which will provide the child's area size,
@@ -636,14 +633,6 @@ impl_context_method!(MeasureCtx<'_>, LayoutCtx<'_>, {
     ///
     /// `cross_length` is the length of the cross axis and is critical information for certain
     /// widgets, e.g. for text max advance or to keep an aspect ratio.
-    /// If present, `cross_length` must be finite, non-negative, and in device pixels.
-    /// An invalid `cross_length` will fall back to `None`.
-    ///
-    /// # Panics
-    ///
-    /// Panics if `auto_length` is non-finite or negative and debug assertions are enabled.
-    ///
-    /// Panics if `cross_length` is non-finite or negative and debug assertions are enabled.
     ///
     /// [`measure`]: Widget::measure
     /// [`layout`]: Widget::layout
@@ -656,8 +645,8 @@ impl_context_method!(MeasureCtx<'_>, LayoutCtx<'_>, {
         auto_length: LenDef,
         context_size: LayoutSize,
         axis: Axis,
-        cross_length: Option<f64>,
-    ) -> f64 {
+        cross_length: Option<Length>,
+    ) -> Length {
         let id = child.id();
         let node = self.children.item_mut(id).unwrap();
         resolve_length(
@@ -759,13 +748,6 @@ impl MeasureCtx<'_> {
     /// This is because the redirection introduces new inputs in the form of [`auto_length`]
     /// and [`context_size`] that are not part of the cache key.
     ///
-    /// If present, `cross_length` must be finite, non-negative, and in device pixels.
-    /// An invalid `cross_length` will fall back to `None`.
-    ///
-    /// # Panics
-    ///
-    /// Panics if `cross_length` is non-finite or negative and debug assertions are enabled.
-    ///
     /// [`measure`]: Widget::measure
     /// [`compute_length`]: Self::compute_length
     /// [`auto_length`]: Self::auto_length
@@ -774,8 +756,8 @@ impl MeasureCtx<'_> {
         &mut self,
         child: &mut WidgetPod<impl Widget + ?Sized>,
         axis: Axis,
-        cross_length: Option<f64>,
-    ) -> f64 {
+        cross_length: Option<Length>,
+    ) -> Length {
         // We're adding two new variables, auto_length and context_size, into the measure function,
         // which are not part of the cache key. Hence, we need to not cache.
         self.cache_result = false;
@@ -819,7 +801,7 @@ impl LayoutCtx<'_> {
 
     /// Computes the `child`'s preferred border-box size.
     ///
-    /// The returned size will be finite, non-negative, and in device pixels.
+    /// The returned size will be finite, non-negative, and in logical pixels.
     ///
     /// Container widgets usually call this method as part of their [`layout`] logic, but
     /// ultimately they can disregard the result and pass a different size to [`run_layout`].
@@ -830,7 +812,7 @@ impl LayoutCtx<'_> {
     /// available space. However sometimes a different fallback makes more sense, e.g.
     /// `Grid` uses [`SizeDef::fixed`] to fall back to the exact allocated child area size.
     ///
-    /// `context_size` is the size, in device pixels, that is used to resolve relative sizes.
+    /// `context_size` is the size that is used to resolve relative sizes.
     /// For example [`Ratio(0.5)`] will result in half the context size.
     /// This is usually the container widget's content-box size, i.e. excluding borders and padding.
     /// Examples of exceptions include `Grid` which will provide the child's area size,
@@ -869,7 +851,7 @@ impl LayoutCtx<'_> {
     /// If the chosen border-box `size` is smaller than what is required to fit the child's
     /// borders and padding, then the `size` will be expanded to meet those constraints.
     ///
-    /// The provided `size` must be finite, non-negative, and in device pixels.
+    /// The provided `size` must be finite, non-negative, and in logical pixels.
     /// Non-finite or negative size will fall back to zero with a logged warning.
     ///
     /// # Panics
@@ -888,7 +870,7 @@ impl LayoutCtx<'_> {
         self.widget_state.merge_up(state_mut);
     }
 
-    /// Sets the position of the `child` widget, in this widget's content-box coordinate space.
+    /// Sets the position of the `child` widget, in this widget's layout content-box coordinate space.
     ///
     /// Container widgets must call this method with each non-stashed child in their
     /// [`layout`] method, after calling `ctx.run_layout(child, size)`.
@@ -915,7 +897,8 @@ impl LayoutCtx<'_> {
             );
         }
 
-        // Convert child's origin from this widget's content-box space to border-box space.
+        // Convert the child's origin from this widget's layout content-box space
+        // to this widget's layout border-box space.
         let translation = self.widget_state.border_box_translation();
         let child_origin = origin + translation;
         let child_state = self.get_child_state_mut(child);
@@ -930,7 +913,7 @@ impl LayoutCtx<'_> {
     /// [`layout`] method.
     ///
     /// You are only required to notify of painting that actually overflows the layout border-box.
-    /// The insets will still be relative to the content-box, it's just that Masonry doesn't
+    /// The insets will still be relative to the layout content-box, it's just that Masonry doesn't
     /// really need to be notified if you're just painting over your padding or borders.
     ///
     /// You are only required to notify of painting done directly by this widget.
@@ -945,7 +928,7 @@ impl LayoutCtx<'_> {
             insets.x1 - self.widget_state.border_box_insets.x1,
             insets.y1 - self.widget_state.border_box_insets.y1,
         );
-        self.widget_state.paint_insets = insets.nonnegative();
+        self.widget_state.paint_box_insets = insets.nonnegative();
     }
 
     /// Sets explicit baselines for this widget.
@@ -956,38 +939,42 @@ impl LayoutCtx<'_> {
     /// relative to neighbouring text, such as switches or checkboxes.
     ///
     /// The provided values must be the distance from the top of this
-    /// widget's content-box to its baseline. If there aren't multiple
+    /// widget's layout content-box to its baseline. If there aren't multiple
     /// baselines then set the same baseline as both `first` and `last`.
     ///
     /// Most container widgets can use [`derive_baselines`] instead.
-    /// Multi-child containers should derive their baselines using [`child_aligned_baselines`].
+    /// Multi-child containers should derive their baselines using [`child_baselines`]
+    /// and [`child_origin`].
     ///
     /// [`derive_baselines`]: Self::derive_baselines
-    /// [`child_aligned_baselines`]: Self::child_aligned_baselines
+    /// [`child_baselines`]: Self::child_baselines
+    /// [`child_origin`]: Self::child_origin
     pub fn set_baselines(&mut self, first_baseline: f64, last_baseline: f64) {
         self.widget_state.first_baseline = first_baseline + self.widget_state.border_box_insets.y0;
         self.widget_state.last_baseline = last_baseline + self.widget_state.border_box_insets.y0;
     }
 
-    /// Sets explicit baselines for this widget such that they match the child's aligned baselines.
+    /// Sets explicit baselines for this widget such that they match the child's baselines.
     ///
     /// Most container widgets should use this method to derive their baselines from their child.
-    /// More complex containers can use [`child_aligned_baselines`] in multi-child scenarios.
+    /// More complex containers can use [`child_baselines`] and [`child_origin`]
+    /// in multi-child scenarios.
     ///
     /// # Panics
     ///
     /// This method will panic if [`LayoutCtx::run_layout`] or [`LayoutCtx::place_child`]
     /// have not been called yet for the child.
     ///
-    /// [`child_aligned_baselines`]: Self::child_aligned_baselines
+    /// [`child_baselines`]: Self::child_baselines
+    /// [`child_origin`]: Self::child_origin
     #[track_caller]
     pub fn derive_baselines(&mut self, child: &WidgetPod<impl Widget + ?Sized>) {
         self.assert_layout_done(child, "derive_baselines");
         self.assert_placed(child, "derive_baselines");
 
         let child_state = self.get_child_state(child);
-        let first_baseline = child_state.origin.y + child_state.aligned_first_baseline();
-        let last_baseline = child_state.origin.y + child_state.aligned_last_baseline();
+        let first_baseline = child_state.layout_origin.y + child_state.layout_first_baseline();
+        let last_baseline = child_state.layout_origin.y + child_state.layout_last_baseline();
         self.widget_state.first_baseline = first_baseline;
         self.widget_state.last_baseline = last_baseline;
     }
@@ -1023,7 +1010,8 @@ impl LayoutCtx<'_> {
     /// The distances are from the top of the child widget's layout border-box to its baseline.
     ///
     /// Call this if the child's baseline plays a role in choosing its placement.
-    /// For deriving this widget's baselines call [`child_aligned_baselines`] instead,
+    /// For deriving this widget's baselines call [`child_baselines`] with
+    /// [`child_origin`] instead,
     /// or better yet use [`derive_baselines`] if possible.
     ///
     /// # Panics
@@ -1031,7 +1019,8 @@ impl LayoutCtx<'_> {
     /// This method will panic if [`LayoutCtx::run_layout`] has not been called yet for
     /// the child.
     ///
-    /// [`child_aligned_baselines`]: Self::child_aligned_baselines
+    /// [`child_baselines`]: Self::child_baselines
+    /// [`child_origin`]: Self::child_origin
     /// [`derive_baselines`]: Self::derive_baselines
     #[track_caller]
     pub fn child_layout_baselines(&self, child: &WidgetPod<impl Widget + ?Sized>) -> (f64, f64) {
@@ -1044,12 +1033,12 @@ impl LayoutCtx<'_> {
         )
     }
 
-    /// Returns the `child` widget's `(first, last)` aligned baselines.
+    /// Returns the `child` widget's `(first, last)` baselines.
     ///
-    /// The distances are from the top of the child widget's aligned border-box to its baseline.
+    /// The distances are from the top of the child widget's layout border-box to its baseline.
     ///
-    /// This aligned version should be used for deriving this widget's own baselines based
-    /// on the child's baselines. That is if [`derive_baselines`] can't be used.
+    /// This should be used together with [`child_origin`] for deriving this widget's own
+    /// baselines based on placed children. That is if [`derive_baselines`] can't be used.
     /// For deciding where to place the child based on its baselines,
     /// you need to use [`child_layout_baselines`] instead.
     ///
@@ -1060,20 +1049,21 @@ impl LayoutCtx<'_> {
     ///
     /// [`derive_baselines`]: Self::derive_baselines
     /// [`child_layout_baselines`]: Self::child_layout_baselines
+    /// [`child_origin`]: Self::child_origin
     #[track_caller]
-    pub fn child_aligned_baselines(&self, child: &WidgetPod<impl Widget + ?Sized>) -> (f64, f64) {
-        self.assert_layout_done(child, "child_aligned_baselines");
-        self.assert_placed(child, "child_aligned_baselines");
+    pub fn child_baselines(&self, child: &WidgetPod<impl Widget + ?Sized>) -> (f64, f64) {
+        self.assert_layout_done(child, "child_baselines");
+        self.assert_placed(child, "child_baselines");
 
         let child_state = self.get_child_state(child);
         (
-            child_state.aligned_first_baseline(),
-            child_state.aligned_last_baseline(),
+            child_state.layout_first_baseline(),
+            child_state.layout_last_baseline(),
         )
     }
 
-    /// Returns the given child's aligned border-box origin
-    /// in this widget's content-box coordinate space.
+    /// Returns the given child's layout border-box origin
+    /// in this widget's layout content-box coordinate space.
     ///
     /// # Panics
     ///
@@ -1083,7 +1073,7 @@ impl LayoutCtx<'_> {
     pub fn child_origin(&self, child: &WidgetPod<impl Widget + ?Sized>) -> Point {
         self.assert_layout_done(child, "child_origin");
         self.assert_placed(child, "child_origin");
-        self.get_child_state(child).origin - self.widget_state.border_box_translation()
+        self.get_child_state(child).layout_origin - self.widget_state.border_box_translation()
     }
 
     /// Returns the given child's layout border-box size.
@@ -1098,7 +1088,7 @@ impl LayoutCtx<'_> {
         self.get_child_state(child).layout_border_box_size
     }
 
-    /// Sets the widget's clip path in the widget's content-box coordinate space.
+    /// Sets the widget's clip path in the widget's layout content-box coordinate space.
     ///
     /// A widget's clip path will have two effects:
     /// - It serves as a mask for painting operations of this widget and its children.
@@ -1111,7 +1101,7 @@ impl LayoutCtx<'_> {
     /// [`pre_paint`]: Widget::pre_paint
     /// [`post_paint`]: Widget::post_paint
     pub fn set_clip_path(&mut self, path: Rect) {
-        // Translate the clip path to the widget's border-box coordinate space.
+        // Translate the clip path to the widget's layout border-box coordinate space.
         let path = path + self.widget_state.border_box_translation();
         // We intentionally always log this because clip paths are:
         // 1) Relatively rare in the tree
@@ -1149,9 +1139,6 @@ impl ComposeCtx<'_> {
     /// Sets the scroll translation for the child widget.
     ///
     /// The translation is applied on top of the position from [`LayoutCtx::place_child`].
-    ///
-    /// The given translation may be quantized so the child's final position
-    /// stays pixel-perfect.
     pub fn set_child_scroll_translation(
         &mut self,
         child: &mut WidgetPod<impl Widget + ?Sized>,
@@ -1171,40 +1158,6 @@ impl ComposeCtx<'_> {
             );
         }
 
-        let translation = translation.round();
-
-        let child = self.get_child_state_mut(child);
-        if translation != child.scroll_translation {
-            child.scroll_translation = translation;
-            child.transform_changed = true;
-        }
-    }
-
-    /// Sets the scroll translation for the child widget.
-    ///
-    /// The translation is applied on top of the position from [`LayoutCtx::place_child`].
-    ///
-    /// Unlike [`Self::set_child_scroll_translation`], doesn't perform pixel-snapping.
-    /// This method should be used for intermediary scroll values during scroll animations.
-    pub fn set_animated_child_scroll_translation(
-        &mut self,
-        child: &mut WidgetPod<impl Widget + ?Sized>,
-        translation: Vec2,
-    ) {
-        if translation.x.is_nan()
-            || translation.x.is_infinite()
-            || translation.y.is_nan()
-            || translation.y.is_infinite()
-        {
-            debug_panic!(
-                "Error in {}: trying to call 'set_animated_child_scroll_translation' with child '{}' {} with invalid translation {:?}",
-                self.widget_id(),
-                self.get_child_dyn(child).short_type_name(),
-                child.id(),
-                translation,
-            );
-        }
-
         let child = self.get_child_state_mut(child);
         if translation != child.scroll_translation {
             child.scroll_translation = translation;
@@ -1213,9 +1166,9 @@ impl ComposeCtx<'_> {
     }
 }
 
-// --- MARK: GET LAYOUT
+// --- MARK: GET GEOMETRY
 // Methods on all context types except MeasureCtx and LayoutCtx
-// These methods access layout info calculated during the layout pass.
+// These methods access geometry resolved during layout and compose.
 impl_context_method!(
     MutateCtx<'_>,
     ActionCtx<'_>,
@@ -1226,63 +1179,70 @@ impl_context_method!(
     PaintCtx<'_>,
     AccessCtx<'_>,
     {
-        /// Returns the aligned content-box size of this widget.
-        pub fn content_box_size(&self) -> Size {
-            let border_box_size = self.widget_state.border_box_size();
-            Size::new(
-                (border_box_size.width - self.widget_state.border_box_insets.x_value()).max(0.),
-                (border_box_size.height - self.widget_state.border_box_insets.y_value()).max(0.),
-            )
-        }
-
-        /// Returns the aligned border-box size of this widget.
-        pub fn border_box_size(&self) -> Size {
-            self.widget_state.border_box_size()
-        }
-
-        /// Returns the aligned paint-box size of this widget.
-        pub fn paint_box_size(&self) -> Size {
-            self.widget_state.paint_box().size()
+        /// Returns the visual content-box rect of this widget
+        /// in this widget's visual content-box coordinate space.
+        pub fn content_box(&self) -> Rect {
+            let translation =
+                self.widget_state.visual_translation() + self.widget_state.border_box_translation();
+            self.widget_state.visual_content_box() - translation
         }
 
-        /// Returns the aligned content-box rect of this widget
-        /// in this widget's content-box coordinate space.
-        pub fn content_box(&self) -> Rect {
-            let border_box_size = self.widget_state.border_box_size();
-            Rect::new(
+        /// Returns the layout content-box rect of this widget
+        /// in this widget's visual content-box coordinate space.
+        pub fn layout_content_box(&self) -> Rect {
+            // Create the layout content-box in layout content-box coordinate space
+            let border_box_size = self.widget_state.layout_border_box_size;
+            let layout_content_box = Rect::new(
                 0.,
                 0.,
                 (border_box_size.width - self.widget_state.border_box_insets.x_value()).max(0.),
                 (border_box_size.height - self.widget_state.border_box_insets.y_value()).max(0.),
-            )
+            );
+            // Convert it into visual content-box coordinate space
+            layout_content_box - self.widget_state.visual_translation()
         }
 
-        /// Returns the aligned border-box rect of this widget
-        /// in this widget's content-box coordinate space.
+        /// Returns the visual border-box rect of this widget
+        /// in this widget's visual content-box coordinate space.
         pub fn border_box(&self) -> Rect {
-            let border_box_size = self.widget_state.border_box_size();
-            let origin = Point::new(
-                -self.widget_state.border_box_insets.x0,
-                -self.widget_state.border_box_insets.y0,
-            );
-            Rect::from_origin_size(origin, border_box_size)
+            let translation =
+                self.widget_state.visual_translation() + self.widget_state.border_box_translation();
+            self.widget_state.visual_border_box - translation
         }
 
-        /// Returns the aligned paint-box rect of this widget
-        /// in this widget's content-box coordinate space.
+        /// Returns the layout border-box rect of this widget
+        /// in this widget's visual content-box coordinate space.
+        pub fn layout_border_box(&self) -> Rect {
+            let translation =
+                self.widget_state.visual_translation() + self.widget_state.border_box_translation();
+            self.widget_state.layout_border_box() - translation
+        }
+
+        /// Returns the visual paint-box rect of this widget
+        /// in this widget's visual content-box coordinate space.
         ///
         /// Covers the area we expect to be invalidated when the widget is painted.
         pub fn paint_box(&self) -> Rect {
-            let translation = self.widget_state.border_box_translation();
-            self.widget_state.paint_box() - translation
+            let translation =
+                self.widget_state.visual_translation() + self.widget_state.border_box_translation();
+            self.widget_state.visual_paint_box() - translation
+        }
+
+        /// Returns the layout paint-box rect of this widget
+        /// in this widget's visual content-box coordinate space.
+        ///
+        /// Covers the area we expect to be invalidated when the widget is painted.
+        pub fn layout_paint_box(&self) -> Rect {
+            let translation =
+                self.widget_state.visual_translation() + self.widget_state.border_box_translation();
+            self.widget_state.layout_paint_box() - translation
         }
 
         /// Returns the widget's bounding-box rect in the window's coordinate space.
         ///
         /// It contains this widget and all of its descendents.
         ///
-        /// This is the union of clipped effective paint-box rects, i.e. the union of
-        /// globally transformed aligned border-box rects with paint insets applied.
+        /// This is the union of clipped visual paint-box rects in the window's coordinate space.
         ///
         /// See [bounding box documentation] for more details.
         ///
@@ -1291,30 +1251,40 @@ impl_context_method!(
             self.widget_state.bounding_box
         }
 
-        /// Returns the first baseline relative to the top of the widget's aligned content-box.
+        /// Returns the first baseline relative to the top of the widget's layout content-box.
         pub fn first_baseline(&self) -> f64 {
-            let border_box_baseline = self.widget_state.aligned_first_baseline();
+            let border_box_baseline = self.widget_state.layout_first_baseline();
             border_box_baseline - self.widget_state.border_box_insets.y0
         }
 
-        /// Returns the last baseline relative to the top of the widget's aligned content-box.
+        /// Returns the last baseline relative to the top of the widget's layout content-box.
         pub fn last_baseline(&self) -> f64 {
-            let border_box_baseline = self.widget_state.aligned_last_baseline();
+            let border_box_baseline = self.widget_state.layout_last_baseline();
             border_box_baseline - self.widget_state.border_box_insets.y0
         }
 
         /// The clip path of the widget, if any was set.
         ///
-        /// The returned clip path will be in this widget's content-box coordinate space.
+        /// The returned clip path will be in this widget's visual content-box coordinate space.
         ///
         /// For more information, see
         /// [`LayoutCtx::set_clip_path`](crate::core::LayoutCtx::set_clip_path).
         pub fn clip_path(&self) -> Option<Rect> {
-            // Translate the clip path to the widget's content-box coordinate space.
-            let translation = self.widget_state.border_box_translation();
+            // Translate the clip path to the widget's visual content-box coordinate space.
+            let translation =
+                self.widget_state.visual_translation() + self.widget_state.border_box_translation();
             self.widget_state.clip_path.map(|path| path - translation)
         }
 
+        /// Returns the [`Vec2`] for translating between this widget's
+        /// layout and visual coordinate spaces.
+        ///
+        /// Add this [`Vec2`] to translate from visual to layout,
+        /// and subtract this [`Vec2`] to translate from layout to visual.
+        pub fn visual_translation(&self) -> Vec2 {
+            self.widget_state.visual_translation()
+        }
+
         /// Returns the [`Vec2`] for translating between this widget's
         /// content-box and border-box coordinate spaces.
         ///
@@ -1324,63 +1294,50 @@ impl_context_method!(
             self.widget_state.border_box_translation()
         }
 
-        /// Returns the widget's effective border-box origin in the window's coordinate space.
-        pub fn window_origin(&self) -> Point {
-            self.widget_state.border_box_window_origin()
-        }
-
-        /// Returns the global transform mapping this widget's content-box coordinate space
+        /// Returns the global transform mapping this widget's visual content-box coordinate space
         /// to the window's coordinate space.
         ///
         /// Computed from all `transform`, `scroll_translation`, and `origin` values
         /// from this widget all the way up to the window.
         ///
-        /// Multiply by this to convert from this widget's content-box coordinate space to the window's,
-        /// or use the inverse of this transform to go from window's space to this widget's content-box.
+        /// Multiply by this to convert from this widget's visual content-box coordinate space to
+        /// the window's, or use the inverse of this transform to go from window's space to this
+        /// widget's visual content-box.
         pub fn window_transform(&self) -> Affine {
-            let translation = self.widget_state.border_box_translation();
+            let translation =
+                self.widget_state.visual_translation() + self.widget_state.border_box_translation();
             self.widget_state
                 .window_transform
                 .pre_translate(translation)
         }
 
         /// Converts the `point` from the window's coordinate space
-        /// to this widget's content-box coordinate space.
+        /// to this widget's visual content-box coordinate space.
         pub fn to_local(&self, point: Point) -> Point {
             let to_border_box = self.widget_state.window_transform.inverse();
+            let to_visual = -self.widget_state.visual_translation();
             let to_content_box = -self.widget_state.border_box_translation();
-            to_border_box.then_translate(to_content_box) * point
+            to_border_box.then_translate(to_visual + to_content_box) * point
         }
 
-        /// Converts the `point` from this widget's content-box coordinate space
+        /// Converts the `point` from this widget's visual content-box coordinate space
         /// to the window's coordinate space.
         ///
         /// The returned point is relative to the window's content area; it excludes window chrome.
         pub fn to_window(&self, point: Point) -> Point {
-            let translation = self.widget_state.border_box_translation();
+            let translation =
+                self.widget_state.visual_translation() + self.widget_state.border_box_translation();
             self.widget_state.window_transform * (point + translation)
         }
-    }
-);
 
-impl_context_method!(AccessCtx<'_>, EventCtx<'_>, PaintCtx<'_>, {
-    // TODO - Once Masonry uses physical coordinates, add this method everywhere.
-    // See https://github.com/linebender/xilem/issues/1264
-    /// Returns DPI scaling factor.
-    ///
-    /// This is not required for most widgets, and should be used only for precise
-    /// rendering, such as rendering single pixel lines or selecting image variants.
-    /// This is currently only provided in the render stages, as these are the only passes which
-    /// are re-run when the scale factor changes, except [`EventCtx`] where it is necessary to
-    /// translate pointer events which are currently in physical coordinates.
-    ///
-    /// Note that accessibility nodes and paint results will automatically be scaled by Masonry.
-    /// This also doesn't account for the widget's current transform, which cannot currently be
-    /// accessed by widgets directly.
-    pub fn get_scale_factor(&self) -> f64 {
-        self.global_state.scale_factor
+        /// Returns the DPI scaling factor.
+        ///
+        /// This can be useful for loading image resources meant for a specific scale.
+        pub fn scale_factor(&self) -> f64 {
+            self.global_state.scale_factor
+        }
     }
-});
+);
 
 // --- MARK: GET STATUS
 
@@ -1400,7 +1357,7 @@ impl_context_method!(
     {
         /// The "hovered" status of a widget.
         ///
-        /// A widget is "hovered" when a pointer is hovering over its border-box.
+        /// A widget is "hovered" when a pointer is hovering over its visual border-box.
         /// Widgets will often change their appearance as a visual indication that they
         /// will respond to pointer (usually mouse) interaction.
         ///
@@ -1735,8 +1692,8 @@ impl_context_method!(
 
         /// Sets the local transform for this widget.
         ///
-        /// This maps this widget's border-box coordinate space
-        /// to the parent's border-box coordinate space.
+        /// This maps this widget's layout border-box coordinate space
+        /// to the parent's layout border-box coordinate space.
         ///
         /// It behaves similarly as CSS transforms.
         pub fn set_transform(&mut self, transform: Affine) {
@@ -1944,13 +1901,13 @@ impl_context_method!(
                 .push((action, self.widget_state.id));
         }
 
-        /// Sets the IME cursor area in the widget's content-box coordinate space.
+        /// Sets the IME cursor area in the widget's layout content-box coordinate space.
         ///
         /// When this widget is [focused] and [accepts text input], the reported IME area is sent
         /// to the platform. The area can be used by the platform to, for example, place a
         /// candidate box near that area, while ensuring the area is not obscured.
         ///
-        /// If no IME area is set, then Masonry will use the widget's aligned border-box rect.
+        /// If no IME area is set, then Masonry will use the widget's visual border-box rect.
         ///
         /// [focused]: EventCtx::request_focus
         /// [accepts text input]: Widget::accepts_text_input
@@ -1961,7 +1918,9 @@ impl_context_method!(
 
         /// Removes the IME cursor area.
         ///
-        /// See [`LayoutCtx::set_ime_area`](LayoutCtx::set_ime_area) for more details.
+        /// See [`set_ime_area`] for more details.
+        ///
+        /// [`set_ime_area`]: Self::set_ime_area
         pub fn clear_ime_area(&mut self) {
             self.widget_state.ime_area = None;
         }
diff --git a/masonry_core/src/core/events.rs b/masonry_core/src/core/events.rs
index f2359b10d..d17f72339 100644
--- a/masonry_core/src/core/events.rs
+++ b/masonry_core/src/core/events.rs
@@ -100,7 +100,7 @@ pub enum Update {
 
     /// Called when a descendant widget requests to be scrolled to.
     ///
-    /// The included [`Rect`] is in the receiving widget's content-box coordinate space.
+    /// The included [`Rect`] is in the receiving widget's visual content-box coordinate space.
     ///
     /// See also [`EventCtx::request_scroll_to_this`] and [`EventCtx::request_scroll_to`].
     ///
diff --git a/masonry_core/src/core/widget.rs b/masonry_core/src/core/widget.rs
index 1ffae7da2..04f263d80 100644
--- a/masonry_core/src/core/widget.rs
+++ b/masonry_core/src/core/widget.rs
@@ -18,7 +18,7 @@ use crate::core::{
     QueryCtx, RegisterCtx, TextEvent, Update, UpdateCtx, WidgetMut, WidgetRef, pre_paint,
 };
 use crate::imaging::Painter;
-use crate::layout::LenReq;
+use crate::layout::{LenReq, Length};
 
 /// A unique identifier for a single [`Widget`].
 ///
@@ -124,10 +124,12 @@ pub type ChildrenIds = SmallVec<[WidgetId; 16]>;
 /// These trait methods are provided with a corresponding context. The widget can
 /// request things and cause actions by calling methods on that context.
 ///
-/// Generally all coordinates given to the widget and taken as input by context methods
-/// are going to be in the widget's local content-box coordinate space. Exceptions are documented
-/// for the relevant methods, e.g. mouse events will arrive in the window's coordinate space.
-/// There are helper methods on the context to convert these to the local coordinate space.
+/// Coordinates in [`measure`](Self::measure) and [`layout`](Self::layout) are in the
+/// widget's layout content-box coordinate space. Coordinates in other `Widget` methods and
+/// in geometry-oriented context methods are generally in the widget's visual content-box
+/// coordinate space. Exceptions are documented for the relevant methods, e.g. mouse events
+/// arrive in the window's coordinate space. Context helper methods can convert between the
+/// window and the widget-local coordinate space used by the current method.
 ///
 /// Widgets also have a [`children_ids`](Self::children_ids) method. Leaf widgets return an empty array,
 /// whereas container widgets return an array of [`WidgetId`].
@@ -246,10 +248,7 @@ pub trait Widget: AsDynWidget + Any {
     /// Handles a property being added, changed, or removed.
     fn property_changed(&mut self, ctx: &mut UpdateCtx<'_>, property_type: TypeId) {}
 
-    /// Computes the content-box length that the widget wants to be on the given `axis`.
-    ///
-    /// The returned length must be finite, non-negative, and in device pixels.
-    /// If an invalid length is returned, Masonry will treat it as zero.
+    /// Computes the content-box [`Length`] that the widget wants to be on the given `axis`.
     ///
     /// The goal of this method is for a parent to learn how its children want to be sized.
     /// All the inputs are hints towards what the parent is planning for its child.
@@ -271,7 +270,7 @@ pub trait Widget: AsDynWidget + Any {
     /// then you should use [`redirect_measurement`] to have the child answer for you.
     ///
     /// The `cross_length`, if present, says that the cross-axis of the given `axis` of this
-    /// measured widget's content-box can be presumed to be `cross_length` long, in device pixels.
+    /// measured widget's content-box can be presumed to be `cross_length` long.
     /// This information is often very useful for measuring `axis` and should be used.
     /// However, ultimately it may end up not materializing. That is to say, it is
     /// a valid assumption for the duration of this `measure` call but there is
@@ -310,15 +309,6 @@ pub trait Widget: AsDynWidget + Any {
     /// or you need to request layout for reasons that don't affect the result of this computation,
     /// then your widget should also have its own inner cache layer to avoid redoing the same work.
     ///
-    /// As for the inputs provided to `measure`, `len_req` must be [sanitized] and
-    /// `cross_length`, if present, must be [sanitized] and in device pixels.
-    /// When Masonry calls `measure` during the layout pass, it guarantees that for these inputs.
-    ///
-    /// # Panics
-    ///
-    /// Masonry will panic if `measure` returns a non-finite or negative value
-    /// and debug assertions are enabled.
-    ///
     /// [`compute_length`]: MeasureCtx::compute_length
     /// [`redirect_measurement`]: MeasureCtx::redirect_measurement
     /// [sanitized]: crate::util::Sanitize
@@ -332,8 +322,8 @@ pub trait Widget: AsDynWidget + Any {
         props: &PropertiesRef<'_>,
         axis: Axis,
         len_req: LenReq,
-        cross_length: Option<f64>,
-    ) -> f64;
+        cross_length: Option<Length>,
+    ) -> Length;
 
     /// Lays out the widget with the given content-box `size`.
     ///
@@ -361,7 +351,7 @@ pub trait Widget: AsDynWidget + Any {
     /// Container widgets must not add or remove children during layout.
     /// Doing so is a logic error and may lead to panics.
     ///
-    /// The `size` given to this method must be finite, non-negative, and in device pixels.
+    /// The `size` given to this method must be finite, non-negative, and in logical pixels.
     /// When Masonry calls `layout` during the layout pass, it will guarantee that for `size`.
     ///
     /// [`compute_size`]: LayoutCtx::compute_size
@@ -593,7 +583,7 @@ pub fn find_widget_under_pointer<'c>(
         return None;
     }
 
-    let local_pos = ctx.window_transform().inverse() * pos;
+    let local_pos = ctx.to_local(pos);
 
     if let Some(clip) = ctx.clip_path()
         && !clip.contains(local_pos)
diff --git a/masonry_core/src/core/widget_paint.rs b/masonry_core/src/core/widget_paint.rs
index 5b9684b52..60304518f 100644
--- a/masonry_core/src/core/widget_paint.rs
+++ b/masonry_core/src/core/widget_paint.rs
@@ -71,7 +71,7 @@ pub fn paint_box_shadow(
     if !box_shadow.is_visible() {
         return;
     }
-    let box_shadow_rect = border_box.to_rounded_rect(corner_radius.radius);
+    let box_shadow_rect = border_box.to_rounded_rect(corner_radius.radius.get());
     box_shadow.paint(painter, Affine::IDENTITY, box_shadow_rect);
 }
 
@@ -102,13 +102,14 @@ pub fn paint_border(
     border_width: &BorderWidth,
     corner_radius: &CornerRadius,
 ) {
-    if border_width.width == 0. || !border_color.is_visible() {
+    let border_width_value = border_width.width.get();
+    if border_width_value == 0. || !border_color.is_visible() {
         return;
     }
     let border_rect = border_width.border_rect(border_box, corner_radius);
     // Using Join::Miter avoids rounding corners when a widget has a wide border.
     let border_style = Stroke {
-        width: border_width.width,
+        width: border_width_value,
         join: Join::Miter,
         ..Default::default()
     };
diff --git a/masonry_core/src/core/widget_pod.rs b/masonry_core/src/core/widget_pod.rs
index 1c1ec12d0..2b40b46a5 100644
--- a/masonry_core/src/core/widget_pod.rs
+++ b/masonry_core/src/core/widget_pod.rs
@@ -80,11 +80,12 @@ impl<W: Widget + ?Sized> std::fmt::Debug for NewWidget<W> {
 /// The options a new widget will be created with.
 #[derive(Default, Debug)]
 pub struct WidgetOptions {
-    /// Local transform used during the mapping of this widget's border-box coordinate space
-    /// to the parent's border-box coordinate space.
+    /// Local transform used during the mapping of this widget's layout border-box
+    /// coordinate space to the parent's layout border-box coordinate space.
     ///
-    /// When calculating the effective border-box of this widget, first this transform
-    /// will be applied and then `scroll_translation` and `origin` applied on top.
+    /// When mapping this widget's visual border-box into the window's coordinate space,
+    /// first this transform will be applied and then `scroll_translation` and `origin`
+    /// applied on top.
     pub transform: Affine,
     /// The disabled state the widget will be created with.
     pub disabled: bool,
diff --git a/masonry_core/src/core/widget_ref.rs b/masonry_core/src/core/widget_ref.rs
index a626595d7..3893eca19 100644
--- a/masonry_core/src/core/widget_ref.rs
+++ b/masonry_core/src/core/widget_ref.rs
@@ -177,7 +177,7 @@ impl WidgetRef<'_, dyn Widget> {
 
     /// Recursively finds the innermost widget at the given position, using
     /// [`Widget::find_widget_under_pointer`] to descend the widget tree. If `self` does not contain the
-    /// given position in its aligned border-box or clip path, this returns `None`.
+    /// given position in its visual border-box or clip path, this returns `None`.
     ///
     /// **pos** - the position is in the window's coordinate space,
     /// e.g. `(0,0)` is the top-left corner of the window.
diff --git a/masonry_core/src/core/widget_state.rs b/masonry_core/src/core/widget_state.rs
index 7c5090f73..e30f32571 100644
--- a/masonry_core/src/core/widget_state.rs
+++ b/masonry_core/src/core/widget_state.rs
@@ -72,24 +72,12 @@ pub(crate) struct WidgetState {
     pub(crate) id: WidgetId,
 
     // --- LAYOUT ---
-    /// The origin (top-left) of the widget's aligned border-box
-    /// in the parent's border-box coordinate space.
+    /// The origin (top-left) of the widget's layout border-box
+    /// in the parent's layout border-box coordinate space.
+    pub(crate) layout_origin: Point,
+    /// The size of the widget's layout border-box.
     ///
-    /// Together with `end_point`, these constitute the widget's aligned border-box.
-    pub(crate) origin: Point,
-    /// The bottom right of the widget's aligned border-box
-    /// in the parent's border-box coordinate space.
-    ///
-    /// Computed from the widget's `origin` and `layout_border_box_size`, with some pixel snapping.
-    pub(crate) end_point: Point,
-    /// The widget's layout border-box size.
-    ///
-    /// This is the chosen border-box size with min/max constraints applied.
-    ///
-    /// It is used to:
-    /// * Determine layout cache validity.
-    /// * Derive the widget's layout content-box size that will be given to `Widget::layout`.
-    /// * Compute `end_point` when the widget is placed to an `origin` by its parent.
+    /// This is also used to determine layout cache validity.
     pub(crate) layout_border_box_size: Size,
     /// The insets for converting between content-box and border-box rects.
     ///
@@ -105,12 +93,17 @@ pub(crate) struct WidgetState {
     ///
     /// In general, these will be zero; the exception is for things like
     /// drop shadows or overflowing text.
-    pub(crate) paint_insets: Insets,
+    pub(crate) paint_box_insets: Insets,
+    /// The widget's visual border-box in the widget's layout border-box coordinate space.
+    ///
+    /// This is resolved during compose from the layout border-box. It may be pixel-snapped using
+    /// the widget's full transform to the window's coordinate space and the current scale factor.
+    /// When snapping is not supported for the transform, then this matches the layout border-box.
+    pub(crate) visual_border_box: Rect,
     /// An axis aligned bounding rect (AABB in 2D),
     /// containing itself and all its descendents in the window's coordinate space.
     ///
-    /// This is the union of clipped effective paint-box rects, i.e. the union of
-    /// globally transformed aligned border-box rects with paint insets applied.
+    /// This is the union of clipped visual paint-box rects in the window's coordinate space.
     pub(crate) bounding_box: Rect,
 
     /// The offset of the first baseline relative to the top of the widget's layout border-box.
@@ -129,26 +122,28 @@ pub(crate) struct WidgetState {
     // TODO - Use general Shape
     // Currently Kurbo doesn't really provide a type that lets us
     // efficiently hold an arbitrary shape.
-    /// The widget's clip path in the widget's border-box coordinate space.
+    /// The widget's clip path in the widget's layout border-box coordinate space.
     ///
     /// This clips the painting of `Widget::paint` and all the painting of children.
     /// It does not clip this widget's `Widget::pre_paint` nor `Widget::post_paint`.
     pub(crate) clip_path: Option<Rect>,
 
-    /// Local transform used during the mapping of this widget's border-box coordinate space
-    /// to the parent's border-box coordinate space.
+    /// Local transform used during the mapping of this widget's layout border-box coordinate
+    /// space to the parent's layout border-box coordinate space.
     ///
-    /// When calculating the effective border-box of this widget, first this transform
-    /// will be applied and then `scroll_translation` and `origin` applied on top.
+    /// When mapping this widget's visual border-box into the window's coordinate space,
+    /// first this transform will be applied and then `scroll_translation` and `origin`
+    /// applied on top.
     pub(crate) transform: Affine,
-    /// Global transform mapping this widget's border-box coordinate space
+    /// Global transform mapping this widget's layout border-box coordinate space
     /// to the window's coordinate space.
     ///
     /// Computed from all `transform`, `scroll_translation`, and `origin` values
     /// from this widget all the way up to the window.
     ///
-    /// Multiply by this to convert from this widget's border-box coordinate space to the window's,
-    /// or use the inverse of this transform to go from window's space to this widget's border-box.
+    /// Multiply by this to convert from this widget's layout border-box coordinate space to the
+    /// window's coordinate space, or use the inverse of this transform to go from window's space
+    /// to this widget's layout border-box coordinate space.
     pub(crate) window_transform: Affine,
     /// Translation applied by scrolling, applied after applying `transform` to this widget.
     pub(crate) scroll_translation: Vec2,
@@ -173,7 +168,7 @@ pub(crate) struct WidgetState {
     /// Should be immutable after `WidgetAdded` event.
     pub(crate) accepts_text_input: bool,
     /// The area of the widget that is being edited by an IME,
-    /// in the widget's border-box coordinate space.
+    /// in the widget's layout border-box coordinate space.
     pub(crate) ime_area: Option<Rect>,
 
     // --- PASSES ---
@@ -293,11 +288,11 @@ impl WidgetState {
         Self {
             id,
 
-            origin: Point::ORIGIN,
-            end_point: Point::ORIGIN,
+            layout_origin: Point::ORIGIN,
             layout_border_box_size: Size::ZERO,
             border_box_insets: Insets::ZERO,
-            paint_insets: Insets::ZERO,
+            paint_box_insets: Insets::ZERO,
+            visual_border_box: Rect::ZERO,
             bounding_box: Rect::ZERO,
             first_baseline: f64::NAN,
             last_baseline: f64::NAN,
@@ -400,14 +395,37 @@ impl WidgetState {
         self.needs_layout = needs_layout;
     }
 
-    /// The aligned border-box size of this widget.
-    pub(crate) fn border_box_size(&self) -> Size {
-        (self.end_point - self.origin).to_size()
+    /// Returns the widget's layout border-box in the widget's layout border-box coordinate space.
+    pub(crate) fn layout_border_box(&self) -> Rect {
+        self.layout_border_box_size.to_rect()
     }
 
-    /// Returns the widget's aligned paint-box rect in the widget's border-box coordinate space.
-    pub(crate) fn paint_box(&self) -> Rect {
-        self.border_box_size().to_rect() + self.paint_insets
+    /// Returns the widget's visual content-box in the widget's layout border-box coordinate space.
+    pub(crate) fn visual_content_box(&self) -> Rect {
+        let x0 = self.visual_border_box.x0 + self.border_box_insets.x0;
+        let y0 = self.visual_border_box.y0 + self.border_box_insets.y0;
+        let x1 = (self.visual_border_box.x1 - self.border_box_insets.x1).max(x0);
+        let y1 = (self.visual_border_box.y1 - self.border_box_insets.y1).max(y0);
+        Rect::new(x0, y0, x1, y1)
+    }
+
+    /// Returns the widget's layout paint-box in the widget's layout border-box coordinate space.
+    pub(crate) fn layout_paint_box(&self) -> Rect {
+        self.layout_border_box() + self.paint_box_insets
+    }
+
+    /// Returns the widget's visual paint-box in the widget's layout border-box coordinate space.
+    pub(crate) fn visual_paint_box(&self) -> Rect {
+        self.visual_border_box + self.paint_box_insets
+    }
+
+    /// Returns the [`Vec2`] for translating between this widget's
+    /// layout and visual coordinate spaces.
+    ///
+    /// Add this [`Vec2`] to translate from visual to layout,
+    /// and subtract this [`Vec2`] to translate from layout to visual.
+    pub(crate) fn visual_translation(&self) -> Vec2 {
+        Vec2::new(self.visual_border_box.x0, self.visual_border_box.y0)
     }
 
     /// Returns the [`Vec2`] for translating between this widget's
@@ -419,12 +437,6 @@ impl WidgetState {
         Vec2::new(self.border_box_insets.x0, self.border_box_insets.y0)
     }
 
-    /// Returns the widget's effective border-box origin in the window's coordinate space.
-    pub(crate) fn border_box_window_origin(&self) -> Point {
-        // We can just use the translation for (0,0)
-        self.window_transform.translation().to_point()
-    }
-
     /// Returns the first baseline relative to the top of the widget's layout border-box.
     pub(crate) fn layout_first_baseline(&self) -> f64 {
         if self.first_baseline.is_nan() {
@@ -443,34 +455,15 @@ impl WidgetState {
         }
     }
 
-    /// Returns the first baseline relative to the top of the widget's aligned border-box.
-    pub(crate) fn aligned_first_baseline(&self) -> f64 {
-        if self.first_baseline.is_nan() {
-            self.end_point.y - self.origin.y
-        } else {
-            self.first_baseline
-        }
-    }
-
-    /// Returns the last baseline relative to the top of the widget's aligned border-box.
-    pub(crate) fn aligned_last_baseline(&self) -> f64 {
-        if self.last_baseline.is_nan() {
-            self.end_point.y - self.origin.y
-        } else {
-            self.last_baseline
-        }
-    }
-
     /// Returns the area being edited by an IME, in the window's coordinate space.
     ///
-    /// If no explicit `ime_area` has been defined this will return the effective border-box area.
+    /// If no explicit `ime_area` has been defined this will return the visual border-box
+    /// area in the window's coordinate space.
     pub(crate) fn get_ime_area(&self) -> Rect {
         // Note: this returns sensible values for a widget that is translated and/or rescaled.
         // Other transformations like rotation may produce weird IME areas.
-        self.window_transform.transform_rect_bbox(
-            self.ime_area
-                .unwrap_or_else(|| self.border_box_size().to_rect()),
-        )
+        self.window_transform
+            .transform_rect_bbox(self.ime_area.unwrap_or(self.visual_border_box))
     }
 
     /// Returns the result of intersecting the widget's clip path (if any) with the given rect.
diff --git a/masonry_core/src/doc/masonry_concepts.md b/masonry_core/src/doc/masonry_concepts.md
index 86fb2f676..fe301f034 100644
--- a/masonry_core/src/doc/masonry_concepts.md
+++ b/masonry_core/src/doc/masonry_concepts.md
@@ -213,10 +213,9 @@ The box lifecycle terms describe what stage a box is in during its journey from
 2. **Chosen** - The size that the parent of a widget ends up choosing for it and is given to `LayoutCtx::run_layout`.
 3. **Layout** - The result of the chosen size being potentially adjusted to meet min/max constraints.
    For example, if the parent gave a size too small to even contain the child's borders and padding.
-4. **Aligned** - Once a parent places its child to a specific position, that position will be aligned to the pixel grid.
-   This alignment is done in the parent's border-box coordinate space using the child's layout border-box size.
-5. **Effective** - The actual visual box that gets painted on the screen.
-   This is the result when all of the transforms of the widget's tree branch are applied to its aligned box.
+4. **Visual** - The actual visual box that gets painted on the screen and is used for pointer hit testing.
+   This is the result of applying potential pixel snapping to the layout box.
+   The pixel snapping is done in the window's coordinate space after all of the transforms of the widget's tree branch have been applied.
 
 ### Presence of descendants
 
@@ -226,11 +225,11 @@ As the descendants may be overflowing these bounds or a transformation may move
 
 ### Bounding-box
 
-We only calculate the effective variant of the bounding-box, i.e. where all transforms have been applied.
-The effective bounding-box is a union of the widget's effective paint-box and the bounding-boxes of all of its descendants.
+We only calculate the bounding-box in the window's coordinate space, i.e. where all transforms have been applied.
+The bounding-box is a union of the widget's visual paint-box, transformed into the window's coordinate space, and the bounding-boxes of all of its descendants.
 Additionally, these are clipped according to the per-widget clip rules.
 
-This effective bounding-box in the window's coordinate space is used to determine which pointer events might affect either the widget or its descendants.
+This window-space bounding-box is used to determine which pointer events might affect either the widget or its descendants.
 
 The bounding-boxes of the widget tree form a kind of "bounding volume hierarchy": when looking to find which widget a pointer is on, Masonry will automatically exclude any widget if the pointer is outside its bounding-box.
 
@@ -239,17 +238,26 @@ The bounding-boxes of the widget tree form a kind of "bounding volume hierarchy"
 
 ## Coordinate spaces
 
-All `Widget` method implementations operate in that widget's content-box coordinate space.
-Which means that `(0, 0)` refers to the top-left point where padding ends and content begins.
-This is easy to reason in for the widget specific operations.
-The widget box can be assumed to be a simple rectangle and Masonry hides all the complicated transforms.
+Masonry distinguishes four widget-local coordinate spaces.
+All of them are logical coordinate spaces, not device-pixel coordinate spaces.
 
-Internally Masonry also operates in the widget's border-box coordinate space, but this is generally hidden from widgets.
-The difference compared to the content-box coordinate space is a simple border and padding based translation.
+The **layout border-box coordinate space** has its `(0,0)` at the top-left of the widget's layout border-box.
+Masonry uses it internally for storing layout origins, layout sizes, transforms, clip paths, IME areas, and visual boxes.
 
-Finally there is the window's coordinate space.
-Here all widgets have their transforms already applied so widget specific operations are complicated.
-Generally you'll want to convert any window coordinate space geometry into the widget's content-box coordinate space.
+The **layout content-box coordinate space** is the layout border-box coordinate space translated by the widget's borders and padding.
+`Widget::measure`, `Widget::layout`, and layout-only context methods such as `LayoutCtx::place_child` use this space.
+In this space, `(0,0)` is the top-left of the layout content-box.
+
+The **visual border-box coordinate space** has its `(0,0)` at the top-left of the visual border-box produced during compose.
+Masonry does not currently make much use of this space, but it's included here for completeness.
+
+The **visual content-box coordinate space** is the widget-local space used by `Widget` methods other than `measure` and `layout`.
+It is the visual border-box coordinate space translated by the widget's borders and padding.
+In this space, `(0,0)` is the top-left of the visual content-box.
+
+Finally there is the **window coordinate space**.
+Here all widget transforms have already been applied, so widget-specific operations are complicated.
+Generally you'll want to convert any window-coordinate geometry into the widget's visual content-box coordinate space.
 Then easily operate on that geometry and finally convert the results back to the window's coordinate space.
 
 
@@ -302,17 +310,16 @@ We will probably need to implement other features before we can handle it proper
 
 ## Pixel snapping
 
-Masonry currently handles pixel snapping for its widgets.
-
-The basic idea is that when widgets are laid out, Masonry takes their reported sizes and positions, and rounds them to integer values, so that the drawn shapes line up with pixels.
-
-This is done "at the end" of the layout pass, so to speak, so that widgets can lay themselves out assuming a floating point coordinate space, and without worrying about rounding errors.
+Masonry handles pixel snapping for its widgets.
 
-The snapping is done in a way that preserves relations between widgets: if one widget ends precisely where another stops, Masonry will pick values so that their pixel-snapped layout rects have no gap or overlap.
+Widgets manage their layout sizes and positions in logical pixels which can be fractional.
+When a widget's full transform to the window has been resolved during the compose pass, the widget's layout border-box is mapped to device pixels.
+Then the layout border-box edges are snapped to the pixel grid if the transform supports it.
+Finally the result is mapped back to widget-local logical coordinates to serve as the widget's visual box for painting and hit testing.
 
-<!-- TODO - Remove this note once https://github.com/linebender/xilem/issues/1264 is implemented. -->
-**Note:** This may produce incorrect results with DPI scaling.
-DPI-aware pixel snapping is a future feature.
+The snapping is done in a way that preserves relations between widgets.
+If one widget ends precisely where another starts, Masonry will snap coordinates so that their visual boxes have no gap or overlap.
+Snapping also accounts for the active DPI scale factor and is disabled for transforms such as rotation or shear.
 
 
 [`Cancel`]: ui_events::pointer::PointerEvent::Cancel
diff --git a/masonry_core/src/doc/pass_system.md b/masonry_core/src/doc/pass_system.md
index 8e9c2aa52..5201409bb 100644
--- a/masonry_core/src/doc/pass_system.md
+++ b/masonry_core/src/doc/pass_system.md
@@ -189,6 +189,7 @@ Not doing so is a logical bug, and may trigger debug assertions.
 ### Compose pass
 
 The **compose** pass runs top-down and assigns transforms to children.
+It will also snap widget border-boxes to the pixel grid when the transform allows it.
 Transform-only layout changes (e.g. scrolling) should request compose instead of requesting layout.
 
 Compose is meant to be a cheaper way to position widgets than layout.
@@ -229,7 +230,7 @@ External mutation is how Xilem applies any changes to the widget tree produced b
 Some notes about pass context types:
 
 - Render passes should be pure and can be skipped occasionally, therefore their context types ([`PaintCtx`] and [`AccessCtx`]) can't set invalidation flags or send signals.
-- The `layout` and `compose` passes lay out all widgets, which are transiently invalid during the passes, therefore [`MeasureCtx`], [`LayoutCtx`], and [`ComposeCtx`] cannot access the size and position of the `self` widget.
+- The `layout` and `compose` passes lay out all widgets, which are transiently invalid during the passes, therefore [`MeasureCtx`], [`LayoutCtx`] cannot access the size and position of the `self` widget.
 They can access the layout of children if they have already been laid out.
 - For the same reason, [`MeasureCtx`], [`LayoutCtx`], and [`ComposeCtx`] cannot create a `WidgetRef` reference to a child.
 - [`MutateCtx`], [`EventCtx`] and [`UpdateCtx`] can let you add and remove children.
diff --git a/masonry_core/src/layout/dim.rs b/masonry_core/src/layout/dim.rs
index c0c9006e7..913103e17 100644
--- a/masonry_core/src/layout/dim.rs
+++ b/masonry_core/src/layout/dim.rs
@@ -13,9 +13,7 @@ pub enum Dim {
     /// [`measure`]: crate::core::Widget::measure
     #[default]
     Auto,
-    /// Specific fixed length.
-    ///
-    /// The value is in logical pixels, represented by a [`Length`].
+    /// Specific fixed [`Length`].
     Fixed(Length),
     /// Multiple of context length.
     ///
@@ -72,11 +70,17 @@ impl From<Length> for Dim {
 impl Dim {
     /// Resolves, if possible, into a [`LenDef`].
     ///
-    /// If `context_length` is provided, it must be in device pixels.
-    pub fn resolve(&self, scale: f64, context_length: Option<f64>) -> Option<LenDef> {
+    /// # Panics
+    ///
+    /// Panics if ratio resolves to a non-finite or negative value and debug assertions are enabled.
+    /// This can happen if the numbers are huge, e.g. a logical size of `f64::MAX` scaled by `1.5`.
+    pub fn resolve(&self, context_length: Option<Length>) -> Option<LenDef> {
         match self {
-            Self::Fixed(length) => Some(LenDef::Fixed(length.dp(scale))),
-            Self::Ratio(mul) => context_length.map(|cl| LenDef::Fixed(cl * *mul)),
+            Self::Fixed(length) => Some(LenDef::Fixed(*length)),
+            Self::Ratio(mul) => context_length.map(|cl| match Length::try_px(cl.get() * *mul) {
+                Some(length) => LenDef::Fixed(length),
+                None => LenDef::MaxContent,
+            }),
             Self::Stretch => context_length.map(LenDef::Fixed),
             Self::MinContent => Some(LenDef::MinContent),
             Self::MaxContent => Some(LenDef::MaxContent),
diff --git a/masonry_core/src/layout/layout_size.rs b/masonry_core/src/layout/layout_size.rs
index 9ba9b9ae4..533eebf6f 100644
--- a/masonry_core/src/layout/layout_size.rs
+++ b/masonry_core/src/layout/layout_size.rs
@@ -3,24 +3,24 @@
 
 use kurbo::{Axis, Size};
 
-use crate::util::Sanitize;
+use crate::layout::Length;
 
 /// Layout width and height.
 ///
 /// A length may be missing if it has not been computed yet, i.e. it depends on the child.
-///
-/// The lengths, if present, are always finite, non-negative, and in device pixels.
 #[derive(Copy, Clone, Debug, Default, PartialEq)]
 pub struct LayoutSize {
-    width: Option<f64>,
-    height: Option<f64>,
+    width: Option<Length>,
+    height: Option<Length>,
 }
 
 impl From<Size> for LayoutSize {
+    #[track_caller]
     fn from(size: Size) -> Self {
-        let width = Some(size.width).sanitize("LayoutSize width");
-        let height = Some(size.height).sanitize("LayoutSize height");
-        Self { width, height }
+        Self {
+            width: Some(Length::px(size.width)),
+            height: Some(Length::px(size.height)),
+        }
     }
 }
 
@@ -32,52 +32,29 @@ impl LayoutSize {
     };
 
     /// Creates a new [`LayoutSize`] with the given lengths.
-    ///
-    /// The lengths must be finite, non-negative, and in device pixels.
-    /// Invalid lengths will result in `None`.
-    ///
-    /// # Panics
-    ///
-    /// Panics if `width` or `height` are non-finite or negative
-    /// and debug assertions are enabled.
-    pub fn new(width: f64, height: f64) -> Self {
-        let width = Some(width).sanitize("LayoutSize width");
-        let height = Some(height).sanitize("LayoutSize height");
-        Self { width, height }
+    pub fn new(width: Length, height: Length) -> Self {
+        Self {
+            width: Some(width),
+            height: Some(height),
+        }
     }
 
     /// Creates a new [`LayoutSize`] with only the given `axis` set to `length`.
-    ///
-    /// The length must be finite, non-negative, and in device pixels.
-    /// An invalid length will result in `None`.
-    ///
-    /// # Panics
-    ///
-    /// Panics if `length` is non-finite or negative and debug assertions are enabled.
-    pub fn one(axis: Axis, length: f64) -> Self {
-        let length = Some(length).sanitize("LayoutSize length");
+    pub fn one(axis: Axis, length: Length) -> Self {
         match axis {
             Axis::Horizontal => Self {
-                width: length,
+                width: Some(length),
                 height: None,
             },
             Axis::Vertical => Self {
                 width: None,
-                height: length,
+                height: Some(length),
             },
         }
     }
 
     /// Creates a new [`LayoutSize`] with only the given `axis` set to `length`.
-    ///
-    /// The length, if present, must be finite, non-negative, and in device pixels.
-    /// An invalid length will result in `None`.
-    ///
-    /// # Panics
-    ///
-    /// Panics if `length` is present but non-finite or negative
-    /// and debug assertions are enabled.
-    pub fn maybe(axis: Axis, length: Option<f64>) -> Self {
+    pub fn maybe(axis: Axis, length: Option<Length>) -> Self {
         let Some(length) = length else {
             return Self {
                 width: None,
@@ -88,11 +65,7 @@ impl LayoutSize {
     }
 
     /// Returns the [`Length`] of the provided `axis`.
-    ///
-    /// The returned value will be finite, non-negative, and in device pixels.
-    ///
-    /// [`Length`]: crate::layout::Length
-    pub const fn length(&self, axis: Axis) -> Option<f64> {
+    pub const fn length(&self, axis: Axis) -> Option<Length> {
         match axis {
             Axis::Horizontal => self.width,
             Axis::Vertical => self.height,
diff --git a/masonry_core/src/layout/len_def.rs b/masonry_core/src/layout/len_def.rs
index 4672cc636..3a98c7047 100644
--- a/masonry_core/src/layout/len_def.rs
+++ b/masonry_core/src/layout/len_def.rs
@@ -1,8 +1,7 @@
 // Copyright 2025 the Xilem Authors
 // SPDX-License-Identifier: Apache-2.0
 
-use crate::layout::LenReq;
-use crate::util::Sanitize;
+use crate::layout::{LenReq, Length};
 
 /// Widget border-box length definition.
 ///
@@ -11,16 +10,12 @@ use crate::util::Sanitize;
 ///
 /// This is how a parent specifies [`Dim::Auto`] behavior for its children.
 ///
-/// All the values must be finite, non-negative, and in device pixels.
-///
 /// [`Dim`]: crate::layout::Dim
 /// [`Dim::Auto`]: crate::layout::Dim::Auto
 #[derive(Copy, Clone, Debug, PartialEq)]
 pub enum LenDef {
-    /// Specific fixed border-box length.
-    ///
-    /// The value must be finite, non-negative, and in device pixels.
-    Fixed(f64),
+    /// Specific fixed border-box [`Length`].
+    Fixed(Length),
     /// Minimum preferred border-box length.
     ///
     /// This will result in a [`measure`] invocation, which can be slow.
@@ -35,12 +30,10 @@ pub enum LenDef {
     MaxContent,
     /// The border-box should fit in the specified available space.
     ///
-    /// The value must be finite, non-negative, and in device pixels.
-    ///
     /// This will result in a [`measure`] invocation, which can be slow.
     ///
     /// [`measure`]: crate::core::Widget::measure
-    FitContent(f64),
+    FitContent(Length),
 }
 
 impl From<LenReq> for LenDef {
@@ -55,14 +48,7 @@ impl From<LenReq> for LenDef {
 
 impl LenDef {
     /// Returns the specific fixed border-box length if it is present.
-    ///
-    /// The length will be in device pixels.
-    ///
-    /// Whether the length can be non-finite or negative depends on whether
-    /// this [`LenDef`] has been [sanitized].
-    ///
-    /// [sanitized]: LenDef::sanitize
-    pub fn fixed(&self) -> Option<f64> {
+    pub fn fixed(&self) -> Option<Length> {
         match self {
             Self::Fixed(val) => Some(*val),
             _ => None,
@@ -74,62 +60,15 @@ impl LenDef {
     /// [`Fixed`] and [`FitContent`] will have their value reduced by `delta`, but clamped to zero.
     /// [`MinContent`] and [`MaxContent`] are returned as-is.
     ///
-    /// The provided `delta` must be in device pixels.
-    ///
     /// [`Fixed`]: Self::Fixed
     /// [`FitContent`]: Self::FitContent
     /// [`MinContent`]: Self::MinContent
     /// [`MaxContent`]: Self::MaxContent
-    pub fn reduce(self, delta: f64) -> Self {
-        match self {
-            Self::Fixed(val) => Self::Fixed((val - delta).max(0.)),
-            Self::MinContent | Self::MaxContent => self,
-            Self::FitContent(space) => Self::FitContent((space - delta).max(0.)),
-        }
-    }
-}
-
-impl Sanitize for LenDef {
-    /// Returns a valid instance of [`LenDef`].
-    ///
-    /// It will return [`MaxContent`] if the [`Fixed`] or [`FitContent`]
-    /// values are non-finite or negative.
-    ///
-    /// This method is called by Masonry during the layout pass,
-    /// when a widget's length is being resolved.
-    ///
-    /// # Panics
-    ///
-    /// Panics if the [`Fixed`] or [`FitContent`] values are non-finite or negative
-    /// and debug assertions are enabled.
-    ///
-    /// [`Fixed`]: Self::Fixed
-    /// [`FitContent`]: Self::FitContent
-    /// [`MaxContent`]: Self::MaxContent
-    #[track_caller]
-    fn sanitize(self, name: &str) -> Self {
+    pub fn reduce(self, delta: Length) -> Self {
         match self {
-            Self::Fixed(val) => {
-                if val.is_finite() && val >= 0. {
-                    self
-                } else {
-                    debug_panic!(
-                        "{name} `Fixed` value must be finite and non-negative. Received: {val}"
-                    );
-                    Self::MaxContent
-                }
-            }
+            Self::Fixed(val) => Self::Fixed(val.saturating_sub(delta)),
             Self::MinContent | Self::MaxContent => self,
-            Self::FitContent(space) => {
-                if space.is_finite() && space >= 0. {
-                    self
-                } else {
-                    debug_panic!(
-                        "{name} `FitContent` value must be finite and non-negative. Received: {space}"
-                    );
-                    Self::MaxContent
-                }
-            }
+            Self::FitContent(space) => Self::FitContent(space.saturating_sub(delta)),
         }
     }
 }
diff --git a/masonry_core/src/layout/len_req.rs b/masonry_core/src/layout/len_req.rs
index 7e5043887..06e4912f5 100644
--- a/masonry_core/src/layout/len_req.rs
+++ b/masonry_core/src/layout/len_req.rs
@@ -1,7 +1,7 @@
 // Copyright 2025 the Xilem Authors
 // SPDX-License-Identifier: Apache-2.0
 
-use crate::util::Sanitize;
+use crate::layout::Length;
 
 /// Widget length measurement algorithm request.
 ///
@@ -13,9 +13,7 @@ pub enum LenReq {
     /// The widget should measure its maximum preferred length.
     MaxContent,
     /// The widget should attempt to fit into the specified available space.
-    ///
-    /// The space value must be finite, non-negative, and in device pixels.
-    FitContent(f64),
+    FitContent(Length),
 }
 
 impl LenReq {
@@ -24,44 +22,13 @@ impl LenReq {
     /// [`FitContent`] will have its value reduced by `delta`, but clamped to zero.
     /// [`MinContent`] and [`MaxContent`] are returned as-is.
     ///
-    /// The provided `delta` must be in device pixels.
-    ///
     /// [`FitContent`]: Self::FitContent
     /// [`MinContent`]: Self::MinContent
     /// [`MaxContent`]: Self::MaxContent
-    pub fn reduce(self, delta: f64) -> Self {
-        match self {
-            Self::MinContent | Self::MaxContent => self,
-            Self::FitContent(space) => Self::FitContent((space - delta).max(0.)),
-        }
-    }
-}
-
-impl Sanitize for LenReq {
-    /// Returns a valid instance of [`LenReq`].
-    ///
-    /// It will return [`MaxContent`] if the [`FitContent`] value is non-finite or negative.
-    ///
-    /// # Panics
-    ///
-    /// Panics if [`FitContent`] value is non-finite or negative and debug assertions are enabled.
-    ///
-    /// [`FitContent`]: Self::FitContent
-    /// [`MaxContent`]: Self::MaxContent
-    #[track_caller]
-    fn sanitize(self, name: &str) -> Self {
+    pub fn reduce(self, delta: Length) -> Self {
         match self {
             Self::MinContent | Self::MaxContent => self,
-            Self::FitContent(space) => {
-                if space.is_finite() && space >= 0. {
-                    self
-                } else {
-                    debug_panic!(
-                        "{name} `space` must be finite and non-negative. Received: {space}"
-                    );
-                    Self::MaxContent
-                }
-            }
+            Self::FitContent(space) => Self::FitContent(space.saturating_sub(delta)),
         }
     }
 }
diff --git a/masonry_core/src/layout/length.rs b/masonry_core/src/layout/length.rs
index 0f7e83fd6..f117a8845 100644
--- a/masonry_core/src/layout/length.rs
+++ b/masonry_core/src/layout/length.rs
@@ -4,7 +4,7 @@
 /// A value representing a width, height, or similar distance value.
 ///
 /// It is always finite and non-negative.
-#[derive(Clone, Copy, PartialEq)]
+#[derive(Default, Clone, Copy, PartialEq)]
 pub struct Length {
     value: f64,
 }
@@ -47,6 +47,16 @@ impl Length {
         Self { value }
     }
 
+    /// Creates a length, in logical pixels.
+    ///
+    /// Returns `None` if the provided `value` is non-finite or negative.
+    pub const fn try_px(value: f64) -> Option<Self> {
+        if value < 0. || !value.is_finite() {
+            return None;
+        }
+        Some(Self { value })
+    }
+
     /// Creates a length, in logical pixels.
     ///
     /// Can be called from const contexts.
@@ -91,4 +101,30 @@ impl Length {
             other
         }
     }
+
+    /// Returns `max` if `self` is greater than `max`, and `min` if `self` is less than `min`.
+    /// Otherwise this returns `self`.
+    ///
+    /// # Panics
+    ///
+    /// Panics if `min` is greater than `max`.
+    pub const fn clamp(self, min: Self, max: Self) -> Self {
+        Self {
+            value: self.value.clamp(min.value, max.value),
+        }
+    }
+
+    /// Adds the `other` value but the result doesn't go above the maximum value.
+    pub const fn saturating_add(self, other: Self) -> Self {
+        Self {
+            value: (self.value + other.value).min(f64::MAX),
+        }
+    }
+
+    /// Subtracts the `other` value but the result doesn't go below zero.
+    pub const fn saturating_sub(self, other: Self) -> Self {
+        Self {
+            value: (self.value - other.value).max(0.),
+        }
+    }
 }
diff --git a/masonry_core/src/layout/measurement_cache.rs b/masonry_core/src/layout/measurement_cache.rs
index 32c588474..134651e08 100644
--- a/masonry_core/src/layout/measurement_cache.rs
+++ b/masonry_core/src/layout/measurement_cache.rs
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 use crate::kurbo::Axis;
-use crate::layout::LenReq;
+use crate::layout::{LenReq, Length};
 
 /// At the time of choosing this capacity,
 /// 10 * 48 bytes = 480 bytes for the whole buffer.
@@ -22,7 +22,7 @@ const CAPACITY: usize = 10;
 /// but even if there are that is fine, because we clear the cache regularly.
 #[derive(Clone, Debug)]
 pub(crate) struct MeasurementCache {
-    entries: Vec<(MeasurementInputs, f64)>,
+    entries: Vec<(MeasurementInputs, Length)>,
 }
 
 /// All the inputs that change [`measure`] output.
@@ -35,12 +35,12 @@ pub(crate) struct MeasurementCache {
 pub(crate) struct MeasurementInputs {
     axis: Axis,
     len_req: LenReq,
-    cross_length: Option<f64>,
+    cross_length: Option<Length>,
 }
 
 impl MeasurementInputs {
     /// Creates a new [`MeasurementInputs`] with the provided data.
-    pub(crate) const fn new(axis: Axis, len_req: LenReq, cross_length: Option<f64>) -> Self {
+    pub(crate) const fn new(axis: Axis, len_req: LenReq, cross_length: Option<Length>) -> Self {
         Self {
             axis,
             len_req,
@@ -58,7 +58,7 @@ impl MeasurementCache {
     }
 
     /// Inserts the `result` for the given `inputs` into the cache.
-    pub(crate) fn insert(&mut self, inputs: MeasurementInputs, result: f64) {
+    pub(crate) fn insert(&mut self, inputs: MeasurementInputs, result: Length) {
         if let Some(index) = self.entries.iter().position(|e| e.0 == inputs) {
             if index > 0 {
                 // Keep recently referenced entries in front
@@ -78,7 +78,7 @@ impl MeasurementCache {
     }
 
     /// Gets the cached result for the given `inputs`.
-    pub(crate) fn get(&mut self, inputs: &MeasurementInputs) -> Option<f64> {
+    pub(crate) fn get(&mut self, inputs: &MeasurementInputs) -> Option<Length> {
         let index = self.entries.iter().position(|e| &e.0 == inputs)?;
         if index > 0 {
             // Keep recently referenced entries in front
diff --git a/masonry_core/src/layout/size_def.rs b/masonry_core/src/layout/size_def.rs
index c0b641071..3169f04f5 100644
--- a/masonry_core/src/layout/size_def.rs
+++ b/masonry_core/src/layout/size_def.rs
@@ -3,15 +3,13 @@
 
 use kurbo::{Axis, Size};
 
-use crate::layout::LenDef;
+use crate::layout::{LenDef, Length};
 use crate::util::Sanitize;
 
 /// Widget border-box size definition.
 ///
 /// This is how a parent specifies [`Dim::Auto`] behavior for its children.
 ///
-/// The inner [`LenDef`] values will already be [sanitized] and are safe to read.
-///
 /// [`Dim::Auto`]: crate::layout::Dim::Auto
 /// [sanitized]: Sanitize
 #[derive(Copy, Clone, Debug, PartialEq)]
@@ -38,17 +36,7 @@ impl SizeDef {
     };
 
     /// Creates a new [`SizeDef`] with the given `width` and `height`.
-    ///
-    /// All the [`LenDef`] values must be finite, non-negative, and in device pixels.
-    /// Invalid [`LenDef`] values will fall back to [`LenDef::MaxContent`].
-    ///
-    /// # Panics
-    ///
-    /// Panics if `width` or `height` contain non-finite or negative values
-    /// and debug assertions are enabled.
     pub fn new(width: LenDef, height: LenDef) -> Self {
-        let width = width.sanitize("SizeDef width");
-        let height = height.sanitize("SizeDef height");
         Self { width, height }
     }
 
@@ -56,16 +44,18 @@ impl SizeDef {
     ///
     /// See [`LenDef::FitContent`] for details.
     ///
-    /// The `size` must be finite, non-negative, and in device pixels.
-    /// An invalid `size` dimension value will fall back to [`LenDef::MaxContent`].
+    /// The `size` must be finite, non-negative, and in logical pixels.
+    /// An invalid `size` dimension value will fall back to zero.
     ///
     /// # Panics
     ///
     /// Panics if `size` contains non-finite or negative values and debug assertions are enabled.
     pub fn fit(size: Size) -> Self {
+        let width = size.width.sanitize("SizeDef::fit width");
+        let height = size.height.sanitize("SizeDef::fit height");
         Self::new(
-            LenDef::FitContent(size.width),
-            LenDef::FitContent(size.height),
+            LenDef::FitContent(Length::px(width)),
+            LenDef::FitContent(Length::px(height)),
         )
     }
 
@@ -73,28 +63,25 @@ impl SizeDef {
     ///
     /// See [`LenDef::Fixed`] for details.
     ///
-    /// The `size` must be finite, non-negative, and in device pixels.
-    /// An invalid `size` dimension value will fall back to [`LenDef::MaxContent`].
+    /// The `size` must be finite, non-negative, and in logical pixels.
+    /// An invalid `size` dimension value will fall back to zero.
     ///
     /// # Panics
     ///
     /// Panics if `size` contains non-finite or negative values and debug assertions are enabled.
     pub fn fixed(size: Size) -> Self {
-        Self::new(LenDef::Fixed(size.width), LenDef::Fixed(size.height))
+        let width = size.width.sanitize("SizeDef::fixed width");
+        let height = size.height.sanitize("SizeDef::fixed height");
+        Self::new(
+            LenDef::Fixed(Length::px(width)),
+            LenDef::Fixed(Length::px(height)),
+        )
     }
 
     /// Creates a new [`SizeDef`] with `axis` set to [`LenDef`].
     ///
     /// The other axis will be [`LenDef::MaxContent`].
-    ///
-    /// [`LenDef`] values must be finite, non-negative, and in device pixels.
-    /// Invalid [`LenDef`] values will fall back to [`LenDef::MaxContent`].
-    ///
-    /// # Panics
-    ///
-    /// Panics if `len_def` contains non-finite or negative values and debug assertions are enabled.
     pub fn one(axis: Axis, len_def: LenDef) -> Self {
-        let len_def = len_def.sanitize("SizeDef::one len_def");
         match axis {
             Axis::Horizontal => Self {
                 width: len_def,
@@ -108,13 +95,6 @@ impl SizeDef {
     }
 
     /// Returns the [`SizeDef`] with `axis` set to [`LenDef`].
-    ///
-    /// [`LenDef`] values must be finite, non-negative, and in device pixels.
-    /// Invalid [`LenDef`] values will fall back to [`LenDef::MaxContent`].
-    ///
-    /// # Panics
-    ///
-    /// Panics if `len_def` contains non-finite or negative values and debug assertions are enabled.
     pub fn with(self, axis: Axis, len_def: LenDef) -> Self {
         match axis {
             Axis::Horizontal => self.with_width(len_def),
@@ -123,36 +103,18 @@ impl SizeDef {
     }
 
     /// Returns the [`SizeDef`] with the width set to [`LenDef`].
-    ///
-    /// [`LenDef`] values must be finite, non-negative, and in device pixels.
-    /// Invalid [`LenDef`] values will fall back to [`LenDef::MaxContent`].
-    ///
-    /// # Panics
-    ///
-    /// Panics if `len_def` contains non-finite or negative values and debug assertions are enabled.
     pub fn with_width(mut self, len_def: LenDef) -> Self {
-        self.width = len_def.sanitize("SizeDef width");
+        self.width = len_def;
         self
     }
 
     /// Returns the [`SizeDef`] with the height set to [`LenDef`].
-    ///
-    /// [`LenDef`] values must be finite, non-negative, and in device pixels.
-    /// Invalid [`LenDef`] values will fall back to [`LenDef::MaxContent`].
-    ///
-    /// # Panics
-    ///
-    /// Panics if `len_def` contains non-finite or negative values and debug assertions are enabled.
     pub fn with_height(mut self, len_def: LenDef) -> Self {
-        self.height = len_def.sanitize("SizeDef height");
+        self.height = len_def;
         self
     }
 
     /// Returns the [`LenDef`] of the given `axis`.
-    ///
-    /// The result will already have been [sanitized].
-    ///
-    /// [sanitized]: Sanitize
     pub const fn dim(&self, axis: Axis) -> LenDef {
         match axis {
             Axis::Horizontal => self.width,
diff --git a/masonry_core/src/passes/accessibility.rs b/masonry_core/src/passes/accessibility.rs
index 2a0d86eb2..8f9d7aaa0 100644
--- a/masonry_core/src/passes/accessibility.rs
+++ b/masonry_core/src/passes/accessibility.rs
@@ -89,11 +89,10 @@ fn build_access_node(
     scale_factor: Option<f64>,
 ) -> Node {
     let mut node = Node::new(widget.accessibility_role());
-    node.set_bounds(to_accesskit_rect(
-        ctx.widget_state.border_box_size().to_rect(),
-    ));
+    node.set_bounds(to_accesskit_rect(ctx.widget_state.visual_border_box));
 
-    let local_translation = ctx.widget_state.scroll_translation + ctx.widget_state.origin.to_vec2();
+    let local_translation =
+        ctx.widget_state.scroll_translation + ctx.widget_state.layout_origin.to_vec2();
     let mut local_transform = ctx.widget_state.transform.then_translate(local_translation);
 
     // TODO - Remove once Masonry uses physical coordinates.
diff --git a/masonry_core/src/passes/compose.rs b/masonry_core/src/passes/compose.rs
index 061af0266..446f6d8c3 100644
--- a/masonry_core/src/passes/compose.rs
+++ b/masonry_core/src/passes/compose.rs
@@ -1,7 +1,7 @@
 // Copyright 2024 the Xilem Authors
 // SPDX-License-Identifier: Apache-2.0
 
-use kurbo::Affine;
+use kurbo::{Affine, Point, Rect};
 use tracing::info_span;
 use tree_arena::ArenaMut;
 
@@ -9,6 +9,54 @@ use crate::app::{RenderRoot, RenderRootState};
 use crate::core::{ComposeCtx, PropertyArena, WidgetArenaNode};
 use crate::passes::{enter_span_if, recurse_on_children};
 
+/// Returns whether the transform supports box snapping.
+///
+/// Box snapping is supported when the transform maps local widget axes to device
+/// axes without rotation or shear. Scaling, translation, and axis flips are fine.
+fn supports_box_snapping(transform: Affine) -> bool {
+    let [a, b, c, d, _, _] = transform.as_coeffs();
+
+    // Kurbo affine coefficients represent:
+    //
+    // x' = a*x + c*y + e
+    // y' = b*x + d*y + f
+    //
+    // The off-diagonal coefficients b and c must be zero. If either is non-zero, x contributes
+    // to output y or y contributes to output x. That means the transform mixes axes, as in
+    // rotation, shear, or axis swapping, which this snapping path intentionally does not support.
+    //
+    // The scale coefficients a and d must be non-zero so the transform can be inverted
+    // when mapping snapped device edges back to local coordinates.
+    //
+    // The translation coefficients e and f do not affect whether edges stay axis-aligned,
+    // so they are intentionally ignored.
+    b == 0. && c == 0. && a != 0. && d != 0.
+}
+
+/// Snaps the given `border_box` to device pixel edges.
+///
+/// If `window_transform` doesn't support snapping then the `border_box` is returned as-is.
+fn snap_border_box(border_box: Rect, window_transform: Affine, scale_factor: f64) -> Rect {
+    let local_to_device = window_transform.then_scale(scale_factor);
+    if !supports_box_snapping(local_to_device) {
+        return border_box;
+    }
+
+    let device_border_box = local_to_device.transform_rect_bbox(border_box);
+    let snapped_device_border_box = Rect::new(
+        device_border_box.x0.round(),
+        device_border_box.y0.round(),
+        device_border_box.x1.round(),
+        device_border_box.y1.round(),
+    );
+
+    let device_to_local = local_to_device.inverse();
+    Rect::from_points(
+        device_to_local * Point::new(snapped_device_border_box.x0, snapped_device_border_box.y0),
+        device_to_local * Point::new(snapped_device_border_box.x1, snapped_device_border_box.y1),
+    )
+}
+
 // --- MARK: RECURSE
 fn compose_widget(
     global_state: &mut RenderRootState,
@@ -31,13 +79,26 @@ fn compose_widget(
 
     // The translation needs to be applied *after* applying the transform,
     // as translation by scrolling should be within the transformed coordinate space.
-    // Same is true for the aligned border-box origin, to behave similar as in CSS.
-    let local_translation = state.scroll_translation + state.origin.to_vec2();
+    // Same is true for the layout border-box origin, to behave similar as in CSS.
+    let local_translation = state.scroll_translation + state.layout_origin.to_vec2();
 
     state.window_transform =
         parent_window_transform * state.transform.then_translate(local_translation);
 
-    let paint_box = state.paint_box();
+    let visual_border_box = snap_border_box(
+        state.layout_border_box(),
+        state.window_transform,
+        global_state.scale_factor,
+    );
+    if state.visual_border_box != visual_border_box {
+        state.visual_border_box = visual_border_box;
+        // New visual box means that we need to fully redo painting.
+        state.request_pre_paint = true;
+        state.request_paint = true;
+        state.request_post_paint = true;
+    }
+
+    let paint_box = state.visual_paint_box();
     state.bounding_box = state.window_transform.transform_rect_bbox(paint_box);
 
     let mut ctx = ComposeCtx {
diff --git a/masonry_core/src/passes/event.rs b/masonry_core/src/passes/event.rs
index d7b59cb58..053a9338c 100644
--- a/masonry_core/src/passes/event.rs
+++ b/masonry_core/src/passes/event.rs
@@ -27,7 +27,6 @@ fn get_pointer_target(
     }
 
     if let Some(pointer_pos) = pointer_pos {
-        // TODO - Apply scale
         let pointer_pos = (pointer_pos.x, pointer_pos.y).into();
         return root
             .get_widget(root.root_id())
@@ -395,7 +394,7 @@ pub(crate) fn run_on_access_event_pass(
         }
         accesskit::Action::ScrollIntoView if !handled.is_handled() => {
             let widget_state = root.widget_arena.get_state(target);
-            let rect = widget_state.border_box_size().to_rect();
+            let rect = widget_state.visual_border_box;
             root.global_state
                 .scroll_request_targets
                 .push((target, rect));
diff --git a/masonry_core/src/passes/layout.rs b/masonry_core/src/passes/layout.rs
index ad4975f8e..fd1203c92 100644
--- a/masonry_core/src/passes/layout.rs
+++ b/masonry_core/src/passes/layout.rs
@@ -16,8 +16,8 @@ use crate::core::{
     ChildrenIds, LayoutCtx, MeasureCtx, PropertiesRef, PropertyArena, Widget, WidgetArenaNode,
     WidgetState,
 };
-use crate::kurbo::{Axis, Insets, Point, Size};
-use crate::layout::{LayoutSize, LenDef, LenReq, MeasurementInputs, SizeDef};
+use crate::kurbo::{Axis, Insets, Point, Rect, Size};
+use crate::layout::{LayoutSize, LenDef, LenReq, Length, MeasurementInputs, SizeDef};
 use crate::passes::{enter_span_if, recurse_on_children};
 use crate::properties::{BorderWidth, BoxShadow, Dimensions, Padding};
 use crate::util::Sanitize;
@@ -25,64 +25,40 @@ use crate::util::Sanitize;
 // --- MARK: COMPUTE SIZE
 
 /// Measures the preferred border-box length of `widget` on the given `axis`.
-///
-/// The returned length will be in device pixels.
-/// Given that it will be the result of measuring,
-/// it must be [sanitized] before passing it back to a widget.
-///
-/// `len_req` must be [sanitized] before being passed to this function.
-///
-/// `cross_length`, if present, must be [sanitized] and in device pixels.
-///
-/// [sanitized]: Sanitize
 fn measure_border_box(
     widget: &mut dyn Widget,
     ctx: &mut MeasureCtx<'_>,
     props: &PropertiesRef<'_>,
     axis: Axis,
     len_req: LenReq,
-    cross_length: Option<f64>,
-) -> f64 {
-    // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-    //       https://github.com/linebender/xilem/issues/1264
-    let scale = 1.0;
-
+    cross_length: Option<Length>,
+) -> Length {
     let cache = ctx.property_cache();
     let border = props.get::<BorderWidth>(cache);
     let padding = props.get::<Padding>(cache);
 
-    let border_length = border.length(axis).dp(scale);
-    let padding_length = padding.length(axis).dp(scale);
+    let border_and_padding_length = border.length(axis).saturating_add(padding.length(axis));
 
     // Reduce the border-box length by the border and padding length to get the content-box length.
-    let len_req = len_req.reduce(border_length + padding_length);
+    let len_req = len_req.reduce(border_and_padding_length);
     let cross_length = cross_length.map(|cross_length| {
         let cross = axis.cross();
-        let cross_border_length = border.length(cross).dp(scale);
-        let cross_padding_length = padding.length(cross).dp(scale);
-        (cross_length - cross_border_length - cross_padding_length).max(0.)
+        cross_length
+            .saturating_sub(border.length(cross))
+            .saturating_sub(padding.length(cross))
     });
 
     // Measure the content-box length.
     let content_length = widget.measure(ctx, props, axis, len_req, cross_length);
 
     // Add border and padding to the content-box length to return the border-box length.
-    content_length + border_length + padding_length
+    content_length.saturating_add(border_and_padding_length)
 }
 
 /// Resolves the [`LenDef`] of the provided `axis`.
 ///
 /// Unless `Fixed`, this will result in a [`measure`] invocation.
 ///
-/// The returned length will be in device pixels.
-/// Given that it can be the result of measuring,
-/// it must be [sanitized] before passing it back to a widget.
-///
-/// `len_def` must be [sanitized] before being passed to this function.
-///
-/// `cross_length`, if present, must be [sanitized] and in device pixels.
-///
-/// [sanitized]: Sanitize
 /// [`measure`]: Widget::measure
 fn resolve_len_def(
     widget: &mut dyn Widget,
@@ -90,8 +66,8 @@ fn resolve_len_def(
     props: &PropertiesRef<'_>,
     axis: Axis,
     len_def: LenDef,
-    cross_length: Option<f64>,
-) -> f64 {
+    cross_length: Option<Length>,
+) -> Length {
     let len_req = match len_def {
         LenDef::Fixed(val) => return val,
         LenDef::MinContent => LenReq::MinContent,
@@ -139,28 +115,14 @@ fn resolve_len_def(
 
 /// Resolves the widget's preferred border-box length on the given `axis`.
 ///
-/// The returned length will be finite, non-negative, and in device pixels.
-///
 /// `auto_length` specifies the fallback behavior if a widget's dimension is [`Dim::Auto`].
 ///
-/// `context_size` must be in device pixels.
-///
-/// `cross_length`, if present, must be finite, non-negative, and in device pixels.
-/// Invalid `cross_length` value is fall back to `None`.
-///
 /// # Panics
 ///
-/// Panics if `auto_length` has a non-finite or negative value and debug assertions are enabled.
-///
-/// Panics if `cross_length` is non-finite or negative and debug assertions are enabled.
-///
 /// Panics if a dimension resolves to a non-finite or negative value
 /// and debug assertions are enabled. This can happen if the involved numbers are huge,
 /// e.g. a logical size of `f64::MAX` scaled by `1.5`.
 ///
-/// Panics if [`Widget::measure`] returned a non-finite or negative length
-/// and debug assertions are enabled.
-///
 /// [`Dim::Auto`]: crate::layout::Dim::Auto
 pub(crate) fn resolve_length(
     global_state: &mut RenderRootState,
@@ -169,18 +131,8 @@ pub(crate) fn resolve_length(
     auto_length: LenDef,
     context_size: LayoutSize,
     axis: Axis,
-    cross_length: Option<f64>,
-) -> f64 {
-    // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-    //       https://github.com/linebender/xilem/issues/1264
-    let scale = 1.0;
-
-    // Sanitize inputs early & always, to quickly catch bugs,
-    // because not every code path will use these values.
-    let auto_length = auto_length.sanitize("auto_length");
-    let cross_length = cross_length.sanitize("cross_length");
-    // LayoutSize encapsulates sanitization already.
-
+    cross_length: Option<Length>,
+) -> Length {
     // Get the dimensions
     let class_set = &node.item.class_set;
     let cache = &mut node.item.state.property_cache;
@@ -199,9 +151,8 @@ pub(crate) fn resolve_length(
     // Resolve the dimension on the given axis
     let len_def = dims
         .dim(axis)
-        .resolve(scale, context_size.length(axis))
-        .unwrap_or(auto_length)
-        .sanitize("len_def");
+        .resolve(context_size.length(axis))
+        .unwrap_or(auto_length);
 
     // Return immediately if we already have a fixed length
     if let LenDef::Fixed(length) = len_def {
@@ -224,22 +175,19 @@ pub(crate) fn resolve_length(
     let cross_length = cross_length.or_else(|| {
         let cross = axis.cross();
         dims.dim(cross)
-            .resolve(scale, context_size.length(cross))
-            .and_then(|cross_len_def| cross_len_def.sanitize("cross_len_def").fixed())
+            .resolve(context_size.length(cross))
+            .and_then(|cross_len_def| cross_len_def.fixed())
     });
 
     // Measure
-    let length = resolve_len_def(widget, &mut ctx, &props, axis, len_def, cross_length);
-    length.sanitize("measured length")
+    resolve_len_def(widget, &mut ctx, &props, axis, len_def, cross_length)
 }
 
 /// Resolves the widget's preferred border-box size.
 ///
-/// The returned size will be finite, non-negative, and in device pixels.
-///
-/// `size_def` specifies the fallback behavior if a widget's dimension is [`Dim::Auto`].
+/// The returned size will be finite, non-negative, and in logical pixels.
 ///
-/// `context_size` must be in device pixels.
+/// `auto_size` specifies the fallback behavior if a widget's dimension is [`Dim::Auto`].
 ///
 /// # Panics
 ///
@@ -247,9 +195,6 @@ pub(crate) fn resolve_length(
 /// and debug assertions are enabled. This can happen if the involved numbers are huge,
 /// e.g. a logical size of `f64::MAX` scaled by `1.5`.
 ///
-/// Panics if [`Widget::measure`] returned a non-finite or negative length
-/// and debug assertions are enabled.
-///
 /// [`Dim::Auto`]: crate::layout::Dim::Auto
 pub(crate) fn resolve_size(
     global_state: &mut RenderRootState,
@@ -258,12 +203,6 @@ pub(crate) fn resolve_size(
     auto_size: SizeDef,
     context_size: LayoutSize,
 ) -> Size {
-    // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-    //       https://github.com/linebender/xilem/issues/1264
-    let scale = 1.0;
-
-    // Input sanitization is not required, because SizeDef and LayoutSize encapsulate it.
-
     // Currently we only support the common horizontal-tb writing mode,
     // so the assignments are hardcoded here, but the rest of the function adapts.
     let (inline, block) = (Axis::Horizontal, Axis::Vertical);
@@ -287,15 +226,13 @@ pub(crate) fn resolve_size(
     let inline_auto = auto_size.dim(inline);
     let inline_def = dims
         .dim(inline)
-        .resolve(scale, context_size.length(inline))
-        .unwrap_or(inline_auto)
-        .sanitize("inline_def");
+        .resolve(context_size.length(inline))
+        .unwrap_or(inline_auto);
     let block_auto = auto_size.dim(block);
     let block_def = dims
         .dim(block)
-        .resolve(scale, context_size.length(block))
-        .unwrap_or(block_auto)
-        .sanitize("block_def");
+        .resolve(context_size.length(block))
+        .unwrap_or(block_auto);
 
     // Return immediately if we already have a fixed size
     let inline_length = inline_def.fixed();
@@ -303,7 +240,7 @@ pub(crate) fn resolve_size(
     if let Some(inline_length) = inline_length
         && let Some(block_length) = block_length
     {
-        return inline.pack_size(inline_length, block_length);
+        return inline.pack_size(inline_length.get(), block_length.get());
     }
 
     // Otherwise fall back to measurement
@@ -320,7 +257,6 @@ pub(crate) fn resolve_size(
 
     let inline_length = inline_length.unwrap_or_else(|| {
         resolve_len_def(widget, &mut ctx, &props, inline, inline_def, block_length)
-            .sanitize("measured inline length")
     });
 
     // Update the auto length
@@ -338,10 +274,9 @@ pub(crate) fn resolve_size(
             block_def,
             Some(inline_length),
         )
-        .sanitize("measured block length")
     });
 
-    inline.pack_size(inline_length, block_length)
+    inline.pack_size(inline_length.get(), block_length.get())
 }
 
 // --- MARK: RUN LAYOUT
@@ -353,7 +288,7 @@ pub(crate) fn resolve_size(
 /// If the chosen border-box `size` is smaller than what is required to fit the widget's
 /// borders and padding, then the `size` will be expanded to meet those constraints.
 ///
-/// The provided `size` must be finite, non-negative, and in device pixels.
+/// The provided `size` must be finite, non-negative, and in logical pixels.
 /// Non-finite or negative length will fall back to zero with a logged warning.
 ///
 /// # Panics
@@ -394,16 +329,12 @@ pub(crate) fn run_layout_on(
             widget.short_type_name(),
             id,
         );
-        state.origin = Point::ZERO;
-        state.end_point = Point::ZERO;
+        state.layout_origin = Point::ZERO;
         state.layout_border_box_size = Size::ZERO;
+        state.visual_border_box = Rect::ZERO;
         return;
     }
 
-    // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-    //       https://github.com/linebender/xilem/issues/1264
-    let scale = 1.0;
-
     let stack = property_arena.get(state.property_stack_id, widget.type_id());
     let props = PropertiesRef {
         local: properties,
@@ -419,8 +350,8 @@ pub(crate) fn run_layout_on(
 
     // Force the border-box size to be large enough to actually contain the border and padding.
     let minimum_size = Size::ZERO;
-    let minimum_size = border_width.size_up(minimum_size, scale);
-    let minimum_size = padding.size_up(minimum_size, scale);
+    let minimum_size = border_width.size_up(minimum_size);
+    let minimum_size = padding.size_up(minimum_size);
     let border_box_size = minimum_size.max(chosen_size);
 
     if !state.needs_layout() && state.layout_border_box_size == border_box_size {
@@ -472,16 +403,16 @@ pub(crate) fn run_layout_on(
         }
     });
 
-    state.paint_insets = Insets::ZERO;
+    state.paint_box_insets = Insets::ZERO;
 
     // Compute the insets for deriving the content-box from the border-box
-    let border_box_insets = border_width.insets_up(Insets::ZERO, scale);
-    let border_box_insets = padding.insets_up(border_box_insets, scale);
+    let border_box_insets = border_width.insets_up(Insets::ZERO);
+    let border_box_insets = padding.insets_up(border_box_insets);
     state.border_box_insets = border_box_insets;
 
     // Compute the content-box size
-    let content_box_size = border_width.size_down(border_box_size, scale);
-    let content_box_size = padding.size_down(content_box_size, scale);
+    let content_box_size = border_width.size_down(border_box_size);
+    let content_box_size = padding.size_down(content_box_size);
 
     let mut ctx = LayoutCtx {
         global_state,
@@ -497,18 +428,18 @@ pub(crate) fn run_layout_on(
     let shadow = props.get::<BoxShadow>(&mut state.property_cache);
     if shadow.is_visible() {
         let shadow_insets = shadow.get_insets();
-        state.paint_insets = Insets {
-            x0: state.paint_insets.x0.max(shadow_insets.x0),
-            y0: state.paint_insets.y0.max(shadow_insets.y0),
-            x1: state.paint_insets.x1.max(shadow_insets.x1),
-            y1: state.paint_insets.y1.max(shadow_insets.y1),
+        state.paint_box_insets = Insets {
+            x0: state.paint_box_insets.x0.max(shadow_insets.x0),
+            y0: state.paint_box_insets.y0.max(shadow_insets.y0),
+            x1: state.paint_box_insets.x1.max(shadow_insets.x1),
+            y1: state.paint_box_insets.y1.max(shadow_insets.y1),
         };
     }
 
     if trace {
         trace!(
             "Computed layout: border-box={}, first_baseline={}, last_baseline={} insets={:?}",
-            border_box_size, state.first_baseline, state.last_baseline, state.paint_insets,
+            border_box_size, state.first_baseline, state.last_baseline, state.paint_box_insets,
         );
     }
 
@@ -576,20 +507,13 @@ fn clear_layout_flags(node: ArenaMut<'_, WidgetArenaNode>) {
 }
 
 // --- MARK: PLACE WIDGET
-/// Places the child at `origin` in its parent's border-box coordinate space.
+/// Places the child at `origin` in its parent's layout border-box coordinate space.
 pub(crate) fn place_widget(child_state: &mut WidgetState, origin: Point) {
-    let end_point = origin + child_state.layout_border_box_size.to_vec2();
-    // TODO - Account for display scale in pixel snapping
-    // See https://github.com/linebender/xilem/issues/1264
-    let origin = origin.round();
-    let end_point = end_point.round();
-
     // TODO - We may want to invalidate in other cases as well
-    if origin != child_state.origin {
+    if origin != child_state.layout_origin {
         child_state.transform_changed = true;
     }
-    child_state.origin = origin;
-    child_state.end_point = end_point;
+    child_state.layout_origin = origin;
 
     child_state.is_expecting_place_child_call = false;
 }
@@ -632,10 +556,8 @@ pub(crate) fn run_layout_pass(root: &mut RenderRoot) {
     place_widget(&mut root_node.item.state, Point::ORIGIN);
 
     if let WindowSizePolicy::Content = root.global_state.size_policy {
-        // We use the aligned border-box size, which means that transforms won't affect window size.
-        let size = root_node.item.state.border_box_size();
-        // TODO: Remove HACK: Until scale factor rework happens, we still need to scale here.
-        //       https://github.com/linebender/xilem/issues/1264
+        // We use the layout border-box size, which means that transforms won't affect window size.
+        let size = root_node.item.state.layout_border_box_size;
         let new_size =
             LogicalSize::new(size.width, size.height).to_physical(root.global_state.scale_factor);
         if root.global_state.size != new_size {
diff --git a/masonry_core/src/passes/paint.rs b/masonry_core/src/passes/paint.rs
index a61f8837f..dc21dbc5f 100644
--- a/masonry_core/src/passes/paint.rs
+++ b/masonry_core/src/passes/paint.rs
@@ -161,9 +161,9 @@ fn paint_widget(
         PaintLayerMode::IsolatedScene | PaintLayerMode::External => id,
     };
 
-    let border_box_to_layer_transform = *window_to_layer_transform * state.window_transform;
-    let content_box_to_layer_transform =
-        border_box_to_layer_transform.pre_translate(state.border_box_translation());
+    let layout_border_box_to_layer_transform = *window_to_layer_transform * state.window_transform;
+    let visual_content_box_to_layer_transform = layout_border_box_to_layer_transform
+        .pre_translate(state.visual_translation() + state.border_box_translation());
     let has_clip = state.clip_path.is_some();
     let paint_as_external = paint_layer_mode == PaintLayerMode::External;
 
@@ -177,12 +177,12 @@ fn paint_widget(
 
         layer_collector
             .scene_mut()
-            .append_transformed(pre_scene, content_box_to_layer_transform);
+            .append_transformed(pre_scene, visual_content_box_to_layer_transform);
 
         if let Some(clip) = state.clip_path {
-            // The clip path is stored in border-box space, so need to use that transform.
+            // The clip path is stored in layout border-box space, so need to use that transform.
             layer_collector.scene_mut().push_clip(Clip::Fill {
-                transform: border_box_to_layer_transform,
+                transform: layout_border_box_to_layer_transform,
                 shape: Geometry::Rect(clip),
                 fill_rule: Fill::NonZero,
             });
@@ -190,7 +190,7 @@ fn paint_widget(
 
         layer_collector
             .scene_mut()
-            .append_transformed(scene, content_box_to_layer_transform);
+            .append_transformed(scene, visual_content_box_to_layer_transform);
     }
 
     let parent_state = &mut *state;
@@ -224,11 +224,14 @@ fn paint_widget(
 
             // Draw the widget's explicit baselines
             let mut draw_baseline = |baseline| {
-                let line = Line::new((0., baseline), (state.end_point.x, baseline));
+                let line = Line::new(
+                    (state.visual_border_box.x0, baseline),
+                    (state.visual_border_box.x1, baseline),
+                );
                 let baseline_style = Stroke::new(1.0).with_dashes(0., [4.0, 4.0]);
                 painter
                     .stroke(line, &baseline_style, color)
-                    .transform(border_box_to_layer_transform)
+                    .transform(layout_border_box_to_layer_transform)
                     .draw();
             };
             if !state.first_baseline.is_nan() {
@@ -252,20 +255,20 @@ fn paint_widget(
 
         layer_collector
             .scene_mut()
-            .append_transformed(post_scene, content_box_to_layer_transform);
+            .append_transformed(post_scene, visual_content_box_to_layer_transform);
 
         if global_state.inspector_state.hovered_widget == Some(id) {
             const HOVER_FILL_COLOR: Color = Color::from_rgba8(60, 60, 250, 100);
-            let rect = state.border_box_size().to_rect();
+            let rect = state.visual_border_box;
             Painter::new(layer_collector.scene_mut())
                 .fill(rect, HOVER_FILL_COLOR)
-                .transform(border_box_to_layer_transform)
+                .transform(layout_border_box_to_layer_transform)
                 .draw();
         }
     }
 
     if paint_as_external {
-        layer_collector.push_external_layer(id, state.border_box_size().to_rect());
+        layer_collector.push_external_layer(id, state.visual_border_box);
     }
 
     if matches!(
diff --git a/masonry_core/src/passes/update.rs b/masonry_core/src/passes/update.rs
index bd5be0e2b..d5cc52b25 100644
--- a/masonry_core/src/passes/update.rs
+++ b/masonry_core/src/passes/update.rs
@@ -794,13 +794,15 @@ pub(crate) fn run_update_scroll_pass(root: &mut RenderRoot) {
 
     let scroll_request_targets = std::mem::take(&mut root.global_state.scroll_request_targets);
     for (target, rect) in scroll_request_targets {
-        // We start with target_rect being in the target's border-box coordinate space.
+        // We start with target_rect being in the target's layout border-box coordinate space.
         let mut target_rect = rect;
 
         // We run the update pass on the target itself and then its ancestors.
         run_targeted_update_pass(root, Some(target), |widget, ctx, props| {
-            // Convert the target_rect from border-box space to content-box space.
-            let local_rect = target_rect - ctx.widget_state.border_box_translation();
+            // Convert the target_rect from layout border-box space to visual content-box space.
+            let local_rect = target_rect
+                - ctx.widget_state.visual_translation()
+                - ctx.widget_state.border_box_translation();
 
             let event = Update::RequestPanToChild(local_rect);
             widget.update(ctx, props, &event);
@@ -811,9 +813,10 @@ pub(crate) fn run_update_scroll_pass(root: &mut RenderRoot) {
             // at all and only support a single scrolling parent.
 
             // Before continuing to the parent, we need to convert the target_rect from this
-            // widget's border-box coordinate space to the parent's border-box coordinate space.
+            // widget's layout border-box coordinate space to the parent's layout border-box
+            // coordinate space.
             let state = &ctx.widget_state;
-            target_rect = target_rect + state.origin.to_vec2();
+            target_rect = target_rect + state.layout_origin.to_vec2();
         });
     }
 }
diff --git a/masonry_core/src/properties/border_width.rs b/masonry_core/src/properties/border_width.rs
index 1891bc39a..787cd0d94 100644
--- a/masonry_core/src/properties/border_width.rs
+++ b/masonry_core/src/properties/border_width.rs
@@ -9,11 +9,11 @@ use crate::properties::CornerRadius;
 // Every widget has a border width.
 impl<W: Widget> UsesProperty<BorderWidth> for W {}
 
-/// The width of a widget's border, in logical pixels.
+/// The width of a widget's border.
 #[expect(missing_docs, reason = "field names are self-descriptive")]
 #[derive(Default, Clone, Copy, Debug, PartialEq)]
 pub struct BorderWidth {
-    pub width: f64,
+    pub width: Length,
 }
 
 // TODO - To match CSS, we should use a non-zero default width
@@ -21,14 +21,16 @@ pub struct BorderWidth {
 
 impl Property for BorderWidth {
     fn static_default() -> &'static Self {
-        static DEFAULT: BorderWidth = BorderWidth { width: 0. };
+        static DEFAULT: BorderWidth = BorderWidth {
+            width: Length::ZERO,
+        };
         &DEFAULT
     }
 }
 
 impl BorderWidth {
     /// Creates new `BorderWidth` with given value.
-    pub const fn all(width: f64) -> Self {
+    pub const fn all(width: Length) -> Self {
         Self { width }
     }
 
@@ -37,82 +39,84 @@ impl BorderWidth {
     /// For [`Axis::Horizontal`] it will return the sum of the left and right border width.
     /// For [`Axis::Vertical`] it will return the sum of the top and bottom border height.
     pub fn length(&self, _axis: Axis) -> Length {
-        Length::px(self.width * 2.)
+        self.width.saturating_add(self.width)
     }
 
     /// Expands the `size` by the border width.
     ///
-    /// The returned [`Size`] will be non-negative and in device pixels.
+    /// The returned [`Size`] will be non-negative and in logical pixels.
     ///
-    /// The provided `size` must be in device pixels.
+    /// The provided `size` must be in logical pixels.
     ///
     /// Helper function to be called in [`Widget::layout`].
-    pub fn size_up(&self, size: Size, scale: f64) -> Size {
-        let width = size.width + Length::px(self.width).dp(scale) * 2.;
-        let height = size.height + Length::px(self.width).dp(scale) * 2.;
+    pub fn size_up(&self, size: Size) -> Size {
+        let border_width = self.width.get();
+        let width = size.width + border_width * 2.;
+        let height = size.height + border_width * 2.;
         Size::new(width, height)
     }
 
     /// Shrinks the `size` by the border width.
     ///
-    /// The returned [`Size`] will be non-negative and in device pixels.
+    /// The returned [`Size`] will be non-negative and in logical pixels.
     ///
-    /// The provided `size` must be in device pixels.
+    /// The provided `size` must be in logical pixels.
     ///
     /// Helper function to be called in [`Widget::layout`].
-    pub fn size_down(&self, size: Size, scale: f64) -> Size {
-        let width = (size.width - Length::px(self.width).dp(scale) * 2.).max(0.);
-        let height = (size.height - Length::px(self.width).dp(scale) * 2.).max(0.);
+    pub fn size_down(&self, size: Size) -> Size {
+        let border_width = self.width.get();
+        let width = (size.width - border_width * 2.).max(0.);
+        let height = (size.height - border_width * 2.).max(0.);
         Size::new(width, height)
     }
 
     /// Returns the [`Insets`] for deriving an area with this border.
     ///
-    /// The returned [`Insets`] will be in device pixels.
+    /// The returned [`Insets`] will be in logical pixels.
     ///
-    /// The provided `insets` must be in device pixels.
-    pub fn insets_up(&self, insets: Insets, scale: f64) -> Insets {
-        let width = Length::px(self.width).dp(scale);
+    /// The provided `insets` must be in logical pixels.
+    pub fn insets_up(&self, insets: Insets) -> Insets {
+        let border_width = self.width.get();
         Insets {
-            x0: insets.x0 + width,
-            y0: insets.y0 + width,
-            x1: insets.x1 + width,
-            y1: insets.y1 + width,
+            x0: insets.x0 + border_width,
+            y0: insets.y0 + border_width,
+            x1: insets.x1 + border_width,
+            y1: insets.y1 + border_width,
         }
     }
 
     /// Raises the `baseline` by the border width.
     ///
-    /// The returned baseline will be in device pixels.
+    /// The returned baseline will be in logical pixels.
     ///
-    /// The provided `baseline` must be in device pixels.
+    /// The provided `baseline` must be in logical pixels.
     ///
     /// Helper function to be called in [`Widget::layout`].
-    pub fn baseline_up(&self, baseline: f64, scale: f64) -> f64 {
-        baseline + Length::px(self.width).dp(scale)
+    pub fn baseline_up(&self, baseline: f64) -> f64 {
+        baseline + self.width.get()
     }
 
     /// Lowers the `baseline` by the border width.
     ///
-    /// The returned baseline will be in device pixels.
+    /// The returned baseline will be in logical pixels.
     ///
-    /// The provided `baseline` must be in device pixels.
+    /// The provided `baseline` must be in logical pixels.
     ///
     /// Helper function to be called in [`Widget::layout`].
-    pub fn baseline_down(&self, baseline: f64, scale: f64) -> f64 {
-        baseline - Length::px(self.width).dp(scale)
+    pub fn baseline_down(&self, baseline: f64) -> f64 {
+        baseline - self.width.get()
     }
 
     /// Lowers the position by the border width.
     ///
-    /// The returned [`Point`] will be in device pixels.
+    /// The returned [`Point`] will be in logical pixels.
     ///
-    /// The provided `origin` must be in device pixels.
+    /// The provided `origin` must be in logical pixels.
     ///
     /// Helper function to be called in [`Widget::layout`].
-    pub fn origin_down(&self, origin: Point, scale: f64) -> Point {
-        let width = Length::px(self.width).dp(scale);
-        origin + Vec2::new(width, width)
+    pub fn origin_down(&self, origin: Point) -> Point {
+        let border_width = self.width.get();
+        origin + Vec2::new(border_width, border_width)
     }
 
     /// Creates a rounded rectangle that is inset by the border width.
@@ -121,9 +125,10 @@ impl BorderWidth {
     ///
     /// Helper function to be called in [`Widget::paint`].
     pub fn bg_rect(&self, border_box: Rect, border_radius: &CornerRadius) -> RoundedRect {
+        let border_width = self.width.get();
         border_box
-            .inset(-self.width)
-            .to_rounded_rect((border_radius.radius - self.width).max(0.))
+            .inset(-border_width)
+            .to_rounded_rect(border_radius.radius.saturating_sub(self.width).get())
     }
 
     /// Creates a rounded rectangle that is inset by half the border width.
@@ -132,8 +137,9 @@ impl BorderWidth {
     ///
     /// Helper function to be called in [`Widget::paint`].
     pub fn border_rect(&self, border_box: Rect, border_radius: &CornerRadius) -> RoundedRect {
+        let border_width = self.width.get();
         border_box
-            .inset(-self.width / 2.0)
-            .to_rounded_rect(border_radius.radius)
+            .inset(-border_width / 2.0)
+            .to_rounded_rect(border_radius.radius.get())
     }
 }
diff --git a/masonry_core/src/properties/box_shadow.rs b/masonry_core/src/properties/box_shadow.rs
index 9b4d647e2..148d9bfa9 100644
--- a/masonry_core/src/properties/box_shadow.rs
+++ b/masonry_core/src/properties/box_shadow.rs
@@ -4,6 +4,7 @@
 use crate::core::{Property, UsesProperty, Widget};
 use crate::imaging::{BlurredRoundedRect, Composite, Painter};
 use crate::kurbo::{Affine, BezPath, Insets, Point, RoundedRect, Shape as _};
+use crate::layout::Length;
 use crate::peniko::color::{AlphaColor, Srgb};
 
 // TODO - This is a first implementation of box shadows. A full version would need
@@ -30,9 +31,8 @@ pub struct BoxShadow {
 
     /// The distance between the shadow's "inner edge" and the closest fully-transparent point.
     ///
-    /// A value of zero means the shadow's edge will be shard.
-    /// Negative values will be treated as zero.
-    pub blur_radius: f64,
+    /// A value of zero means the shadow's edge will be sharp.
+    pub blur_radius: Length,
 }
 
 impl Property for BoxShadow {
@@ -40,7 +40,7 @@ impl Property for BoxShadow {
         static DEFAULT: BoxShadow = BoxShadow {
             color: AlphaColor::TRANSPARENT,
             offset: Point::ZERO,
-            blur_radius: 0.,
+            blur_radius: Length::ZERO,
         };
         &DEFAULT
     }
@@ -58,12 +58,12 @@ impl BoxShadow {
         Self {
             color,
             offset: offset.into(),
-            blur_radius: 0.,
+            blur_radius: Length::ZERO,
         }
     }
 
     /// Builder method to change the shadow's blur radius.
-    pub const fn blur(self, blur_radius: f64) -> Self {
+    pub const fn blur(self, blur_radius: Length) -> Self {
         Self {
             blur_radius,
             ..self
@@ -85,7 +85,7 @@ impl BoxShadow {
         }
 
         let transform = transform.pre_translate(self.offset.to_vec2());
-        let blur_radius = self.blur_radius.max(0.);
+        let blur_radius = self.blur_radius.get();
 
         let radius = (rect.radii().bottom_left
             + rect.radii().bottom_right
@@ -120,7 +120,7 @@ impl BoxShadow {
     ///
     /// The returned [`Insets`] are guaranteed to be non-negative.
     pub fn get_insets(&self) -> Insets {
-        let blur_radius = self.blur_radius.max(0.);
+        let blur_radius = self.blur_radius.get();
         Insets {
             x0: (blur_radius - self.offset.x).max(0.),
             y0: (blur_radius - self.offset.y).max(0.),
diff --git a/masonry_core/src/properties/corner_radius.rs b/masonry_core/src/properties/corner_radius.rs
index c53f27ee9..219a7c3d4 100644
--- a/masonry_core/src/properties/corner_radius.rs
+++ b/masonry_core/src/properties/corner_radius.rs
@@ -2,27 +2,30 @@
 // SPDX-License-Identifier: Apache-2.0
 
 use crate::core::{Property, UsesProperty, Widget};
+use crate::layout::Length;
 
 // Every widget has a corner radius.
 impl<W: Widget> UsesProperty<CornerRadius> for W {}
 
-/// The radius of a widget's box corners, in logical pixels.
+/// The radius of a widget's box corners.
 #[expect(missing_docs, reason = "field names are self-descriptive")]
 #[derive(Default, Clone, Copy, Debug, PartialEq)]
 pub struct CornerRadius {
-    pub radius: f64,
+    pub radius: Length,
 }
 
 impl Property for CornerRadius {
     fn static_default() -> &'static Self {
-        static DEFAULT: CornerRadius = CornerRadius { radius: 0. };
+        static DEFAULT: CornerRadius = CornerRadius {
+            radius: Length::ZERO,
+        };
         &DEFAULT
     }
 }
 
 impl CornerRadius {
     /// Creates new `CornerRadius` with given value.
-    pub const fn all(radius: f64) -> Self {
+    pub const fn all(radius: Length) -> Self {
         Self { radius }
     }
 }
diff --git a/masonry_core/src/properties/padding.rs b/masonry_core/src/properties/padding.rs
index bbe5ea9bf..bd0562379 100644
--- a/masonry_core/src/properties/padding.rs
+++ b/masonry_core/src/properties/padding.rs
@@ -11,14 +11,14 @@ impl<W: Widget> UsesProperty<Padding> for W {}
 /// The width of padding between a widget's border and its contents.
 #[derive(Default, Clone, Copy, Debug, PartialEq)]
 pub struct Padding {
-    /// The amount of padding in logical pixels for the left edge.
-    pub left: f64,
-    /// The amount of padding in logical pixels for the right edge.
-    pub right: f64,
-    /// The amount of padding in logical pixels for the top edge.
-    pub top: f64,
-    /// The amount of padding in logical pixels for the bottom edge.
-    pub bottom: f64,
+    /// The amount of padding for the left edge.
+    pub left: Length,
+    /// The amount of padding for the right edge.
+    pub right: Length,
+    /// The amount of padding for the top edge.
+    pub top: Length,
+    /// The amount of padding for the bottom edge.
+    pub bottom: Length,
 }
 
 impl Property for Padding {
@@ -28,19 +28,19 @@ impl Property for Padding {
     }
 }
 
-impl From<f64> for Padding {
+impl From<Length> for Padding {
     /// Converts the value to a `Padding` object with that amount of padding on all edges.
-    fn from(value: f64) -> Self {
+    fn from(value: Length) -> Self {
         Self::all(value)
     }
 }
 
 impl Padding {
     /// A padding of zero for all edges.
-    pub const ZERO: Self = Self::all(0.);
+    pub const ZERO: Self = Self::all(Length::ZERO);
 
     /// Creates a new `Padding` with equal amount of padding for all edges.
-    pub const fn all(padding: f64) -> Self {
+    pub const fn all(padding: Length) -> Self {
         Self {
             top: padding,
             bottom: padding,
@@ -51,10 +51,10 @@ impl Padding {
 
     /// Creates a new `Padding` with the same amount of padding for the horizontal edges,
     /// and zero padding for the vertical edges.
-    pub const fn horizontal(padding: f64) -> Self {
+    pub const fn horizontal(padding: Length) -> Self {
         Self {
-            top: 0.,
-            bottom: 0.,
+            top: Length::ZERO,
+            bottom: Length::ZERO,
             left: padding,
             right: padding,
         }
@@ -62,17 +62,17 @@ impl Padding {
 
     /// Creates a new `Padding` with the same amount of padding for the vertical edges,
     /// and zero padding for the horizontal edges.
-    pub const fn vertical(padding: f64) -> Self {
+    pub const fn vertical(padding: Length) -> Self {
         Self {
             top: padding,
             bottom: padding,
-            left: 0.,
-            right: 0.,
+            left: Length::ZERO,
+            right: Length::ZERO,
         }
     }
 
     /// Creates a new `Padding` with the same padding from both vertical edges, then both horizontal edges.
-    pub const fn from_vh(vertical: f64, horizontal: f64) -> Self {
+    pub const fn from_vh(vertical: Length, horizontal: Length) -> Self {
         Self {
             top: vertical,
             bottom: vertical,
@@ -82,41 +82,41 @@ impl Padding {
     }
 
     /// Creates a new `Padding` with padding only at the top edge and zero padding for all other edges.
-    pub const fn top(padding: f64) -> Self {
+    pub const fn top(padding: Length) -> Self {
         Self {
             top: padding,
-            bottom: 0.,
-            left: 0.,
-            right: 0.,
+            bottom: Length::ZERO,
+            left: Length::ZERO,
+            right: Length::ZERO,
         }
     }
 
     /// Creates a new `Padding` with padding only at the bottom edge and zero padding for all other edges.
-    pub const fn bottom(padding: f64) -> Self {
+    pub const fn bottom(padding: Length) -> Self {
         Self {
-            top: 0.,
+            top: Length::ZERO,
             bottom: padding,
-            left: 0.,
-            right: 0.,
+            left: Length::ZERO,
+            right: Length::ZERO,
         }
     }
 
-    /// Creates a new `Padding` with padding only at the leleftading edge and zero padding for all other edges.
-    pub const fn left(padding: f64) -> Self {
+    /// Creates a new `Padding` with padding only at the left edge and zero padding for all other edges.
+    pub const fn left(padding: Length) -> Self {
         Self {
-            top: 0.,
-            bottom: 0.,
+            top: Length::ZERO,
+            bottom: Length::ZERO,
             left: padding,
-            right: 0.,
+            right: Length::ZERO,
         }
     }
 
     /// Creates a new `Padding` with padding only at the right edge and zero padding for all other edges.
-    pub const fn right(padding: f64) -> Self {
+    pub const fn right(padding: Length) -> Self {
         Self {
-            top: 0.,
-            bottom: 0.,
-            left: 0.,
+            top: Length::ZERO,
+            bottom: Length::ZERO,
+            left: Length::ZERO,
             right: padding,
         }
     }
@@ -129,83 +129,81 @@ impl Padding {
     /// For [`Axis::Vertical`] it will return the sum of the top and bottom padding height.
     pub fn length(&self, axis: Axis) -> Length {
         match axis {
-            Axis::Horizontal => Length::px(self.left + self.right),
-            Axis::Vertical => Length::px(self.top + self.bottom),
+            Axis::Horizontal => self.left.saturating_add(self.right),
+            Axis::Vertical => self.top.saturating_add(self.bottom),
         }
     }
 
     /// Expands the `size` by the padding amount.
     ///
-    /// The returned [`Size`] will be non-negative and in device pixels.
+    /// The returned [`Size`] will be non-negative and in logical pixels.
     ///
-    /// The provided `size` must be in device pixels.
+    /// The provided `size` must be in logical pixels.
     ///
     /// Helper function to be called in [`Widget::layout`].
-    pub fn size_up(&self, size: Size, scale: f64) -> Size {
-        let width = size.width + Length::px(self.left + self.right).dp(scale);
-        let height = size.height + Length::px(self.top + self.bottom).dp(scale);
+    pub fn size_up(&self, size: Size) -> Size {
+        let width = size.width + self.left.get() + self.right.get();
+        let height = size.height + self.top.get() + self.bottom.get();
         Size::new(width, height)
     }
 
     /// Shrinks the `size` by the padding amount.
     ///
-    /// The returned [`Size`] will be non-negative and in device pixels.
+    /// The returned [`Size`] will be non-negative and in logical pixels.
     ///
-    /// The provided `size` must be in device pixels.
+    /// The provided `size` must be in logical pixels.
     ///
     /// Helper function to be called in [`Widget::layout`].
-    pub fn size_down(&self, size: Size, scale: f64) -> Size {
-        let width = (size.width - Length::px(self.left + self.right).dp(scale)).max(0.);
-        let height = (size.height - Length::px(self.top + self.bottom).dp(scale)).max(0.);
+    pub fn size_down(&self, size: Size) -> Size {
+        let width = (size.width - self.left.get() - self.right.get()).max(0.);
+        let height = (size.height - self.top.get() - self.bottom.get()).max(0.);
         Size::new(width, height)
     }
 
     /// Returns the [`Insets`] for deriving an area with this padding.
     ///
-    /// The returned [`Insets`] will be in device pixels.
+    /// The returned [`Insets`] will be in logical pixels.
     ///
-    /// The provided `insets` must be in device pixels.
-    pub fn insets_up(&self, insets: Insets, scale: f64) -> Insets {
+    /// The provided `insets` must be in logical pixels.
+    pub fn insets_up(&self, insets: Insets) -> Insets {
         Insets {
-            x0: insets.x0 + Length::px(self.left).dp(scale),
-            y0: insets.y0 + Length::px(self.top).dp(scale),
-            x1: insets.x1 + Length::px(self.right).dp(scale),
-            y1: insets.y1 + Length::px(self.bottom).dp(scale),
+            x0: insets.x0 + self.left.get(),
+            y0: insets.y0 + self.top.get(),
+            x1: insets.x1 + self.right.get(),
+            y1: insets.y1 + self.bottom.get(),
         }
     }
 
     /// Raises the `baseline` by the padding amount.
     ///
-    /// The returned baseline will be in device pixels.
+    /// The returned baseline will be in logical pixels.
     ///
-    /// The provided `baseline` must be in device pixels.
+    /// The provided `baseline` must be in logical pixels.
     ///
     /// Helper function to be called in [`Widget::layout`].
-    pub fn baseline_up(&self, baseline: f64, scale: f64) -> f64 {
-        baseline + Length::px(self.bottom).dp(scale)
+    pub fn baseline_up(&self, baseline: f64) -> f64 {
+        baseline + self.bottom.get()
     }
 
     /// Lowers the `baseline` by the padding amount.
     ///
-    /// The returned baseline will be in device pixels.
+    /// The returned baseline will be in logical pixels.
     ///
-    /// The provided `baseline` must be in device pixels.
+    /// The provided `baseline` must be in logical pixels.
     ///
     /// Helper function to be called in [`Widget::layout`].
-    pub fn baseline_down(&self, baseline: f64, scale: f64) -> f64 {
-        baseline - Length::px(self.bottom).dp(scale)
+    pub fn baseline_down(&self, baseline: f64) -> f64 {
+        baseline - self.bottom.get()
     }
 
     /// Lowers the position by the padding amount.
     ///
-    /// The returned [`Point`] will be in device pixels.
+    /// The returned [`Point`] will be in logical pixels.
     ///
-    /// The provided `origin` must be in device pixels.
+    /// The provided `origin` must be in logical pixels.
     ///
     /// Helper function to be called in [`Widget::layout`].
-    pub fn origin_down(&self, origin: Point, scale: f64) -> Point {
-        let x = Length::px(self.left).dp(scale);
-        let y = Length::px(self.top).dp(scale);
-        origin + Vec2::new(x, y)
+    pub fn origin_down(&self, origin: Point) -> Point {
+        origin + Vec2::new(self.left.get(), self.top.get())
     }
 }
diff --git a/masonry_core/src/properties/types/gradient.rs b/masonry_core/src/properties/types/gradient.rs
index e5df729c9..26baea909 100644
--- a/masonry_core/src/properties/types/gradient.rs
+++ b/masonry_core/src/properties/types/gradient.rs
@@ -4,7 +4,7 @@
 use std::f64::consts::TAU;
 
 use crate::kurbo::{Point, Rect};
-use crate::layout::UnitPoint;
+use crate::layout::{Length, UnitPoint};
 use crate::peniko::color::{ColorSpaceTag, HueDirection};
 use crate::peniko::{ColorStops, ColorStopsSource, Extend};
 use crate::peniko::{
@@ -101,8 +101,8 @@ pub struct Gradient {
 pub enum RadialGradientShape {
     /// A circle defined based on the box size.
     CircleTo(RadialGradientExtent),
-    /// A circle with a fixed radius in logical pixels.
-    FixedCircle(f64),
+    /// A circle with a fixed radius.
+    FixedCircle(Length),
     // TODO - Add following and remove #[non_exhaustive]:
     // EllipseTo(RadialGradientExtent),
     // FixedEllipse(f64),
@@ -318,7 +318,7 @@ impl GradientShape {
             RadialGradientShape::CircleTo(RadialGradientExtent::FarthestCorner) => {
                 dist_to_corners.into_iter().reduce(f64::max).unwrap()
             }
-            RadialGradientShape::FixedCircle(radius) => radius,
+            RadialGradientShape::FixedCircle(radius) => radius.get(),
         }
     }
 
diff --git a/masonry_testing/src/harness.rs b/masonry_testing/src/harness.rs
index 27570714f..1f26c1fbc 100644
--- a/masonry_testing/src/harness.rs
+++ b/masonry_testing/src/harness.rs
@@ -694,7 +694,6 @@ impl<W: Widget> TestHarness<W> {
     pub fn mouse_move_to(&mut self, id: WidgetId) {
         let widget = self.get_widget_with_id(id);
         let local_widget_center = widget.ctx().border_box().center();
-
         let widget_center = widget.ctx().window_transform() * local_widget_center;
 
         // TODO - Add reachable_by_pointer() method.
@@ -1046,7 +1045,8 @@ impl<W: Widget> TestHarness<W> {
 
     /// Returns the rectangle of the IME session.
     ///
-    /// This is usually the effective border-box rectangle of the focused widget.
+    /// This is usually the visual border-box rectangle of the focused widget,
+    /// transformed into the window's coordinate space.
     pub fn ime_rect(&self) -> (LogicalPosition<f64>, LogicalSize<f64>) {
         self.ime_rect
     }
diff --git a/masonry_testing/src/modular_widget.rs b/masonry_testing/src/modular_widget.rs
index 5abb2a261..b4d969eb4 100644
--- a/masonry_testing/src/modular_widget.rs
+++ b/masonry_testing/src/modular_widget.rs
@@ -17,7 +17,7 @@ use masonry_core::core::{
 };
 use masonry_core::imaging::Painter;
 use masonry_core::kurbo::{Axis, Point, Size};
-use masonry_core::layout::{LayoutSize, LenReq, SizeDef};
+use masonry_core::layout::{LayoutSize, LenReq, Length, SizeDef};
 use tracing::trace_span;
 
 pub(crate) type PointerEventFn<S> =
@@ -33,8 +33,14 @@ pub(crate) type RegisterChildrenFn<S> = dyn FnMut(&mut S, &mut RegisterCtx<'_>);
 pub(crate) type UpdateFn<S> =
     dyn FnMut(&mut S, &mut UpdateCtx<'_>, &mut PropertiesMut<'_>, &Update);
 pub(crate) type PropertyChangeFn<S> = dyn FnMut(&mut S, &mut UpdateCtx<'_>, TypeId);
-pub(crate) type MeasureFn<S> =
-    dyn FnMut(&mut S, &mut MeasureCtx<'_>, &PropertiesRef<'_>, Axis, LenReq, Option<f64>) -> f64;
+pub(crate) type MeasureFn<S> = dyn FnMut(
+    &mut S,
+    &mut MeasureCtx<'_>,
+    &PropertiesRef<'_>,
+    Axis,
+    LenReq,
+    Option<Length>,
+) -> Length;
 pub(crate) type LayoutFn<S> = dyn FnMut(&mut S, &mut LayoutCtx<'_>, &PropertiesRef<'_>, Size);
 pub(crate) type ComposeFn<S> = dyn FnMut(&mut S, &mut ComposeCtx<'_>);
 pub(crate) type PaintFn<S> =
@@ -147,7 +153,7 @@ impl<W: Widget + ?Sized> ModularWidget<Vec<WidgetPod<W>>> {
                 let auto_length = len_req.into();
                 let context_size = LayoutSize::maybe(axis.cross(), cross_length);
 
-                let mut length: f64 = 0.;
+                let mut length = Length::ZERO;
                 for child in children {
                     if ctx.child_is_stashed(child) {
                         continue;
@@ -173,8 +179,8 @@ impl<W: Widget + ?Sized> ModularWidget<Vec<WidgetPod<W>>> {
                 }
 
                 if let Some(child) = children.first() {
-                    let (first_baseline, _) = ctx.child_aligned_baselines(child);
-                    let (_, last_baseline) = ctx.child_aligned_baselines(children.last().unwrap());
+                    let (first_baseline, _) = ctx.child_baselines(child);
+                    let (_, last_baseline) = ctx.child_baselines(children.last().unwrap());
                     ctx.set_baselines(first_baseline, last_baseline);
                 } else {
                     ctx.clear_baselines();
@@ -299,7 +305,14 @@ impl<S> ModularWidget<S> {
     /// See [`Widget::measure`]
     pub fn measure_fn(
         mut self,
-        f: impl FnMut(&mut S, &mut MeasureCtx<'_>, &PropertiesRef<'_>, Axis, LenReq, Option<f64>) -> f64
+        f: impl FnMut(
+            &mut S,
+            &mut MeasureCtx<'_>,
+            &PropertiesRef<'_>,
+            Axis,
+            LenReq,
+            Option<Length>,
+        ) -> Length
         + 'static,
     ) -> Self {
         self.measure = Some(Box::new(f));
@@ -454,8 +467,8 @@ impl<S: 'static> Widget for ModularWidget<S> {
         props: &PropertiesRef<'_>,
         axis: Axis,
         len_req: LenReq,
-        cross_length: Option<f64>,
-    ) -> f64 {
+        cross_length: Option<Length>,
+    ) -> Length {
         let Self { state, measure, .. } = self;
         measure
             .as_mut()
diff --git a/masonry_testing/src/recorder_widget.rs b/masonry_testing/src/recorder_widget.rs
index cf99b7f9a..02a9e7706 100644
--- a/masonry_testing/src/recorder_widget.rs
+++ b/masonry_testing/src/recorder_widget.rs
@@ -26,7 +26,7 @@ use masonry_core::core::{
 };
 use masonry_core::imaging::Painter;
 use masonry_core::kurbo::{Axis, Point, Size};
-use masonry_core::layout::LenReq;
+use masonry_core::layout::{LenReq, Length};
 
 // TODO - Re-enable doc test.
 // Doc test is currently disabled because it depends on a parent crate.
@@ -85,7 +85,7 @@ pub enum Record {
     /// Property change.
     PropertyChange(TypeId),
     /// Measure. Records the length returned by the measure method.
-    Measure(f64),
+    Measure(Length),
     /// Layout. Records the size given to the layout method.
     Layout(Size),
     /// Compose.
@@ -235,8 +235,8 @@ impl<W: Widget> Widget for Recorder<W> {
         props: &PropertiesRef<'_>,
         axis: Axis,
         len_req: LenReq,
-        cross_length: Option<f64>,
-    ) -> f64 {
+        cross_length: Option<Length>,
+    ) -> Length {
         let length = self.child.measure(ctx, props, axis, len_req, cross_length);
         self.recording.push(Record::Measure(length));
         length
diff --git a/masonry_testing/src/wrapper_widget.rs b/masonry_testing/src/wrapper_widget.rs
index 84dba8edc..08913d8f9 100644
--- a/masonry_testing/src/wrapper_widget.rs
+++ b/masonry_testing/src/wrapper_widget.rs
@@ -16,7 +16,7 @@ use masonry_core::core::{
 };
 use masonry_core::imaging::Painter;
 use masonry_core::kurbo::{Axis, Point, Size};
-use masonry_core::layout::{LayoutSize, LenReq, SizeDef};
+use masonry_core::layout::{LayoutSize, LenReq, Length, SizeDef};
 
 /// A basic wrapper widget that can replace its child.
 pub struct WrapperWidget {
@@ -100,8 +100,8 @@ impl Widget for WrapperWidget {
         _props: &PropertiesRef<'_>,
         axis: Axis,
         len_req: LenReq,
-        cross_length: Option<f64>,
-    ) -> f64 {
+        cross_length: Option<Length>,
+    ) -> Length {
         let auto_length = len_req.into();
         let context_size = LayoutSize::maybe(axis.cross(), cross_length);
 
diff --git a/placehero/src/avatars.rs b/placehero/src/avatars.rs
index 855eeefae..a7db0120c 100644
--- a/placehero/src/avatars.rs
+++ b/placehero/src/avatars.rs
@@ -73,7 +73,7 @@ impl Avatars {
                         )
                         .with_stops([css::YELLOW, css::LIME]),
                     )
-                    .padding(4.0),
+                    .padding(4.px()),
             )
         })
     }
diff --git a/placehero/src/components/thread.rs b/placehero/src/components/thread.rs
index 3e2b02469..5c60dbeef 100644
--- a/placehero/src/components/thread.rs
+++ b/placehero/src/components/thread.rs
@@ -61,8 +61,8 @@ pub(crate) fn thread(
         ))
         .padding(Padding {
             // Leave room for scrollbar
-            right: 20.,
-            ..Padding::all(5.0)
+            right: 20.px(),
+            ..Padding::all(5.px())
         }),
     )
 }
diff --git a/placehero/src/components/timeline.rs b/placehero/src/components/timeline.rs
index 91c3e9b07..f0288fc5c 100644
--- a/placehero/src/components/timeline.rs
+++ b/placehero/src/components/timeline.rs
@@ -192,9 +192,9 @@ pub(crate) fn timeline_status(status: &Status) -> impl WidgetView<Timeline, Navi
     // Use a wrapping sized box for margin
     sized_box(
         sized_box(flex_col((info_line, base_status(primary_status))))
-            .border(css::WHITE, 2.0)
-            .padding(10.0)
-            .corner_radius(5.),
+            .border(css::WHITE, 2.px())
+            .padding(10.px())
+            .corner_radius(5.px()),
     )
-    .padding(Padding::from_vh(5., 4.))
+    .padding(Padding::from_vh(5.px(), 4.px()))
 }
diff --git a/xilem/examples/calc.rs b/xilem/examples/calc.rs
index 166cc6c8d..7081d1337 100644
--- a/xilem/examples/calc.rs
+++ b/xilem/examples/calc.rs
@@ -277,7 +277,7 @@ fn one_button(
     const BLUE: Color = Color::from_rgb8(0x00, 0x8d, 0xdd);
     button(content, callback)
         .background_color(BLUE)
-        .corner_radius(10.)
+        .corner_radius(10.px())
 }
 
 /// Returns a button that triggers the calculator's operator handler,
@@ -299,7 +299,7 @@ fn digit_button(digit: &'static str) -> impl WidgetView<Calculator> {
         data.on_entered_digit(digit);
     })
     .background_color(GRAY)
-    .corner_radius(10.)
+    .corner_radius(10.px())
 }
 
 pub(crate) fn run(event_loop: EventLoopBuilder) -> Result<(), EventLoopError> {
diff --git a/xilem/examples/emoji_picker.rs b/xilem/examples/emoji_picker.rs
index 4390f9d3a..42e354d00 100644
--- a/xilem/examples/emoji_picker.rs
+++ b/xilem/examples/emoji_picker.rs
@@ -87,7 +87,7 @@ fn picker(data: &mut EmojiPagination) -> impl WidgetView<EmojiPagination> + use<
         data.size.try_into().unwrap(),
     )
     .gap(10.px())
-    .padding(20.0)
+    .padding(20.px())
 }
 
 fn paginate(
diff --git a/xilem/examples/http_cats.rs b/xilem/examples/http_cats.rs
index 586388b0b..79574468b 100644
--- a/xilem/examples/http_cats.rs
+++ b/xilem/examples/http_cats.rs
@@ -57,7 +57,7 @@ impl HttpCats {
                 .map(Status::list_view)
                 .collect::<Vec<_>>(),
         ))
-        .padding(Padding::left(5.));
+        .padding(Padding::left(5.px()));
 
         let info_area = if let Some(selected_code) = self.selected_code {
             if let Some(selected_status) =
@@ -187,15 +187,15 @@ impl Status {
                             .line_break_mode(LineBreaking::Clip)
                             .text_alignment(TextAlign::End),
                     )
-                    .padding(4.)
-                    .corner_radius(4.)
+                    .padding(4.px())
+                    .corner_radius(4.px())
                     .background_color(palette::css::BLACK.multiply_alpha(0.5)),
                 )
                 .padding(Padding {
-                    left: 0.,
-                    right: 42.,
-                    top: 30.,
-                    bottom: 0.,
+                    left: 0.px(),
+                    right: 42.px(),
+                    top: 30.px(),
+                    bottom: 0.px(),
                 });
                 OneOf3::C(zstack((
                     image(image_data.clone()),
diff --git a/xilem/examples/mason.rs b/xilem/examples/mason.rs
index c5ee9c2b4..3a3a30c29 100644
--- a/xilem/examples/mason.rs
+++ b/xilem/examples/mason.rs
@@ -5,7 +5,7 @@
 
 use std::time::Duration;
 
-use masonry::layout::{Dim, Length};
+use masonry::layout::{AsUnit, Dim, Length};
 use winit::error::EventLoopError;
 use xilem::core::{Resource, fork, provides, run_once, with_context, without_elements};
 use xilem::kurbo::{Axis, Size};
@@ -144,7 +144,7 @@ fn app_logic(data: &mut AppData) -> impl WidgetView<AppData> + use<> {
                 text_button("Reset", |data: &mut AppData| data.count = 0),
                 flex(axis, (fizz_buzz_flex_sequence, flex_sequence)),
             ))
-            .padding(8.0),
+            .padding(8.px()),
             // The following `task` view only exists whilst the example is in the "active" state, so
             // the updates it performs will only be running whilst we are in that state.
             data.active.then(|| {
diff --git a/xilem/examples/slider_demo.rs b/xilem/examples/slider_demo.rs
index 9f8c477f8..e7b0361d5 100644
--- a/xilem/examples/slider_demo.rs
+++ b/xilem/examples/slider_demo.rs
@@ -74,7 +74,7 @@ where
         label(format!("{:.0}% [{}]", value, u_value)).width(60.px()),
     ))
     .cross_axis_alignment(CrossAxisAlignment::Center)
-    .gap(10.0.px())
+    .gap(10.px())
 }
 
 /// Convert 0-100 to 0-255 u8 value.
@@ -118,11 +118,11 @@ fn app_logic(state: &mut AppState) -> impl WidgetView<AppState> + use<> {
                 .width(200.px())
                 .prop(BarColor(Color::from_rgb8(0x78, 0x71, 0x6c)))
                 .prop(ThumbColor(Color::WHITE))
-                .prop(ThumbRadius(10.0)),
+                .prop(ThumbRadius(10.px())),
                 label(format!("{:.0}% [{}]", state.alpha, color_alpha)).width(60.px()),
             ))
             .cross_axis_alignment(CrossAxisAlignment::Center)
-            .gap(10.0.px()),
+            .gap(10.px()),
             flex(
                 Axis::Horizontal,
                 (
@@ -143,10 +143,10 @@ fn app_logic(state: &mut AppState) -> impl WidgetView<AppState> + use<> {
                 ),
             )
             .main_axis_alignment(MainAxisAlignment::Center)
-            .gap(20.0.px()),
+            .gap(20.px()),
             FlexSpacer::Flex(1.0),
         ))
-        .gap(15.0.px()),
+        .gap(15.px()),
         FlexSpacer::Fixed(10.px()),
         // Color preview box
         sized_box(
@@ -155,11 +155,11 @@ fn app_logic(state: &mut AppState) -> impl WidgetView<AppState> + use<> {
         )
         .dims(Dim::Stretch)
         .background(final_color)
-        .corner_radius(8.0)
+        .corner_radius(8.px())
         .flex(1.0),
     ))
-    .gap(20.0.px())
-    .padding(20.0)
+    .gap(20.px())
+    .padding(20.px())
 }
 
 // --- Application Entry Point ---
diff --git a/xilem/examples/state_machine.rs b/xilem/examples/state_machine.rs
index 397ef60e9..3202492b5 100644
--- a/xilem/examples/state_machine.rs
+++ b/xilem/examples/state_machine.rs
@@ -71,7 +71,7 @@ fn app_logic(app_data: &mut StateMachine) -> impl WidgetView<StateMachine> + use
         state_machine(app_data),
         // TODO: When we have a canvas widget, visualise the entire state machine here.
     ))
-    .padding(15.0)
+    .padding(15.px())
 }
 
 fn main() -> Result<(), EventLoopError> {
diff --git a/xilem/examples/to_do_mvc.rs b/xilem/examples/to_do_mvc.rs
index 811cf83b4..e77f77d05 100644
--- a/xilem/examples/to_do_mvc.rs
+++ b/xilem/examples/to_do_mvc.rs
@@ -91,11 +91,11 @@ fn app_logic(task_list: &mut TaskList) -> impl WidgetView<TaskList> + use<> {
                 let delete_button = text_button("Delete", move |data: &mut TaskList| {
                     data.tasks.remove(i);
                 })
-                .padding(5.0);
+                .padding(5.px());
                 Some(
                     flex_row((checkbox, FlexSpacer::Flex(1.), delete_button))
-                        .padding(DEFAULT_GAP.get())
-                        .border(ZYNC_800, 1.0),
+                        .padding(DEFAULT_GAP)
+                        .border(ZYNC_800, 1.px()),
                 )
             }
         })
@@ -134,7 +134,7 @@ fn app_logic(task_list: &mut TaskList) -> impl WidgetView<TaskList> + use<> {
         footer,
     ))
     .gap(Length::px(4.))
-    .padding(50.0)
+    .padding(50.px())
 }
 
 pub(crate) fn run(event_loop: EventLoopBuilder) -> Result<(), EventLoopError> {
diff --git a/xilem/examples/transparent_window.rs b/xilem/examples/transparent_window.rs
index 85c637620..555a27992 100644
--- a/xilem/examples/transparent_window.rs
+++ b/xilem/examples/transparent_window.rs
@@ -40,7 +40,7 @@ fn app_logic(state: &mut AppState) -> impl Iterator<Item = WindowView<AppState>>
         .gap(10.px()),
         FlexSpacer::Flex(1.),
     ))
-    .padding(20.);
+    .padding(20.px());
 
     std::iter::once(
         xilem::window(state.window_id, "Transparency Demo", root_view)
diff --git a/xilem/examples/variable_clock.rs b/xilem/examples/variable_clock.rs
index 3d22a6716..c3ec8810f 100644
--- a/xilem/examples/variable_clock.rs
+++ b/xilem/examples/variable_clock.rs
@@ -54,7 +54,7 @@ fn app_logic(data: &mut Clocks) -> impl WidgetView<Clocks> + use<> {
         )
         .flex(1.),
     ))
-    .padding(10.0);
+    .padding(10.px());
     fork(
         view,
         task(
diff --git a/xilem/examples/virtual_cats.rs b/xilem/examples/virtual_cats.rs
index ccb9ad568..77c1c78e3 100644
--- a/xilem/examples/virtual_cats.rs
+++ b/xilem/examples/virtual_cats.rs
@@ -96,15 +96,15 @@ impl VirtualCats {
                             .line_break_mode(LineBreaking::Clip)
                             .text_alignment(TextAlign::End),
                     )
-                    .padding(4.)
-                    .corner_radius(4.)
+                    .padding(4.px())
+                    .corner_radius(4.px())
                     .background_color(BLACK.multiply_alpha(0.5)),
                 )
                 .padding(Padding {
-                    left: 0.,
-                    right: 42.,
-                    top: 30.,
-                    bottom: 0.,
+                    left: 0.px(),
+                    right: 42.px(),
+                    top: 30.px(),
+                    bottom: 0.px(),
                 });
                 let imgview = zstack((
                     image(img.clone()).fit(ObjectFit::FitWidth),
@@ -125,8 +125,8 @@ impl VirtualCats {
                 let view = flex_col((errorstring, emojicat))
                     .cross_axis_alignment(xilem::view::CrossAxisAlignment::Start)
                     .background_color(WHITE)
-                    .padding(16.0)
-                    .corner_radius(8.0);
+                    .padding(16.px())
+                    .corner_radius(8.px());
                 OneOf::C(view)
             }
         };
@@ -141,7 +141,7 @@ impl VirtualCats {
             0..i64::try_from(self.statuses.len()).unwrap(),
             Self::virtual_item,
         ))
-        .padding(Padding::horizontal(10.0))
+        .padding(Padding::horizontal(10.px()))
     }
 }
 
diff --git a/xilem/examples/widgets.rs b/xilem/examples/widgets.rs
index 19ad5a1c8..473208744 100644
--- a/xilem/examples/widgets.rs
+++ b/xilem/examples/widgets.rs
@@ -80,7 +80,7 @@ fn border_box<State: 'static, Action: 'static>(
         FlexSpacer::Flex(1.),
     ))
     .dims((450.px(), 200.px()))
-    .border(Color::WHITE, 2.)
+    .border(Color::WHITE, 2.px())
 }
 
 /// Top-level view
@@ -121,7 +121,7 @@ fn app_logic(data: &mut WidgetGallery) -> impl WidgetView<WidgetGallery> + use<>
         ))
         .gap(SPACER_WIDTH),
     )
-    .padding(SPACER_WIDTH.get())
+    .padding(SPACER_WIDTH)
 }
 
 fn run(event_loop: EventLoopBuilder) -> Result<(), EventLoopError> {
diff --git a/xilem/stress_tests/property_stack.rs b/xilem/stress_tests/property_stack.rs
index b22ec726c..3fc562bee 100644
--- a/xilem/stress_tests/property_stack.rs
+++ b/xilem/stress_tests/property_stack.rs
@@ -6,28 +6,29 @@
 use std::hint::black_box;
 
 use xilem::WidgetView;
+use xilem::masonry::layout::AsUnit;
 use xilem::style::Style as _;
 use xilem::view::prose;
 
 #[cfg(compile_stress_test)]
 fn prop_stack() -> impl WidgetView<()> + use<> {
     prose("")
-        .border_width(0.5)
-        .border_width(0.5)
-        .border_width(0.5)
-        .border_width(0.5)
-        .border_width(0.5)
-        .border_width(0.5)
-        .border_width(0.5)
-        .border_width(0.5)
-        .border_width(0.5)
+        .border_width(0.5.px())
+        .border_width(0.5.px())
+        .border_width(0.5.px())
+        .border_width(0.5.px())
+        .border_width(0.5.px())
+        .border_width(0.5.px())
+        .border_width(0.5.px())
+        .border_width(0.5.px())
+        .border_width(0.5.px())
 }
 
 #[cfg(not(compile_stress_test))]
 fn prop_stack() -> impl WidgetView<()> + use<> {
     prose("")
         // We use only one to check it compiles
-        .border_width(0.5)
+        .border_width(0.5.px())
 }
 
 #[test]
diff --git a/xilem_masonry/src/one_of.rs b/xilem_masonry/src/one_of.rs
index 5e033b6b9..f26bec076 100644
--- a/xilem_masonry/src/one_of.rs
+++ b/xilem_masonry/src/one_of.rs
@@ -11,7 +11,7 @@ use masonry::core::{
 };
 use masonry::imaging::Painter;
 use masonry::kurbo::{Axis, Point, Size};
-use masonry::layout::LenReq;
+use masonry::layout::{LenReq, Length};
 
 use crate::core::Mut;
 use crate::core::one_of::OneOf;
@@ -256,8 +256,8 @@ impl<
         _props: &PropertiesRef<'_>,
         axis: Axis,
         _len_req: LenReq,
-        cross_length: Option<f64>,
-    ) -> f64 {
+        cross_length: Option<Length>,
+    ) -> Length {
         match self {
             Self::A(w) => ctx.redirect_measurement(w, axis, cross_length),
             Self::B(w) => ctx.redirect_measurement(w, axis, cross_length),
diff --git a/xilem_masonry/src/style.rs b/xilem_masonry/src/style.rs
index 891799c88..8dcdc1f8f 100644
--- a/xilem_masonry/src/style.rs
+++ b/xilem_masonry/src/style.rs
@@ -4,7 +4,7 @@
 //! Traits used to set custom styles on views.
 
 use masonry::core::UsesProperty;
-use masonry::layout::Dim;
+use masonry::layout::{Dim, Length};
 use masonry::peniko::Color;
 pub use masonry::properties::types::{Gradient, GradientShape};
 pub use masonry::properties::{
@@ -90,7 +90,7 @@ pub trait Style<State: 'static, Action: 'static>: WidgetView<State, Action> + Si
     fn border(
         self,
         color: Color,
-        width: f64,
+        width: Length,
     ) -> Prop<BorderWidth, Prop<BorderColor, Self, State, Action>, State, Action>
     where
         Self::Widget: UsesProperty<BorderColor> + UsesProperty<BorderWidth>,
@@ -107,7 +107,7 @@ pub trait Style<State: 'static, Action: 'static>: WidgetView<State, Action> + Si
     }
 
     /// Sets the element's border width.
-    fn border_width(self, width: f64) -> Prop<BorderWidth, Self, State, Action>
+    fn border_width(self, width: Length) -> Prop<BorderWidth, Self, State, Action>
     where
         Self::Widget: UsesProperty<BorderWidth>,
     {
@@ -123,7 +123,7 @@ pub trait Style<State: 'static, Action: 'static>: WidgetView<State, Action> + Si
     }
 
     /// Sets the element's corner radius.
-    fn corner_radius(self, radius: f64) -> Prop<CornerRadius, Self, State, Action>
+    fn corner_radius(self, radius: Length) -> Prop<CornerRadius, Self, State, Action>
     where
         Self::Widget: UsesProperty<CornerRadius>,
     {
diff --git a/xilem_masonry/src/view/resize_observer.rs b/xilem_masonry/src/view/resize_observer.rs
index 469605e83..4e16fad4c 100644
--- a/xilem_masonry/src/view/resize_observer.rs
+++ b/xilem_masonry/src/view/resize_observer.rs
@@ -162,7 +162,7 @@ where
             None => match message.take_message::<LayoutChanged>() {
                 Some(_) => MessageResult::Action((self.on_resize)(
                     app_state,
-                    element.ctx.content_box_size(),
+                    element.ctx.layout_content_box().size(),
                 )),
                 None => {
                     // TODO: Panic?
diff --git a/xilem_masonry/src/view/sized_box.rs b/xilem_masonry/src/view/sized_box.rs
index ad18e301c..7d0dc98f2 100644
--- a/xilem_masonry/src/view/sized_box.rs
+++ b/xilem_masonry/src/view/sized_box.rs
@@ -22,13 +22,14 @@ use crate::{Pod, ViewCtx, WidgetView};
 /// use xilem::view::{sized_box, button};
 /// use xilem::palette;
 /// use kurbo::RoundedRectRadii;
+/// use masonry::layout::AsUnit;
 /// use masonry::properties::Padding;
 ///
 /// sized_box(button("Button", |data: &mut i32| *data+=1))
 ///     .background(palette::css::RED)
-///     .border(palette::css::YELLOW, 20.)
+///     .border(palette::css::YELLOW, 20.px())
 ///     .rounded(RoundedRectRadii::from_single_radius(5.))
-///     .padding(Padding::from(5.))
+///     .padding(Padding::from(5.px()))
 /// ```
 pub fn sized_box<State, Action, V>(inner: V) -> SizedBox<V, State, Action>
 where
diff --git a/xilem_masonry/src/widget_view.rs b/xilem_masonry/src/widget_view.rs
index 40d5e0611..59f1abf0d 100644
--- a/xilem_masonry/src/widget_view.rs
+++ b/xilem_masonry/src/widget_view.rs
@@ -60,13 +60,13 @@ pub trait WidgetView<State: 'static, Action = ()>:
     /// # Examples
     /// ```
     /// # use xilem_masonry as xilem;
-    /// use xilem::{masonry::properties::CornerRadius, view::{text_button, label}, WidgetView};
+    /// use xilem::{masonry::{layout::AsUnit, properties::CornerRadius}, view::{text_button, label}, WidgetView};
     ///
     /// # fn view<State: 'static>() -> impl WidgetView<State> + use<State> {
     /// text_button("click me", |_| {})
-    ///     .prop(CornerRadius { radius: 20.0 })
-    ///     .prop(CornerRadius { radius: 5.0 })
-    /// // The corner radius of this button will be 5.0
+    ///     .prop(CornerRadius { radius: 20.px() })
+    ///     .prop(CornerRadius { radius: 5.px() })
+    /// // The corner radius of this button will be 5px.
     /// # }
     ///
     /// ```