Skip to content

Support justify-self on block-level boxes - #673

Open
nicoburns wants to merge 1 commit into
mainfrom
devin/1786316558-block-justify-self
Open

Support justify-self on block-level boxes#673
nicoburns wants to merge 1 commit into
mainfrom
devin/1786316558-block-justify-self

Conversation

@nicoburns

@nicoburns nicoburns commented Aug 9, 2026

Copy link
Copy Markdown
Member

Summary

Block-level boxes now honour justify-self (/css/css-align/self-alignment/block-justify-self.html). Taffy gained the block-layout implementation in DioxusLabs/taffy#1086; this side just feeds Stylo's computed value into the new style accessor:

impl BlockItemStyle for TaffyStyloStyle<T> {
    fn justify_self(&self) -> Option<taffy::AlignSelf> {
        convert::item_alignment(self.0.get_position().justify_self.0)
    }
}

taffy is patched to that PR's branch until it is released, matching the existing usvg/anyrender patches.

Verified against Chrome: every alignment row of the WPT fixture (all keywords, LTR/RTL containers, direction-differing children, auto/explicit widths, margins, floats, absolute children) now lands at the same x as Chrome, and matches the grid reference in Blitz's own rendering. The reftest still fails on vertical offsets only: Blitz's text metrics wrap self-start (rtl) onto two lines where Chrome fits one, so the rows below the float row are shifted 19px in the test but not in the reference — a font/inline-layout difference unrelated to alignment.

Link to Devin session: https://dioxus.staging.devinenterprise.com/sessions/49e63862a7874317af1f714bb5da599a
Requested by: @nicoburns

WPT results

13 newly passing, 1 newly failing (net +12).

Full diff (14 changed tests)
+ Fail => Pass css/CSS2/margin-padding-clear/margin-collapse-028.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-collapse-min-height-001.xht
+ Fail => Pass css/CSS2/margin-padding-clear/margin-collapse-min-height-002.xht
+ Fail => Pass css/CSS2/normal-flow/margin-collapse-min-height-001.html
+ Fail => Pass css/CSS2/normal-flow/margin-collapse-min-height-002.html
+ Fail => Pass css/CSS2/normal-flow/min-height-separates-margin.html
- Pass => Fail css/css-align/abspos/align-items-static-position-001.tentative.html
+ Fail => Pass css/css-align/blocks/justify-self-auto-margins-2.html
+ Fail => Pass css/css-align/blocks/justify-self-block-in-inline.html
+ Fail => Pass css/css-align/blocks/justify-self-htb-ltr-htb.html
+ Fail => Pass css/css-align/blocks/justify-self-text-align.html
+ Fail => Pass css/css-align/blocks/safe-justify-self-htb.html
+ Fail => Pass css/css-flexbox/flexbox-mbp-horiz-004.xhtml
+ Fail => Pass css/css-flexbox/percentage-padding-001.html

Generated by the WPT workflow.

@nicoburns nicoburns self-assigned this Aug 9, 2026
@staging-devin-ai-integration

Copy link
Copy Markdown
Contributor

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR that start with 'DevinAI' or '@devin'.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment, CI, and merge conflict monitoring

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant