Change the legacy gradient mixins to use the new background-image mixin.

frameworks/compass/stylesheets/compass/css3/_gradient.scss

@@ -1,4 +1,5 @@
 @import "compass/utilities/general/hacks";
+@import "images";
 
 // The linear gradient mixin works best across browsers if you use percentage-based color stops.
 //
@@ -33,23 +34,7 @@
 // - Opera
 
 @mixin linear-gradient($color-stops, $start: top, $image: false) {
-  // Firefox's gradient api is nice.
+  @include background-image($image, linear-gradient($start, $color-stops));
-  // Webkit's gradient api sucks -- hence these backflips:
-  $background: unquote("");
-  @if $image { $background : $image + unquote(", "); }
-  $start: unquote($start);
-  $end: opposite-position($start);
-
-  @if $experimental-support-for-svg {
-    background-image: #{$background}linear-svg-gradient($color-stops, $start);
-  }
-  @if $experimental-support-for-webkit {
-    background-image: #{$background}-webkit-gradient(linear, grad-point($start), grad-point($end), grad-color-stops($color-stops));
-  }
-  @if $experimental-support-for-mozilla {
-    background-image: #{$background}-moz-linear-gradient($start, $color-stops);
-  }
-  background-image: #{$background}#{linear}-gradient($start, $color-stops);
 }
 
 // Emit a IE-Specific filters that renders a simple linear gradient.
@@ -89,19 +74,5 @@
 // - Opera
 
 @mixin radial-gradient($color-stops, $center-position: center center, $image: false) {
-  $center-position: unquote($center-position);
+  @include background-image($image, radial-gradient($center-position, $color-stops));
-  $end-pos: grad-end-position($color-stops, true);
-  $background: unquote("");
-  @if $image { $background: $image + unquote(", "); }
-
-  @if $experimental-support-for-svg {
-    background-image: #{$background}radial-svg-gradient($color-stops, $center-position);
-  }
-  @if $experimental-support-for-webkit {
-    background-image: #{$background}-webkit-gradient(radial, grad-point($center-position), 0, grad-point($center-position), $end-pos, grad-color-stops($color-stops));
-  }
-  @if $experimental-support-for-mozilla {
-    background-image: #{$background}-moz-radial-gradient($center-position, circle, $color-stops);
-  }
-  background-image: #{$background}#{radial}-gradient($center-position, circle, $color-stops);
 }

frameworks/compass/stylesheets/compass/css3/_images.scss

@@ -15,9 +15,9 @@
 ) {
   $images: compact($image-1, $image-2, $image-3, $image-4, $image-5, $image-6, $image-7, $image-8, $image-9, $image-10);
 
-  @if $experimental-support-for-mozilla and prefixed(-moz,    $images) { background-image:    -moz($images); }
-  @if $experimental-support-for-webkit  and prefixed(-webkit, $images) { background-image: -webkit($images); }
   @if $experimental-support-for-svg     and prefixed(-svg,    $images) { background-image:    -svg($images); }
+  @if $experimental-support-for-webkit  and prefixed(-webkit, $images) { background-image: -webkit($images); }
+  @if $experimental-support-for-mozilla and prefixed(-moz,    $images) { background-image:    -moz($images); }
                                                                          background-image:         $images;
 }
 

lib/compass/sass_extensions/functions/gradient_support.rb

@@ -123,13 +123,29 @@ module Compass::SassExtensions::Functions::GradientSupport
   module Functions
 
     def radial_gradient(position_or_angle, shape_or_size, *color_stops)
+      # Have to deal with variable length/meaning arguments.
       if color_stop?(shape_or_size)
         color_stops.unshift(shape_or_size)
         shape_or_size = nil
+      elsif list_of_color_stops?(shape_or_size)
+        # Support legacy use of the color-stops() function
+        color_stops = shape_or_size.values + color_stops
+        shape_or_size = nil
       end
+      shape_or_size = nil if shape_or_size && !shape_or_size.to_bool # nil out explictly passed falses
+      # ditto for position_or_angle
       if color_stop?(position_or_angle)
         color_stops.unshift(position_or_angle)
         position_or_angle = nil
+      elsif list_of_color_stops?(position_or_angle)
+        color_stops = position_or_angle.values + color_stops
+        position_or_angle = nil
+      end
+      position_or_angle = nil if position_or_angle && !position_or_angle.to_bool
+
+      # Support legacy use of the color-stops() function
+      if color_stops.size == 1 && list_of_color_stops?(color_stops.first)
+        color_stops = color_stops.first.values
       end
       RadialGradient.new(position_or_angle, shape_or_size, send(:color_stops, *color_stops))
     end
@@ -138,6 +154,15 @@ module Compass::SassExtensions::Functions::GradientSupport
       if color_stop?(position_or_angle)
         color_stops.unshift(position_or_angle)
         position_or_angle = nil
+      elsif list_of_color_stops?(position_or_angle)
+        color_stops = position_or_angle.values + color_stops
+        position_or_angle = nil
+      end
+      position_or_angle = nil if position_or_angle && !position_or_angle.to_bool
+
+      # Support legacy use of the color-stops() function
+      if color_stops.size == 1 && list_of_color_stops?(color_stops.first)
+        color_stops = color_stops.first.values
       end
       LinearGradient.new(position_or_angle, send(:color_stops, *color_stops))
     end
@@ -233,6 +258,8 @@ module Compass::SassExtensions::Functions::GradientSupport
     def color_stops(*args)
       List.new(*args.map do |arg|
         case arg
+        when ColorStop
+          arg
         when Sass::Script::Color
           ColorStop.new(arg)
         when Sass::Script::String
@@ -240,7 +267,7 @@ module Compass::SassExtensions::Functions::GradientSupport
           # So we have to reparse the expression
           parse_color_stop(arg)
         else
-          raise Sass::SyntaxError, "Not a valid color stop: #{arg}"
+          raise Sass::SyntaxError, "Not a valid color stop: #{arg.class.name}: #{arg}"
         end
       end)
     end
@@ -423,6 +450,10 @@ module Compass::SassExtensions::Functions::GradientSupport
       nil
     end
 
+    def list_of_color_stops?(arg)
+      arg.is_a?(List) && arg.values.first.is_a?(ColorStop)
+    end
+
     def linear_svg(color_stops, x1, y1, x2, y2)
       gradient = %Q{<linearGradient id="grad" x1="#{x1}" y1="#{y1}" x2="#{x2}" y2="#{y2}">#{color_stops_svg(color_stops)}</linearGradient>}
       svg(gradient)

test/fixtures/stylesheets/compass/css/gradients.css

@@ -2,21 +2,21 @@
   background-image: url("foo.png"); }
 
 .bg-linear-gradient {
-  background-image: -moz-linear-gradient(top left, #dddddd, #aaaaaa);
-  background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
+  background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
+  background-image: -moz-linear-gradient(top left, #dddddd 0%, #aaaaaa 100%);
   background-image: linear-gradient(top left, #dddddd 0%, #aaaaaa 100%); }
 
 .bg-radial-gradient {
-  background-image: -moz-radial-gradient(center center, #dddddd, #aaaaaa 100px);
-  background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
+  background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
+  background-image: -moz-radial-gradient(center center, #dddddd 0%, #aaaaaa 100px);
   background-image: radial-gradient(center center, #dddddd 0%, #aaaaaa 100px); }
 
 .bg-all-gradient-types {
-  background-image: url('/images/4x6.png?busted=true'), -moz-linear-gradient(top left, #dddddd, #aaaaaa), -moz-radial-gradient(center center, #dddddd, #aaaaaa 100px);
-  background-image: 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));
   background-image: 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');
+  background-image: 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));
+  background-image: url('/images/4x6.png?busted=true'), -moz-linear-gradient(top left, #dddddd 0%, #aaaaaa 100%), -moz-radial-gradient(center center, #dddddd 0%, #aaaaaa 100px);
   background-image: url('/images/4x6.png?busted=true'), linear-gradient(top left, #dddddd 0%, #aaaaaa 100%), radial-gradient(center center, #dddddd 0%, #aaaaaa 100px); }
 
 .border-image-gradient {
@@ -53,13 +53,13 @@
   content: radial-gradient(#00ff00 0%, #ff0000 10px); }
 
 .bg-linear-gradient-no-position {
-  background-image: -moz-linear-gradient(#dddddd, #aaaaaa);
   background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
+  background-image: -moz-linear-gradient(#dddddd 0%, #aaaaaa 100%);
   background-image: linear-gradient(#dddddd 0%, #aaaaaa 100%); }
 
 .bg-radial-gradient-no-position {
-  background-image: -moz-radial-gradient(#dddddd, #aaaaaa 100px);
   background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
+  background-image: -moz-radial-gradient(#dddddd 0%, #aaaaaa 100px);
   background-image: radial-gradient(#dddddd 0%, #aaaaaa 100px); }
 
 .linear-1 {
@@ -124,38 +124,38 @@
 
 .radial-1 {
   background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
-  background-image: -moz-radial-gradient(center center, circle, #dddddd 0%, #aaaaaa 100%);
+  background-image: -moz-radial-gradient(center center, #dddddd 0%, #aaaaaa 100px);
-  background-image: radial-gradient(center center, circle, #dddddd 0%, #aaaaaa 100%); }
+  background-image: radial-gradient(center center, #dddddd 0%, #aaaaaa 100px); }
 
 .radial-2 {
   background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
-  background-image: -moz-radial-gradient(center center, circle, #dddddd 0%, #aaaaaa 100%);
+  background-image: -moz-radial-gradient(center center, #dddddd 0%, #aaaaaa 100px);
-  background-image: radial-gradient(center center, circle, #dddddd 0%, #aaaaaa 100%); }
+  background-image: radial-gradient(center center, #dddddd 0%, #aaaaaa 100px); }
 
 .radial-3 {
   background-image: -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
-  background-image: -moz-radial-gradient(top center, circle, #dddddd 0%, #aaaaaa 100%);
+  background-image: -moz-radial-gradient(top center, #dddddd 0%, #aaaaaa 100px);
-  background-image: radial-gradient(top center, circle, #dddddd 0%, #aaaaaa 100%); }
+  background-image: radial-gradient(top center, #dddddd 0%, #aaaaaa 100px); }
 
 .radial-4 {
   background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
-  background-image: -moz-radial-gradient(center center, circle, #dddddd 0%, #aaaaaa 100%);
+  background-image: -moz-radial-gradient(center center, #dddddd 0%, #aaaaaa 100px);
-  background-image: radial-gradient(center center, circle, #dddddd 0%, #aaaaaa 100%); }
+  background-image: radial-gradient(center center, #dddddd 0%, #aaaaaa 100px); }
 
 .radial-5 {
   background-image: -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
-  background-image: -moz-radial-gradient(top center, circle, #dddddd 0%, #aaaaaa 100%);
+  background-image: -moz-radial-gradient(top center, #dddddd 0%, #aaaaaa 100px);
-  background-image: radial-gradient(top center, circle, #dddddd 0%, #aaaaaa 100%); }
+  background-image: radial-gradient(top center, #dddddd 0%, #aaaaaa 100px); }
 
 .radial-6 {
   background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 50, color-stop(40%, #dddddd), color-stop(100%, #aaaaaa));
-  background-image: -moz-radial-gradient(center center, circle, #dddddd 20px, #aaaaaa 50px);
+  background-image: -moz-radial-gradient(center center, #dddddd 20px, #aaaaaa 50px);
-  background-image: radial-gradient(center center, circle, #dddddd 20px, #aaaaaa 50px); }
+  background-image: radial-gradient(center center, #dddddd 20px, #aaaaaa 50px); }
 
 .radial-7 {
   background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 50, color-stop(20%, #dddddd), color-stop(100%, #aaaaaa));
-  background-image: -moz-radial-gradient(center center, circle, #dddddd 20%, #aaaaaa 50px);
+  background-image: -moz-radial-gradient(center center, #dddddd 20%, #aaaaaa 50px);
-  background-image: radial-gradient(center center, circle, #dddddd 20%, #aaaaaa 50px); }
+  background-image: radial-gradient(center center, #dddddd 20%, #aaaaaa 50px); }
 
 .alpha-linear {
   background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, rgba(255, 255, 255, 0)), color-stop(45%, rgba(255, 127, 127, 0.5)), color-stop(50%, #ffffff));
@@ -237,44 +237,44 @@
 .radial-svg-1 {
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
   background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
-  background-image: -moz-radial-gradient(center center, circle, #dddddd 0%, #aaaaaa 100%);
+  background-image: -moz-radial-gradient(center center, #dddddd 0%, #aaaaaa 100px);
-  background-image: radial-gradient(center center, circle, #dddddd 0%, #aaaaaa 100%); }
+  background-image: radial-gradient(center center, #dddddd 0%, #aaaaaa 100px); }
 
 .radial-svg-2 {
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
   background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
-  background-image: -moz-radial-gradient(center center, circle, #dddddd 0%, #aaaaaa 100%);
+  background-image: -moz-radial-gradient(center center, #dddddd 0%, #aaaaaa 100px);
-  background-image: radial-gradient(center center, circle, #dddddd 0%, #aaaaaa 100%); }
+  background-image: radial-gradient(center center, #dddddd 0%, #aaaaaa 100px); }
 
 .radial-svg-3 {
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjAlIiByPSIxMDAiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNkZGRkZGQiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhYWFhYWEiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
   background-image: -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
-  background-image: -moz-radial-gradient(top center, circle, #dddddd 0%, #aaaaaa 100%);
+  background-image: -moz-radial-gradient(top center, #dddddd 0%, #aaaaaa 100px);
-  background-image: radial-gradient(top center, circle, #dddddd 0%, #aaaaaa 100%); }
+  background-image: radial-gradient(top center, #dddddd 0%, #aaaaaa 100px); }
 
 .radial-svg-4 {
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
   background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
-  background-image: -moz-radial-gradient(center center, circle, #dddddd 0%, #aaaaaa 100%);
+  background-image: -moz-radial-gradient(center center, #dddddd 0%, #aaaaaa 100px);
-  background-image: radial-gradient(center center, circle, #dddddd 0%, #aaaaaa 100%); }
+  background-image: radial-gradient(center center, #dddddd 0%, #aaaaaa 100px); }
 
 .radial-svg-5 {
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjAlIiByPSIxMDAiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNkZGRkZGQiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhYWFhYWEiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
   background-image: -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
-  background-image: -moz-radial-gradient(top center, circle, #dddddd 0%, #aaaaaa 100%);
+  background-image: -moz-radial-gradient(top center, #dddddd 0%, #aaaaaa 100px);
-  background-image: radial-gradient(top center, circle, #dddddd 0%, #aaaaaa 100%); }
+  background-image: radial-gradient(top center, #dddddd 0%, #aaaaaa 100px); }
 
 .radial-svg-6 {
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNTAiPjxzdG9wIG9mZnNldD0iNDAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
   background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 50, color-stop(40%, #dddddd), color-stop(100%, #aaaaaa));
-  background-image: -moz-radial-gradient(center center, circle, #dddddd 20px, #aaaaaa 50px);
+  background-image: -moz-radial-gradient(center center, #dddddd 20px, #aaaaaa 50px);
-  background-image: radial-gradient(center center, circle, #dddddd 20px, #aaaaaa 50px); }
+  background-image: radial-gradient(center center, #dddddd 20px, #aaaaaa 50px); }
 
 .radial-svg-7 {
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNTAiPjxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
   background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 50, color-stop(20%, #dddddd), color-stop(100%, #aaaaaa));
-  background-image: -moz-radial-gradient(center center, circle, #dddddd 20%, #aaaaaa 50px);
+  background-image: -moz-radial-gradient(center center, #dddddd 20%, #aaaaaa 50px);
-  background-image: radial-gradient(center center, circle, #dddddd 20%, #aaaaaa 50px); }
+  background-image: radial-gradient(center center, #dddddd 20%, #aaaaaa 50px); }
 
 .alpha-linear-svg {
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0icmdiYSgyNTUsIDI1NSwgMjU1LCAwKSIvPjxzdG9wIG9mZnNldD0iNDUlIiBzdG9wLWNvbG9yPSJyZ2JhKDI1NSwgMTI3LCAxMjcsIDAuNSkiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');

test/fixtures/stylesheets/compass/sass/gradients.sass

@@ -82,23 +82,23 @@ $experimental-support-for-svg: false
 .radial-1
   // A default radial gradient:
      A centered gradient having the shape of the container (aka ellipse)
-  +radial-gradient(color-stops(#dddddd, #aaaaaa))
+  +radial-gradient(color-stops(#dddddd, #aaaaaa 100px))
 
 .radial-2
   // A centered gradient having the shape of the container (aka ellipse)
-  +radial-gradient(color-stops(#dddddd, #aaaaaa))
+  +radial-gradient(color-stops(#dddddd, #aaaaaa 100px))
 
 .radial-3
   // A centered gradient at the top having the shape of the container (aka ellipse)
-  +radial-gradient(color-stops(#dddddd, #aaaaaa), top center)
+  +radial-gradient(color-stops(#dddddd, #aaaaaa 100px), top center)
 
 .radial-4
   // A centered gradient having a circular shape
-  +radial-gradient(color-stops(#dddddd, #aaaaaa))
+  +radial-gradient(color-stops(#dddddd, #aaaaaa 100px))
 
 .radial-5
   // A centered gradient at the top having a circular shape
-  +radial-gradient(color-stops(#dddddd, #aaaaaa), top center)
+  +radial-gradient(color-stops(#dddddd, #aaaaaa 100px), top center)
 
 .radial-6
   // A centered circular gradient with color stops
@@ -153,23 +153,23 @@ $experimental-support-for-svg: true
 .radial-svg-1
   // A default radial gradient:
      A centered gradient having the shape of the container (aka ellipse)
-  +radial-gradient(color-stops(#dddddd, #aaaaaa))
+  +radial-gradient(color-stops(#dddddd, #aaaaaa 100px))
 
 .radial-svg-2
   // A centered gradient having the shape of the container (aka ellipse)
-  +radial-gradient(color-stops(#dddddd, #aaaaaa))
+  +radial-gradient(color-stops(#dddddd, #aaaaaa 100px))
 
 .radial-svg-3
   // A centered gradient at the top having the shape of the container (aka ellipse)
-  +radial-gradient(color-stops(#dddddd, #aaaaaa), top center)
+  +radial-gradient(color-stops(#dddddd, #aaaaaa 100px), top center)
 
 .radial-svg-4
   // A centered gradient having a circular shape
-  +radial-gradient(color-stops(#dddddd, #aaaaaa))
+  +radial-gradient(color-stops(#dddddd, #aaaaaa 100px))
 
 .radial-svg-5
   // A centered gradient at the top having a circular shape
-  +radial-gradient(color-stops(#dddddd, #aaaaaa), top center)
+  +radial-gradient(color-stops(#dddddd, #aaaaaa 100px), top center)
 
 .radial-svg-6
   // A centered circular gradient with color stops