do not infinite loop when there's an element bigger than the containe…

…r with flex-wrap

src/Layout.js

@@ -311,11 +311,12 @@ var computeLayout = (function() {
  // We want to execute the next two loops one per line with flex-wrap
  var/*int*/ startLine = 0;
  var/*int*/ endLine = 0;
- var/*int*/ nextLine = 0;
+ var/*int*/ nextOffset = 0;
+ var/*int*/ alreadyComputedNextLayout = 0;
  // We aggregate the total dimensions of the container in those two variables
  var/*float*/ linesCrossDim = 0;
  var/*float*/ linesMainDim = 0;
- while (endLine !== node.children.length) {
+ while (endLine < node.children.length) {
  // <Loop A> Layout non flexible children and count children by type
 
  // mainContentDim is accumulation of the dimensions and margin of all the
@@ -359,7 +360,7 @@ var computeLayout = (function() {
  }
 
  // This is the main recursive call. We layout non flexible children.
- if (nextLine === 0) {
+ if (alreadyComputedNextLayout === 0) {
  layoutNode(child, maxWidth);
  }
 
@@ -375,11 +376,14 @@ var computeLayout = (function() {
  // The element we are about to add would make us go to the next line
  if (isFlexWrap(node) &&
  !isUndefined(node.layout[dim[mainAxis]]) &&
- mainContentDim + nextContentDim > definedMainDim) {
- nextLine = i + 1;
+ mainContentDim + nextContentDim > definedMainDim &&
+ // If there's only one element, then it's bigger than the content
+ // and needs its own line
+ i !== startLine) {
+ alreadyComputedNextLayout = 1;
  break;
  }
- nextLine = 0;
+ alreadyComputedNextLayout = 0;
  mainContentDim += nextContentDim;
  endLine = i + 1;
  }

src/__tests__/Layout-test.js

@@ -104,7 +104,7 @@ describe('Layout', function() {
  );
  });
 
- it('should layout node with flex', function() {
+ it('should layout node with just flex', function() {
  testLayout(
  {style: {width: 1000, height: 1000}, children: [
  {style: {width: 100, height: 200}},
@@ -1159,6 +1159,19 @@ describe('Layout', function() {
  );
  });
 
+ it('should layout flex wrap with a line bigger than container', function() {
+ testLayout(
+ {style: {height: 100, flexWrap: 'wrap'}, children: [
+ {style: {height: 100}},
+ {style: {height: 200}},
+ ]},
+ {width: 0, height: 100, top: 0, left: 0, children: [
+ {width: 0, height: 100, top: 0, left: 0},
+ {width: 0, height: 200, top: 0, left: 0}
+ ]}
+ );
+ });
+
  xit('should layout text with alignItems: stretch', function() {
  testLayout(
  {style: {width: 80, padding: 7, alignItems: 'stretch', measure: text(texts.big)}},