test: gate container item alignment

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]

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}

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;
+    }
   </style>
 </head>
 <body>
   <div id="flex"><div id="flex-center"></div><div id="flex-end"></div></div>
   <div id="grid"><div id="grid-end"></div><div id="grid-center"></div><div id="grid-place"></div></div>
+  <div id="grid-items"><div id="parent-one"></div><div id="parent-two"></div></div>
 </body>
 </html>