test: gate item self alignment

crates/obscura-render/tests/layout_test.rs

@@ -492,6 +492,34 @@ fn inline_block_flex_items_keep_block_inner_flow() {
     );
 }
 
+#[test]
+fn item_self_alignment_places_flex_and_grid_items() {
+    let tree = parse_html(include_str!("../../../render-repros/item-self-alignment.html"));
+    let layout = layout_dom(&tree, (900.0, 1000.0));
+    let rect = |id| layout.rects[&tree.get_element_by_id(id).unwrap()];
+    let flex_center = rect("flex-center");
+    let flex_end = rect("flex-end");
+    let grid_end = rect("grid-end");
+    let grid_center = rect("grid-center");
+    let grid_place = rect("grid-place");
+    assert!(
+        (flex_center.x - 0.0).abs() < 0.01
+            && (flex_center.y - 40.0).abs() < 0.01
+            && (flex_end.x - 40.0).abs() < 0.01
+            && (flex_end.y - 70.0).abs() < 0.01,
+        "flex items: {flex_center:?} {flex_end:?}"
+    );
+    assert!(
+        (grid_end.x - 110.0).abs() < 0.01
+            && (grid_end.y - 165.0).abs() < 0.01
+            && (grid_center.x - 200.0).abs() < 0.01
+            && (grid_center.y - 220.0).abs() < 0.01
+            && (grid_place.x - 420.0).abs() < 0.01
+            && (grid_place.y - 160.0).abs() < 0.01,
+        "grid items: {grid_end:?} {grid_center:?} {grid_place:?}"
+    );
+}
+
 #[test]
 fn opposing_floats_share_header_band_through_inline_wrapper() {
     let tree = parse_html(include_str!("../../../render-repros/opposing-header-floats.html"));

render-repros/checks.json

@@ -79,6 +79,13 @@
     {"name": "inline block list shrink wraps and stacks children", "color": "#1971c2", "x": 525, "y": 0, "width": 90, "height": 60},
     {"name": "table stand-in does not blockify inline-block list", "color": "#c2255c", "x": 0, "y": 140, "width": 90, "height": 20}
   ],
+  "item-self-alignment": [
+    {"name": "flex item centers itself on cross axis", "color": "#087f5b", "x": 0, "y": 40, "width": 40, "height": 20},
+    {"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}
+  ],
   "mixed-content-block": [
     {"name": "full-width block child", "color": "#ccddff", "width": 400}
   ],

render-repros/item-self-alignment.html

@@ -0,0 +1,62 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>flex and grid items honor self alignment</title>
+  <style>
+    html, body { margin: 0; }
+    #flex {
+      display: flex;
+      align-items: flex-start;
+      width: 300px;
+      height: 100px;
+      background: #f08c00;
+    }
+    #flex-center {
+      align-self: center;
+      width: 40px;
+      height: 20px;
+      background: #087f5b;
+    }
+    #flex-end {
+      align-self: flex-end;
+      width: 50px;
+      height: 30px;
+      background: #1971c2;
+    }
+    #grid {
+      display: grid;
+      grid-template-columns: 150px 150px 150px;
+      grid-template-rows: 120px;
+      width: 450px;
+      height: 120px;
+      margin-top: 20px;
+      background: #ffd43b;
+    }
+    #grid-end {
+      align-self: center;
+      justify-self: end;
+      width: 40px;
+      height: 30px;
+      background: #c2255c;
+    }
+    #grid-center {
+      align-self: end;
+      justify-self: center;
+      width: 50px;
+      height: 20px;
+      background: #6741d9;
+    }
+    #grid-place {
+      place-self: center end;
+      width: 30px;
+      height: 40px;
+      background: #0b7285;
+    }
+  </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>
+</body>
+</html>