test: gate constrained replaced geometry

crates/obscura-render/tests/layout_test.rs

@@ -296,6 +296,32 @@ fn list_indentation_is_reset_from_the_container() {
     );
 }
 
+#[test]
+fn replaced_max_height_clamps_intrinsic_aspect_transfer() {
+    let tree = parse_html(include_str!(
+        "../../../render-repros/max-height-replaced.html"
+    ));
+    let image_id = tree.get_element_by_id("image").unwrap();
+    let intrinsic = HashMap::from([(image_id, (648.0, 440.0))]);
+    let layout = layout_dom_with_images(&tree, (900.0, 1000.0), &intrinsic);
+    let card = layout.rects[&tree.get_element_by_id("card").unwrap()];
+    let image = layout.rects[&image_id];
+    assert!(
+        (card.x - 0.0).abs() < 0.01
+            && (card.y - 0.0).abs() < 0.01
+            && (card.width - 394.0).abs() < 0.01
+            && (card.height - 608.0).abs() < 0.01,
+        "card: {card:?}"
+    );
+    assert!(
+        (image.x - 32.0).abs() < 0.01
+            && (image.y - 64.0).abs() < 0.01
+            && (image.width - 330.0).abs() < 0.01
+            && (image.height - 200.0).abs() < 0.01,
+        "image: {image:?}"
+    );
+}
+
 #[test]
 fn transforms_establish_absolute_and_fixed_containing_blocks() {
     let html = r##"

render-repros/checks.json

@@ -114,6 +114,9 @@
     {"name": "ordered list reset removes indentation", "color": "#862e9c", "x": 0, "y": 80, "width": 400, "height": 20},
     {"name": "ex padding follows font x height", "color": "#e8590c", "x": 0, "y": 120, "width": 44, "height": 22}
   ],
+  "max-height-replaced": [
+    {"name": "max height clamps intrinsic aspect transfer", "color": "#1971c2", "x": 32, "y": 64, "width": 330, "height": 200}
+  ],
   "mixed-content-block": [
     {"name": "full-width block child", "color": "#ccddff", "width": 400}
   ],

render-repros/max-height-replaced.html

@@ -0,0 +1,39 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>max height replaced element</title>
+  <style>
+    html, body { margin: 0; }
+    #card {
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      width: 394px;
+      height: 608px;
+      padding: 32px;
+      overflow: hidden;
+      background: #f5f6f7;
+    }
+    #media {
+      align-self: flex-start;
+      width: 100%;
+      margin: 32px 0 0;
+    }
+    #image {
+      display: block;
+      width: 100%;
+      height: auto;
+      max-height: 200px;
+      object-fit: cover;
+    }
+  </style>
+</head>
+<body>
+  <div id="card">
+    <figure id="media">
+      <img id="image" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='648' height='440'%3E%3Crect width='648' height='440' fill='%231971c2'/%3E%3C/svg%3E">
+    </figure>
+  </div>
+</body>
+</html>