Fixes #648 - Style attribute object and lengths not handled properly

runtime/html/helpers.js

@@ -93,13 +93,18 @@ exports.sa = function(style) {
         return '';
     }
 
-    if (typeof style === 'string') {
+    var type = typeof style;
+
+    if (type === 'string') {
         return attrHelper(STYLE_ATTR, style, false);
-    } else if (typeof style === 'object') {
+    } else if (type === 'object') {
         var styles = '';
         for (var name in style) {
             var value = style[name];
             if (value != null) {
+                if (typeof value === 'number' && value) {
+                    value += 'px';
+                }
                 var nameDashed = dashedNames[name];
                 if (!nameDashed) {
                     nameDashed = dashedNames[name] = name.replace(/([A-Z])/g, '-$1').toLowerCase();
@@ -164,4 +169,4 @@ function classList(arg) {
 
 var commonHelpers = require('../helpers');
 extend(exports, commonHelpers);
-exports.cl = classList;
+exports.cl = classList;

runtime/vdom/helper-styleAttr.js

@@ -10,13 +10,19 @@ module.exports = function(style) {
         return null;
     }
 
-    if (typeof style === 'string') {
+    var type = typeof style;
+
+    if (type === 'string') {
         return style;
-    } else if (typeof style === 'object') {
+    } else if (type === 'object') {
         var styles = '';
         for (var name in style) {
             var value = style[name];
-            if (value) {
+            if (value != null) {
+                if (typeof value === 'number' && value) {
+                    value += 'px';
+                }
+
                 var nameDashed = dashedNames[name];
                 if (!nameDashed) {
                     nameDashed = dashedNames[name] = name.replace(/([A-Z])/g, '-$1').toLowerCase();
@@ -28,4 +34,4 @@ module.exports = function(style) {
     } else {
         return null;
     }
-};
+};

test/autotests/components-browser/style-attr/index.marko

@@ -0,0 +1,5 @@
+class {}
+$ var marginRight = 10;
+$ var left = 0;
+
+<div style={left: left, marginRight: marginRight}></div>

test/autotests/components-browser/style-attr/test.js

@@ -0,0 +1,7 @@
+var expect = require('chai').expect;
+
+module.exports = function(helpers) {
+    var component = helpers.mount(require('./index'), {});
+    expect(component.el.style.left).to.equal('0px');
+    expect(component.el.style.marginRight).to.equal('10px');
+};

test/autotests/render/style-attr-object-units/expected.html

@@ -0,0 +1 @@
+<div style="left:0;margin-right:10px;"></div>

test/autotests/render/style-attr-object-units/template.marko

@@ -0,0 +1 @@
+div style={left: 0, marginRight: 10}

test/autotests/render/style-attr-object-units/test.js

@@ -0,0 +1 @@
+exports.templateData = {};