github-migration/compass
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Allow degrees for linear and radial gradients. Currently no support for SVG gradients using degrees. Partial fix for #303

Browse Source
This commit is contained in:
Chris Eppstein 2011-04-10 14:14:44 -07:00
parent 73a01b3677
commit ad0e172ec3
6 changed files with 81 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
doc-src/Gemfile
View File

@ -16,6 +16,6 @@ gem 'compass', :path => ".."
gem 'compass-susy-plugin', ">=0.7.0.pre8" gem 'compass-susy-plugin', ">=0.7.0.pre8"
gem 'css-slideshow', "0.2.0" gem 'css-slideshow', "0.2.0"
gem 'json' gem 'json'
gem 'css_parser' gem 'css_parser', "1.0.1"
gem 'ruby-prof' gem 'ruby-prof'

4
doc-src/Gemfile.lock
View File

@ -23,7 +23,7 @@ GEM
cri (1.0.1) cri (1.0.1)
css-slideshow (0.2.0) css-slideshow (0.2.0)
compass (>= 0.10.0.rc3) compass (>= 0.10.0.rc3)
css_parser (1.1.9) css_parser (1.0.1)
fssm (0.1.2) fssm (0.1.2)
haml (3.1.0.alpha.147) haml (3.1.0.alpha.147)
i18n (0.4.2) i18n (0.4.2)
@ -51,7 +51,7 @@ DEPENDENCIES
compass! compass!
compass-susy-plugin (>= 0.7.0.pre8) compass-susy-plugin (>= 0.7.0.pre8)
css-slideshow (= 0.2.0) css-slideshow (= 0.2.0)
css_parser css_parser (= 1.0.1)
fssm (= 0.1.2) fssm (= 0.1.2)
haml (>= 3.1.0.alpha.36) haml (>= 3.1.0.alpha.36)
json json

7
lib/compass/sass_extensions/functions/constants.rb
View File

@ -1,5 +1,12 @@
module Compass::SassExtensions::Functions::Constants module Compass::SassExtensions::Functions::Constants
if defined?(Sass::Script::List) if defined?(Sass::Script::List)
POSITIONS = /top|bottom|left|right|center/
def is_position(position)
Sass::Script::Bool.new(position.is_a?(Sass::Script::String) && !!(position.value =~ POSITIONS))
end
def is_position_list(position_list)
Sass::Script::Bool.new(position_list.is_a?(Sass::Script::List) && position_list.value.all?{|p| is_position(p).to_bool})
end
# returns the opposite position of a side or corner. # returns the opposite position of a side or corner.
def opposite_position(position) def opposite_position(position)
position = unless position.is_a?(Sass::Script::List) position = unless position.is_a?(Sass::Script::List)

99
lib/compass/sass_extensions/functions/gradient_support.rb
View File

@ -34,15 +34,15 @@ module Compass::SassExtensions::Functions::GradientSupport
end end
class RadialGradient < Sass::Script::Literal class RadialGradient < Sass::Script::Literal
attr_accessor :position_and_angle, :shape_and_size, :color_stops attr_accessor :position_or_angle, :shape_and_size, :color_stops
def children def children
[color_stops, position_and_angle, shape_and_size].compact [color_stops, position_or_angle, shape_and_size].compact
end end
def initialize(position_and_angle, shape_and_size, color_stops) def initialize(position_or_angle, shape_and_size, color_stops)
unless color_stops.value.size >= 2 unless color_stops.value.size >= 2
raise Sass::SyntaxError, "At least two color stops are required for a radial-gradient" raise Sass::SyntaxError, "At least two color stops are required for a radial-gradient"
end end
self.position_and_angle = position_and_angle self.position_or_angle = position_or_angle
self.shape_and_size = shape_and_size self.shape_and_size = shape_and_size
self.color_stops = color_stops self.color_stops = color_stops
end end
@ -51,22 +51,31 @@ module Compass::SassExtensions::Functions::GradientSupport
end end
def to_s(options = self.options) def to_s(options = self.options)
s = "radial-gradient(" s = "radial-gradient("
s << position_and_angle.to_s(options) << ", " if position_and_angle s << position_or_angle.to_s(options) << ", " if position_or_angle
s << shape_and_size.to_s(options) << ", " if shape_and_size s << shape_and_size.to_s(options) << ", " if shape_and_size
s << color_stops.to_s(options) s << color_stops.to_s(options)
s << ")" s << ")"
end end
def supports?(aspect) def supports?(aspect)
GRADIENT_ASPECTS.include?(aspect) if aspect == "svg"
if position_or_angle.nil? || is_position(position_or_angle).to_bool || is_position_list(position_or_angle).to_bool
true
else
Compass::Util.compass_warn("Warning: Angle-based gradients are not yet supported in SVG. Found: #{position_or_angle}")
false
end
else
GRADIENT_ASPECTS.include?(aspect)
end
end end
def has_aspect? def has_aspect?
true true
end end
def to_webkit(options = self.options) def to_webkit(options = self.options)
args = [ args = [
grad_point(position_and_angle || _center_position), grad_point(position_or_angle || _center_position),
Sass::Script::String.new("0"), Sass::Script::String.new("0"),
grad_point(position_and_angle || _center_position), grad_point(position_or_angle || _center_position),
grad_end_position(color_stops, Sass::Script::Bool.new(true)), grad_end_position(color_stops, Sass::Script::Bool.new(true)),
grad_color_stops(color_stops) grad_color_stops(color_stops)
] ]
@ -82,7 +91,7 @@ module Compass::SassExtensions::Functions::GradientSupport
end end
def to_svg(options = self.options) def to_svg(options = self.options)
# XXX Add shape support if possible # XXX Add shape support if possible
radial_svg_gradient(color_stops, position_and_angle || _center_position) radial_svg_gradient(color_stops, position_or_angle || _center_position)
end end
def to_pie(options = self.options) def to_pie(options = self.options)
Compass::Logger.new.record(:warning, "PIE does not support radial-gradient.") Compass::Logger.new.record(:warning, "PIE does not support radial-gradient.")
@ -94,15 +103,15 @@ module Compass::SassExtensions::Functions::GradientSupport
end end
class LinearGradient < Sass::Script::Literal class LinearGradient < Sass::Script::Literal
attr_accessor :color_stops, :position_and_angle attr_accessor :color_stops, :position_or_angle
def children def children
[color_stops, position_and_angle].compact [color_stops, position_or_angle].compact
end end
def initialize(position_and_angle, color_stops) def initialize(position_or_angle, color_stops)
unless color_stops.value.size >= 2 unless color_stops.value.size >= 2
raise Sass::SyntaxError, "At least two color stops are required for a linear-gradient" raise Sass::SyntaxError, "At least two color stops are required for a linear-gradient"
end end
self.position_and_angle = position_and_angle self.position_or_angle = position_or_angle
self.color_stops = color_stops self.color_stops = color_stops
end end
def inspect def inspect
@ -110,20 +119,29 @@ module Compass::SassExtensions::Functions::GradientSupport
end end
def to_s(options = self.options) def to_s(options = self.options)
s = "linear-gradient(" s = "linear-gradient("
s << position_and_angle.to_s(options) << ", " if position_and_angle s << position_or_angle.to_s(options) << ", " if position_or_angle
s << color_stops.to_s(options) s << color_stops.to_s(options)
s << ")" s << ")"
end end
def supports?(aspect) def supports?(aspect)
GRADIENT_ASPECTS.include?(aspect) if aspect == "svg"
if position_or_angle.nil? || is_position(position_or_angle).to_bool || is_position_list(position_or_angle).to_bool
true
else
Compass::Util.compass_warn("Warning: Angle-based gradients are not yet supported in SVG. Found: #{position_or_angle}")
false
end
else
GRADIENT_ASPECTS.include?(aspect)
end
end end
def has_aspect? def has_aspect?
true true
end end
def to_webkit(options = self.options) def to_webkit(options = self.options)
args = [] args = []
args << grad_point(position_and_angle || Sass::Script::String.new("top")) args << grad_point(position_or_angle || Sass::Script::String.new("top"))
args << grad_point(opposite_position(position_and_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) args << grad_color_stops(color_stops)
args.each{|a| a.options = options} args.each{|a| a.options = options}
Sass::Script::String.new("-webkit-gradient(linear, #{args.join(', ')})") Sass::Script::String.new("-webkit-gradient(linear, #{args.join(', ')})")
@ -135,7 +153,7 @@ module Compass::SassExtensions::Functions::GradientSupport
Sass::Script::String.new("-o-#{to_s(options)}") Sass::Script::String.new("-o-#{to_s(options)}")
end end
def to_svg(options = self.options) def to_svg(options = self.options)
linear_svg_gradient(color_stops, position_and_angle || Sass::Script::String.new("top")) linear_svg_gradient(color_stops, position_or_angle || Sass::Script::String.new("top"))
end end
def to_pie(options = self.options) def to_pie(options = self.options)
# PIE just uses the standard rep, but the property is prefixed so # PIE just uses the standard rep, but the property is prefixed so
@ -150,13 +168,18 @@ module Compass::SassExtensions::Functions::GradientSupport
module Functions module Functions
# given a position list, return a corresponding position in percents # given a position list, return a corresponding position in percents
# otherwise, returns the original argument
def grad_point(position) def grad_point(position)
original_value = position
position = unless position.is_a?(Sass::Script::List) position = unless position.is_a?(Sass::Script::List)
Sass::Script::List.new([position], :space) Sass::Script::List.new([position], :space)
else else
Sass::Script::List.new(position.value.dup, position.separator) Sass::Script::List.new(position.value.dup, position.separator)
end end
position.value.reject!{|p| p.is_a?(Sass::Script::Number) && p.numerator_units.include?("deg")} # Handle unknown arguments by passing them along untouched.
unless position.value.all?{|p| is_position(p).to_bool }
return original_value
end
if (position.value.first.value =~ /top|bottom/) or (position.value.last.value =~ /left|right/) if (position.value.first.value =~ /top|bottom/) or (position.value.last.value =~ /left|right/)
# browsers are pretty forgiving of reversed positions so we are too. # browsers are pretty forgiving of reversed positions so we are too.
position.value.reverse! position.value.reverse!
@ -198,7 +221,7 @@ module Compass::SassExtensions::Functions::GradientSupport
end, :comma) end, :comma)
end end
def radial_gradient(position_and_angle, shape_and_size, *color_stops) def radial_gradient(position_or_angle, shape_and_size, *color_stops)
# Have to deal with variable length/meaning arguments. # Have to deal with variable length/meaning arguments.
if color_stop?(shape_and_size) if color_stop?(shape_and_size)
color_stops.unshift(shape_and_size) color_stops.unshift(shape_and_size)
@ -209,38 +232,38 @@ module Compass::SassExtensions::Functions::GradientSupport
shape_and_size = nil shape_and_size = nil
end end
shape_and_size = nil if shape_and_size && !shape_and_size.to_bool # nil out explictly passed falses shape_and_size = nil if shape_and_size && !shape_and_size.to_bool # nil out explictly passed falses
# ditto for position_and_angle # ditto for position_or_angle
if color_stop?(position_and_angle) if color_stop?(position_or_angle)
color_stops.unshift(position_and_angle) color_stops.unshift(position_or_angle)
position_and_angle = nil position_or_angle = nil
elsif list_of_color_stops?(position_and_angle) elsif list_of_color_stops?(position_or_angle)
color_stops = position_and_angle.value + color_stops color_stops = position_or_angle.value + color_stops
position_and_angle = nil position_or_angle = nil
end end
position_and_angle = nil if position_and_angle && !position_and_angle.to_bool position_or_angle = nil if position_or_angle && !position_or_angle.to_bool
# Support legacy use of the color-stops() function # Support legacy use of the color-stops() function
if color_stops.size == 1 && list_of_color_stops?(color_stops.first) if color_stops.size == 1 && list_of_color_stops?(color_stops.first)
color_stops = color_stops.first.value color_stops = color_stops.first.value
end end
RadialGradient.new(position_and_angle, shape_and_size, send(:color_stops, *color_stops)) RadialGradient.new(position_or_angle, shape_and_size, send(:color_stops, *color_stops))
end end
def linear_gradient(position_and_angle, *color_stops) def linear_gradient(position_or_angle, *color_stops)
if color_stop?(position_and_angle) if color_stop?(position_or_angle)
color_stops.unshift(position_and_angle) color_stops.unshift(position_or_angle)
position_and_angle = nil position_or_angle = nil
elsif list_of_color_stops?(position_and_angle) elsif list_of_color_stops?(position_or_angle)
color_stops = position_and_angle.value + color_stops color_stops = position_or_angle.value + color_stops
position_and_angle = nil position_or_angle = nil
end end
position_and_angle = nil if position_and_angle && !position_and_angle.to_bool position_or_angle = nil if position_or_angle && !position_or_angle.to_bool
# Support legacy use of the color-stops() function # Support legacy use of the color-stops() function
if color_stops.size == 1 && (stops = list_of_color_stops?(color_stops.first)) if color_stops.size == 1 && (stops = list_of_color_stops?(color_stops.first))
color_stops = stops color_stops = stops
end end
LinearGradient.new(position_and_angle, send(:color_stops, *color_stops)) LinearGradient.new(position_or_angle, send(:color_stops, *color_stops))
end end
# returns color-stop() calls for use in webkit. # returns color-stop() calls for use in webkit.

20
test/fixtures/stylesheets/compass/css/gradients.css vendored
View File

@ -43,20 +43,16 @@
background-image: radial-gradient(center center, #dddddd, #aaaaaa 100px); } background-image: radial-gradient(center center, #dddddd, #aaaaaa 100px); }
.bg-linear-gradient-with-angle { .bg-linear-gradient-with-angle {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-image: -webkit-gradient(linear, -45deg, -45deg, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-size: 100%; background-image: -moz-linear-gradient(-45deg, #dddddd, #aaaaaa);
background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa)); background-image: -o-linear-gradient(-45deg, #dddddd, #aaaaaa);
background-image: -moz-linear-gradient(top left -45deg, #dddddd, #aaaaaa); background-image: linear-gradient(-45deg, #dddddd, #aaaaaa); }
background-image: -o-linear-gradient(top left -45deg, #dddddd, #aaaaaa);
background-image: linear-gradient(top left -45deg, #dddddd, #aaaaaa); }
.bg-radial-gradient-with-angle-and-shape { .bg-radial-gradient-with-angle-and-shape {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-image: -webkit-gradient(radial, 45deg, 0, 45deg, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-size: 100%; background-image: -moz-radial-gradient(45deg, ellipse cover, #dddddd, #aaaaaa 100px);
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa)); background-image: -o-radial-gradient(45deg, ellipse cover, #dddddd, #aaaaaa 100px);
background-image: -moz-radial-gradient(center center 45deg, ellipse cover, #dddddd, #aaaaaa 100px); background-image: radial-gradient(45deg, ellipse cover, #dddddd, #aaaaaa 100px); }
background-image: -o-radial-gradient(center center 45deg, ellipse cover, #dddddd, #aaaaaa 100px);
background-image: radial-gradient(center center 45deg, ellipse cover, #dddddd, #aaaaaa 100px); }
.bg-all-gradient-types { .bg-all-gradient-types {
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'), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');

4
test/fixtures/stylesheets/compass/sass/gradients.sass vendored
View File

@ -23,10 +23,10 @@ $experimental-support-for-svg: true
+background-image(radial-gradient(center center, #ddd, #aaa 100px)) +background-image(radial-gradient(center center, #ddd, #aaa 100px))
.bg-linear-gradient-with-angle .bg-linear-gradient-with-angle
+background-image(linear-gradient(top left -45deg, #ddd, #aaa)) +background-image(linear-gradient(-45deg, #ddd, #aaa))
.bg-radial-gradient-with-angle-and-shape .bg-radial-gradient-with-angle-and-shape
+background-image(radial-gradient(center center 45deg, ellipse cover, #ddd, #aaa 100px)) +background-image(radial-gradient(45deg, ellipse cover, #ddd, #aaa 100px))
.bg-all-gradient-types .bg-all-gradient-types
+background-image(image-url("4x6.png"), linear-gradient(top left, #ddd, #aaa), radial-gradient(center center, #ddd, #aaa 100px)) +background-image(image-url("4x6.png"), linear-gradient(top left, #ddd, #aaa), radial-gradient(center center, #ddd, #aaa 100px))