render: revive display contents wrappers

crates/obscura-render/src/style.rs

@@ -328,7 +328,15 @@ fn apply_value(style: &mut LayoutStyle, name: &str, value: &str) {
                     style.display = crate::Display::Block;
                     style.flow_root = true;
                 }
-                "contents" => style.display_contents = true,
+                "contents" => {
+                    // `display:contents` can override an earlier `display:none`
+                    // in the cascade (responsive desktop/mobile wrappers do
+                    // this constantly). It suppresses only this element's box;
+                    // its children remain generated and are flattened into the
+                    // parent formatting context.
+                    style.display = crate::Display::Block;
+                    style.display_contents = true;
+                }
                 _ => {}
             }
         }
@@ -3276,6 +3284,13 @@ mod tests {
         assert!(infinite.animation_iteration_infinite);
     }
 
+    #[test]
+    fn display_contents_overrides_an_earlier_display_none() {
+        let style = compute_style("div", Some("display:none; display:contents"));
+        assert_eq!(style.display, Display::Block);
+        assert!(style.display_contents);
+    }
+
     #[test]
     fn authored_display_replaces_internal_flex_provenance() {
         let native_cell = compute_style("td", None);

render-repros/checks.json

@@ -56,6 +56,10 @@
     {"name": "max padding uses actual viewport", "color": "#c2255c", "x": 60, "y": 240, "width": 20, "height": 40},
     {"name": "round quantizes nested custom property math", "color": "#2f9e44", "x": 0, "y": 300, "width": 250, "height": 40}
   ],
+  "display-contents-cascade": [
+    {"name": "display contents overrides hidden responsive wrapper", "color": "#087f5b", "x": 0, "y": 0, "width": 200, "height": 80},
+    {"name": "flattened sibling remains in parent flex flow", "color": "#1971c2", "x": 200, "y": 0, "width": 200, "height": 80}
+  ],
   "eventtarget-lifecycle": [
     {"name": "framework lifecycle EventTarget completes", "color": "#18723a", "x": 0, "y": 0, "width": 420, "height": 120}
   ],

render-repros/display-contents-cascade.html

@@ -0,0 +1,33 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Display contents cascade</title>
+  <style>
+    html, body { margin: 0; }
+    nav {
+      width: 400px;
+      height: 80px;
+      display: flex;
+    }
+    .desktop { display: none; }
+    .item {
+      width: 200px;
+      height: 80px;
+    }
+    .first { background: #087f5b; }
+    .second { background: #1971c2; }
+    @media (width >= 832px) {
+      .desktop { display: contents; }
+    }
+  </style>
+</head>
+<body>
+  <nav>
+    <div class="desktop">
+      <div class="item first"></div>
+      <div class="item second"></div>
+    </div>
+  </nav>
+</body>
+</html>