Fix wrong size propogation for absolute elements (#878)

* Fix wrong size propogation for absolute elements

* Add fix+test for grid and test block

---------

Co-authored-by: Nico Burns <[email protected]>

Author: Lutetium-Vanadium

src/compute/block.rs

@@ -653,7 +653,7 @@ fn perform_absolute_layout_on_absolute_children(
             known_dimensions = known_dimensions.maybe_apply_aspect_ratio(aspect_ratio).maybe_clamp(min_size, max_size);
         }
 
-        let layout_output = tree.perform_child_layout(
+        let measured_size = tree.measure_child_size_both(
             item.node_id,
             known_dimensions,
             area_size.map(Some),
@@ -664,9 +664,21 @@ fn perform_absolute_layout_on_absolute_children(
             SizingMode::ContentSize,
             Line::FALSE,
         );
-        let measured_size = layout_output.size;
+
         let final_size = known_dimensions.unwrap_or(measured_size).maybe_clamp(min_size, max_size);
 
+        let layout_output = tree.perform_child_layout(
+            item.node_id,
+            final_size.map(Some),
+            area_size.map(Some),
+            Size {
+                width: AvailableSpace::Definite(area_width.maybe_clamp(min_size.width, max_size.width)),
+                height: AvailableSpace::Definite(area_height.maybe_clamp(min_size.height, max_size.height)),
+            },
+            SizingMode::ContentSize,
+            Line::FALSE,
+        );
+
         let non_auto_margin = Rect {
             left: if left.is_some() { margin.left.unwrap_or(0.0) } else { 0.0 },
             right: if right.is_some() { margin.right.unwrap_or(0.0) } else { 0.0 },

src/compute/flexbox.rs

@@ -2145,7 +2145,7 @@ fn perform_absolute_layout_on_absolute_children(
             known_dimensions.height = Some(f32_max(new_height_raw, 0.0));
             known_dimensions = known_dimensions.maybe_apply_aspect_ratio(aspect_ratio).maybe_clamp(min_size, max_size);
         }
-        let layout_output = tree.perform_child_layout(
+        let measured_size = tree.measure_child_size_both(
             child,
             known_dimensions,
             constants.node_inner_size,
@@ -2156,9 +2156,20 @@ fn perform_absolute_layout_on_absolute_children(
             SizingMode::InherentSize,
             Line::FALSE,
         );
-        let measured_size = layout_output.size;
         let final_size = known_dimensions.unwrap_or(measured_size).maybe_clamp(min_size, max_size);
 
+        let layout_output = tree.perform_child_layout(
+            child,
+            final_size.map(Some),
+            constants.node_inner_size,
+            Size {
+                width: AvailableSpace::Definite(container_width.maybe_clamp(min_size.width, max_size.width)),
+                height: AvailableSpace::Definite(container_height.maybe_clamp(min_size.height, max_size.height)),
+            },
+            SizingMode::InherentSize,
+            Line::FALSE,
+        );
+
         let non_auto_margin = margin.map(|m| m.unwrap_or(0.0));
 
         let free_space = Size {

src/compute/grid/alignment.rs

@@ -199,17 +199,32 @@ pub(super) fn align_and_position_item(
 
     // Layout node
     drop(style);
+
+    let size = if position == Position::Absolute && (width.is_none() || height.is_none()) {
+        tree.measure_child_size_both(
+            node,
+            Size { width, height },
+            grid_area_size.map(Option::Some),
+            grid_area_minus_item_margins_size.map(AvailableSpace::Definite),
+            SizingMode::InherentSize,
+            Line::FALSE,
+        )
+        .map(Some)
+    } else {
+        Size { width, height }
+    };
+
     let layout_output = tree.perform_child_layout(
         node,
-        Size { width, height },
+        size,
         grid_area_size.map(Option::Some),
         grid_area_minus_item_margins_size.map(AvailableSpace::Definite),
         SizingMode::InherentSize,
         Line::FALSE,
     );
 
     // Resolve final size
-    let Size { width, height } = Size { width, height }.unwrap_or(layout_output.size).maybe_clamp(min_size, max_size);
+    let Size { width, height } = size.unwrap_or(layout_output.size).maybe_clamp(min_size, max_size);
 
     let (x, x_margin) = align_item_within_area(
         Line { start: grid_area.left, end: grid_area.right },

src/tree/traits.rs

@@ -349,6 +349,33 @@ pub(crate) trait LayoutPartialTreeExt: LayoutPartialTree {
         .get_abs(axis)
     }
 
+    /// Compute the size of the node given the specified constraints
+    #[inline(always)]
+    #[allow(clippy::too_many_arguments)]
+    fn measure_child_size_both(
+        &mut self,
+        node_id: NodeId,
+        known_dimensions: Size<Option<f32>>,
+        parent_size: Size<Option<f32>>,
+        available_space: Size<AvailableSpace>,
+        sizing_mode: SizingMode,
+        vertical_margins_are_collapsible: Line<bool>,
+    ) -> Size<f32> {
+        self.compute_child_layout(
+            node_id,
+            LayoutInput {
+                known_dimensions,
+                parent_size,
+                available_space,
+                sizing_mode,
+                axis: RequestedAxis::Both,
+                run_mode: RunMode::ComputeSize,
+                vertical_margins_are_collapsible,
+            },
+        )
+        .size
+    }
+
     /// Perform a full layout on the node given the specified constraints
     #[inline(always)]
     fn perform_child_layout(

test_fixtures/block/absolute_correct_cross_child_size_with_percentage.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <script src="../../scripts/gentest/test_helper.js"></script>
+  <link rel="stylesheet" type="text/css" href="../../scripts/gentest/test_base_style.css">
+  <title>
+    Test description
+  </title>
+</head>
+<body>
+
+<div id="test-root" style="width: 300px; height: 110px; position: relative; display: block;">
+  <div style="position: absolute; top: 40px; left: 50px; display: flex; flex-direction: column;">
+    <div style="width: 200px; height: 10px;"></div>
+    <div style="width: 100%; height: 10px;"></div>
+    <div style="width: 100%; height: 10px; display: flex;">
+      <div style="width: 10px; height: 10px;"></div>
+    </div>
+  </div>
+</div>
+
+</body>
+</html>

test_fixtures/flex/absolute_correct_cross_child_size_with_percentage.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <script src="../../scripts/gentest/test_helper.js"></script>
+  <link rel="stylesheet" type="text/css" href="../../scripts/gentest/test_base_style.css">
+  <title>
+    Test description
+  </title>
+</head>
+<body>
+
+<div id="test-root" style="width: 300px; height: 110px; position: relative;">
+  <div style="position: absolute; top: 40px; left: 50px; display: flex; flex-direction: column;">
+    <div style="width: 200px; height: 10px;"></div>
+    <div style="width: 100%; height: 10px;"></div>
+    <div style="width: 100%; height: 10px; display: flex;">
+      <div style="width: 10px; height: 10px;"></div>
+    </div>
+  </div>
+</div>
+
+</body>
+</html>

test_fixtures/grid/absolute_correct_cross_child_size_with_percentage.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <script src="../../scripts/gentest/test_helper.js"></script>
+  <link rel="stylesheet" type="text/css" href="../../scripts/gentest/test_base_style.css">
+  <title>
+    Test description
+  </title>
+</head>
+<body>
+
+<div id="test-root" style="width: 300px; height: 110px; position: relative; display: grid;">
+  <div style="position: absolute; top: 40px; left: 50px; display: flex; flex-direction: column;">
+    <div style="width: 200px; height: 10px;"></div>
+    <div style="width: 100%; height: 10px;"></div>
+    <div style="width: 100%; height: 10px; display: flex;">
+      <div style="width: 10px; height: 10px;"></div>
+    </div>
+  </div>
+</div>
+
+</body>
+</html>