test: gate opposing float geometry

crates/obscura-render/tests/layout_test.rs

@@ -391,3 +391,33 @@ fn replaced_image_contributes_intrinsic_size_in_ordered_grid() {
         "image: {image:?}"
     );
 }
+
+#[test]
+fn opposing_floats_share_header_band_through_inline_wrapper() {
+    let tree = parse_html(include_str!("../../../render-repros/opposing-header-floats.html"));
+    let layout = layout_dom(&tree, (900.0, 1000.0));
+    let rect = |id| layout.rects[&tree.get_element_by_id(id).unwrap()];
+    let logo = rect("logo");
+    let tagline = rect("tagline");
+    let menu = rect("menu");
+    assert!(
+        (logo.x - 0.0).abs() < 0.01
+            && (logo.y - 0.0).abs() < 0.01
+            && (logo.width - 200.0).abs() < 0.01
+            && (logo.height - 100.0).abs() < 0.01,
+        "logo: {logo:?}"
+    );
+    assert!(
+        (tagline.x - 600.0).abs() < 0.01
+            && (tagline.y - 60.0).abs() < 0.01
+            && (tagline.width - 300.0).abs() < 0.01
+            && (tagline.height - 40.0).abs() < 0.01,
+        "tagline: {tagline:?}"
+    );
+    assert!(
+        (menu.x - 0.0).abs() < 0.01
+            && (menu.y - 100.0).abs() < 0.01
+            && (menu.width - 900.0).abs() < 0.01,
+        "menu: {menu:?}"
+    );
+}

render-repros/checks.json

@@ -89,6 +89,11 @@
   "modern-streams": [
     {"name": "streamed hydration contracts", "color": "#186aa5", "width": 360, "height": 90}
   ],
+  "opposing-header-floats": [
+    {"name": "inline wrapper exposes left float to header BFC", "color": "#1971c2", "x": 0, "y": 0, "width": 200, "height": 100},
+    {"name": "opposing float shares the same band", "color": "#e8590c", "x": 600, "y": 60, "width": 300, "height": 40},
+    {"name": "cleared navigation follows the float band", "color": "#087f5b", "x": 0, "y": 100, "width": 900, "height": 50}
+  ],
   "relative-box-edges": [
     {"name": "vh margin resolves against viewport height", "color": "#087f5b", "x": 0, "y": 150, "width": 100, "height": 40},
     {"name": "vw margin resolves against viewport width", "color": "#1971c2", "x": 90, "y": 200, "width": 100, "height": 40},

render-repros/opposing-header-floats.html

@@ -0,0 +1,38 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>opposing header floats</title>
+  <style>
+    html, body { margin: 0; }
+    #header { width: 900px; }
+    #logo {
+      float: left;
+      width: 200px;
+      height: 100px;
+      background: #1971c2;
+    }
+    #tagline {
+      float: right;
+      width: 300px;
+      height: 40px;
+      margin-top: 60px;
+      background: #e8590c;
+    }
+    #menu {
+      clear: both;
+      width: 900px;
+      height: 50px;
+      background: #087f5b;
+    }
+  </style>
+</head>
+<body>
+  <header id="header">
+    <a id="logo-link"><div id="logo"></div></a>
+    <div id="legacy-empty"></div>
+    <div id="tagline"></div>
+    <nav id="menu"></nav>
+  </header>
+</body>
+</html>