From: Jakub Pawlowicz Date: Fri, 30 Dec 2016 06:40:08 +0000 (+0100) Subject: See #703 - re-enables `background` longhand merging. X-Git-Url: https://git.ndcode.org/public/gitweb.cgi?a=commitdiff_plain;h=110c0cd04d3ffb7a9f5284710a1f8ed875eafa16;p=clean-css.git See #703 - re-enables `background` longhand merging. Why: * See #577 and #579 - these two clearly state the issue is about IE8 not IE9+, and according to tests and caniuse.com tables using `background-(clip|origin|size)` in `background` shorthand is supported on IE9+; * At this point I have no idea why it was disabled at the time. One idea is that it was disabled because IE9 doesn't support `properties.spaceAfterClosingBrace` and these two issues overlappedi at the time of 3.2 branch. (both were "fixed" in 3.3); * Let's enable it again, since the default mode is now IE10+. ** Important note **: Safari <7 and Android stock browser <4.4 does not support it either so you'll likely have to disable if you still support those. Just use `--compatibility ie8` to do so. Test case: https://jsfiddle.net/7zLwv7o0/5/ --- diff --git a/History.md b/History.md index 61b79a51..b882244f 100644 --- a/History.md +++ b/History.md @@ -6,6 +6,7 @@ * Removes `debug` API switch as stats are always gathered and available under `stats` property. * Replaces the old tokenizer with a new one which doesn't use any escaping. * Replaces the old `@import` inlining with one on top of the new tokenizer. +* Re-enables `background-(clip|origin|size)` merging with `background` shorthand. * Simplifies URL rebasing with a single `rebaseTo` option in API or inferred from `--output` in CLI. * Splits `inliner` option into `inlineRequest` and `inlineTimeout`. * Fixed issue [#209](https://github.com/jakubpawlowicz/clean-css/issues/209) - adds output formatting via `beautify` flag. diff --git a/lib/utils/compatibility.js b/lib/utils/compatibility.js index e901c2ca..52f47e6a 100644 --- a/lib/utils/compatibility.js +++ b/lib/utils/compatibility.js @@ -6,9 +6,9 @@ var DEFAULTS = { opacity: true // rgba / hsla }, properties: { - backgroundClipMerging: false, // background-clip to shorthand - backgroundOriginMerging: false, // background-origin to shorthand - backgroundSizeMerging: false, // background-size to shorthand + backgroundClipMerging: true, // background-clip to shorthand + backgroundOriginMerging: true, // background-origin to shorthand + backgroundSizeMerging: true, // background-size to shorthand colors: true, // any kind of color transformations, like `#ff00ff` to `#f0f` or `#fff` into `red` fontWeight: true, // normal -> '400' ieBangHack: false, // !ie suffix hacks on IE<8 @@ -53,6 +53,9 @@ DEFAULTS.ie8 = merge(DEFAULTS.ie9, { opacity: false }, properties: { + backgroundClipMerging: false, + backgroundOriginMerging: false, + backgroundSizeMerging: false, iePrefixHack: true, merging: false }, diff --git a/test/fixtures/issue-312-min.css b/test/fixtures/issue-312-min.css index fdb5ff4b..ed708c27 100644 --- a/test/fixtures/issue-312-min.css +++ b/test/fixtures/issue-312-min.css @@ -1 +1 @@ -.envelope{background:url(test/fixtures/one.png) top center repeat-x,url(test/fixtures/one.png) bottom center repeat-x,url(test/fixtures/two.png) 110% 10px no-repeat #eee;background-size:35px 4px,35px 4px,101px 61px} \ No newline at end of file +.envelope{background:url(test/fixtures/one.png) top center/35px 4px repeat-x,url(test/fixtures/one.png) bottom center/35px 4px repeat-x,url(test/fixtures/two.png) 110% 10px/101px 61px no-repeat #eee} \ No newline at end of file diff --git a/test/integration-test.js b/test/integration-test.js index 71679a4c..ddc8cbd0 100644 --- a/test/integration-test.js +++ b/test/integration-test.js @@ -2439,7 +2439,7 @@ vows.describe('integration tests') ], 'with background-size property': [ 'a{background:none;background-image:url(1.png);background-size:28px 28px}', - 'a{background:url(1.png);background-size:28px 28px}' + 'a{background:url(1.png) 0 0/28px 28px}' ] }) ) diff --git a/test/optimizer/restructure-test.js b/test/optimizer/restructure-test.js index 81aa8d2d..d07917a8 100644 --- a/test/optimizer/restructure-test.js +++ b/test/optimizer/restructure-test.js @@ -90,7 +90,7 @@ vows.describe('restructure') ], 'over a property in the same selector': [ 'div{background-size:100%}a{background:no-repeat;background-size:100%}', - 'div{background-size:100%}a{background:no-repeat;background-size:100%}' + 'div{background-size:100%}a{background:0 0/100% no-repeat}' ], 'multiple granular up to a shorthand': [ '.one{border:1px solid #bbb}.two{border-color:#666}.three{border-width:1px;border-style:solid}', diff --git a/test/properties/override-compacting-test.js b/test/properties/override-compacting-test.js index 4cb428a4..1c0f04b8 100644 --- a/test/properties/override-compacting-test.js +++ b/test/properties/override-compacting-test.js @@ -736,6 +736,55 @@ vows.describe(optimize) ] ]); } + }, + 'background-clip, -origin, and -size': { + 'topic': function () { + return _optimize('a{background:url(/image.png);background-size:10px;background-origin:border-box;background-clip:padding-box}'); + }, + 'into': function (properties) { + assert.deepEqual(properties, [ + [ + 'property', + ['property-name', 'background', [[1, 2, undefined]]], + ['property-value', 'url(/image.png)', [[1, 13, undefined]]], + ['property-value', 0], + ['property-value', 0], + ['property-value', '/'], + ['property-value', '10px', [[1, 45, undefined]]], + ['property-value', 'border-box', [[1, 68, undefined]]], + ['property-value', 'padding-box', [[1, 95, undefined]]] + ] + ]); + } + }, + 'background-clip, -origin, and -size - IE8 compatibility mode': { + 'topic': function () { + return _optimize('a{background:url(/image.png);background-size:10px;background-origin:border-box;background-clip:padding-box}', 'ie8'); + }, + 'into': function (properties) { + assert.deepEqual(properties, [ + [ + 'property', + ['property-name', 'background', [[1, 2, undefined]]], + ['property-value', 'url(/image.png)', [[1, 13, undefined]]] + ], + [ + 'property', + ['property-name', 'background-size', [[1, 29, undefined]]], + ['property-value', '10px', [[1, 45, undefined]]] + ], + [ + 'property', + ['property-name', 'background-origin', [[1, 50, undefined]]], + ['property-value', 'border-box', [[1, 68, undefined]]] + ], + [ + 'property', + ['property-name', 'background-clip', [[1, 79, undefined]]], + ['property-value', 'padding-box', [[1, 95, undefined]]] + ] + ]); + } } }) .addBatch({ diff --git a/test/utils/compatibility-test.js b/test/utils/compatibility-test.js index 0db2cd33..123adc8a 100644 --- a/test/utils/compatibility-test.js +++ b/test/utils/compatibility-test.js @@ -11,9 +11,9 @@ vows.describe(compatibility) 'gets default compatibility': function (compat) { assert.isTrue(compat.colors.opacity); assert.isTrue(compat.properties.colors); - assert.isFalse(compat.properties.backgroundClipMerging); - assert.isFalse(compat.properties.backgroundOriginMerging); - assert.isFalse(compat.properties.backgroundSizeMerging); + assert.isTrue(compat.properties.backgroundClipMerging); + assert.isTrue(compat.properties.backgroundOriginMerging); + assert.isTrue(compat.properties.backgroundSizeMerging); assert.isTrue(compat.properties.fontWeight); assert.isFalse(compat.properties.ieBangHack); assert.isFalse(compat.properties.iePrefixHack); @@ -51,9 +51,9 @@ vows.describe(compatibility) }, 'gets merged compatibility': function (compat) { assert.isTrue(compat.colors.opacity); - assert.isFalse(compat.properties.backgroundClipMerging); - assert.isFalse(compat.properties.backgroundOriginMerging); - assert.isFalse(compat.properties.backgroundSizeMerging); + assert.isTrue(compat.properties.backgroundClipMerging); + assert.isTrue(compat.properties.backgroundOriginMerging); + assert.isTrue(compat.properties.backgroundSizeMerging); assert.isTrue(compat.properties.colors); assert.isFalse(compat.properties.ieBangHack); assert.isFalse(compat.properties.iePrefixHack); @@ -84,9 +84,9 @@ vows.describe(compatibility) }, 'gets template compatibility': function (compat) { assert.isTrue(compat.colors.opacity); - assert.isFalse(compat.properties.backgroundClipMerging); - assert.isFalse(compat.properties.backgroundOriginMerging); - assert.isFalse(compat.properties.backgroundSizeMerging); + assert.isTrue(compat.properties.backgroundClipMerging); + assert.isTrue(compat.properties.backgroundOriginMerging); + assert.isTrue(compat.properties.backgroundSizeMerging); assert.isTrue(compat.properties.colors); assert.isTrue(compat.properties.fontWeight); assert.isFalse(compat.properties.ieBangHack); @@ -226,9 +226,9 @@ vows.describe(compatibility) 'gets calculated compatibility': function (compat) { assert.isTrue(compat.colors.opacity); assert.isTrue(compat.properties.colors); - assert.isFalse(compat.properties.backgroundClipMerging); - assert.isFalse(compat.properties.backgroundOriginMerging); - assert.isFalse(compat.properties.backgroundSizeMerging); + assert.isTrue(compat.properties.backgroundClipMerging); + assert.isTrue(compat.properties.backgroundOriginMerging); + assert.isTrue(compat.properties.backgroundSizeMerging); assert.isFalse(compat.properties.ieBangHack); assert.isTrue(compat.properties.iePrefixHack); assert.isFalse(compat.properties.ieSuffixHack); @@ -258,9 +258,9 @@ vows.describe(compatibility) 'gets calculated compatibility': function (compat) { assert.isTrue(compat.colors.opacity); assert.isTrue(compat.properties.colors); - assert.isFalse(compat.properties.backgroundClipMerging); - assert.isFalse(compat.properties.backgroundOriginMerging); - assert.isFalse(compat.properties.backgroundSizeMerging); + assert.isTrue(compat.properties.backgroundClipMerging); + assert.isTrue(compat.properties.backgroundOriginMerging); + assert.isTrue(compat.properties.backgroundSizeMerging); assert.isFalse(compat.properties.ieBangHack); assert.isTrue(compat.properties.iePrefixHack); assert.isFalse(compat.properties.ieSuffixHack);