From: Jakub Pawlowicz Date: Tue, 20 Jan 2015 22:09:58 +0000 (+0000) Subject: Fixes #435 - background-clip in background shorthand. X-Git-Url: https://git.ndcode.org/public/gitweb.cgi?a=commitdiff_plain;h=5ef19f612243f78b9a5eb6bcfffab93036b4f23d;p=clean-css.git 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 1e6a6b1a..b88b7bd0 100644 --- 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 c1e256e3..d54faea9 100644 --- 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 6294201b..186c4a97 100644 --- 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 a00c1bfc..ed68454a 100644 --- 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}',