Skip to content

Support flex-wrap: balance and flex-line-count (CSS Flexbox Level 2) - #717

Open
nicoburns wants to merge 7 commits into
mainfrom
devin/1786712463-flex-wrap-balance
Open

Support flex-wrap: balance and flex-line-count (CSS Flexbox Level 2)#717
nicoburns wants to merge 7 commits into
mainfrom
devin/1786712463-flex-wrap-balance

Conversation

@nicoburns

@nicoburns nicoburns commented Aug 14, 2026

Copy link
Copy Markdown
Member

Summary

Adds end-to-end support for CSS Flexbox Level 2 line balancing: flex-wrap: balance (and wrap-reverse balance) and the flex-line-count property, per https://drafts.csswg.org/css-flexbox-2/.

  • stylo_taffy::convert::flex_wrap maps Stylo's new FlexWrap::Balance/WrapReverseBalance to taffy::FlexWrap::Balance/BalanceReverse, and TaffyStyloStyle implements FlexboxContainerStyle::flex_line_count() (clamped to >= 1). Gated behind a new on-by-default flexbox_balance cargo feature on stylo_taffy.
  • blitz-dom enables the layout.flexbox.balance Stylo pref at document init, so the new syntax parses in Blitz.
  • Taffy is now pinned to an upstream main rev (20f04b9f) that includes the merged balancing implementation (Implement flex-wrap: balance (CSS Flexbox Level 2) taffy#1105); Stylo is pinned to the head of the Stylo PR branch (Implement flex-wrap: balance and flex-line-count (CSS Flexbox Level 2) stylo#12, rev 404505d5). The Stylo git rev should be switched to a release once that PR merges and is released.
  • Adds focused layout tests (tests/blitz-tests/tests/flex_wrap_balance.rs): four 25px items in a 120px container with 10px gaps split 3/1 with wrap but 2/2 with balance; plus wrap balance, wrap-reverse balance, invalid nowrap balance, and flex-line-count forcing extra lines.

WPT css/css-flexbox/balance: 32/41 run tests pass. The 9 failures are preexisting limitations (7 need script execution which the WPT runner doesn't support, 1 needs width: min-content on atomic inline boxes, 1 needs display: -webkit-box).

Rendered verification (wrap 3/1 vs balance 2/2, wrap-reverse balance, flex-line-count: 2):

balance demo

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

WPT results

32 newly passing, 2 newly failing (net +30).

Full diff (34 changed tests)
+ Fail => Pass css/css-color-adjust/rendering/dark-color-scheme/color-scheme-rule-cache.html
- Pass => Fail css/css-color-adjust/rendering/dark-color-scheme/color-scheme-table-border-currentcolor-responsive.html
+ Fail => Pass css/css-flexbox/balance/balance-001.html
+ Fail => Pass css/css-flexbox/balance/balance-002.html
+ Fail => Pass css/css-flexbox/balance/balance-003.html
+ Fail => Pass css/css-flexbox/balance/balance-005.html
+ Fail => Pass css/css-flexbox/balance/balance-available-size-001.html
+ Fail => Pass css/css-flexbox/balance/balance-available-size-002.html
+ Fail => Pass css/css-flexbox/balance/balance-complex.html
+ Fail => Pass css/css-flexbox/balance/balance-flex-grow.html
+ Fail => Pass css/css-flexbox/balance/balance-line-count-intrinsic-001.html
+ Fail => Pass css/css-flexbox/balance/balance-line-count-intrinsic-003.html
+ Fail => Pass css/css-flexbox/balance/balance-line-count-intrinsic-004.html
+ Fail => Pass css/css-flexbox/balance/balance-line-count-intrinsic-005.html
+ Fail => Pass css/css-flexbox/balance/balance-line-count-intrinsic-006.html
+ Fail => Pass css/css-flexbox/balance/balance-line-count-intrinsic-007.html
+ Fail => Pass css/css-flexbox/balance/balance-min-line-count-001.html
+ Fail => Pass css/css-flexbox/balance/balance-min-line-count-002.html
+ Fail => Pass css/css-flexbox/balance/balance-min-line-count-003.html
+ Fail => Pass css/css-flexbox/balance/balance-min-line-count-004.html
+ Fail => Pass css/css-flexbox/balance/balance-min-line-count-005.html
+ Fail => Pass css/css-flexbox/balance/balance-min-line-count-006.html
+ Fail => Pass css/css-flexbox/balance/balance-negative-margin-001.html
+ Fail => Pass css/css-flexbox/balance/balance-negative-margin-002.html
+ Fail => Pass css/css-flexbox/balance/balance-percentage-size-001.html
+ Fail => Pass css/css-flexbox/balance/balance-percentage-size-002.html
+ Fail => Pass css/css-flexbox/balance/balance-start-bias-001.html
+ Fail => Pass css/css-flexbox/balance/balance-start-bias-002.html
+ Fail => Pass css/css-flexbox/balance/balance-start-bias-003.html
+ Fail => Pass css/css-flexbox/balance/balance-zero-size.html
- Pass => Fail css/css-images/gradient/color-scheme-dependent-color-stops.html
+ Fail => Pass css/css-properties-values-api/registered-property-computation-color-001.html
+ Fail => Pass css/css-properties-values-api/registered-property-computation-color-002.html
+ Fail => Pass css/css-variables/registered-property-light-dark.html

Generated by the WPT workflow.

Points taffy at the flex-wrap-balance branch and stylo at the branch
implementing the new property values, maps the new FlexWrap variants to
taffy's Balance/BalanceReverse, plumbs flex-line-count through, and
enables the layout.flexbox.balance pref.
@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