handle missing gradient arguments.

This commit is contained in:
Chris Eppstein 2010-11-14 12:40:22 -08:00
parent e8073dc247
commit e2137814df
3 changed files with 26 additions and 10 deletions

View File

@ -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})

View File

@ -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%);

View File

@ -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))