make text with specific width work. plus a lot of hacks to manage dependencies. need to clean it up

src/Layout-test-utils.js

@@ -27,6 +27,50 @@ var layoutTestUtils = (function() {
     return iframe;
   })();
 
+  var realComputeLayout = computeLayout;
+
+  function computeCSSLayout(rootNode) {
+    var body = iframe.contentDocument.body;
+
+    function fillNodes(node) {
+      node.layout = {
+        width: undefined,
+        height: undefined,
+        top: 0,
+        left: 0
+      };
+      if (!node.style) {
+        node.style = {};
+      }
+
+      if ('text' in node.style) {
+        node.style.measure = function(width) {
+          var span = document.createElement('span');
+          span.style.position = 'absolute';
+          if (width !== undefined) {
+            span.style.width = width + 'px';
+          }
+          span.innerText = node.style.text;
+          body.appendChild(span);
+          var rect = span.getBoundingClientRect();
+          body.removeChild(span);
+          return {
+            width: rect.width,
+            height: rect.height
+          };
+        }
+      }
+
+      if (!node.children) {
+        node.children = [];
+      }
+      node.children.forEach(fillNodes);
+    }
+
+    fillNodes(rootNode);
+    return realComputeLayout(rootNode);
+  }
+
   function computeDOMLayout(node) {
     var body = iframe.contentDocument.body;
 
@@ -112,7 +156,7 @@ var layoutTestUtils = (function() {
   }
 
   function isEqual(a, b) {
-    // computeLayout and computeDOMLayout output a tree with same ordered elements
+    // computeCSSLayout and computeDOMLayout output a tree with same ordered elements
     return JSON.stringify(a) === JSON.stringify(b);
   }
 
@@ -120,7 +164,7 @@ var layoutTestUtils = (function() {
     function isWorking() {
       return isEqual(
         computeDOMLayout(node),
-        computeLayout(node)
+        computeCSSLayout(node)
       );
     }
     if (isWorking()) {
@@ -184,16 +228,16 @@ var layoutTestUtils = (function() {
 
   return {
     testLayout: function(node, expectedLayout) {
-      var layout = computeLayout(node);
+      var layout = computeCSSLayout(node);
       var domLayout = computeDOMLayout(node);
       testNamedLayout('expected-dom', expectedLayout, domLayout);
       testNamedLayout('layout-dom', layout, domLayout);
     },
     testRandomLayout: function(node, i) {
-      expect({i: i, node: node, layout: computeLayout(node)})
+      expect({i: i, node: node, layout: computeCSSLayout(node)})
         .toEqual({i: i, node: node, layout: computeDOMLayout(node)});
     },
-    computeLayout: computeLayout,
+    computeLayout: computeCSSLayout,
     computeDOMLayout: computeDOMLayout,
     reduceTest: reduceTest
   }

src/Layout.js

@@ -1,22 +1,6 @@
 
 var computeLayout = (function() {
 
-  function fillNodes(node) {
-    node.layout = {
-      width: undefined,
-      height: undefined,
-      top: 0,
-      left: 0
-    };
-    if (!node.style) {
-      node.style = {};
-    }
-    if (!node.children) {
-      node.children = [];
-    }
-    node.children.forEach(fillNodes);
-  }
-
   function extractNodes(node) {
     var layout = node.layout;
     delete node.layout;
@@ -231,9 +215,10 @@ var computeLayout = (function() {
     node.layout[leading[crossAxis]] += getMargin(node, leading[crossAxis]) +
       getRelativePosition(node, crossAxis);
 
-    if ('text' in node.style) {
+    if ('measure' in node.style) {
-      node.layout.width = 36;
+      var dimensions = node.style.measure(node.style.width);
-      node.layout.height = 18;
+      node.layout.width = dimensions.width;
+      node.layout.height = dimensions.height;
       return;
     }
 
@@ -464,7 +449,6 @@ var computeLayout = (function() {
   }
 
   var fn = function(node) {
-    fillNodes(node);
     layoutNode(node);
     return extractNodes(node);
   };

src/__tests__/Layout-test.js

@@ -751,6 +751,13 @@ describe('Layout', function() {
     )
   });
 
+  it('should layout node with text and width', function() {
+    testLayout(
+      {style: {text: 'kikoo loool', width: 10}},
+      {width: 10, height: 36, top: 0, left: 0}
+    )
+  });
+
 
 
   it('should layout randomly', function() {