From fee53b1a60a2777ca9ad6002aaadeaf32499ba7d Mon Sep 17 00:00:00 2001 From: Chris Eppstein Date: Sun, 26 Feb 2012 17:23:13 -0800 Subject: [PATCH] Handle the transparent keyword identifier in gradients. Closes GH-356 --- doc-src/content/CHANGELOG.markdown | 7 ++++- .../functions/gradient_support.rb | 25 +++++++++++++----- .../stylesheets/compass/css/gradients.css | 26 +++++++++++++------ .../stylesheets/compass/sass/gradients.sass | 8 +++++- 4 files changed, 49 insertions(+), 17 deletions(-) diff --git a/doc-src/content/CHANGELOG.markdown b/doc-src/content/CHANGELOG.markdown index 1552d83e..087fc3d3 100644 --- a/doc-src/content/CHANGELOG.markdown +++ b/doc-src/content/CHANGELOG.markdown @@ -14,7 +14,12 @@ The Documentation for the [latest stable release](http://compass-style.org/docs/ The Documentation for the [latest preview release](http://beta.compass-style.org/) -0.11.7 (UNRELEASED) +0.11.8 (02/26/2012) +------------------- + +* Fix a bug in gradients that used the transparent keyword + +0.11.7 (01/05/2012) ------------------- * Update to font-face mixin to make it work on IE8. diff --git a/lib/compass/sass_extensions/functions/gradient_support.rb b/lib/compass/sass_extensions/functions/gradient_support.rb index a08b1c9d..c1fe1073 100644 --- a/lib/compass/sass_extensions/functions/gradient_support.rb +++ b/lib/compass/sass_extensions/functions/gradient_support.rb @@ -8,7 +8,9 @@ module Compass::SassExtensions::Functions::GradientSupport [color, stop].compact end def initialize(color, stop = nil) - unless Sass::Script::Color === color || Sass::Script::Funcall === color + unless Sass::Script::Color === color || + Sass::Script::Funcall === color || + (Sass::Script::String === color && color.value == "transparent") raise Sass::SyntaxError, "Expected a color. Got: #{color}" end if stop && !stop.is_a?(Sass::Script::Number) @@ -19,8 +21,16 @@ module Compass::SassExtensions::Functions::GradientSupport def inspect to_s end + def self.color_to_s(c) + if c.is_a?(Sass::Script::String) + c.value.dup + else + c.inspect.dup + end + end + def to_s(options = self.options) - s = color.inspect.dup + s = self.class.color_to_s(color) if stop s << " " if stop.unitless? @@ -227,13 +237,14 @@ module Compass::SassExtensions::Functions::GradientSupport def color_stops(*args) Sass::Script::List.new(args.map do |arg| - case arg - when ColorStop + if ColorStop === arg arg - when Sass::Script::Color + elsif Sass::Script::Color === arg ColorStop.new(arg) - when Sass::Script::List + elsif Sass::Script::List === arg ColorStop.new(*arg.value) + elsif Sass::Script::String === arg && arg.value == "transparent" + ColorStop.new(arg) else raise Sass::SyntaxError, "Not a valid color stop: #{arg.class.name}: #{arg}" end @@ -288,7 +299,7 @@ module Compass::SassExtensions::Functions::GradientSupport # returns color-stop() calls for use in webkit. def grad_color_stops(color_list) stops = color_stops_in_percentages(color_list).map do |stop, color| - "color-stop(#{stop.inspect}, #{color.inspect})" + "color-stop(#{stop.inspect}, #{ColorStop.color_to_s(color)})" end Sass::Script::String.new(stops.join(", ")) end diff --git a/test/fixtures/stylesheets/compass/css/gradients.css b/test/fixtures/stylesheets/compass/css/gradients.css index 384db492..73e1d13c 100644 --- a/test/fixtures/stylesheets/compass/css/gradients.css +++ b/test/fixtures/stylesheets/compass/css/gradients.css @@ -82,15 +82,25 @@ background-image: -ms-linear-gradient(left, #dddddd 10px, #aaaaaa 40px); background-image: linear-gradient(left, #dddddd 10px, #aaaaaa 40px); } -.bg-radial-gradient { - background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); +.transparent-in-linear-gradient { + background-image: white url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iInRyYW5zcGFyZW50IiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; - background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa)); - background-image: -webkit-radial-gradient(center center, #dddddd, #aaaaaa 100px); - background-image: -moz-radial-gradient(center center, #dddddd, #aaaaaa 100px); - background-image: -o-radial-gradient(center center, #dddddd, #aaaaaa 100px); - background-image: -ms-radial-gradient(center center, #dddddd, #aaaaaa 100px); - background-image: radial-gradient(center center, #dddddd, #aaaaaa 100px); } + background-image: white -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, transparent), color-stop(100%, #aaaaaa)); + background-image: white -webkit-linear-gradient(top left, transparent, #aaaaaa); + background-image: white -moz-linear-gradient(top left, transparent, #aaaaaa); + background-image: white -o-linear-gradient(top left, transparent, #aaaaaa); + background-image: white -ms-linear-gradient(top left, transparent, #aaaaaa); + background-image: white linear-gradient(top left, transparent, #aaaaaa); } + +.transparent-in-linear-gradient { + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIidHJhbnNwYXJlbnQiIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); + background-size: 100%; + background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, transparent)); + background-image: -webkit-radial-gradient(center center, #dddddd, transparent 100px); + background-image: -moz-radial-gradient(center center, #dddddd, transparent 100px); + background-image: -o-radial-gradient(center center, #dddddd, transparent 100px); + background-image: -ms-radial-gradient(center center, #dddddd, transparent 100px); + background-image: radial-gradient(center center, #dddddd, transparent 100px); } .bg-linear-gradient-with-angle { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9Ii00NSIgeTE9IiIgeDI9Ii00NSIgeTI9IiIgZ3JhZGllbnRUcmFuc2Zvcm0gPSAicm90YXRlKC00NSkiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNkZGRkZGQiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhYWFhYWEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); diff --git a/test/fixtures/stylesheets/compass/sass/gradients.sass b/test/fixtures/stylesheets/compass/sass/gradients.sass index dc915aa4..8251e9ce 100644 --- a/test/fixtures/stylesheets/compass/sass/gradients.sass +++ b/test/fixtures/stylesheets/compass/sass/gradients.sass @@ -31,8 +31,13 @@ $experimental-support-for-svg: true .bg-linear-gradient-pixel-stop-from-left +background-image(linear-gradient(left, #ddd 10px, #aaa 40px)) +.transparent-in-linear-gradient + +background-image(#fff linear-gradient(top left, transparent, #aaa)) + +.transparent-in-linear-gradient + +background-image(radial-gradient(center center, #ddd, transparent 100px)) + .bg-radial-gradient - +background-image(radial-gradient(center center, #ddd, #aaa 100px)) .bg-linear-gradient-with-angle +background-image(linear-gradient(-45deg, #ddd, #aaa)) @@ -231,3 +236,4 @@ $experimental-support-for-svg: true .ie-alpha-filter +filter-gradient(rgba(#fff, 1), rgba(#fff, 0)) +