Added support for min/max width and height constraints.

[freakboy3742]

This patch adds initial support for minWidth, maxWidth, minHeight and maxHeight CSS constraints.

It contains tests which cover a good proportion of "normal" uses of min/max constraints. However, there are still a lot of untested combinations, especially in the realm of poorly specified constraints - e.g., a minHeight value that is greater than maxHeight. These cases are common in the random test suite, but almost never happen In Real Life.

[vjeux]

Omg, this is so good!

Do you have plans to continue working on this to get as close as possible to the specification? The edge cases are actually pretty important, this is what will make React Native able to run on web. It also makes my life easier as I can just redirect people to the browser/css spec when they have an issue.

[vjeux]

nit: you can write node.style.minWidth

[mrjjwright]

Yay!!

[freakboy3742]

Unless I hit a bug in practice, I'm not expecting to submit another pull request in the next week or so. Longer term, I expect I'll revisit that - a 100% complete implementation of the CSS box model is just too sweet a target for my left brain to ignore :-)

I submitted what I had because it seemed to be working for all the common cases, and I was hitting a point of diminishing returns tracking down edge cases. Part of the problem is that some of the browser behaviours I was seeing didn't appear to make sense, and were inconsistent between browsers, and it wasn't clear if that was a problem with specific browser implementations.

What I really need is an analog of the old ACID2 test, but for flexbox - a complex and spanning demonstration of the CSS box model that has been vetted for correctness.

[vjeux]

I've been making bug reports on the browsers for behaviors that seemed completely wrong. Would be nice to do the same and add those in comments.

I also hope that the tests in this repo will help make a corpus of compliance tests if anyone wants to build another layout implementation

[subtleGradient]

💰 💰 💰

[glenjamin]

Does the maxWidth/maxHeight still kick in on boxes with a non-zero flex value?

Do these properties mean flexBasis is unnecessary?

[freakboy3742]

Yes, maxWidth/maxHeight applies to boxes with non-zero flex values. The max/min width will override any flex weight-based allocation of width, effectively removing the element from the flex calculation.

I suppose flexBasis could be used as an alternative to minWidth/Height in most common scenarios; but I'm guessing there will be some subtle edge cases where they don't give the same result.

[vjeux]

I took a closer look at there are some legitimate use cases that are not working right now and should.

  it('should layout minHeight with a flex child', function() {
    testLayout(
      {style: {minHeight: 800}, children: [
        {style: {flex: 1}}
      ]},
      {width: 0, height: 800, top: 0, left: 0, children: [
        {width: 0, height: 800, top: 0, left: 0}
      ]}
    );
  });

In the current implementation, the height of the first child is 0.

We really need to fix most of the edge cases before using it. Otherwise, people are going to be super confused and think that it's broken :(

[freakboy3742]

I've just added PR #68 that corrects this problem.

The other test introduced in b912acf is another matter; I'll leave a comment on that commit.