Adding support for pixel-stops for webkit if the gradient goes from left-to-right or top-to-bottom.

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

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

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