test: gate legacy center geometry

crates/obscura-render/tests/layout_test.rs

@@ -192,6 +192,71 @@ fn absolute_auto_axes_preserve_static_position_after_reparenting() {
     );
 }
 
+#[test]
+fn legacy_center_keeps_block_flow_and_centers_descendants() {
+    let tree = parse_html(include_str!("../../../render-repros/legacy-center.html"));
+    let layout = layout_dom(&tree, (900.0, 1000.0));
+    let rect = |selector| {
+        let id = tree.query_selector_all(selector).unwrap()[0];
+        layout.rects[&id]
+    };
+    let inline = rect(".inline-box");
+    let block = rect(".block-box");
+    let nested = rect(".nested-inline");
+    let auto = rect(".auto-block");
+    let table = rect(".center-table");
+    let table_inline = rect(".table-inline");
+    let cell_center = rect(".cell-center");
+    let overridden = rect(".override-box");
+    let pure = rect("#pure-center");
+
+    assert!(
+        (inline.x - 150.0).abs() < 0.01 && (inline.y - 0.0).abs() < 0.01,
+        "centered inline content: {inline:?}"
+    );
+    assert!(
+        (block.x - 150.0).abs() < 0.01 && (block.y - 20.0).abs() < 0.01,
+        "centered block descendant: {block:?}"
+    );
+    assert!(
+        (nested.x - 170.0).abs() < 0.01 && (nested.y - 40.0).abs() < 0.01,
+        "inherited nested alignment: {nested:?}"
+    );
+    assert!(
+        (auto.x - 0.0).abs() < 0.01
+            && (auto.y - 60.0).abs() < 0.01
+            && (auto.width - 400.0).abs() < 0.01,
+        "auto-width block remains fill-available: {auto:?}"
+    );
+    assert!(
+        (table.x - 100.0).abs() < 0.01
+            && (table.y - 80.0).abs() < 0.01
+            && (table.width - 200.0).abs() < 0.01,
+        "table outer box is centered: {table:?}"
+    );
+    assert!(
+        (table_inline.x - 100.0).abs() < 0.01
+            && (table_inline.y - 80.0).abs() < 0.01,
+        "table contents reset legacy alignment: {table_inline:?}"
+    );
+    assert!(
+        (cell_center.x - 100.0).abs() < 0.01
+            && (cell_center.y - 100.0).abs() < 0.01
+            && (cell_center.width - 200.0).abs() < 0.01,
+        "center in table cell fills the cell: {cell_center:?}"
+    );
+    assert!(
+        (overridden.x - 0.0).abs() < 0.01 && (overridden.y - 120.0).abs() < 0.01,
+        "author text-align override: {overridden:?}"
+    );
+    assert!(
+        (pure.x - 0.0).abs() < 0.01
+            && (pure.y - 240.0).abs() < 0.01
+            && (pure.width - 400.0).abs() < 0.01,
+        "pure-text center remains fill-available: {pure:?}"
+    );
+}
+
 #[test]
 fn transforms_establish_absolute_and_fixed_containing_blocks() {
     let html = r##"

render-repros/checks.json

@@ -98,6 +98,16 @@
     {"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}
   ],
+  "legacy-center": [
+    {"name": "legacy center aligns inline content", "color": "#087f5b", "x": 150, "y": 0, "width": 100, "height": 20},
+    {"name": "legacy center preserves block stacking", "color": "#1971c2", "x": 150, "y": 20, "width": 100, "height": 20},
+    {"name": "legacy alignment is inherited by nested content", "color": "#862e9c", "x": 170, "y": 40, "width": 60, "height": 20},
+    {"name": "auto width block remains fill available", "color": "#c92a2a", "x": 0, "y": 60, "width": 400, "height": 20},
+    {"name": "centered table resets legacy alignment internally", "color": "#5f3dc4", "x": 100, "y": 80, "width": 80, "height": 20},
+    {"name": "center in table cell fills the cell", "color": "#fab005", "x": 100, "y": 100, "width": 200, "height": 20},
+    {"name": "author text alignment overrides the UA rule", "color": "#e8590c", "x": 0, "y": 120, "width": 80, "height": 20},
+    {"name": "pure text center remains fill available", "color": "#2f9e44", "x": 0, "y": 240, "width": 400, "height": 20}
+  ],
   "mixed-content-block": [
     {"name": "full-width block child", "color": "#ccddff", "width": 400}
   ],

render-repros/legacy-center.html

@@ -0,0 +1,95 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>legacy center uses block text alignment</title>
+  <style>
+    html, body { margin: 0; }
+    .host {
+      width: 400px;
+      height: 120px;
+      background: #fff3bf;
+    }
+    .inline-box {
+      display: inline-block;
+      width: 100px;
+      height: 20px;
+      background: #087f5b;
+    }
+    .block-box {
+      width: 100px;
+      height: 20px;
+      background: #1971c2;
+    }
+    .nesting-box {
+      width: 100px;
+      height: 20px;
+    }
+    .nested-inline {
+      display: inline-block;
+      width: 60px;
+      height: 20px;
+      background: #862e9c;
+    }
+    .auto-block {
+      height: 20px;
+      background: #c92a2a;
+    }
+    .center-table {
+      width: 200px;
+      height: 40px;
+      border-spacing: 0;
+      background: #74c0fc;
+    }
+    .center-table td {
+      padding: 0;
+      width: 200px;
+    }
+    .table-inline {
+      display: inline-block;
+      width: 80px;
+      height: 20px;
+      background: #5f3dc4;
+    }
+    .cell-center {
+      height: 20px;
+      background: #fab005;
+    }
+    #legacy {
+      font-size: 0;
+      line-height: 0;
+    }
+    #override {
+      text-align: left;
+    }
+    .override-box {
+      display: inline-block;
+      width: 80px;
+      height: 20px;
+      background: #e8590c;
+    }
+    #pure-center {
+      height: 20px;
+      background: #2f9e44;
+    }
+  </style>
+</head>
+<body>
+  <div class="host">
+    <center id="legacy">
+      <span class="inline-box"></span>
+      <div class="block-box"></div>
+      <div class="nesting-box"><span class="nested-inline"></span></div>
+      <div class="auto-block"></div>
+      <table class="center-table">
+        <tr><td><span class="table-inline"></span></td></tr>
+        <tr><td><center class="cell-center">cell text</center></td></tr>
+      </table>
+    </center>
+  </div>
+  <div class="host">
+    <center id="override"><span class="override-box"></span></center>
+  </div>
+  <div class="host"><center id="pure-center">centered text</center></div>
+</body>
+</html>