test: gate flex item geometry

crates/obscura-render/src/lib.rs

@@ -874,6 +874,37 @@ mod tests {
         assert!((out.children[1].border_box.x - 650.0).abs() < 0.01);
     }
 
+    #[test]
+    fn negative_flex_margin_overlays_without_shifting_items() {
+        let main = make_box(Display::Block, 900.0, 200.0);
+        let sidebar = LayoutStyle {
+            display: Display::Flex,
+            width: Dimension::Px(225.0),
+            height: Dimension::Px(180.0),
+            margin: Edges {
+                left: -900.0,
+                ..Default::default()
+            },
+            ..Default::default()
+        };
+        let root = LayoutNode {
+            style: make_box(Display::Flex, 900.0, 220.0),
+            text: None,
+            children: vec![LayoutNode::leaf(main), LayoutNode::leaf(sidebar)],
+        };
+        let out = layout(&root, (900.0, 220.0));
+        assert!(
+            out.children[0].border_box.x.abs() < 0.01,
+            "main shifted to {:?}",
+            out.children[0].border_box
+        );
+        assert!(
+            out.children[1].border_box.x.abs() < 0.01,
+            "overlay shifted to {:?}",
+            out.children[1].border_box
+        );
+    }
+
     #[test]
     fn flex_row_lays_out_horizontally() {
         let root = LayoutNode {

crates/obscura-render/tests/layout_test.rs

@@ -265,3 +265,70 @@ fn long_text_run_wraps_across_multiple_lines() {
         div_rect.height
     );
 }
+
+#[test]
+fn negative_flex_margin_overlays_at_container_start() {
+    let html = r##"
+        <html><head><style>
+          html,body{margin:0}
+          #document{display:flex;width:900px;height:220px}
+          #main{width:100%;height:200px}
+          #body{margin-left:225px;height:200px}
+          #sidebar{display:flex;width:225px;height:180px;margin-left:-100%}
+        </style></head><body>
+          <div id="document">
+            <div id="main"><div id="body"></div></div>
+            <div id="sidebar"></div>
+          </div>
+        </body></html>
+    "##;
+    let tree = parse_html(html);
+    let layout = layout_dom(&tree, (900.0, 1000.0));
+    let document = layout.rects[&tree.get_element_by_id("document").unwrap()];
+    let main = layout.rects[&tree.get_element_by_id("main").unwrap()];
+    let body = layout.rects[&tree.get_element_by_id("body").unwrap()];
+    let sidebar = layout.rects[&tree.get_element_by_id("sidebar").unwrap()];
+    assert!((document.x - 0.0).abs() < 0.01, "document: {document:?}");
+    assert!((main.x - 0.0).abs() < 0.01, "main: {main:?}");
+    assert!((body.x - 225.0).abs() < 0.01, "body: {body:?}");
+    assert!((sidebar.x - 0.0).abs() < 0.01, "sidebar: {sidebar:?}");
+}
+
+#[test]
+fn percentage_flex_overlay_uses_auto_width_parent_content_box() {
+    let html = r##"
+        <html><head><style>
+          html,body{margin:0}
+          body{margin-left:1em;margin-right:1em}
+          #document{display:flex}
+          #main{float:left;width:100%;height:200px}
+          #body{margin-left:min(25vw,350px);height:200px}
+          #sidebar{
+            display:flex;
+            width:min(25vw,350px);
+            height:180px;
+            margin-left:-100%;
+            float:none;
+            position:sticky;
+            top:0
+          }
+        </style></head><body>
+          <div id="document">
+            <div id="main"><div id="body"></div></div>
+            <div id="sidebar"></div>
+          </div>
+        </body></html>
+    "##;
+    let tree = parse_html(html);
+    let layout = layout_dom(&tree, (1280.0, 1400.0));
+    let document = layout.rects[&tree.get_element_by_id("document").unwrap()];
+    let main = layout.rects[&tree.get_element_by_id("main").unwrap()];
+    let body = layout.rects[&tree.get_element_by_id("body").unwrap()];
+    let sidebar = layout.rects[&tree.get_element_by_id("sidebar").unwrap()];
+    assert!((document.x - 16.0).abs() < 0.01, "document: {document:?}");
+    assert!((document.width - 1248.0).abs() < 0.01, "document: {document:?}");
+    assert!((main.x - 16.0).abs() < 0.01, "main: {main:?}");
+    assert!((body.x - 336.0).abs() < 0.01, "body: {body:?}");
+    assert!((sidebar.x - 16.0).abs() < 0.01, "sidebar: {sidebar:?}");
+    assert!((sidebar.width - 320.0).abs() < 0.01, "sidebar: {sidebar:?}");
+}