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 61b79a5..b882244 100644 (file)
--- 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 e901c2c..52f47e6 100644 (file)
--- 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 fdb5ff4..ed708c2 100644 (file)
--- 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 71679a4..ddc8cbd 100644 (file)
--- 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 81aa8d2..d07917a 100644 (file)
--- 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 4cb428a..1c0f04b 100644 (file)
--- 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 0db2cd3..123adc8 100644 (file)
--- 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);