Apply aspect ratio to absolute children of flex container

DioxusLabs · Jan 5, 2023 · fd02d7f · fd02d7f
1 parent 3a7b4d8
commit fd02d7f
Show file tree

Hide file tree

Showing 9 changed files with 128 additions and 75 deletions.
diff --git a/benches/generated/aspect_ratio_flex_column_percent_fill_width.rs b/benches/generated/aspect_ratio_flex_column_percent_fill_width.rs
diff --git a/benches/generated/aspect_ratio_leaf_fill_min_width_percent.rs b/benches/generated/aspect_ratio_leaf_fill_min_width_percent.rs
diff --git a/benches/generated/mod.rs b/benches/generated/mod.rs
diff --git a/src/compute/flexbox.rs b/src/compute/flexbox.rs
@@ -1622,9 +1622,13 @@ fn perform_absolute_layout_on_absolute_children(tree: &mut impl LayoutTree, node
         let (start_cross, end_cross) = if constants.is_row { (top, bottom) } else { (start, end) };
 
         // Compute known dimensions from min/max/inherent size styles
-        let style_size = child_style.size.maybe_resolve(constants.container_size);
-        let min_size = child_style.min_size.maybe_resolve(constants.container_size);
-        let max_size = child_style.max_size.maybe_resolve(constants.container_size);
+        let aspect_ratio = child_style.aspect_ratio;
+        let style_size =
+            child_style.size.maybe_resolve(constants.container_size).maybe_apply_aspect_ratio(aspect_ratio);
+        let min_size =
+            child_style.min_size.maybe_resolve(constants.container_size).maybe_apply_aspect_ratio(aspect_ratio);
+        let max_size =
+            child_style.max_size.maybe_resolve(constants.container_size).maybe_apply_aspect_ratio(aspect_ratio);
         let mut known_dimensions = style_size.maybe_clamp(min_size, max_size);
 
         // Fill in width from left/right and height from top/bottom is appropriate
@@ -1635,6 +1639,9 @@ fn perform_absolute_layout_on_absolute_children(tree: &mut impl LayoutTree, node
             known_dimensions.height = Some(container_height.maybe_sub(top).maybe_sub(bottom));
         }
 
+        // Re-apply aspect ratio
+        let known_dimensions = known_dimensions.maybe_apply_aspect_ratio(aspect_ratio);
+
         let preliminary_size = compute_node_layout(
             tree,
             child,

diff --git a/test_fixtures/aspect_ratio_flex_column_absolute_fill_width.html b/test_fixtures/aspect_ratio_flex_column_absolute_fill_width.html
@@ -0,0 +1,17 @@
+<!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="display: flex; width: 1280px; height: 720px;">
+  <div style="position: absolute; top: 5%; left: 5%; width: 20%; aspect-ratio: 3;"></div>
+</div>
+
+</body>
+</html>
diff --git a/test_fixtures/aspect_ratio_flex_column_percent_fill_width.html b/test_fixtures/aspect_ratio_flex_column_percent_fill_width.html
@@ -0,0 +1,17 @@
+<!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="display: flex; width: 1280px; height: 720px;">
+  <div style="position: absolute; top: 5%; left: 5%; width: 20%; aspect-ratio: 3;"></div>
+</div>
+
+</body>
+</html>
diff --git a/tests/generated/aspect_ratio_flex_column_percent_fill_width.rs b/tests/generated/aspect_ratio_flex_column_percent_fill_width.rs
diff --git a/tests/generated/aspect_ratio_leaf_fill_min_width_percent.rs b/tests/generated/aspect_ratio_leaf_fill_min_width_percent.rs
diff --git a/tests/generated/mod.rs b/tests/generated/mod.rs