Use first baseline for inline flex/grid, bump parley for strut + negative-leading fixes

- Inline-block uses its last in-flow line box baseline, but inline
  flex/grid containers use their first baseline per css-align.
- Bump parley to DioxusLabs/parley#10 which fixes clamping of negative
  half-leading in line extents and adds opt-in CSS2 \u00a7 10.8 line-box strut
  support; enable the strut in Blitz's inline layout.
- With an explicit baseline, an inline box's line-height contribution may
  legitimately be negative, so only clamp reserved space for bottom-aligned
  boxes, and position baseline-aligned boxes from the top of their margin
  box.

Author: nicoburns

Cargo.lock

@@ -105,7 +105,7 @@ taffy = { git = "https://github.com/DioxusLabs/taffy", rev = "f8a606e69ddf6a9f76
     "calc",
     "detailed_layout_info",
 ] }
-parley = { git = "https://github.com/DioxusLabs/parley", rev = "a0752c7bdc3ad88dac19fc194d2b8e57e59bea2e", default-features = false, features = ["std"] }
+parley = { git = "https://github.com/DioxusLabs/parley", rev = "98db0dd04dd380b16a86afa7f000982da2892985", default-features = false, features = ["std"] }
 skrifa = { version = "0.44", default-features = false, features = [
     "std",
 ] } # Should match parley and vello versions

Cargo.toml

@@ -1031,6 +1031,7 @@ pub(crate) fn build_inline_layout_into(
 
     // Create a parley tree builder
     let mut builder = layout_ctx.tree_builder(font_ctx, scale, true, &parley_style);
+    builder.set_compute_strut(true);
 
     // Set whitespace collapsing mode
     let collapse_mode = root_node_style

packages/blitz-dom/src/layout/construct.rs

@@ -4,9 +4,9 @@ use style::values::specified::box_::DisplayOutside;
 use style::values::{computed::CSSPixelLength, generics::text::GenericTextIndent};
 use taffy::{
     AvailableSpace, BlockContext, BlockFormattingContext, BoxSizing, CollapsibleMarginSet,
-    CoreStyle as _, Direction, LayoutInput, LayoutOutput, LayoutPartialTree as _, MaybeMath as _,
-    MaybeResolve as _, Overflow, Point, Position, RequestedAxis, ResolveOrZero as _, RunMode, Size,
-    SizingMode,
+    CoreStyle as _, Direction, Display, LayoutInput, LayoutOutput, LayoutPartialTree as _,
+    MaybeMath as _, MaybeResolve as _, Overflow, Point, Position, RequestedAxis,
+    ResolveOrZero as _, RunMode, Size, SizingMode,
 };
 
 #[cfg(feature = "floats")]
@@ -306,24 +306,33 @@ impl BaseDocument {
             } else {
                 let is_scroll_container = style.overflow.x.is_scroll_container()
                     || style.overflow.y.is_scroll_container();
+                let display = style.display;
                 let output = self.compute_child_layout(taffy::NodeId::from(ibox.id), child_inputs);
                 // Per CSS, an in-flow inline-block is baseline-aligned to the baseline of its
-                // last in-flow line box, unless it is a scroll container or has no in-flow line
-                // boxes, in which case its baseline is its bottom margin edge (Parley's fallback
-                // when `baseline` is `None`, since `ibox.height` includes margins).
+                // last in-flow line box, while inline flex/grid containers use their first
+                // baseline. A scroll container or a box with no natural baseline uses its
+                // bottom margin edge (Parley's fallback when `baseline` is `None`, since
+                // `ibox.height` includes margins).
+                let baseline = match display {
+                    Display::Flex | Display::Grid => output.baselines.first,
+                    _ => output.baselines.last,
+                };
                 ibox.baseline = if is_scroll_container {
                     None
                 } else {
-                    output
-                        .baselines
-                        .last
-                        .or(output.baselines.first)
-                        .map(|baseline| (margin.top + baseline) * scale)
+                    baseline.map(|baseline| (margin.top + baseline) * scale)
                 };
                 ibox.width = (margin.left + margin.right + output.size.width) * scale;
-                // Vertical margins adjust the space the box reserves in the line, but the
-                // reserved space cannot be negative.
-                ibox.height = (margin.top + margin.bottom + output.size.height).max(0.0) * scale;
+                // Vertical margins adjust the space the box reserves in the line. With an
+                // explicit baseline the ascent/descent contributions may legitimately be
+                // negative, but a bottom-aligned box (no baseline) contributes its height
+                // as ascent, and the space it reserves cannot be negative.
+                let height = margin.top + margin.bottom + output.size.height;
+                ibox.height = if ibox.baseline.is_some() {
+                    height * scale
+                } else {
+                    height.max(0.0) * scale
+                };
             }
         }
 
@@ -598,7 +607,7 @@ impl BaseDocument {
                         // dbg!(&layout.size);
                         // dbg!(&layout.location);
 
-                        state.append_inline_box_to_line(box_break_data.advance, 0.0, 0.0, false);
+                        state.append_inline_box_to_line(box_break_data.advance, None, false);
 
                         // if float.is_floated() {
                         //     println!("INLINE FLOATED BOX ({}) {:?}", ibox.id, float);
@@ -807,11 +816,18 @@ impl BaseDocument {
                         layout.size = size;
                         layout.location.x =
                             (ibox.x / scale) + margin.left + container_pb.left + inset_offset.x;
-                        // A negative `margin-top` shrinks the space the box reserves in the
-                        // line but does not move the box itself, which stays anchored to the
-                        // bottom of the reserved space.
+                        // For a baseline-aligned box, `ibox.y` is the top of the margin box,
+                        // so the border box sits `margin.top` below it. For a bottom-aligned
+                        // box (no baseline), a negative `margin-top` shrinks the space the box
+                        // reserves in the line but does not move the box itself, which stays
+                        // anchored to the bottom of the reserved space.
+                        let margin_top_offset = if ibox.baseline.is_some() {
+                            margin.top
+                        } else {
+                            margin.top.max(0.0)
+                        };
                         layout.location.y = (ibox.y / scale)
-                            + margin.top.max(0.0)
+                            + margin_top_offset
                             + container_pb.top
                             + inset_offset.y;
                         layout.padding = padding; //.map(|p| p / scale);