render: preserve inline block inner flow

crates/obscura-render/src/dom.rs

@@ -1912,6 +1912,33 @@ fn build(
 
     let mut taffy_style = to_taffy_style(style);
 
+    // CSS has separate outer and inner display types, while taffy exposes one
+    // display value. An inline-block normally needs our wrapping inline
+    // approximation so it remains atomic in an inline formatting context.
+    // As a direct flex/grid item, however, its outer display is blockified and
+    // its flow-root inner display must stack block children. Apply the block
+    // inner mode only in that formatting context; doing it globally turns
+    // inline-block lists into one full-width item per line.
+    if style.is_inline_block {
+        let mut parent = node.parent;
+        let flex_or_grid_item = loop {
+            let Some(parent_id) = parent else { break false };
+            let Some(parent_style) = styles.get(&parent_id) else { break false };
+            if parent_style.display_contents {
+                parent = tree.get_node(parent_id).and_then(|node| node.parent);
+                continue;
+            }
+            break matches!(
+                parent_style.display,
+                crate::Display::Flex | crate::Display::Grid
+            ) && !parent_style.internal_flex_container;
+        };
+        if flex_or_grid_item {
+            taffy_style.display = taffy::style::Display::Block;
+            taffy_style.flex_wrap = taffy::FlexWrap::NoWrap;
+        }
+    }
+
     // A replaced image is a measured leaf, even when CSS gives it a percentage
     // width. Its intrinsic dimensions participate in an auto-sized ancestor's
     // max-content measurement; once the percentage axis becomes definite, the

crates/obscura-render/src/lib.rs

@@ -165,6 +165,10 @@ impl Dimension {
 #[derive(Debug, Clone, Default)]
 pub struct LayoutStyle {
     pub display: Display,
+    /// True when `display:flex` is only an internal stand-in for native HTML
+    /// layout such as table cells or `<center>`, rather than the computed CSS
+    /// display. Descendants are not CSS flex items in these containers.
+    pub internal_flex_container: bool,
     pub width: Dimension,
     pub height: Dimension,
     /// Which box edge `width`/`height` and min/max sizes describe. CSS starts

crates/obscura-render/src/style.rs

@@ -45,6 +45,7 @@ pub fn ua_style(tag: &str) -> LayoutStyle {
     };
     if tag == "center" {
         style.display = Display::Flex;
+        style.internal_flex_container = true;
         style.flex_direction = Some(taffy::FlexDirection::Column);
         style.align_items = Some(taffy::AlignItems::CENTER);
     } else if tag == "head" || tag == "script" || tag == "style" || tag == "title" || tag == "meta" || tag == "link" || tag == "noscript" || tag == "template"
@@ -106,6 +107,7 @@ pub fn ua_style(tag: &str) -> LayoutStyle {
         style.underline = Some(true); // UA default: links are underlined
     } else if tag == "table" || tag == "tbody" {
         style.display = Display::Flex;
+        style.internal_flex_container = true;
         style.flex_direction = Some(taffy::FlexDirection::Column);
         style.align_items = Some(taffy::AlignItems::STRETCH); // stretch rows to fill table width
         // Rows fill the table width and may shrink below their content's
@@ -118,6 +120,7 @@ pub fn ua_style(tag: &str) -> LayoutStyle {
             style.width = crate::Dimension::Percent(1.0);
         }
     } else if tag == "tr" {
+        style.internal_flex_container = true;
         // Rows fill the table width and can shrink below content min-content;
         // this is exactly why Wikipedia's own responsive CSS uses
         // `tr{min-width:100%}`. `align-items:stretch` alone did not pin them
@@ -126,6 +129,7 @@ pub fn ua_style(tag: &str) -> LayoutStyle {
         style.width = crate::Dimension::Percent(1.0);
     } else if tag == "td" || tag == "th" {
         style.display = Display::Flex;
+        style.internal_flex_container = true;
         style.flex_direction = Some(taffy::FlexDirection::Column);
         style.align_items = Some(taffy::AlignItems::FLEX_START);
         style.padding = Edges { top: 0.0, right: 5.0, bottom: 0.0, left: 0.0 };
@@ -241,6 +245,20 @@ fn apply_value(style: &mut LayoutStyle, name: &str, value: &str) {
             if value != "contents" {
                 style.display_contents = false;
             }
+            if matches!(
+                value,
+                "none"
+                    | "flex"
+                    | "inline-flex"
+                    | "inline"
+                    | "inline-block"
+                    | "grid"
+                    | "inline-grid"
+                    | "block"
+                    | "contents"
+            ) {
+                style.internal_flex_container = false;
+            }
             match value {
                 "none" => style.display = crate::Display::None,
                 "flex" => style.display = crate::Display::Flex,
@@ -2577,6 +2595,20 @@ mod tests {
         assert_eq!(s.height, crate::Dimension::Px(50.0));
     }
 
+    #[test]
+    fn authored_display_replaces_internal_flex_provenance() {
+        let native_cell = compute_style("td", None);
+        assert_eq!(native_cell.display, Display::Flex);
+        assert!(native_cell.internal_flex_container);
+
+        let authored_cell = compute_style("td", Some("display:flex"));
+        assert_eq!(authored_cell.display, Display::Flex);
+        assert!(!authored_cell.internal_flex_container);
+
+        let invalid = compute_style("td", Some("display:bogus"));
+        assert!(invalid.internal_flex_container);
+    }
+
     #[test]
     fn font_shorthand_expands_layout_fields_and_resets_omissions() {
         let s = compute_style(