Fixes #435 - background-clip in background shorthand.

Adds background-clip support in collapsing into background shorthands.
It hasn't been until now so such properties were effectively dropped
from shorthands resulting in a wrong background clipping.

diff --git a/History.md b/History.md
index 1e6a6b1..b88b7bd 100644 (file)
--- a/History.md
+++ b/History.md
@@ -8,6 +8,7 @@
 * Fixed issue [#351](https://github.com/GoalSmashers/clean-css/issues/351) - remote `@import`s after content.
 * Fixed issue [#357](https://github.com/GoalSmashers/clean-css/issues/357) - non-standard but valid URLs.
 * Fixed issue [#416](https://github.com/GoalSmashers/clean-css/issues/416) - accepts hash as `minify` argument.
+* Fixed issue [#435](https://github.com/GoalSmashers/clean-css/issues/435) - background-clip in shorthand.
 
 [3.0.6 / 2015-01-20](https://github.com/jakubpawlowicz/clean-css/compare/v3.0.5...v3.0.6)
 ==================

diff --git a/lib/properties/processable.js b/lib/properties/processable.js
index c1e256e..d54faea 100644 (file)
--- a/lib/properties/processable.js
+++ b/lib/properties/processable.js
@@ -165,19 +165,20 @@ module.exports = (function () {
   };
   breakUp.background = function (token) {
     // Default values
-    var result = Token.makeDefaults(['background-image', 'background-position', 'background-size', 'background-repeat', 'background-attachment', 'background-color'], token.isImportant);
+    var result = Token.makeDefaults(['background-image', 'background-position', 'background-size', 'background-repeat', 'background-attachment', 'background-clip', 'background-color'], token.isImportant);
     var image = result[0];
     var position = result[1];
     var size = result[2];
     var repeat = result[3];
     var attachment = result[4];
-    var color = result[5];
+    var clip = result[5];
+    var color = result[6];
     var positionSet = false;
 
     // Take care of inherit
     if (token.value === 'inherit') {
       // NOTE: 'inherit' is not a valid value for background-attachment so there we'll leave the default value
-      color.value = image.value =  repeat.value = position.value = size.value = attachment.value = 'inherit';
+      color.value = image.value =  repeat.value = position.value = size.value = attachment.value = clip.value = 'inherit';
       return result;
     }
 
@@ -192,6 +193,8 @@ module.exports = (function () {
 
       if (validator.isValidBackgroundAttachment(currentPart)) {
         attachment.value = currentPart;
+      } else if (validator.isValidBackgroundClip(currentPart)) {
+        clip.value = currentPart;
       } else if (validator.isValidBackgroundRepeat(currentPart)) {
         repeat.value = currentPart;
       } else if (validator.isValidBackgroundPositionPart(currentPart) || validator.isValidBackgroundSizePart(currentPart)) {
@@ -627,6 +630,7 @@ module.exports = (function () {
         'background-size',
         'background-repeat',
         'background-attachment',
+        'background-clip',
         'background-color'
       ],
       breakUp: breakUp.commaSeparatedMulitpleValues(breakUp.background),
@@ -636,6 +640,11 @@ module.exports = (function () {
       defaultValue: '0 0',
       shortestValue: '0'
     },
+    'background-clip': {
+      canOverride: canOverride.always,
+      defaultValue: 'border-box',
+      shortestValue: 'border-box'
+    },
     'background-color': {
       canOverride: canOverride.color,
       defaultValue: 'transparent',

diff --git a/lib/properties/validator.js b/lib/properties/validator.js
index 6294201..186c4a9 100644 (file)
--- a/lib/properties/validator.js
+++ b/lib/properties/validator.js
@@ -28,6 +28,7 @@ module.exports = (function () {
   var backgroundAttachmentKeywords = ['inherit', 'scroll', 'fixed', 'local'];
   var backgroundPositionKeywords = ['center', 'top', 'bottom', 'left', 'right'];
   var backgroundSizeKeywords = ['contain', 'cover'];
+  var backgroundClipKeywords = ['border-box', 'content-box', 'padding-box'];
   var listStyleTypeKeywords = ['armenian', 'circle', 'cjk-ideographic', 'decimal', 'decimal-leading-zero', 'disc', 'georgian', 'hebrew', 'hiragana', 'hiragana-iroha', 'inherit', 'katakana', 'katakana-iroha', 'lower-alpha', 'lower-greek', 'lower-latin', 'lower-roman', 'none', 'square', 'upper-alpha', 'upper-latin', 'upper-roman'];
   var listStylePositionKeywords = ['inside', 'outside', 'inherit'];
   var outlineStyleKeywords = ['auto', 'inherit', 'hidden', 'none', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset'];
@@ -105,6 +106,9 @@ module.exports = (function () {
     isValidBackgroundAttachment: function (s) {
       return backgroundAttachmentKeywords.indexOf(s) >= 0 || validator.isValidVariable(s);
     },
+    isValidBackgroundClip: function (s) {
+      return backgroundClipKeywords.indexOf(s) >= 0 || validator.isValidVariable(s);
+    },
     isValidBackgroundPositionPart: function (s) {
       return backgroundPositionKeywords.indexOf(s) >= 0 || cssUnitOrCalcRegex.test(s) || validator.isValidVariable(s);
     },

diff --git a/test/integration-test.js b/test/integration-test.js
index a00c1bf..ed68454 100644 (file)
--- a/test/integration-test.js
+++ b/test/integration-test.js
@@ -1987,15 +1987,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;background-size:auto}',
+      'div{background-color:#111;background-image:url(aaa);background-repeat:repeat;background-position:0 0;background-attachment:scroll;background-size:auto;background-clip:border-box}',
       '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;background-size:auto}',
+      'div{background-color:#111;background-image:url(aaa);background-repeat:no-repeat;background-position:0 0;background-attachment:scroll;background-size:auto;background-clip:border-box}',
       '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;background-size:auto!important}',
+      'div{background-color:#111!important;background-image:url(aaa)!important;background-repeat:repeat!important;background-position:0 0!important;background-attachment:scroll!important;background-size:auto!important;background-clip:border-box!important}',
       'div{background:url(aaa)#111!important}'
     ],
     'shorthand important background overriding': [
@@ -2046,7 +2046,7 @@ title']{display:block}",
       '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;background-size:auto}',
+      'div{background-color:#111;background-image:none;background-image:linear-gradient(aaa);background-repeat:repeat;background-position:0 0;background-attachment:scroll;background-size:auto;background-clip:border-box}',
       'div{background:#111;background:linear-gradient(aaa)#111}'
     ]
   }),
@@ -2129,7 +2129,7 @@ title']{display:block}",
       'p{margin:1px;margin-right:2px!important;margin-left:4px!important}'
     ],
     '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;background-size:auto}',
+      'p{background-color:#9fce00!important;background-image:url(hello);background-attachment:scroll;background-position:1px 2px;background-repeat:repeat-y;background-size:auto;background-clip:border-box}',
       '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': [
@@ -2151,16 +2151,16 @@ title']{display:block}",
       'p{margin:inherit}'
     ],
     'merge multiple inherited background granular properties into one inherited shorthand': [
-      'p{background-color:inherit;background-image:inherit;background-attachment:inherit;background-position:inherit;background-repeat:inherit;;background-size:inherit}',
+      'p{background-color:inherit;background-image:inherit;background-attachment:inherit;background-position:inherit;background-repeat:inherit;;background-size:inherit;background-clip:inherit}',
       'p{background:inherit}'
     ],
     'when shorter, optimize inherited/non-inherited background granular properties into an inherited shorthand and some non-inherited granular properties': [
-      'p{background-color:inherit;background-image:inherit;background-attachment:inherit;background-position:inherit;background-repeat:repeat-y;background-size:inherit}',
+      'p{background-color:inherit;background-image:inherit;background-attachment:inherit;background-position:inherit;background-repeat:repeat-y;background-size:inherit;background-clip:inherit}',
       'p{background:inherit;background-repeat:repeat-y}'
     ],
     '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;background-size:auto}',
-      'p{background:1px 2px repeat-y #9fce00;background-image:inherit}'
+      'p{background-color:#9fce00;background-image:inherit;background-attachment:scroll;background-position:1px 2px;background-repeat:repeat-y;background-size:auto;background-clip:inherit}',
+      'p{background:1px 2px repeat-y #9fce00;background-image:inherit;background-clip:inherit}'
     ],
     'put inherit to the place where it consumes the least space': [
       'div{padding:0;padding-bottom:inherit;padding-right:inherit}',
@@ -2287,6 +2287,16 @@ title']{display:block}",
       '*{background:url(test.png)calc(100% - 10px)center no-repeat #fff}'
     ]
   }),
+  'background-clip': cssContext({
+    'inside background shorthand': [
+      'div{background:content-box #000}',
+      'div{background:content-box #000}'
+    ],
+    'into background shorthand': [
+      'div{background:#000;background-clip:content-box}',
+      'div{background:content-box #000}'
+    ]
+  }),
   'background size with +properties.backgroundSizeMerging': cssContext({
     'with background-size property': [
       'a{background:none;background-image:url(1.png);background-size:28px 28px}',