diff --git a/lib/compass/sass_extensions/functions/gradient_support.rb b/lib/compass/sass_extensions/functions/gradient_support.rb index 91958a07..8d133a7d 100644 --- a/lib/compass/sass_extensions/functions/gradient_support.rb +++ b/lib/compass/sass_extensions/functions/gradient_support.rb @@ -60,9 +60,9 @@ module Compass::SassExtensions::Functions::GradientSupport end def to_webkit args = [ - grad_point(position_or_angle), + grad_point(position_or_angle || Sass::Script::String.new("center center")), "0", - grad_point(position_or_angle), + grad_point(position_or_angle || Sass::Script::String.new("center center")), grad_end_position(color_stops, Sass::Script::Bool.new(true)), grad_color_stops(color_stops) ] @@ -74,7 +74,7 @@ module Compass::SassExtensions::Functions::GradientSupport end def to_svg # XXX Add shape support if possible - radial_svg_gradient(color_stops, position_or_angle) + radial_svg_gradient(color_stops, position_or_angle || Sass::Script::String.new("center center")) end end @@ -97,18 +97,17 @@ module Compass::SassExtensions::Functions::GradientSupport s << ")" end def to_webkit - args = [ - grad_point(position_or_angle), - grad_point(opposite_position(position_or_angle)), - grad_color_stops(color_stops) - ] + args = [] + args << grad_point(position_or_angle || Sass::Script::String.new("top")) + args << grad_point(opposite_position(position_or_angle || Sass::Script::String.new("top"))) + args << grad_color_stops(color_stops) Sass::Script::String.new("-webkit-gradient(linear, #{args.join(', ')})") end def to_moz Sass::Script::String.new("-moz-#{to_s}") end def to_svg - linear_svg_gradient(color_stops, position_or_angle) + linear_svg_gradient(color_stops, position_or_angle || Sass::Script::String.new("top")) end end @@ -262,7 +261,7 @@ module Compass::SassExtensions::Functions::GradientSupport end %w(webkit moz o ms svg).each do |prefix| - class_eval <<-RUBY + class_eval <<-RUBY, __FILE__, __LINE__ + 1 def _#{prefix}(*args) args.map!{|a| a.is_a?(List) ? a.values : a}.flatten! List.new(*args.map!{|a| a.respond_to?(:to_#{prefix}) ? a.to_#{prefix} : a}) diff --git a/test/fixtures/stylesheets/compass/css/gradients.css b/test/fixtures/stylesheets/compass/css/gradients.css index 4d03dc0e..425afb8d 100644 --- a/test/fixtures/stylesheets/compass/css/gradients.css +++ b/test/fixtures/stylesheets/compass/css/gradients.css @@ -19,6 +19,16 @@ background-image: url('/images/4x6.png?busted=true'), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPiA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgLz4gPC9saW5lYXJHcmFkaWVudD4gPC9kZWZzPiA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPiA8L3N2Zz4g'), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8cmFkaWFsR3JhZGllbnQgaWQ9ImdyYWQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjeD0iNTAlIiBjeT0iNTAlIiByPSIxMDAiPiA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgLz4gPC9yYWRpYWxHcmFkaWVudD4gPC9kZWZzPiA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPiA8L3N2Zz4g'); background-image: url('/images/4x6.png?busted=true'), linear-gradient(top left, #dddddd 0%, #aaaaaa 100%), radial-gradient(center center, #dddddd 0%, #aaaaaa 100px); } +.bg-linear-gradient-no-position { + 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: -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 { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa)); background-image: -moz-linear-gradient(top, #dddddd 0%, #aaaaaa 100%); diff --git a/test/fixtures/stylesheets/compass/sass/gradients.sass b/test/fixtures/stylesheets/compass/sass/gradients.sass index c05a4e98..0fc7d85b 100644 --- a/test/fixtures/stylesheets/compass/sass/gradients.sass +++ b/test/fixtures/stylesheets/compass/sass/gradients.sass @@ -13,6 +13,13 @@ $experimental-support-for-svg: true .bg-all-gradient-types +background-image(image-url("4x6.png"), linear-gradient(top left, #ddd, #aaa), radial-gradient(center center, #ddd, #aaa 100px)) $experimental-support-for-svg: false + +.bg-linear-gradient-no-position + +background-image(linear-gradient(#ddd, #aaa)) + +.bg-radial-gradient-no-position + +background-image(radial-gradient(#ddd, #aaa 100px)) + .linear-1 +linear-gradient(color-stops(#dddddd, #aaaaaa))