tawasuyu

tawasuyu/taffy

A high performance rust-powered UI layout library

HTML 5544Rust 88Markdown 11TOML 91926 Sutichaykuna

Use grid area size rather than available space when applying aspect ratio to grid items (#656)

a326c263b98a061174e52d41773d59289e379b9b · ruwaq Nico Burns · (2 wata ñawpaq) · tayta c154b8aa7 · kay commitpi sach'ata qhaway

Semántico sayk'uy · 4

src/compute/grid/types/grid_item.rs

tests/generated/grid/chrome_issue_325928327.rs

tests/generated/grid/mod.rs

5 qillqakuna · +137 −2

diff --git a/RELEASES.md b/RELEASES.md
index c76236dda..66d121561 100644
--- 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
index 5f0e7906b..ba18bc58a 100644
--- 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
new file mode 100644
index 000000000..0604d6b37
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/tests/generated/grid/chrome_issue_325928327.rs b/tests/generated/grid/chrome_issue_325928327.rs
new file mode 100644
index 000000000..b2c65685c
--- /dev/null
+++ b/tests/generated/grid/chrome_issue_325928327.rs
@@ -0,0 +1,112 @@
+#[test]
+fn chrome_issue_325928327() {
+    #[allow(unused_imports)]
+    use taffy::{prelude::*, tree::Layout, TaffyTree};
+    let mut taffy: TaffyTree<crate::TextMeasure> = TaffyTree::new();
+    let node00 = taffy
+        .new_leaf(taffy::style::Style {
+            size: taffy::geometry::Size { width: auto(), height: taffy::style::Dimension::Percent(1f32) },
+            aspect_ratio: Some(1f32),
+            ..Default::default()
+        })
+        .unwrap();
+    let node0 = taffy
+        .new_with_children(
+            taffy::style::Style {
+                size: taffy::geometry::Size { width: auto(), height: taffy::style::Dimension::Percent(1f32) },
+                ..Default::default()
+            },
+            &[node00],
+        )
+        .unwrap();
+    let node = taffy
+        .new_with_children(
+            taffy::style::Style {
+                display: taffy::style::Display::Grid,
+                justify_items: Some(taffy::style::JustifyItems::Center),
+                size: taffy::geometry::Size {
+                    width: taffy::style::Dimension::Percent(1f32),
+                    height: taffy::style::Dimension::Length(40f32),
+                },
+                ..Default::default()
+            },
+            &[node0],
+        )
+        .unwrap();
+    taffy.compute_layout_with_measure(node, taffy::geometry::Size::MAX_CONTENT, crate::test_measure_function).unwrap();
+    println!("\nComputed tree:");
+    taffy.print_tree(node);
+    println!();
+    #[cfg_attr(not(feature = "content_size"), allow(unused_variables))]
+    let layout @ Layout { size, location, .. } = taffy.layout(node).unwrap();
+    assert_eq!(size.width, 40f32, "width of node {:?}. Expected {}. Actual {}", node, 40f32, size.width);
+    assert_eq!(size.height, 40f32, "height of node {:?}. Expected {}. Actual {}", node, 40f32, size.height);
+    assert_eq!(location.x, 0f32, "x of node {:?}. Expected {}. Actual {}", node, 0f32, location.x);
+    assert_eq!(location.y, 0f32, "y of node {:?}. Expected {}. Actual {}", node, 0f32, location.y);
+    #[cfg(feature = "content_size")]
+    assert_eq!(
+        layout.scroll_width(),
+        0f32,
+        "scroll_width of node {:?}. Expected {}. Actual {}",
+        node,
+        0f32,
+        layout.scroll_width()
+    );
+    #[cfg(feature = "content_size")]
+    assert_eq!(
+        layout.scroll_height(),
+        0f32,
+        "scroll_height of node {:?}. Expected {}. Actual {}",
+        node,
+        0f32,
+        layout.scroll_height()
+    );
+    #[cfg_attr(not(feature = "content_size"), allow(unused_variables))]
+    let layout @ Layout { size, location, .. } = taffy.layout(node0).unwrap();
+    assert_eq!(size.width, 40f32, "width of node {:?}. Expected {}. Actual {}", node0, 40f32, size.width);
+    assert_eq!(size.height, 40f32, "height of node {:?}. Expected {}. Actual {}", node0, 40f32, size.height);
+    assert_eq!(location.x, 0f32, "x of node {:?}. Expected {}. Actual {}", node0, 0f32, location.x);
+    assert_eq!(location.y, 0f32, "y of node {:?}. Expected {}. Actual {}", node0, 0f32, location.y);
+    #[cfg(feature = "content_size")]
+    assert_eq!(
+        layout.scroll_width(),
+        0f32,
+        "scroll_width of node {:?}. Expected {}. Actual {}",
+        node0,
+        0f32,
+        layout.scroll_width()
+    );
+    #[cfg(feature = "content_size")]
+    assert_eq!(
+        layout.scroll_height(),
+        0f32,
+        "scroll_height of node {:?}. Expected {}. Actual {}",
+        node0,
+        0f32,
+        layout.scroll_height()
+    );
+    #[cfg_attr(not(feature = "content_size"), allow(unused_variables))]
+    let layout @ Layout { size, location, .. } = taffy.layout(node00).unwrap();
+    assert_eq!(size.width, 40f32, "width of node {:?}. Expected {}. Actual {}", node00, 40f32, size.width);
+    assert_eq!(size.height, 40f32, "height of node {:?}. Expected {}. Actual {}", node00, 40f32, size.height);
+    assert_eq!(location.x, 0f32, "x of node {:?}. Expected {}. Actual {}", node00, 0f32, location.x);
+    assert_eq!(location.y, 0f32, "y of node {:?}. Expected {}. Actual {}", node00, 0f32, location.y);
+    #[cfg(feature = "content_size")]
+    assert_eq!(
+        layout.scroll_width(),
+        0f32,
+        "scroll_width of node {:?}. Expected {}. Actual {}",
+        node00,
+        0f32,
+        layout.scroll_width()
+    );
+    #[cfg(feature = "content_size")]
+    assert_eq!(
+        layout.scroll_height(),
+        0f32,
+        "scroll_height of node {:?}. Expected {}. Actual {}",
+        node00,
+        0f32,
+        layout.scroll_height()
+    );
+}
diff --git a/tests/generated/grid/mod.rs b/tests/generated/grid/mod.rs
index 6dccc9a9c..031519195 100644
--- a/tests/generated/grid/mod.rs
+++ b/tests/generated/grid/mod.rs
@@ -1,3 +1,4 @@
+mod chrome_issue_325928327;
 #[cfg(feature = "grid")]
 mod grid_absolute_align_self_sized_all;
 #[cfg(feature = "grid")]