DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity

flex-wrap: wrap-reverse support

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

49
gentest/fixtures/YGFlexWrapTest.html
View File

@@ -44,3 +44,52 @@
<div style="width: 50px;"></div>
<div style="width: 50px;"></div>
</div>
<div id="wrap_reverse_row_align_content_flex_start" style="width: 100px; flex-direction: row; flex-wrap: wrap-reverse; align-content: flex-start;">
<div style="height: 10px; width: 30px;"></div>
<div style="height: 20px; width: 30px;"></div>
<div style="height: 30px; width: 30px;"></div>
<div style="height: 40px; width: 30px;"></div>
<div style="height: 50px; width: 30px;"></div>
</div>
<div id="wrap_reverse_row_align_content_center" style="width: 100px; flex-direction: row; flex-wrap: wrap-reverse; align-content: center;">
<div style="height: 10px; width: 30px;"></div>
<div style="height: 20px; width: 30px;"></div>
<div style="height: 30px; width: 30px;"></div>
<div style="height: 40px; width: 30px;"></div>
<div style="height: 50px; width: 30px;"></div>
</div>
<div id="wrap_reverse_row_single_line_different_size" style="width: 300px; flex-direction: row; flex-wrap: wrap-reverse; align-content: flex-start;">
<div style="height: 10px; width: 30px;"></div>
<div style="height: 20px; width: 30px;"></div>
<div style="height: 30px; width: 30px;"></div>
<div style="height: 40px; width: 30px;"></div>
<div style="height: 50px; width: 30px;"></div>
</div>
<div id="wrap_reverse_row_align_content_stretch" style="width: 100px; flex-direction: row; flex-wrap: wrap-reverse; align-content: stretch;">
<div style="height: 10px; width: 30px;"></div>
<div style="height: 20px; width: 30px;"></div>
<div style="height: 30px; width: 30px;"></div>
<div style="height: 40px; width: 30px;"></div>
<div style="height: 50px; width: 30px;"></div>
</div>
<div id="wrap_reverse_row_align_content_space_around" style="width: 100px; flex-direction: row; flex-wrap: wrap-reverse; align-content: space-around;">
<div style="height: 10px; width: 30px;"></div>
<div style="height: 20px; width: 30px;"></div>
<div style="height: 30px; width: 30px;"></div>
<div style="height: 40px; width: 30px;"></div>
<div style="height: 50px; width: 30px;"></div>
</div>
<div id="wrap_reverse_column_fixed_size" style="width: 200px; height: 100px; flex-direction: column; flex-wrap: wrap-reverse; align-items: center;">
<div style="height: 10px; width: 30px;"></div>
<div style="height: 20px; width: 30px;"></div>
<div style="height: 30px; width: 30px;"></div>
<div style="height: 40px; width: 30px;"></div>
<div style="height: 50px; width: 30px;"></div>
</div>

1
gentest/gentest-cpp.js
View File

@@ -118,6 +118,7 @@ CPPEmitter.prototype = Object.create(Emitter.prototype, {
YGWrapNoWrap:{value:'YGWrapNoWrap'},
YGWrapWrap:{value:'YGWrapWrap'},
YGWrapWrapReverse:{value: 'YGWrapWrapReverse'},
YGUndefined:{value:'YGUndefined'},

1
gentest/gentest-cs.js
View File

@@ -140,6 +140,7 @@ CSEmitter.prototype = Object.create(Emitter.prototype, {
YGWrapNoWrap:{value:'YogaWrap.NoWrap'},
YGWrapWrap:{value:'YogaWrap.Wrap'},
YGWrapWrapReverse:{value: 'YogaWrap.WrapReverse'},
YGNodeCalculateLayout:{value:function(node, dir) {
this.push(node + '.StyleDirection = ' + dir + ';');

1
gentest/gentest-java.js
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 + ');');

1
gentest/gentest-javascript.js
View File

@@ -127,6 +127,7 @@ JavascriptEmitter.prototype = Object.create(Emitter.prototype, {
YGWrapNoWrap:{value:'Yoga.WRAP_NO_WRAP'},
YGWrapWrap:{value:'Yoga.WRAP_WRAP'},
YGWrapWrapReverse:{value: 'Yoga.WRAP_WRAP_REVERSE'},
YGUndefined:{value:'Yoga.UNDEFINED'},

1
gentest/gentest.js
View File

@@ -336,6 +336,7 @@ function overflowValue(e, value) {
function wrapValue(e, value) {
switch (value) {
case 'wrap': return e.YGWrapWrap;
case 'wrap-reverse': return e.YGWrapWrapReverse;
case 'nowrap': return e.YGWrapNoWrap;
}
}