diff --git a/crates/obscura-render/tests/layout_test.rs b/crates/obscura-render/tests/layout_test.rs index 4d00a1d..af27940 100644 --- a/crates/obscura-render/tests/layout_test.rs +++ b/crates/obscura-render/tests/layout_test.rs @@ -502,6 +502,8 @@ fn item_self_alignment_places_flex_and_grid_items() { let grid_end = rect("grid-end"); let grid_center = rect("grid-center"); let grid_place = rect("grid-place"); + let parent_one = rect("parent-one"); + let parent_two = rect("parent-two"); assert!( (flex_center.x - 0.0).abs() < 0.01 && (flex_center.y - 40.0).abs() < 0.01 @@ -518,6 +520,13 @@ fn item_self_alignment_places_flex_and_grid_items() { && (grid_place.y - 160.0).abs() < 0.01, "grid items: {grid_end:?} {grid_center:?} {grid_place:?}" ); + assert!( + (parent_one.x - 55.0).abs() < 0.01 + && (parent_one.y - 340.0).abs() < 0.01 + && (parent_two.x - 195.0).abs() < 0.01 + && (parent_two.y - 330.0).abs() < 0.01, + "parent-aligned grid items: {parent_one:?} {parent_two:?}" + ); } #[test] diff --git a/render-repros/checks.json b/render-repros/checks.json index e2d1553..a66a86b 100644 --- a/render-repros/checks.json +++ b/render-repros/checks.json @@ -84,7 +84,9 @@ {"name": "flex item aligns itself to cross end", "color": "#1971c2", "x": 40, "y": 70, "width": 50, "height": 30}, {"name": "grid item aligns center and inline end", "color": "#c2255c", "x": 110, "y": 165, "width": 40, "height": 30}, {"name": "grid item aligns block end and inline center", "color": "#6741d9", "x": 200, "y": 220, "width": 50, "height": 20}, - {"name": "place self sets both grid axes", "color": "#0b7285", "x": 420, "y": 160, "width": 30, "height": 40} + {"name": "place self sets both grid axes", "color": "#0b7285", "x": 420, "y": 160, "width": 30, "height": 40}, + {"name": "place items aligns first grid child", "color": "#e03131", "x": 55, "y": 340, "width": 40, "height": 20}, + {"name": "place items aligns second grid child", "color": "#2b8a3e", "x": 195, "y": 330, "width": 60, "height": 30} ], "mixed-content-block": [ {"name": "full-width block child", "color": "#ccddff", "width": 400} diff --git a/render-repros/item-self-alignment.html b/render-repros/item-self-alignment.html index e25944a..4f38e45 100644 --- a/render-repros/item-self-alignment.html +++ b/render-repros/item-self-alignment.html @@ -53,10 +53,31 @@ height: 40px; background: #0b7285; } + #grid-items { + display: grid; + grid-template-columns: 150px 150px; + grid-template-rows: 100px; + place-items: end center; + width: 300px; + height: 100px; + margin-top: 20px; + background: #e9fac8; + } + #parent-one { + width: 40px; + height: 20px; + background: #e03131; + } + #parent-two { + width: 60px; + height: 30px; + background: #2b8a3e; + }