Adds background normalization according to W3C spec.

History.md

@@ -1,6 +1,7 @@
 [2.2.9 / 2014-xx-xx](https://github.com/GoalSmashers/clean-css/compare/v2.2.8...v2.2.9)
 ==================
 
+* Adds `background` normalization according to W3C spec.
 * Fixed issue [#316](https://github.com/GoalSmashers/clean-css/issues/316) - incorrect background processing.
 
 [2.2.8 / 2014-07-14](https://github.com/GoalSmashers/clean-css/compare/v2.2.7...v2.2.8)

lib/properties/processable.js

@@ -198,8 +198,12 @@ module.exports = (function () {
   };
   breakUp.background = function (token) {
     // Default values
-    var result = Token.makeDefaults(['background-color', 'background-image', 'background-repeat', 'background-position', 'background-attachment'], token.isImportant);
-    var color = result[0], image = result[1], repeat = result[2], position = result[3], attachment = result[4];
+    var result = Token.makeDefaults(['background-image', 'background-position', 'background-repeat', 'background-attachment', 'background-color'], token.isImportant);
+    var image = result[0];
+    var position = result[1];
+    var repeat = result[2];
+    var attachment = result[3];
+    var color = result[4];
 
     // Take care of inherit
     if (token.value === 'inherit') {
@@ -219,6 +223,8 @@ module.exports = (function () {
 
       if (validator.isValidBackgroundAttachment(currentPart)) {
         attachment.value = currentPart;
+      } else if (validator.isValidBackgroundRepeat(currentPart)) {
+        repeat.value = currentPart;
       } else if (validator.isValidBackgroundPosition(currentPart)) {
         if (i > 0) {
           var repeatedPosition = parts[i - 1] + ' ' + currentPart;
@@ -231,8 +237,6 @@ module.exports = (function () {
         } else {
           position.value = currentPart;
         }
-      } else if (validator.isValidBackgroundRepeat(currentPart)) {
-        repeat.value = currentPart;
       } else if (validator.isValidColor(currentPart)) {
         color.value = currentPart;
       } else if (validator.isValidUrl(currentPart) || validator.isValidFunction(currentPart)) {
@@ -420,6 +424,7 @@ module.exports = (function () {
     // Puts together the components by spaces and omits default values (this is the case for most shorthands)
     bySpacesOmitDefaults: function (prop, tokens, isImportant) {
       var result = new Token(prop, '', isImportant);
+
       // Get irrelevant tokens
       var irrelevantTokens = tokens.filter(function (t) { return t.isIrrelevant; });
 
@@ -617,11 +622,11 @@ module.exports = (function () {
     // background ------------------------------------------------------------------------------
     'background': {
       components: [
-        'background-color',
         'background-image',
-        'background-repeat',
         'background-position',
-        'background-attachment'
+        'background-repeat',
+        'background-attachment',
+        'background-color'
       ],
       breakUp: breakUp.commaSeparatedMulitpleValues(breakUp.background),
       putTogether: putTogether.commaSeparatedMulitpleValues(

test/data/issue-232-min.css

@@ -1,2 +1,2 @@
 .bar{padding:0}
-.bug-selector,.bug-selector1{background:#000 url(images/b-toolbar.gif);background:linear-gradient(#5e6081,#353340)}
+.bug-selector,.bug-selector1{background:url(images/b-toolbar.gif) #000;background:linear-gradient(#5e6081,#353340)}

test/unit-test.js

@@ -890,7 +890,7 @@ vows.describe('clean-units').addBatch({
     'not add a space before url\'s hash': "a{background:url(/fonts/d90b3358-e1e2-4abb-ba96-356983a54c22.svg#d90b3358-e1e2-4abb-ba96-356983a54c22)}",
     'keep urls from being stripped down #1': 'a{background:url(/image-1.0.png)}',
     'keep urls from being stripped down #2': "a{background:url(/image-white.png)}",
-    'keep urls from being stripped down #3': "a{background:#eee url(/libraries/jquery-ui-1.10.1.custom/images/ui-bg_highlight-soft_100_eeeeee_1x100.png) repeat-x 50% top}",
+    'keep urls from being stripped down #3': "a{background:url(/libraries/jquery-ui-1.10.1.custom/images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top #eee}",
     'keep special markers in comments (so order is important)': '/*! __ESCAPED_URL_CLEAN_CSS0__ */a{display:block}',
     'strip new line in urls': [
       'a{background:url(/very/long/\
@@ -1723,7 +1723,7 @@ title']{display:block}",
     ],
     'should merge background with background-color': [
       'a{background:0;background-color:#9fce00}',
-      'a{background:#9fce00 0}'
+      'a{background:0 #9fce00}'
     ],
     'should NOT merge background with inherited background-color': [
       'a{background:0;background-color:inherit}',
@@ -1747,7 +1747,7 @@ title']{display:block}",
     ],
     'should merge background with background-repeat': [
       'a{background:0;background-repeat:repeat-y}',
-      'a{background:repeat-y 0}'
+      'a{background:0 repeat-y}'
     ],
     'should NOT merge background with inherited background-repeat': [
       'a{background:0;background-repeat:inherit}',
@@ -1785,15 +1785,15 @@ title']{display:block}",
   'shorthand properties': cssContext({
     'shorthand background #1' : [
       'div{background-color:#111;background-image:url(aaa);background-repeat:repeat;background-position:0 0;background-attachment:scroll}',
-      'div{background:#111 url(aaa)}'
+      'div{background:url(aaa) #111}'
     ],
     'shorthand background #2' : [
       'div{background-color:#111;background-image:url(aaa);background-repeat:no-repeat;background-position:0 0;background-attachment:scroll}',
-      'div{background:#111 url(aaa) no-repeat}'
+      'div{background:url(aaa) no-repeat #111}'
     ],
     'shorthand important background' : [
       'div{background-color:#111!important;background-image:url(aaa)!important;background-repeat:repeat!important;background-position:0 0!important;background-attachment:scroll!important}',
-      'div{background:#111 url(aaa)!important}'
+      'div{background:url(aaa) #111!important}'
     ],
     'shorthand border-width': [
       '.t{border-top-width:7px;border-bottom-width:7px;border-left-width:4px;border-right-width:4px}',
@@ -1827,16 +1827,16 @@ title']{display:block}",
       'div{background:#fff;background:linear-gradient(whatever)}'
     ],
     'linear-gradient should NOT clear out background with color only, even if it has a color' : [
-      'div{background:#fff;background:#222 linear-gradient(whatever)}',
-      'div{background:#fff;background:#222 linear-gradient(whatever)}'
+      'div{background:#fff;background:linear-gradient(whatever) #222}',
+      'div{background:#fff;background:linear-gradient(whatever) #222}'
     ],
     'a background-image with just a linear-gradient should not be compacted to a shorthand' : [
       'div{background-color:#111;background-image:linear-gradient(aaa);background-repeat:no-repeat;background-position:0 0;background-attachment:scroll}',
       'div{background-color:#111;background-image:linear-gradient(aaa);background-repeat:no-repeat;background-position:0 0;background-attachment:scroll}'
     ],
     'a background-image with a none and a linear-gradient should result in two shorthands' : [
       'div{background-color:#111;background-image:none;background-image:linear-gradient(aaa);background-repeat:repeat;background-position:0 0;background-attachment:scroll}',
-      'div{background:#111;background:#111 linear-gradient(aaa)}'
+      'div{background:#111;background:linear-gradient(aaa) #111}'
     ]
   }),
   'cares about understandability of border components': cssContext({
@@ -1919,15 +1919,15 @@ title']{display:block}",
     ],
     'should take into account important background-color and shorthand others into background': [
       'p{background-color:#9fce00!important;background-image:url(hello);background-attachment:scroll;background-position:1px 2px;background-repeat:repeat-y}',
-      'p{background-color:#9fce00!important;background:url(hello) repeat-y 1px 2px}'
+      'p{background-color:#9fce00!important;background:url(hello) 1px 2px repeat-y}'
     ],
     'should take into account important outline-color and default value of outline-width': [
       'p{outline:inset medium;outline-color:#9fce00!important;outline-style:inset!important}',
       'p{outline:0;outline-color:#9fce00!important;outline-style:inset!important}'
     ],
     'should take into account important background-position remove its irrelevant counterpart': [
       'p{background:#9fce00 url(hello) 4px 5px;background-position:5px 3px!important}',
-      'p{background:#9fce00 url(hello);background-position:5px 3px!important}'
+      'p{background:url(hello) #9fce00;background-position:5px 3px!important}'
     ],
     'should take into account important background-position and assign the shortest possible value for its irrelevant counterpart': [
       'p{background:transparent;background-position:5px 3px!important}',
@@ -1949,7 +1949,7 @@ title']{display:block}",
     ],
     'when shorter, optimize inherited/non-inherited background granular properties into a non-inherited shorthand and some inherited granular properties': [
       'p{background-color:#9fce00;background-image:inherit;background-attachment:scroll;background-position:1px 2px;background-repeat:repeat-y}',
-      'p{background:#9fce00 repeat-y 1px 2px;background-image:inherit}'
+      'p{background:1px 2px repeat-y #9fce00;background-image:inherit}'
     ],
     'put inherit to the place where it consumes the least space': [
       'div{padding:0;padding-bottom:inherit;padding-right:inherit}',
@@ -2024,7 +2024,7 @@ title']{display:block}",
     'border radius H+V': 'a{border-radius:50%/100%}',
     'lost background position': [
       '.one{background:50% no-repeat}.one{background-image:url(/img.png)}',
-      '.one{background:url(/img.png) no-repeat 50%}'
+      '.one{background:url(/img.png) 50% no-repeat}'
     ]
   }),
   'viewport units': cssContext({