text with padding and margin

src/Layout-test-utils.js

@@ -26,12 +26,11 @@ var layoutTestUtils = (function() {
 
     return iframe;
   })();
+  var body = iframe.contentDocument.body;
 
   var realComputeLayout = computeLayout;
 
   function computeCSSLayout(rootNode) {
-    var body = iframe.contentDocument.body;
-
     function fillNodes(node) {
       node.layout = {
         width: undefined,
@@ -43,25 +42,7 @@ var layoutTestUtils = (function() {
         node.style = {};
       }
 
-      if ('text' in node.style) {
+      if (!node.children || node.style.measure) {
-        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);
@@ -109,8 +90,8 @@ var layoutTestUtils = (function() {
       (node.children || []).forEach(function(child) {
         renderNode(div, child);
       });
-      if (node.style.text) {
+      if (node.style.measure) {
-        div.innerText = node.style.text;
+        div.innerText = node.style.measure.toString();
       }
       return div;
     }
@@ -239,6 +220,25 @@ var layoutTestUtils = (function() {
     },
     computeLayout: computeCSSLayout,
     computeDOMLayout: computeDOMLayout,
-    reduceTest: reduceTest
+    reduceTest: reduceTest,
+    text: function(text) {
+      var fn = function(width) {
+        var span = document.createElement('span');
+        span.style.position = 'absolute';
+        if (width !== undefined) {
+          span.style.width = width + 'px';
+        }
+        span.innerText = text;
+        body.appendChild(span);
+        var rect = span.getBoundingClientRect();
+        body.removeChild(span);
+        return {
+          width: rect.width,
+          height: rect.height
+        };
+      };
+      fn.toString = function() { return text; }
+      return fn;
+    }
   }
 })();

src/Layout.js

@@ -217,8 +217,12 @@ var computeLayout = (function() {
 
     if ('measure' in node.style) {
       var dimensions = node.style.measure(node.style.width);
-      node.layout.width = dimensions.width;
+      if (!isDimDefined(node, 'row')) {
-      node.layout.height = dimensions.height;
+        node.layout.width = dimensions.width + getPaddingAndBorderAxis(node, 'row');
+      }
+      if (!isDimDefined(node, 'column')) {
+        node.layout.height = dimensions.height + getPaddingAndBorderAxis(node, 'column');
+      }
       return;
     }
 

src/__tests__/Layout-test.js

@@ -4,6 +4,7 @@ var testRandomLayout = layoutTestUtils.testRandomLayout;
 var computeLayout = layoutTestUtils.computeLayout;
 var computeDOMLayout = layoutTestUtils.computeDOMLayout;
 var reduceTest = layoutTestUtils.reduceTest;
+var text = layoutTestUtils.text;
 
 describe('Layout', function() {
   it('should layout a single node with width and height', function() {
@@ -746,18 +747,25 @@ describe('Layout', function() {
 
   it('should layout node with text', function() {
     testLayout(
-      {style: {text: 'kikoo'}},
+      {style: {measure: text('kikoo')}},
       {width: 36, height: 18, top: 0, left: 0}
     )
   });
 
   it('should layout node with text and width', function() {
     testLayout(
-      {style: {text: 'kikoo loool', width: 10}},
+      {style: {measure: text('kikoo loool'), width: 10}},
       {width: 10, height: 36, top: 0, left: 0}
     )
   });
 
+  it('should layout node with padding and margin', function() {
+    testLayout(
+      {style: {measure: text('kikoo loool'), padding: 5, margin: 5}},
+      {width: 82, height: 28, top: 5, left: 5}
+    )
+  });
+
 
 
   it('should layout randomly', function() {
@@ -816,6 +824,7 @@ describe('Layout', function() {
       randEnum(node, 0.5, 'alignSelf', ['flex-start', 'center', 'flex-end', 'stretch']);
       randEnum(node, 0.5, 'flex', ['none', 1]);
       randEnum(node, 0.5, 'position', ['relative', 'absolute']);
+      randEnum(node, 0.5, 'measure', [text('kikoo'), text('kikooooooooooooo looool')]);
       randChildren(node, 0.2);
       return node;
     }