LibWeb: Vertical alignment fixes for (text-)top and (text-)bottom

[gmta]

vertical-align: text-top and text-bottom shared the fallback match arm that treats them as baseline, so they were never really implemented. They now align with the top and bottom of the strut's content area.

Separately, per CSS2 §10.8.1 a box with vertical-align: top or bottom is the root of an aligned subtree that does not participate in choosing the line box baseline. We did the opposite, then positioned it against the line box block start, so a box taller than the rest of the line dragged the surrounding content around and produced a line box of the wrong size. The line builder now collects aligned subtrees, grows the line box to fit the tallest one, and shifts each subtree into place once the final size is known. Imports the WPT vertical-align-top-bottom-001 test (20 subtests) plus two ref tests, and adds three layout tests; one existing expectation is rebaselined because a 60px bottom-aligned box with a 20px strut correctly grows the line box upward to 60px rather than 65px.

Fixes the vertical alignment in the hero section on https://www.zeroramp.com/:

Before	After

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: efcc29a4-2720-416e-8281-0a185f42f3a0

📥 Commits

Reviewing files that changed from the base of the PR and between 2e25d7a and f01c515.

📒 Files selected for processing (3)

• Libraries/LibWeb/Rust/src/layout/line_builder.rs
• Tests/LibWeb/Layout/expected/vertical-align-text-top-bottom.txt
• Tests/LibWeb/Layout/input/vertical-align-text-top-bottom.html

🚧 Files skipped from review as they are similar to previous changes (2)

• Tests/LibWeb/Layout/input/vertical-align-text-top-bottom.html
• Libraries/LibWeb/Rust/src/layout/line_builder.rs

---

📝 Walkthrough

Walkthrough

Changes

The line builder adds line-relative aligned subtree tracking for horizontal writing modes. It supports top, bottom, text-top, and text-bottom alignment. Tests cover nested subtrees, atomic inline elements, writing modes, and updated layout geometry.

Vertical alignment

Layer / File(s)	Summary
Alignment tracking and baseline selection Libraries/LibWeb/Rust/src/layout/line_builder.rs	The line builder identifies aligned subtree roots, records extents, resolves alignment values, and updates baseline selection.
Subtree extent and shift application Libraries/LibWeb/Rust/src/layout/line_builder.rs, Tests/LibWeb/Layout/expected/abspos-inline-containing-block-first-last-line-rule.txt	The line builder computes subtree shifts and applies them to fragments and static-position markers. Existing expected geometry reflects the resulting shifts.
Vertical alignment coverage Tests/LibWeb/Layout/*, Tests/LibWeb/Ref/*, Tests/LibWeb/Text/*	Tests cover atomic inline elements, nested subtrees, text-relative alignment, padded inline blocks, vertical writing mode, and expected layout output.

Estimated code review effort: 4 (Complex) | ~45 minutes

Sequence Diagram(s)

sequenceDiagram
  participant LineBuilder
  participant LineRelativeAlignedSubtree
  participant Fragments
  participant StaticPositionMarkers
  LineBuilder->>LineRelativeAlignedSubtree: record subtree extents and alignment
  LineBuilder->>LineRelativeAlignedSubtree: compute deferred top or bottom shift
  LineBuilder->>Fragments: apply resolved subtree shift
  LineBuilder->>StaticPositionMarkers: apply resolved subtree shift

Loading

Possibly related PRs

• LadybirdBrowser/ladybird#10744: Both changes modify inline line-building and baseline or vertical-align handling.
• LadybirdBrowser/ladybird#10907: Both changes modify line_builder.rs text-fragment handling.
• LadybirdBrowser/ladybird#11050: Both changes modify baseline handling in line_builder.rs.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description directly explains the vertical-align implementation, aligned subtree handling, tests, rebaseline, and observed rendering fix.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@Libraries/LibWeb/Rust/src/layout/line_builder.rs`:
- Around line 514-525: Update the text-top and text-bottom calculations in the
relevant line-box alignment method to use the parent inline box’s font metrics
instead of self.containing_style(), and pass those parent metrics through
ancestor offset resolution as well. Preserve the existing offsets and sizing
calculations, then add a regression test covering nested inline boxes with
different parent and containing-block font metrics.

🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 27aa561c-6d93-409c-a4f8-32146c318154

📥 Commits

Reviewing files that changed from the base of the PR and between 99f856c and 2464025.

📒 Files selected for processing (14)

• Libraries/LibWeb/Rust/src/layout/line_builder.rs
• Tests/LibWeb/Layout/expected/abspos-inline-containing-block-first-last-line-rule.txt
• Tests/LibWeb/Layout/expected/vertical-align-bottom-atomic-inline-line-height.txt
• Tests/LibWeb/Layout/expected/vertical-align-line-relative-subtrees.txt
• Tests/LibWeb/Layout/expected/vertical-align-text-top-bottom.txt
• Tests/LibWeb/Layout/input/vertical-align-bottom-atomic-inline-line-height.html
• Tests/LibWeb/Layout/input/vertical-align-line-relative-subtrees.html
• Tests/LibWeb/Layout/input/vertical-align-text-top-bottom.html
• Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/linebox/vertical-align-nested-top-001-ref.html
• Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/linebox/vertical-align-top-bottom-padding-ref.html
• Tests/LibWeb/Ref/input/wpt-import/css/CSS2/linebox/vertical-align-nested-top-001.html
• Tests/LibWeb/Ref/input/wpt-import/css/CSS2/linebox/vertical-align-top-bottom-padding.html
• Tests/LibWeb/Text/expected/wpt-import/css/CSS2/linebox/vertical-align-top-bottom-001.txt
• Tests/LibWeb/Text/input/wpt-import/css/CSS2/linebox/vertical-align-top-bottom-001.html