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

1 participant