Fixes #307 - background-color in muliple backgrounds.

Apparently multiple backgrounds allow background-color in last value only:
http://www.w3.org/TR/css3-background/#the-background

diff --git a/History.md b/History.md
index b1f818d..c53d533 100644 (file)
--- a/History.md
+++ b/History.md
@@ -2,6 +2,7 @@
 ==================
 
 * Improved performance of advanced mode validators.
+* Fixed issue [#307](https://github.com/GoalSmashers/clean-css/issues/307) - background-color in muliple backgrounds.
 * Fixed issue [#323](https://github.com/GoalSmashers/clean-css/issues/323) - stripping variable references.
 * Fixed issue [#325](https://github.com/GoalSmashers/clean-css/issues/325) - removing invalid @charset declarations.
 

diff --git a/lib/properties/processable.js b/lib/properties/processable.js
index d5c68ed..bea5076 100644 (file)
--- a/lib/properties/processable.js
+++ b/lib/properties/processable.js
@@ -387,7 +387,7 @@ module.exports = (function () {
       return result;
     },
     // Puts together the components by spaces and omits default values (this is the case for most shorthands)
-    bySpacesOmitDefaults: function (prop, tokens, isImportant) {
+    bySpacesOmitDefaults: function (prop, tokens, isImportant, meta) {
       var result = new Token(prop, '', isImportant);
 
       // Get irrelevant tokens
@@ -426,6 +426,9 @@ module.exports = (function () {
           continue;
         }
 
+        if (meta && meta.partsCount && meta.position < meta.partsCount - 1 && processable[token.prop].multiValueLastOnly)
+          continue;
+
         result.value += ' ' + token.value;
       }
 
@@ -464,7 +467,11 @@ module.exports = (function () {
             tokens[k].value = merged[i][k];
           }
 
-          var processed = assembleFunction(prop, tokens, isImportant);
+          var meta = {
+            partsCount: partsCount,
+            position: i
+          };
+          var processed = assembleFunction(prop, tokens, isImportant, meta);
           mergedValues.push(processed.value);
 
           if (!firstProcessed)
@@ -477,7 +484,7 @@ module.exports = (function () {
     },
     // Handles the cases when some or all the fine-grained properties are set to inherit
     takeCareOfInherit: function (innerFunc) {
-      return function (prop, tokens, isImportant) {
+      return function (prop, tokens, isImportant, meta) {
         // Filter out the inheriting and non-inheriting tokens in one iteration
         var inheritingTokens = [];
         var nonInheritingTokens = [];
@@ -507,7 +514,7 @@ module.exports = (function () {
           var result1 = [new Token(prop, 'inherit', isImportant)].concat(nonInheritingTokens);
 
           // Result 2. Shorthand every non-inherit value and then have it overridden with the inheriting ones
-          var result2 = [innerFunc(prop, result2Shorthandable, isImportant)].concat(inheritingTokens);
+          var result2 = [innerFunc(prop, result2Shorthandable, isImportant, meta)].concat(inheritingTokens);
 
           // Return whichever is shorter
           var dl1 = Token.getDetokenizedLength(result1);
@@ -516,7 +523,7 @@ module.exports = (function () {
           return dl1 < dl2 ? result1 : result2;
         } else {
           // When none of tokens are 'inherit'
-          return innerFunc(prop, tokens, isImportant);
+          return innerFunc(prop, tokens, isImportant, meta);
         }
       };
     },
@@ -603,6 +610,7 @@ module.exports = (function () {
     'background-color': {
       canOverride: canOverride.color,
       defaultValue: 'transparent',
+      multiValueLastOnly: true,
       shortestValue: 'red'
     },
     'background-image': {

diff --git a/test/data/issue-312-min.css b/test/data/issue-312-min.css
index 0cb70d8..7f63e0b 100644 (file)
--- a/test/data/issue-312-min.css
+++ b/test/data/issue-312-min.css
@@ -1 +1 @@
-.envelope{background:url(one.png) top center repeat-x #eee,url(one.png) bottom center repeat-x #eee,url(two.png) 110% 10px no-repeat #eee;background-size:35px 4px,35px 4px,101px 61px}
\ No newline at end of file
+.envelope{background:url(one.png) top center repeat-x,url(one.png) bottom center repeat-x,url(two.png) 110% 10px no-repeat #eee;background-size:35px 4px,35px 4px,101px 61px}

diff --git a/test/unit-test.js b/test/unit-test.js
index 1b76d27..f885174 100644 (file)
--- a/test/unit-test.js
+++ b/test/unit-test.js
@@ -2029,6 +2029,10 @@ title']{display:block}",
     'lost background position': [
       '.one{background:50% no-repeat}.one{background-image:url(/img.png)}',
       '.one{background:url(/img.png) 50% no-repeat}'
+    ],
+    'merging color with backgrounds': [
+      'p{background:red;background-image:url(1.png),url(2.png)}',
+      'p{background:url(1.png),url(2.png) red}'
     ]
   }),
   'viewport units': cssContext({