diff --git a/src/polymer-expressions.js b/src/polymer-expressions.js
index 1cf52ea..0e692e1 100644
--- a/src/polymer-expressions.js
+++ b/src/polymer-expressions.js
@@ -397,6 +397,28 @@
};
};
+ /**
+ * Converts a style property name to a css property name. For example:
+ * "WebkitUserSelect" to "-webkit-user-select"
+ */
+ function convertStylePropertyName(name) {
+ return String(name).replace(/[A-Z]/g, function(c) {
+ return '-' + c.toLowerCase();
+ });
+ }
+
+ PolymerExpressions.filters.styleObject = function() {
+ return {
+ toDOM: function(value) {
+ var parts = [];
+ for (var key in value) {
+ parts.push(convertStylePropertyName(key) + ': ' + value[key]);
+ }
+ return parts.join('; ');
+ }
+ };
+ };
+
PolymerExpressions.prototype = {
prepareBinding: function(pathString, name, node) {
if (Path.get(pathString).valid)
diff --git a/tests/tests.js b/tests/tests.js
index 2dc15a8..33ad11a 100644
--- a/tests/tests.js
+++ b/tests/tests.js
@@ -187,6 +187,64 @@ suite('PolymerExpressions', function() {
assert.strictEqual('bar bot', target.className);
});
+ test('styleObject', function() {
+ // IE removes invalid style attribute values so we use xstyle in this test.
+
+ var div = createTestHtml(
+ '' +
+ '' +
+ '
');
+
+ var model = {
+ object: {
+ width: '100px',
+ backgroundColor: 'blue',
+ WebkitUserSelect: 'none'
+ }
+ };
+ recursivelySetTemplateModel(div, model);
+ Platform.performMicrotaskCheckpoint();
+
+ var target = div.childNodes[1];
+ assert.strictEqual(target.getAttribute('xstyle'),
+ 'width: 100px; background-color: blue; -webkit-user-select: none');
+
+ model.object = {
+ left: '50px',
+ whiteSpace: 'pre'
+ };
+ Platform.performMicrotaskCheckpoint();
+
+ assert.strictEqual(target.getAttribute('xstyle'),
+ 'left: 50px; white-space: pre');
+ });
+
+ test('styleObject2', function() {
+ // IE removes invalid style attribute values so we use xstyle in this test.
+
+ var div = createTestHtml(
+ '' +
+ '' +
+ '
');
+
+ var model = {
+ w: '100px',
+ bc: 'blue'
+ };
+ recursivelySetTemplateModel(div, model);
+ Platform.performMicrotaskCheckpoint();
+
+ var target = div.childNodes[1];
+ assert.strictEqual(target.getAttribute('xstyle'),
+ 'width: 100px; background-color: blue');
+
+ model.w = 0;
+ Platform.performMicrotaskCheckpoint();
+
+ assert.strictEqual(target.getAttribute('xstyle'),
+ 'width: 0; background-color: blue');
+ });
+
test('Named Scope Bind', function() {
var div = createTestHtml(
'' +