Take border into account when absolutely positioning grid items relat…

…ive to the grid container
DioxusLabs · Jan 8, 2023 · e9568cf · e9568cf
1 parent befdef1
commit e9568cf
Show file tree

Hide file tree

Showing 6 changed files with 280 additions and 4 deletions.
diff --git a/benches/generated/grid_absolute_layout_within_border.rs b/benches/generated/grid_absolute_layout_within_border.rs
diff --git a/benches/generated/mod.rs b/benches/generated/mod.rs
diff --git a/src/compute/grid/mod.rs b/src/compute/grid/mod.rs
@@ -325,10 +325,16 @@ pub fn compute(
                 });
 
             let grid_area = Rect {
-                top: maybe_row_indexes.start.map(|index| rows[index].offset).unwrap_or(0.0),
-                bottom: maybe_row_indexes.end.map(|index| rows[index].offset).unwrap_or(container_border_box.height),
-                left: maybe_col_indexes.start.map(|index| columns[index].offset).unwrap_or(0.0),
-                right: maybe_col_indexes.end.map(|index| columns[index].offset).unwrap_or(container_border_box.width),
+                top: maybe_row_indexes.start.map(|index| rows[index].offset).unwrap_or(border.top),
+                bottom: maybe_row_indexes
+                    .end
+                    .map(|index| rows[index].offset)
+                    .unwrap_or(container_border_box.height - border.bottom),
+                left: maybe_col_indexes.start.map(|index| columns[index].offset).unwrap_or(border.left),
+                right: maybe_col_indexes
+                    .end
+                    .map(|index| columns[index].offset)
+                    .unwrap_or(container_border_box.width - border.right),
             };
             align_and_position_item(tree, child, order, grid_area, container_alignment_styles);
             order += 1;

diff --git a/test_fixtures/grid_absolute_layout_within_border.html b/test_fixtures/grid_absolute_layout_within_border.html
@@ -0,0 +1,20 @@
+<!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: grid;height: 100px; width: 100px; border-width: 10px; padding: 10px;">
+  <div style="position: absolute; width: 50px; height: 50px; left: 0px; top: 0px;"></div>
+  <div style="position: absolute; width: 50px; height: 50px; right: 0px; bottom: 0px;"></div>
+  <div style="position: absolute; width: 50px; height: 50px; left: 0px; top: 0px; margin: 10px;"></div>
+  <div style="position: absolute; width: 50px; height: 50px; right: 0px; bottom: 0px; margin: 10px;"></div>
+</div>
+
+</body>
+</html>
diff --git a/tests/generated/grid_absolute_layout_within_border.rs b/tests/generated/grid_absolute_layout_within_border.rs
diff --git a/tests/generated/mod.rs b/tests/generated/mod.rs