Fixes #312 - merging backgrounds when one property is not repeated.

diff --git a/lib/properties/processable.js b/lib/properties/processable.js
index 0e961fb..0568512 100644 (file)
--- a/lib/properties/processable.js
+++ b/lib/properties/processable.js
@@ -488,17 +488,22 @@ module.exports = (function () {
     },
     commaSeparatedMulitpleValues: function (assembleFunction) {
       return function(prop, tokens, isImportant) {
-        var partsCount = new CommaSplitter(tokens[0].value).split();
+        var tokenSplitLengths = tokens.map(function (token) {
+          return new CommaSplitter(token.value).split().length;
+        });
+        var partsCount = Math.max.apply(Math, tokenSplitLengths);
+
         if (partsCount == 1)
           return assembleFunction(prop, tokens, isImportant);
 
         var merged = [];
 
-        for (var i = 0; i < partsCount.length; i++) {
+        for (var i = 0; i < partsCount; i++) {
           merged.push([]);
 
           for (var j = 0; j < tokens.length; j++) {
-            merged[i].push(new CommaSplitter(tokens[j].value).split()[i]);
+            var split = new CommaSplitter(tokens[j].value).split();
+            merged[i].push(split[i] || split[0]);
           }
         }
 

diff --git a/test/data/issue-312-min.css b/test/data/issue-312-min.css
new file mode 100644 (file)
index 0000000..7fcb94c
--- /dev/null
+++ b/test/data/issue-312-min.css
@@ -0,0 +1 @@
+.envelope{background:#eee url(one.png) repeat-x top center,#eee url(one.png) repeat-x bottom center,#eee url(two.png) no-repeat 110% 10px;background-size:35px 4px,35px 4px,101px 61px}

diff --git a/test/data/issue-312.css b/test/data/issue-312.css
new file mode 100644 (file)
index 0000000..9761b78
--- /dev/null
+++ b/test/data/issue-312.css
@@ -0,0 +1,7 @@
+.envelope {
+  background: url(one.png), url(one.png), url(two.png);
+  background-color: #eee;
+  background-repeat: repeat-x, repeat-x, no-repeat;
+  background-size: 35px 4px, 35px 4px, 101px 61px;
+  background-position: top center, bottom center, 110% 10px;
+}