test: gate content alignment

crates/obscura-render/tests/layout_test.rs

@@ -504,6 +504,10 @@ fn item_self_alignment_places_flex_and_grid_items() {
     let grid_place = rect("grid-place");
     let parent_one = rect("parent-one");
     let parent_two = rect("parent-two");
+    let line_one = rect("line-one");
+    let line_two = rect("line-two");
+    let track_one = rect("track-one");
+    let track_two = rect("track-two");
     assert!(
         (flex_center.x - 0.0).abs() < 0.01
             && (flex_center.y - 40.0).abs() < 0.01
@@ -527,6 +531,20 @@ fn item_self_alignment_places_flex_and_grid_items() {
             && (parent_two.y - 330.0).abs() < 0.01,
         "parent-aligned grid items: {parent_one:?} {parent_two:?}"
     );
+    assert!(
+        (line_one.x - 0.0).abs() < 0.01
+            && (line_one.y - 380.0).abs() < 0.01
+            && (line_two.x - 0.0).abs() < 0.01
+            && (line_two.y - 480.0).abs() < 0.01,
+        "aligned flex lines: {line_one:?} {line_two:?}"
+    );
+    assert!(
+        (track_one.x - 100.0).abs() < 0.01
+            && (track_one.y - 570.0).abs() < 0.01
+            && (track_two.x - 100.0).abs() < 0.01
+            && (track_two.y - 620.0).abs() < 0.01,
+        "aligned grid tracks: {track_one:?} {track_two:?}"
+    );
 }
 
 #[test]

render-repros/checks.json

@@ -86,7 +86,11 @@
     {"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 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}
+    {"name": "place items aligns second grid child", "color": "#2b8a3e", "x": 195, "y": 330, "width": 60, "height": 30},
+    {"name": "align content distributes flex lines", "color": "#f76707", "x": 0, "y": 380, "width": 70, "height": 20},
+    {"name": "align content reaches cross end", "color": "#1098ad", "x": 0, "y": 480, "width": 70, "height": 20},
+    {"name": "place content aligns first grid track", "color": "#7048e8", "x": 100, "y": 570, "width": 100, "height": 50},
+    {"name": "place content aligns second grid track", "color": "#37b24d", "x": 100, "y": 620, "width": 100, "height": 50}
   ],
   "mixed-content-block": [
     {"name": "full-width block child", "color": "#ccddff", "width": 400}

render-repros/item-self-alignment.html

@@ -73,11 +73,44 @@
       height: 30px;
       background: #2b8a3e;
     }
+    #flex-content {
+      display: flex;
+      flex-wrap: wrap;
+      align-content: space-between;
+      width: 120px;
+      height: 120px;
+      margin-top: 20px;
+      background: #d0ebff;
+    }
+    #line-one, #line-two {
+      width: 70px;
+      height: 20px;
+    }
+    #line-one { background: #f76707; }
+    #line-two { background: #1098ad; }
+    #grid-content {
+      display: grid;
+      grid-template-columns: 100px;
+      grid-template-rows: 50px 50px;
+      place-content: center end;
+      width: 200px;
+      height: 200px;
+      margin-top: 20px;
+      background: #fff3bf;
+    }
+    #track-one, #track-two {
+      width: 100px;
+      height: 50px;
+    }
+    #track-one { background: #7048e8; }
+    #track-two { background: #37b24d; }
   </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>
+  <div id="flex-content"><div id="line-one"></div><div id="line-two"></div></div>
+  <div id="grid-content"><div id="track-one"></div><div id="track-two"></div></div>
 </body>
 </html>