test: gate right-float navigation geometry

crates/obscura-render/tests/layout_test.rs

@@ -741,3 +741,33 @@ fn mixed_float_run_shares_one_band() {
         "right float: {right_one:?}"
     );
 }
+
+#[test]
+fn right_float_navigation_shares_inline_band() {
+    let tree = parse_html(include_str!(
+        "../../../render-repros/right-float-navigation.html"
+    ));
+    let layout = layout_dom(&tree, (900.0, 1000.0));
+    let rect = |id| layout.rects[&tree.get_element_by_id(id).unwrap()];
+    let left_one = rect("left-one");
+    let left_two = rect("left-two");
+    let right_one = rect("right-one");
+    let right_two = rect("right-two");
+    let right_three = rect("right-three");
+    assert!(
+        (left_one.x - 0.0).abs() < 0.01
+            && (left_one.y - 0.0).abs() < 0.01
+            && (left_two.x - 64.0).abs() < 0.01
+            && (left_two.y - 0.0).abs() < 0.01,
+        "inline flow: {left_one:?} {left_two:?}"
+    );
+    assert!(
+        (right_three.x - 280.0).abs() < 0.01
+            && (right_three.y - 0.0).abs() < 0.01
+            && (right_two.x - 310.0).abs() < 0.01
+            && (right_two.y - 0.0).abs() < 0.01
+            && (right_one.x - 360.0).abs() < 0.01
+            && (right_one.y - 0.0).abs() < 0.01,
+        "right float order: {right_three:?} {right_two:?} {right_one:?}"
+    );
+}

render-repros/checks.json

@@ -160,6 +160,13 @@
     {"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}
   ],
+  "right-float-navigation": [
+    {"name": "first inline item stays at band start", "color": "#087f5b", "x": 0, "y": 0, "width": 60, "height": 30},
+    {"name": "second inline item keeps source order", "color": "#1971c2", "x": 64, "y": 0, "width": 80, "height": 30},
+    {"name": "last right float is visually first", "color": "#2f9e44", "x": 280, "y": 0, "width": 30, "height": 30},
+    {"name": "middle right float follows inward", "color": "#862e9c", "x": 310, "y": 0, "width": 50, "height": 30},
+    {"name": "first right float reaches band end", "color": "#e8590c", "x": 360, "y": 0, "width": 40, "height": 30}
+  ],
   "tables": [
     {"name": "content-box fixed cell column", "color": "#ffcc99", "width": 208}
   ],

render-repros/right-float-navigation.html

@@ -0,0 +1,55 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>right float navigation</title>
+  <style>
+    html, body { margin: 0; }
+    #bar {
+      width: 400px;
+      height: 30px;
+      overflow: hidden;
+      background: #343a40;
+    }
+    #bar span {
+      display: inline-block;
+      height: 30px;
+    }
+    #left-one {
+      width: 60px;
+      background: #087f5b;
+    }
+    #left-two {
+      width: 80px;
+      background: #1971c2;
+    }
+    #right-one {
+      float: right;
+      width: 40px;
+      height: 30px;
+      background: #e8590c;
+    }
+    #right-two {
+      float: right;
+      width: 50px;
+      height: 30px;
+      background: #862e9c;
+    }
+    #right-three {
+      float: right;
+      width: 30px;
+      height: 30px;
+      background: #2f9e44;
+    }
+  </style>
+</head>
+<body>
+  <nav id="bar">
+    <span id="left-one"></span>
+    <div id="right-one"></div>
+    <span id="left-two"></span>
+    <div id="right-two"></div>
+    <div id="right-three"></div>
+  </nav>
+</body>
+</html>