Skip to content

Preserve main-axis margins when stretching items with an aspect ratio - #2060

Open
sorinc03 wants to merge 1 commit into
react:mainfrom
sorinc03:fix/aspect-ratio-stretch-margins
Open

sorinc03 wants to merge 1 commit into
react:mainfrom
sorinc03:fix/aspect-ratio-stretch-margins

Conversation

@sorinc03

@sorinc03 sorinc03 commented Nov 2, 2026

Copy link
Copy Markdown

When stretch sizing derives a child's main dimension from its aspect ratio, the computed border-box dimension is passed into an available-size parameter that includes margins. The child then subtracts main-axis margins again.

Include the main-axis margins in the two stretch/aspect-ratio assignments, matching the adjacent non-stretch aspect-ratio calculations. For the reported 400-wide root with 24-point margins and a 16:9 child, the child now measures 352×198 instead of 267×150.

Fixes #1788. This changes only the margin-box arithmetic in these branches, without changing Yoga's broader aspect-ratio semantics.

Test plan

  • Added 10 independently Chrome-derived fixtures covering row/column, reverse directions, RTL, asymmetric/percentage margins, padding/border, relative positioning and a zero-main-margin control.
  • Unmodified main fails 9 of the 10 final cases; fixed code passes all 10.
  • Full C++ Debug and Release suites: 896/896 pass in each.
  • Format check, lint, generated-source validation, JavaScript typecheck and complete fixture regeneration pass.
  • Local AppleClang 21 requires the same existing GoogleTest warning downgrade (-Wno-error=character-conversion); no build-system workaround is included.
  • Java/JavaScript runtime suites and public CI remain unrun locally.

Changelog:
[General][Fixed] - Preserve main-axis margins when stretching items with an aspect ratio

@meta-cla meta-cla Bot added the CLA Signed label Nov 2, 2026
@facebook-github-tools facebook-github-tools Bot added the Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. label Nov 2, 2026

This branch has not been deployed

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

Labels

CLA Signed Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Incorrect width calculations when using margin with align-items: 'stretch'

1 participant