diff --git a/frameworks/compass/stylesheets/compass/css3/_gradient.scss b/frameworks/compass/stylesheets/compass/css3/_gradient.scss index 42d1a0f4ce..346410a306 100644 --- a/frameworks/compass/stylesheets/compass/css3/_gradient.scss +++ b/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. - // 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); + @include background-image($image, 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); - $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); + @include background-image($image, radial-gradient($center-position, $color-stops)); } diff --git a/frameworks/compass/stylesheets/compass/css3/_images.scss b/frameworks/compass/stylesheets/compass/css3/_images.scss index 497a3f34ee..f91f79f597 100644 --- a/frameworks/compass/stylesheets/compass/css3/_images.scss +++ b/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; } diff --git a/lib/compass/sass_extensions/functions/gradient_support.rb b/lib/compass/sass_extensions/functions/gradient_support.rb index 50d3452911..d4f6634f4c 100644 --- a/lib/compass/sass_extensions/functions/gradient_support.rb +++ b/lib/compass/sass_extensions/functions/gradient_support.rb @@ -123,13 +123,29 @@ def to_svg 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 @@ def linear_gradient(position_or_angle, *color_stops) 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 @@ def grad_point(position) 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 @@ def color_stops(*args) # 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 @@ def color_stop?(arg) 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{#{color_stops_svg(color_stops)}} svg(gradient) diff --git a/test/fixtures/stylesheets/compass/css/gradients.css b/test/fixtures/stylesheets/compass/css/gradients.css index c00df693d1..c471b0db4e 100644 --- a/test/fixtures/stylesheets/compass/css/gradients.css +++ b/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: 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, #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: 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, #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: 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, #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: 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, #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: 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, #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: 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, #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: 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, #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: 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, #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: 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, #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: 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, #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: 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, #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: 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, #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: 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, #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: 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, #dddddd 20%, #aaaaaa 50px); } .alpha-linear-svg { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0icmdiYSgyNTUsIDI1NSwgMjU1LCAwKSIvPjxzdG9wIG9mZnNldD0iNDUlIiBzdG9wLWNvbG9yPSJyZ2JhKDI1NSwgMTI3LCAxMjcsIDAuNSkiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); diff --git a/test/fixtures/stylesheets/compass/sass/gradients.sass b/test/fixtures/stylesheets/compass/sass/gradients.sass index 34cb4a0e07..fa44d4b681 100644 --- a/test/fixtures/stylesheets/compass/sass/gradients.sass +++ b/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