flex-wrap: wrap-reverse support

Summary:
I couldn't resist to do this 😄 #394

This adds ```flex-wrap: wrap-reverse```

I think we hit a edge case here:
https://stackoverflow.com/questions/33891709/when-flexbox-items-wrap-in-column-mode-container-does-not-grow-its-width

as is differs here from chrome, but I think that yoga is here more correct.

So I haven't added this test yet as this would fail against chrome, as chrome outputs a width of 30 for root, whereas yoga gets a width of 60 here, which I think is correct. Strangely the output of ```flex-wrap:wrap``` is in jsfiddle also only with a (visual) width of 30 on chrome, while the tests gets generated with 60.

```html
<div id="wrap_reverse_column" style="height: 100px; flex-wrap: wrap-reverse">
  <div style="height: 30px; width: 30px;"></div>
  <div style="height: 30px; width: 30px;"></div>
  <div style="height: 30px; width: 30px;"></div>
  <div style="height: 30px; width: 30px;"></div>
</div>
```

Looking forward what you think here emilsjolander
Closes https://github.com/facebook/yoga/pull/398

Reviewed By: astreet

Differential Revision: D4564711

Pulled By: emilsjolander

fbshipit-source-id: 33dc055abd8444b2aa7796ef90bd7ec99e961bb8
This commit is contained in:
Lukas Wöhrl
2017-02-15 13:35:24 -08:00
committed by Facebook Github Bot
parent bba7289537
commit 20536923d6
16 changed files with 2462 additions and 10 deletions

View File

@@ -143,6 +143,7 @@ JavaEmitter.prototype = Object.create(Emitter.prototype, {
YGWrapNoWrap:{value:'YogaWrap.NO_WRAP'},
YGWrapWrap:{value:'YogaWrap.WRAP'},
YGWrapWrapReverse:{value: 'YogaWrap.WRAP_REVERSE'},
YGNodeCalculateLayout:{value:function(node, dir) {
this.push(node + '.setDirection(' + dir + ');');