Use App units in flow layout (#30894)

* use app_unit in flow layout

* fmt

* Avoid crash

* Drop assert that doesn't hold anymore

* update expectation

---------

Co-authored-by: Oriol Brufau <obrufau@igalia.com>

components/layout_2020/geom.rs

@@ -2,6 +2,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
+use std::convert::From;
 use std::fmt;
 use std::ops::{Add, AddAssign, Sub};
 
@@ -10,7 +11,7 @@ use serde::Serialize;
 use style::logical_geometry::{
     BlockFlowDirection, InlineBaseDirection, PhysicalCorner, WritingMode,
 };
-use style::values::computed::{Length, LengthPercentage};
+use style::values::computed::{CSSPixelLength, Length, LengthPercentage};
 use style::values::generics::length::GenericLengthPercentageOrAuto as AutoOr;
 use style::Zero;
 use style_traits::CSSPixel;
@@ -415,3 +416,51 @@ impl<T> LogicalRect<T> {
         )
     }
 }
+
+impl From<LogicalVec2<CSSPixelLength>> for LogicalVec2<Au> {
+    fn from(value: LogicalVec2<CSSPixelLength>) -> Self {
+        LogicalVec2 {
+            inline: value.inline.into(),
+            block: value.block.into(),
+        }
+    }
+}
+
+impl From<LogicalVec2<Au>> for LogicalVec2<CSSPixelLength> {
+    fn from(value: LogicalVec2<Au>) -> Self {
+        LogicalVec2 {
+            inline: value.inline.into(),
+            block: value.block.into(),
+        }
+    }
+}
+
+impl From<LogicalRect<Au>> for LogicalRect<CSSPixelLength> {
+    fn from(value: LogicalRect<Au>) -> Self {
+        LogicalRect {
+            start_corner: LogicalVec2 {
+                inline: value.start_corner.inline.into(),
+                block: value.start_corner.block.into(),
+            },
+            size: LogicalVec2 {
+                inline: value.size.inline.into(),
+                block: value.size.block.into(),
+            },
+        }
+    }
+}
+
+impl From<LogicalRect<CSSPixelLength>> for LogicalRect<Au> {
+    fn from(value: LogicalRect<CSSPixelLength>) -> Self {
+        LogicalRect {
+            start_corner: LogicalVec2 {
+                inline: value.start_corner.inline.into(),
+                block: value.start_corner.block.into(),
+            },
+            size: LogicalVec2 {
+                inline: value.size.inline.into(),
+                block: value.size.block.into(),
+            },
+        }
+    }
+}