From 9940ee8cbbe52e217a88b9a46ae5074790eea129 Mon Sep 17 00:00:00 2001 From: Steve Hull Date: Thu, 24 Mar 2011 18:54:24 -0700 Subject: [PATCH] Adding support for pixel-stops for webkit if the gradient goes from left-to-right or top-to-bottom. --- .../functions/gradient_support.rb | 22 +++++++++++++++++-- .../stylesheets/compass/css/gradients.css | 14 ++++++++++++ .../stylesheets/compass/sass/gradients.sass | 8 ++++++- 3 files changed, 41 insertions(+), 3 deletions(-) diff --git a/lib/compass/sass_extensions/functions/gradient_support.rb b/lib/compass/sass_extensions/functions/gradient_support.rb index 1aadd511..01243dff 100644 --- a/lib/compass/sass_extensions/functions/gradient_support.rb +++ b/lib/compass/sass_extensions/functions/gradient_support.rb @@ -120,7 +120,7 @@ module Compass::SassExtensions::Functions::GradientSupport def to_webkit(options = self.options) args = [] args << grad_point(position_and_angle || Sass::Script::String.new("top")) - args << grad_point(opposite_position(position_and_angle || Sass::Script::String.new("top"))) + args << linear_end_position(position_and_angle, color_stops) args << grad_color_stops(color_stops) args.each{|a| a.options = options} Sass::Script::String.new("-webkit-gradient(linear, #{args.join(', ')})") @@ -142,7 +142,6 @@ module Compass::SassExtensions::Functions::GradientSupport end module Functions - # given a position list, return a corresponding position in percents def grad_point(position) position = unless position.is_a?(Sass::Script::List) @@ -263,6 +262,25 @@ module Compass::SassExtensions::Functions::GradientSupport end end + # only used for webkit + def linear_end_position(position_and_angle, color_list) + start_point = grad_point(position_and_angle || Sass::Script::String.new("top")) + end_point = grad_point(opposite_position(position_and_angle || Sass::Script::String.new("top"))) + end_target = color_list.value.last.stop + + if color_list.value.last.stop && color_list.value.last.stop.numerator_units == ["px"] + new_end = color_list.value.last.stop.value + if start_point.value.first == end_point.value.first && start_point.value.last.value == 0 + # this means top-to-bottom + end_point.value[1] = Sass::Script::Number.new(end_target.value) + elsif start_point.value.last == end_point.value.last && start_point.value.first.value == 0 + # this implies left-to-right + end_point.value[0] = Sass::Script::Number.new(end_target.value) + end + end + end_point + end + # returns the end position of the gradient from the color stop def grad_end_position(color_list, radial = Sass::Script::Bool.new(false)) assert_type color_list, :List diff --git a/test/fixtures/stylesheets/compass/css/gradients.css b/test/fixtures/stylesheets/compass/css/gradients.css index c3586f46..a7a23906 100644 --- a/test/fixtures/stylesheets/compass/css/gradients.css +++ b/test/fixtures/stylesheets/compass/css/gradients.css @@ -25,6 +25,20 @@ background-image: -moz-linear-gradient(top left, #dddddd, #aaaaaa); background-image: linear-gradient(top left, #dddddd, #aaaaaa); } +.bg-linear-gradient-pixel-stop-from-top { + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjI1JSIgc3RvcC1jb2xvcj0iI2RkZGRkZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); + background-size: 100%; + background-image: -webkit-gradient(linear, 50% 0%, 50% 40, color-stop(25%, #dddddd), color-stop(100%, #aaaaaa)); + background-image: -moz-linear-gradient(top, #dddddd 10px, #aaaaaa 40px); + background-image: linear-gradient(top, #dddddd 10px, #aaaaaa 40px); } + +.bg-linear-gradient-pixel-stop-from-left { + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iMCUiIHkxPSI1MCUiIHgyPSIxMDAlIiB5Mj0iNTAlIj48c3RvcCBvZmZzZXQ9IjI1JSIgc3RvcC1jb2xvcj0iI2RkZGRkZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); + background-size: 100%; + background-image: -webkit-gradient(linear, 0% 50%, 40 50%, color-stop(25%, #dddddd), color-stop(100%, #aaaaaa)); + background-image: -moz-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'); background-size: 100%; diff --git a/test/fixtures/stylesheets/compass/sass/gradients.sass b/test/fixtures/stylesheets/compass/sass/gradients.sass index fd0ec96a..1000f551 100644 --- a/test/fixtures/stylesheets/compass/sass/gradients.sass +++ b/test/fixtures/stylesheets/compass/sass/gradients.sass @@ -16,6 +16,12 @@ $experimental-support-for-svg: true .bg-linear-gradient +background-image(linear-gradient(top left, #ddd, #aaa)) +.bg-linear-gradient-pixel-stop-from-top + +background-image(linear-gradient(top, #ddd 10px, #aaa 40px)) + +.bg-linear-gradient-pixel-stop-from-left + +background-image(linear-gradient(left, #ddd 10px, #aaa 40px)) + .bg-radial-gradient +background-image(radial-gradient(center center, #ddd, #aaa 100px)) @@ -215,4 +221,4 @@ $experimental-support-for-svg: true +filter-gradient(white, black, vertical) .ie-alpha-filter - +filter-gradient(rgba(#fff, 1), rgba(#fff, 0)) \ No newline at end of file + +filter-gradient(rgba(#fff, 1), rgba(#fff, 0))