Use grid area size rather than available space when applying aspect r…

…atio to grid items (#656)
DioxusLabs · May 14, 2024 · a326c26 · a326c26
1 parent c154b8a
commit a326c26
Show file tree

Hide file tree

Showing 5 changed files with 137 additions and 2 deletions.
diff --git a/RELEASES.md b/RELEASES.md
@@ -6,6 +6,7 @@
 
 - Content alignment (`align-content`/`justify-content`) behaviour was updated to match the latest spec (and Chrome 123+) (#635)
 - Ensure that root Flexbox nodes are floored by their padding-border (#651, #655)
+- Use grid area size not available space when applying aspect ratio to grid containers (#656)
 
 ## 0.4.3
 

diff --git a/src/compute/grid/types/grid_item.rs b/src/compute/grid/types/grid_item.rs
@@ -348,7 +348,7 @@ impl GridItem {
         tree.measure_child_size(
             self.node,
             known_dimensions,
-            available_space,
+            inner_node_size,
             available_space.map(|opt| match opt {
                 Some(size) => AvailableSpace::Definite(size),
                 None => AvailableSpace::MinContent,
@@ -387,7 +387,7 @@ impl GridItem {
         tree.measure_child_size(
             self.node,
             known_dimensions,
-            available_space,
+            inner_node_size,
             available_space.map(|opt| match opt {
                 Some(size) => AvailableSpace::Definite(size),
                 None => AvailableSpace::MaxContent,

diff --git a/test_fixtures/grid/chrome_issue_325928327.html b/test_fixtures/grid/chrome_issue_325928327.html
@@ -0,0 +1,21 @@
+<!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 class="viewport">
+  <div id="test-root" style="width: 100%; height: 40px; display: grid; justify-items: center;">
+    <div style="height: 100%; outline: 2px solid red;">
+      <div style="height: 100%; aspect-ratio: 1; background: slategray;"></div>
+    </div>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/tests/generated/grid/chrome_issue_325928327.rs b/tests/generated/grid/chrome_issue_325928327.rs
diff --git a/tests/generated/grid/mod.rs b/tests/generated/grid/mod.rs