Remove the css3 background simple bg support and move it to a new mix…

…in called background-with-css2-fallback.
pengwynn · Apr 2, 2011 · 0eef08e · 0eef08e
1 parent d2b4ec4
commit 0eef08e
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 4 deletions.
diff --git a/doc-src/content/CHANGELOG.markdown b/doc-src/content/CHANGELOG.markdown
@@ -17,6 +17,12 @@ The Documentation for the [latest preview release](http://beta.compass-style.org
 0.11.beta.6 (3/27/2011)
 ------------------------
 * Added opera prefix support for linear and radial gradients.
+* The CSS3 `background` mixin's "simple" background that came
+  before the prefixed versions has been removed. If you
+  need to target css2 background it is recommended that you set a
+  the background property before calling the `background` mixin
+  or you can call the `background-with-css2-fallback` if you want
+  keep using compass's automatic simplification of the arguments.
 
 0.11.beta.5 (03/27/2011)
 ------------------------

diff --git a/frameworks/compass/stylesheets/compass/css3/_images.scss b/frameworks/compass/stylesheets/compass/css3/_images.scss
@@ -16,8 +16,6 @@
   $backgrounds: compact($background-1, $background-2, $background-3, $background-4, $background-5,
                         $background-6, $background-7, $background-8, $background-9, $background-10);
   $mult-bgs: -compass-list-size($backgrounds) > 1;
-  $simple-background: if($mult-bgs or prefixed(-css2, $backgrounds), -css2(-compass-nth($backgrounds, last)), false);
-  @if not blank($simple-background)                                                       {       background:    $simple-background; }
   @if $experimental-support-for-svg     and prefixed(-svg,    $backgrounds)               {       background:    -svg($backgrounds); }
   @if $experimental-support-for-webkit  and prefixed(-webkit, $backgrounds)               {       background: -webkit($backgrounds); }
   @if $experimental-support-for-mozilla and prefixed(-moz,    $backgrounds)               {       background:    -moz($backgrounds); }
@@ -26,6 +24,28 @@
                                                                                                   background:         $backgrounds;
 }
 
+@mixin background-with-css2-fallback(
+  $background-1,
+  $background-2: false,
+  $background-3: false,
+  $background-4: false,
+  $background-5: false,
+  $background-6: false,
+  $background-7: false,
+  $background-8: false,
+  $background-9: false,
+  $background-10: false
+) {
+  $backgrounds: compact($background-1, $background-2, $background-3, $background-4, $background-5,
+                        $background-6, $background-7, $background-8, $background-9, $background-10);
+  $mult-bgs: -compass-list-size($backgrounds) > 1;
+  $simple-background: if($mult-bgs or prefixed(-css2, $backgrounds), -css2(-compass-nth($backgrounds, last)), false);
+  @if not blank($simple-background) { background: $simple-background; }
+  @include background($background-1, $background-2, $background-3, $background-4, $background-5,
+                      $background-6, $background-7, $background-8, $background-9, $background-10);
+}
+
+
 // Background image property support for vendor prefixing within values.
 @mixin background-image(
   $image-1,

diff --git a/test/fixtures/stylesheets/compass/css/gradients.css b/test/fixtures/stylesheets/compass/css/gradients.css
@@ -2,21 +2,27 @@
   background: white url("foo.png"); }
 
 .bg-shortcut-linear-gradient {
-  background: white ;
   background: white url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
   background: white -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
   background: white -moz-linear-gradient(top left, #dddddd, #aaaaaa);
   background: white -o-linear-gradient(top left, #dddddd, #aaaaaa);
   background: white linear-gradient(top left, #dddddd, #aaaaaa); }
 
 .bg-shortcut-radial-gradient {
-  background: white ;
   background: white url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
   background: white -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
   background: white -moz-radial-gradient(center center, #dddddd, #aaaaaa 100px);
   background: white -o-radial-gradient(center center, #dddddd, #aaaaaa 100px);
   background: white radial-gradient(center center, #dddddd, #aaaaaa 100px); }
 
+.bg-all-gradient-types-with-simplification {
+  background: #ffcc00;
+  background: url('/images/4x6.png?busted=true'), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'), #ffcc00;
+  background: url('/images/4x6.png?busted=true'), -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa)), -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa)), #ffcc00;
+  background: url('/images/4x6.png?busted=true'), -moz-linear-gradient(top left, #dddddd, #aaaaaa), -moz-radial-gradient(center center, #dddddd, #aaaaaa 100px), #ffcc00;
+  background: url('/images/4x6.png?busted=true'), -o-linear-gradient(top left, #dddddd, #aaaaaa), -o-radial-gradient(center center, #dddddd, #aaaaaa 100px), #ffcc00;
+  background: url('/images/4x6.png?busted=true'), linear-gradient(top left, #dddddd, #aaaaaa), radial-gradient(center center, #dddddd, #aaaaaa 100px), #ffcc00; }
+
 .bg-simple-image {
   background-image: url("foo.png"); }
 

diff --git a/test/fixtures/stylesheets/compass/sass/gradients.sass b/test/fixtures/stylesheets/compass/sass/gradients.sass
@@ -10,6 +10,9 @@ $experimental-support-for-svg: true
 .bg-shortcut-radial-gradient
   +background(#fff radial-gradient(center center, #ddd, #aaa 100px))
 
+.bg-all-gradient-types-with-simplification
+  +background-with-css2-fallback(image-url("4x6.png"), linear-gradient(top left, #ddd, #aaa), radial-gradient(center center, #ddd, #aaa 100px), #ffcc00)
+
 .bg-simple-image
   +background-image(url('foo.png'))