test: gate replaced grid geometry

crates/obscura-render/tests/layout_test.rs

@@ -4,7 +4,8 @@
 //! site-specific hacks that used to live in obscura-render for this exact markup.
 
 use obscura_dom::tree_sink::parse_html;
-use obscura_render::layout_dom;
+use obscura_render::{layout_dom, layout_dom_with_images};
+use std::collections::HashMap;
 
 const HN_HTML: &str = r##"
     <table border="0" cellpadding="0" cellspacing="0" width="85%" bgcolor="#f6f6ef">
@@ -359,3 +360,34 @@ fn float_flow_zone_preserves_blocks_inline_runs_and_clearance() {
         "display:none duplicate generated a box"
     );
 }
+
+#[test]
+fn replaced_image_contributes_intrinsic_size_in_ordered_grid() {
+    let tree = parse_html(include_str!("../../../render-repros/replaced-grid-order.html"));
+    let image_id = tree.get_element_by_id("image").unwrap();
+    let intrinsic = HashMap::from([(image_id, (1.0, 1.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 description = rect("description");
+    let media = rect("media");
+    let image = rect("image");
+    assert!(
+        (description.x - 0.0).abs() < 0.01
+            && (description.y - 0.0).abs() < 0.01
+            && (description.width - 300.0).abs() < 0.01,
+        "description: {description:?}"
+    );
+    assert!(
+        (media.x - 300.0).abs() < 0.01
+            && (media.y - 0.0).abs() < 0.01
+            && (media.height - 300.0).abs() < 0.01,
+        "media: {media:?}"
+    );
+    assert!(
+        (image.x - 320.0).abs() < 0.01
+            && (image.y - 20.0).abs() < 0.01
+            && (image.width - 260.0).abs() < 0.01
+            && (image.height - 260.0).abs() < 0.01,
+        "image: {image:?}"
+    );
+}

render-repros/checks.json

@@ -97,6 +97,11 @@
     {"name": "vmin margin resolves against smaller viewport axis", "color": "#f08c00", "x": 90, "y": 440, "width": 100, "height": 40},
     {"name": "vmax margin resolves against larger viewport axis", "color": "#1098ad", "x": 100, "y": 520, "width": 100, "height": 40}
   ],
+  "replaced-grid-order": [
+    {"name": "order-modified description occupies the first grid cell", "color": "#e8590c", "x": 0, "y": 0, "width": 300, "height": 200},
+    {"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}
+  ],
   "tables": [
     {"name": "content-box fixed cell column", "color": "#ffcc99", "width": 208}
   ],

render-repros/replaced-grid-order.html

@@ -0,0 +1,44 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>replaced intrinsic grid order</title>
+  <style>
+    html, body { margin: 0; }
+    #grid {
+      display: grid;
+      width: 600px;
+      grid-template-columns: repeat(2, 300px);
+    }
+    #media {
+      order: 2;
+      grid-column: 2;
+      margin: 0;
+      padding: 20px;
+      background: #1971c2;
+    }
+    #image {
+      display: block;
+      width: 100%;
+      height: auto;
+      max-width: 100%;
+      background: #c2255c;
+    }
+    #description {
+      order: 1;
+      grid-column: 1;
+      width: auto;
+      height: 200px;
+      background: #e8590c;
+    }
+  </style>
+</head>
+<body>
+  <div id="grid">
+    <figure id="media">
+      <img id="image" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'%3E%3Crect width='1' height='1' fill='%23c2255c'/%3E%3C/svg%3E">
+    </figure>
+    <section id="description"></section>
+  </div>
+</body>
+</html>