react / react/yoga

Aspect ratio does not respect min/max dimensions

Open
#677 3 comments 4 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Algorithm
Dominant language
C++
Stars
18.9k
Forks
1.6k
Avg merge
1m
Merged PRs (30d)
1

Description

Report

Issues and Steps to Reproduce

Aspect ratio does not respect min/max dimensions.

In the example below, the computed height is 200, but should be 50 because max-width is set.

const assert = require('assert');
const yoga = require('yoga-layout');

let rootNode = yoga.Node.create();
let childNode = yoga.Node.create();

childNode.setWidth(400);
childNode.setMaxWidth(100);
childNode.setAspectRatio(2);

rootNode.insertChild(childNode, 0);
rootNode.calculateLayout(1080, 768);

assert.strictEqual(childNode.getComputedWidth(), 100);
assert.strictEqual(childNode.getComputedHeight(), 50);

rootNode.freeRecursive();

Expected Behavior

The documentation states that

AspectRatio respects the Min and Max dimensions of an item.

Actual Behavior

The height is calculated based on the explicit width.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the provided yoga Node.create JavaScript reproduction and the setWidth, setMaxWidth, setAspectRatio, and calculateLayout entry points. Confirm the current computed dimensions, then validate the change against the stated expected result: width 100 and height 50 when max-width is 100 and the aspect ratio is 2.

Written by the indexing model from the issue text.

Assessment

Tech stack
cpp, javascript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.