Alter layout engine to conform closer to W3C spec

The primary goals of this change are:
  - Better conformance to the W3C flexbox standard (https://www.w3.org/TR/css-flexbox-1/)
    and a clear articulation of the areas where it deviates from the spec.
  - Support for flex-shrink.
  - Conformance with layout effects of "overflow: hidden".

Specifically, here are the limitations of this implementation as compared to the W3C
flexbox standard (this is also documented in Layout.js):
  - Display property is always assumed to be 'flex' except for Text nodes, which
    are assumed to be 'inline-flex'.
  - The 'zIndex' property (or any form of z ordering) is not supported. Nodes are
    stacked in document order.
  - The 'order' property is not supported. The order of flex items is always defined
    by document order.
  - The 'visibility' property is always assumed to be 'visible'. Values of 'collapse'
    and 'hidden' are not supported.
  - The 'wrap' property supports only 'nowrap' (which is the default) or 'wrap'. The
    rarely-used 'wrap-reverse' is not supported.
  - Rather than allowing arbitrary combinations of flexGrow, flexShrink and
    flexBasis, this algorithm supports only the three most common combinations:
      - flex: 0 is equiavlent to flex: 0 0 auto
      - flex: n (where n is a positive value) is equivalent to flex: n 0 0
      - flex: -1 (or any negative value) is equivalent to flex: 0 1 auto
  - Margins cannot be specified as 'auto'. They must be specified in terms of pixel
    values, and the default value is 0.
  - The 'baseline' value is not supported for alignItems and alignSelf properties.
  - Values of width, maxWidth, minWidth, height, maxHeight and minHeight must be
    specified as pixel values, not as percentages.
  - There is no support for calculation of dimensions based on intrinsic aspect ratios
    (e.g. images).
  - There is no support for forced breaks.
  - It does not support vertical inline directions (top-to-bottom or bottom-to-top text).

And here is how the implementation deviates from the standard (this is also documented in
Layout.js):
  - Section 4.5 of the spec indicates that all flex items have a default minimum
    main size. For text blocks, for example, this is the width of the widest word.
    Calculating the minimum width is expensive, so we forego it and assume a default
    minimum main size of 0.
  - Min/Max sizes in the main axis are not honored when resolving flexible lengths.
  - The spec indicates that the default value for 'flexDirection' is 'row', but
    the algorithm below assumes a default of 'column'.

src/Layout-test-utils.js

@@ -92,6 +92,7 @@ var layoutTestUtils = (function() {
 
           margin: 0;
           padding: 0;
+          min-width: 0;
         }
 
         hack to ignore three hundred px width of the body {}
@@ -118,17 +119,24 @@ var layoutTestUtils = (function() {
   }
 
   function extractNodes(node) {
-    var layout = node.layout;
-    delete node.layout;
+    var keysToCopy = [
+      'width',
+      'height',
+      'left',
+      'top'
+    ];
+    var layout = {};
+    keysToCopy.forEach(function(key) {
+      layout[key] = node.layout[key];
+    });
+    
     if (node.children && node.children.length > 0) {
       layout.children = node.children.map(extractNodes);
     } else {
       delete node.children;
     }
-
-    delete layout.right;
-    delete layout.bottom;
-    delete layout.direction;
+    
+    delete node.layout;
 
     return layout;
   }
@@ -183,13 +191,17 @@ var layoutTestUtils = (function() {
 
   function computeDOMLayout(node) {
     var body = getIframe().contentDocument.body;
-
+    
+    function setStyle(div, name, value) {
+      div.style['-webkit-' + name] = value;
+      div.style['webkit' + capitalizeFirst(name)] = value;
+      div.style[name] = value;
+    }
+    
     function transfer(div, node, name, ext) {
       if (name in node.style) {
         var value = node.style[name] + (ext || '');
-        div.style['-webkit-' + name] = value;
-        div.style['webkit' + capitalizeFirst(name)] = value;
-        div.style[name] = value;
+        setStyle(div, name, value);
       }
     }
 
@@ -202,7 +214,19 @@ var layoutTestUtils = (function() {
       transfer(div, node, type + 'Start' + suffix, 'px');
       transfer(div, node, type + 'End' + suffix, 'px');
     }
-
+    
+    function transferFlex(div, node) {
+      if ('flex' in node.style) {
+        var flex = node.style.flex;
+        var resolvedFlex = (
+          flex < 0 ? '0 1 auto' :
+          flex > 0 ? (flex + ' 0 0') :
+          '0 0 auto'
+        );
+        setStyle(div, 'flex', resolvedFlex);
+      }
+    }
+    
     function renderNode(parent, node) {
       var div = document.createElement('div');
       transfer(div, node, 'width', 'px');
@@ -220,13 +244,14 @@ var layoutTestUtils = (function() {
       transferSpacing(div, node, 'border', 'Width');
       transfer(div, node, 'flexDirection');
       transfer(div, node, 'direction');
-      transfer(div, node, 'flex');
+      transferFlex(div, node);
       transfer(div, node, 'flexWrap');
       transfer(div, node, 'justifyContent');
       transfer(div, node, 'alignSelf');
       transfer(div, node, 'alignItems');
       transfer(div, node, 'alignContent');
       transfer(div, node, 'position');
+      transfer(div, node, 'overflow');
       parent.appendChild(div);
       (node.children || []).forEach(function(child) {
         renderNode(div, child);