feat(htmlcss): inline-block siblings via Taffy flex-wrap emulation#691
feat(htmlcss): inline-block siblings via Taffy flex-wrap emulation#691softmarshmallow merged 1 commit intohtmlcssfrom
Conversation
Taffy has no inline formatting context, so a block container holding `display: inline-block` siblings previously either stacked them vertically (when preserved as elements) or dropped their width/height (when flattened into an InlineGroup). Both broke the WPT ref pattern where two or more explicit-size inline-blocks should sit side-by-side. - collect.rs: preserve inline-block as an element when it has an explicit width or height instead of flattening into the inline path. - layout.rs: at Taffy-style time, detect containers whose element children are all inline-block (>=2, no text or other block children) and switch the container to Flex + flex-wrap:wrap + align-items:start. Lands layout-display-inline-block.html in L0.exact (65 fixtures, all 100.00%). Unlocks WPT refs that rely on inline-block for horizontal layout (37% of css-flexbox, 30% of css-position refs).
|
The latest updates on your projects. Learn more about Vercel for GitHub.
3 Skipped Deployments
|
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 18bbc0176b
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| let inline_block_with_size = child.display == types::Display::InlineBlock | ||
| && (child.width != types::CssLength::Auto | ||
| || child.height != types::CssLength::Auto); | ||
| let is_inline = (child.display == types::Display::Inline | ||
| || child.display == types::Display::InlineBlock) | ||
| && !inline_block_with_size; |
There was a problem hiding this comment.
Marking every sized display:inline-block as non-inline here forces it out of InlineGroup, but the later emulation only runs when the parent has no text/inline groups and at least two inline-block elements. In mixed content (for example text + inline-block + text) or a single inline-block, the parent stays block and this node is laid out as a block child, inserting unintended line breaks around content that should remain in one inline formatting context.
Useful? React with 👍 / 👎.
| style.display = taffy::Display::Flex; | ||
| style.flex_wrap = taffy::FlexWrap::Wrap; |
There was a problem hiding this comment.
After switching a block container to flex for inline-block emulation, the code keeps whatever flex-direction was parsed from CSS; that property is inert on block elements but can still compute to column, and once the display is changed it becomes active and stacks children vertically. To reliably emulate inline-block siblings, this branch should also set flex_direction to row (and avoid inheriting flex-only controls that were previously ignored).
Useful? React with 👍 / 👎.
1 participant
Summary
Sub-PR for #690 — lands the first of the four tier-0 WPT primitives (
display: inline-block).Taffy has no inline formatting context, so a block container holding
display: inline-blocksiblings previously either stacked them vertically (when preserved as elements) or dropped their width/height (when flattened into anInlineGroup). Both broke the WPT ref pattern where ≥2 explicit-size inline-blocks should sit side-by-side.Flex + flex-wrap: wrap + align-items: start.Impact on WPT refs
Unlocks refs that rely on inline-block for horizontal layout: ~37% of css-flexbox refs, ~30% of css-position refs (per
~/Desktop/grida-wpt/ref-primitives-inventory.md).Gate
gate.floor=1.0,threshold=0,aa=trueunchanged.fixtures/test-html/L0/layout-display-inline-block.html(paint-style, four equal-size blocks laid out viafont-size:0parent to kill inter-element whitespace).Tier-0 primitives — remaining work
The loop also audited priorities 2–4; here's what they need before they can be pursued:
<svg>usvg::Treewiring + Skia paint.floatwriting-mode: vertical-*layout.writing-mode.enabledpref is missing fromstylo_static_prefs/src/lib.rsand defaults tofalse; declarations are rejected at parse time and never reachComputedStyle::clone_writing_mode(). Needs a cross-repo patch to gridaco/stylo.Test plan
cargo build -p grida_wpt --releasecargo clippy --no-deps -- -D warningscargo test -p cg🤖 Generated with Claude Code