test: gate replaced wrapper geometry

crates/obscura-render/tests/layout_test.rs

@@ -392,6 +392,40 @@ fn replaced_image_contributes_intrinsic_size_in_ordered_grid() {
     );
 }
 
+#[test]
+fn auto_block_wrapper_contains_percentage_replaced_child() {
+    let tree = parse_html(include_str!("../../../render-repros/replaced-block-wrapper.html"));
+    let image_id = tree.get_element_by_id("image").unwrap();
+    let intrinsic = HashMap::from([(image_id, (720.0, 424.0))]);
+    let layout = layout_dom_with_images(&tree, (900.0, 1000.0), &intrinsic);
+    let rect = |id| layout.rects[&tree.get_element_by_id(id).unwrap()];
+    let media = rect("media");
+    let frame = rect("frame");
+    let wrapper = rect("wrapper");
+    let image = rect("image");
+    assert!(
+        (media.x - 450.0).abs() < 0.01
+            && (media.width - 450.0).abs() < 0.01,
+        "media: {media:?}"
+    );
+    assert!(
+        (frame.x - 450.0).abs() < 0.01
+            && (frame.width - 450.0).abs() < 0.01,
+        "frame: {frame:?}"
+    );
+    assert!(
+        (wrapper.x - 498.0).abs() < 0.01
+            && (wrapper.width - 354.0).abs() < 0.01,
+        "wrapper: {wrapper:?}"
+    );
+    assert!(
+        (image.x - 498.0).abs() < 0.01
+            && (image.width - 354.0).abs() < 0.01
+            && (image.height - 208.0).abs() < 0.02,
+        "image: {image:?}"
+    );
+}
+
 #[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

@@ -107,6 +107,10 @@
     {"name": "media wrapper shares the first row", "color": "#1971c2", "x": 300, "y": 0, "width": 300, "height": 300},
     {"name": "percentage image uses the wrapper content box", "color": "#c2255c", "x": 320, "y": 20, "width": 260, "height": 260}
   ],
+  "replaced-block-wrapper": [
+    {"name": "text alignment leaves the block frame at available width", "color": "#1971c2", "x": 450, "y": 0, "width": 450, "height": 304},
+    {"name": "auto block wrapper contains its percentage image", "color": "#c2255c", "x": 498, "y": 48, "width": 354, "height": 208}
+  ],
   "tables": [
     {"name": "content-box fixed cell column", "color": "#ffcc99", "width": 208}
   ],

render-repros/replaced-block-wrapper.html

@@ -0,0 +1,55 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>replaced element in an auto block wrapper</title>
+  <style>
+    html { box-sizing: border-box; }
+    *, ::before, ::after { box-sizing: inherit; }
+    html, body { margin: 0; }
+    #grid {
+      display: grid;
+      width: 900px;
+      grid-template-columns: repeat(2, 450px);
+    }
+    #description {
+      width: auto;
+      height: 300px;
+      background: #e8590c;
+    }
+    #media {
+      width: auto;
+      min-width: 0;
+    }
+    #frame {
+      width: auto;
+      margin: 0;
+      padding: 48px;
+      background: #1971c2;
+      text-align: center;
+    }
+    #wrapper {
+      display: block;
+      width: auto;
+    }
+    #image {
+      display: block;
+      width: 100%;
+      height: auto;
+      max-width: 100%;
+    }
+  </style>
+</head>
+<body>
+  <div id="grid">
+    <section id="description"></section>
+    <div id="media">
+      <figure id="frame">
+        <picture id="wrapper">
+          <img id="image" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='424'%3E%3Crect width='720' height='424' fill='%23c2255c'/%3E%3C/svg%3E">
+        </picture>
+      </figure>
+    </div>
+  </div>
+</body>
+</html>