Implement vertical-align via Parley

Cargo.toml

@@ -107,7 +107,7 @@ taffy = { version = "0.14.0", default-features = false, features = [
     "calc",
     "detailed_layout_info",
 ] }
-parley = { version = "0.11.1", default-features = false, features = ["std"] }
+parley = { git = "https://github.com/DioxusLabs/parley", rev = "7293f707270cb7fb372e7f10f7732956f1e007eb", default-features = false, features = ["std"] }
 skrifa = { version = "0.44", default-features = false, features = [
     "std",
 ] } # Should match parley and vello versions
@@ -317,4 +317,3 @@ rustc-hash = { workspace = true }
 # [patch."https://github.com/linebender/parley"]
 # parley = { path = "../parley/parley" }
 # fontique = { path = "../parley/fontique" }
-

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

@@ -286,15 +286,6 @@ fn push_non_whitespace_children_and_pseudos(layout_children: &mut ThinVec<NodeId
     }
 }
 
-/// Convert a relative line height to an absolute one
-fn resolve_line_height(line_height: parley::LineHeight, font_size: f32) -> f32 {
-    match line_height {
-        parley::LineHeight::FontSizeRelative(relative) => relative * font_size,
-        parley::LineHeight::Absolute(absolute) => absolute,
-        parley::LineHeight::MetricsRelative(relative) => relative * font_size, //unreachable!(),
-    }
-}
-
 /// Result of classifying the in-flow children of a flow container as
 /// all-block, all-inline and/or all-out-of-flow.
 struct FlowClassification {
@@ -1036,8 +1027,6 @@ pub(crate) fn build_inline_layout_into(
         .map(|s| stylo_to_parley::style(inline_context_root_node_id, s))
         .unwrap_or_default();
 
-    let root_line_height = resolve_line_height(parley_style.line_height, parley_style.font_size);
-
     // Create a parley tree builder
     let mut builder = layout_ctx.tree_builder(font_ctx, scale, true, &parley_style);
 
@@ -1086,7 +1075,6 @@ pub(crate) fn build_inline_layout_into(
             before_id,
             collapse_mode,
             text_transform,
-            root_line_height,
         );
     }
     for child_id in root_node.children.iter().copied() {
@@ -1097,7 +1085,6 @@ pub(crate) fn build_inline_layout_into(
             child_id,
             collapse_mode,
             text_transform,
-            root_line_height,
         );
     }
     if let Some(after_id) = root_node.after() {
@@ -1108,7 +1095,6 @@ pub(crate) fn build_inline_layout_into(
             after_id,
             collapse_mode,
             text_transform,
-            root_line_height,
         );
     }
 
@@ -1122,7 +1108,6 @@ pub(crate) fn build_inline_layout_into(
         node_id: NodeId,
         collapse_mode: WhiteSpaceCollapse,
         parent_text_transform: TextTransform,
-        root_line_height: f32,
     ) {
         let node = &nodes[node_id];
 
@@ -1179,7 +1164,6 @@ pub(crate) fn build_inline_layout_into(
                                 child_id,
                                 collapse_mode,
                                 text_transform,
-                                root_line_height,
                             );
                         }
                     }
@@ -1199,6 +1183,11 @@ pub(crate) fn build_inline_layout_into(
                                 // Width and height are set during layout
                                 width: 0.0,
                                 height: 0.0,
+                                baseline: None,
+                                vertical_align: node
+                                    .primary_styles()
+                                    .map(|s| stylo_to_parley::vertical_align(&s))
+                                    .unwrap_or_default(),
                             });
                         } else if *tag_name == local_name!("br") {
                             // node.remove_damage(CONSTRUCT_DESCENDENT | CONSTRUCT_FC | CONSTRUCT_BOX);
@@ -1210,25 +1199,11 @@ pub(crate) fn build_inline_layout_into(
                             builder.set_white_space_mode(collapse_mode);
                         } else {
                             // node.remove_damage(CONSTRUCT_DESCENDENT | CONSTRUCT_FC | CONSTRUCT_BOX);
-                            let mut style = node
+                            let style = node
                                 .primary_styles()
                                 .map(|s| stylo_to_parley::style(node.id, &s))
                                 .unwrap_or_default();
 
-                            // dbg!(&style);
-
-                            let font_size = style.font_size;
-
-                            // Floor the line-height of the span by the line-height of the inline context
-                            // See https://www.w3.org/TR/CSS21/visudet.html#line-height
-                            style.line_height = parley::LineHeight::Absolute(
-                                resolve_line_height(style.line_height, font_size)
-                                    .max(root_line_height),
-                            );
-
-                            // dbg!(node_id);
-                            // dbg!(&style);
-
                             builder.push_style_span(style);
 
                             if let Some(before_id) = node.before() {
@@ -1239,7 +1214,6 @@ pub(crate) fn build_inline_layout_into(
                                     before_id,
                                     collapse_mode,
                                     text_transform,
-                                    root_line_height,
                                 );
                             }
 
@@ -1251,7 +1225,6 @@ pub(crate) fn build_inline_layout_into(
                                     child_id,
                                     collapse_mode,
                                     text_transform,
-                                    root_line_height,
                                 );
                             }
                             if let Some(after_id) = node.after() {
@@ -1262,7 +1235,6 @@ pub(crate) fn build_inline_layout_into(
                                     after_id,
                                     collapse_mode,
                                     text_transform,
-                                    root_line_height,
                                 );
                             }
 
@@ -1279,6 +1251,11 @@ pub(crate) fn build_inline_layout_into(
                             // Width and height are set during layout
                             width: 0.0,
                             height: 0.0,
+                            baseline: None,
+                            vertical_align: node
+                                .primary_styles()
+                                .map(|s| stylo_to_parley::vertical_align(&s))
+                                .unwrap_or_default(),
                         });
                     }
                 };

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

@@ -1,7 +1,10 @@
 use blitz_traits::node_id::NodeId;
 use parley::{AlignmentOptions, IndentOptions};
-use style::values::specified::box_::DisplayOutside;
-use style::values::{computed::CSSPixelLength, generics::text::GenericTextIndent};
+use style::values::specified::box_::{DisplayInside, DisplayOutside};
+use style::values::{
+    computed::{CSSPixelLength, Contain},
+    generics::text::GenericTextIndent,
+};
 use taffy::{
     AvailableSpace, BlockContext, BlockFormattingContext, BoxSizing, CollapsibleMarginSet,
     CoreStyle as _, Direction, LayoutInput, LayoutOutput, LayoutPartialTree as _, MaybeMath as _,
@@ -305,17 +308,58 @@ impl BaseDocument {
             let is_floated = false;
 
             let is_absolute = style.position() == Position::Absolute;
+            // The baseline of an inline-block is the baseline of its last in-flow line box,
+            // unless it has no line boxes or it is a block-axis scroll container, in which
+            // case it is the bottom margin edge (CSS 2 §10.8.1, css-align-3 §9.1
+            // `baseline-source: auto`; `overflow: clip` is not a scroll container). Other
+            // atomic inlines (flex, grid, table) export a baseline regardless of `overflow`,
+            // clamped to their border box if they are scroll containers (css-align-3 §9.1).
+            // A layout-contained box is treated as having no baseline (css-contain-1 §3.3).
+            let overflow = style.overflow();
+            let box_style = style.style.get_box();
+            let is_flow = matches!(
+                box_style.display.inside(),
+                DisplayInside::Flow | DisplayInside::FlowRoot
+            );
+            let is_scroll_container = !matches!(overflow.y, Overflow::Visible | Overflow::Clip);
+            let is_block_axis_scroll_container = is_flow && is_scroll_container;
+            let contain_layout = box_style.clone_contain().contains(Contain::LAYOUT);
+            let exports_baseline = !is_block_axis_scroll_container && !contain_layout;
             drop(style);
 
             if is_absolute || is_floated {
                 ibox.width = 0.0;
                 ibox.height = 0.0;
+                ibox.baseline = None;
             } else {
                 let output = self.compute_child_layout(taffy::NodeId::from(ibox.id), child_inputs);
                 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;
+                ibox.baseline = if exports_baseline {
+                    output
+                        .baselines
+                        .last
+                        .or(output.baselines.first)
+                        .map(|baseline| {
+                            let baseline = if is_scroll_container {
+                                baseline.clamp(0.0, output.size.height)
+                            } else {
+                                baseline
+                            };
+                            (margin.top + baseline) * scale
+                        })
+                } else {
+                    None
+                };
+                // Vertical margins adjust the space the box reserves in the line. A box with a
+                // baseline splits that space into ascent (`margin.top + baseline`) and descent
+                // (`margin.bottom + height - baseline`), either of which may be negative. A box
+                // without a baseline sits on the baseline and cannot reserve negative space.
+                let margin_box_height = margin.top + margin.bottom + output.size.height;
+                ibox.height = if ibox.baseline.is_some() {
+                    margin_box_height * scale
+                } else {
+                    margin_box_height.max(0.0) * scale
+                };
             }
         }
 
@@ -604,7 +648,13 @@ impl BaseDocument {
                         // dbg!(&layout.size);
                         // dbg!(&layout.location);
 
-                        state.append_inline_box_to_line(box_break_data.advance, 0.0);
+                        // Floats are out-of-flow and must not contribute to the line's height.
+                        state.append_inline_box_to_line(
+                            box_break_data.advance,
+                            f32::NEG_INFINITY,
+                            f32::NEG_INFINITY,
+                            true,
+                        );
 
                         // if float.is_floated() {
                         //     println!("INLINE FLOATED BOX ({}) {:?}", ibox.id, float);
@@ -646,8 +696,18 @@ impl BaseDocument {
             },
         );
 
+        // Parley lays out empty text as a single strut-height line (text-editor semantics),
+        // but a line box containing no text, inline boxes or other in-flow content is a
+        // zero-height line box in CSS (CSS2 §9.4.2).
+        let has_inline_content =
+            !inline_layout.text.is_empty() || !inline_layout.layout.inline_boxes().is_empty();
+
         #[allow(unused_mut)]
-        let mut height = inline_layout.layout.height();
+        let mut height = if has_inline_content {
+            inline_layout.layout.height()
+        } else {
+            0.0
+        };
 
         // HACK. TODO: fix in Parley.
         //
@@ -807,13 +867,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
+                        // A box with a baseline is positioned by it, so its border box always
+                        // sits `margin.top` below the margin box (`ibox.y`). Without a 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.
-                        layout.location.y = (ibox.y / scale)
-                            + margin.top.max(0.0)
-                            + container_pb.top
-                            + inset_offset.y;
+                        let margin_top = if ibox.baseline.is_some() {
+                            margin.top
+                        } else {
+                            margin.top.max(0.0)
+                        };
+                        layout.location.y =
+                            (ibox.y / scale) + margin_top + container_pb.top + inset_offset.y;
                         layout.padding = padding; //.map(|p| p / scale);
                         layout.border = border; //.map(|p| p / scale);
                     }
@@ -827,11 +892,14 @@ impl BaseDocument {
         // println!("known_dimensions: w: {:?} h: {:?}", inputs.known_dimensions.width, inputs.known_dimensions.height);
         // println!("\n");
 
-        let first_baseline = inline_layout
-            .layout
-            .lines()
-            .next()
-            .map(|line| (line.metrics().baseline / scale) + container_pb.top);
+        let line_baseline =
+            |line: parley::Line<'_, _>| (line.metrics().baseline / scale) + container_pb.top;
+        let first_baseline = has_inline_content
+            .then(|| inline_layout.layout.lines().next().map(line_baseline))
+            .flatten();
+        let last_baseline = has_inline_content
+            .then(|| inline_layout.layout.lines().last().map(line_baseline))
+            .flatten();
 
         // Put layout back
         self.nodes[node_id]
@@ -854,7 +922,10 @@ impl BaseDocument {
                     bottom: content_extent.height,
                 }
             },
-            baselines: taffy::Baselines::from_first(first_baseline),
+            baselines: taffy::Baselines {
+                first: first_baseline,
+                last: last_baseline,
+            },
             top_margin: CollapsibleMarginSet::ZERO,
             bottom_margin: CollapsibleMarginSet::ZERO,
             margins_can_collapse_through: !has_styles_preventing_being_collapsed_through