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

Bug fix: In webkit, when the last gradient color stop was a percent less than 100%, the

Browse Source 
intermediate values were being scaled to that value. Closes GH-118.
This commit is contained in:
Chris Eppstein 2010-10-30 16:45:25 -07:00
parent 03e01c4eb2
commit a40fce8af1
4 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
doc-src/content/CHANGELOG.markdown
View File

@ -11,6 +11,8 @@ COMPASS CHANGELOG
-------------------
* compass config -p <property> -- will now print out the configuration value
for that property for the current project
* Bug fix: In webkit, when the last gradient color stop was a percent less than 100%, the
intermediate values were being scaled to that value.
0.10.6 (10/11/2010)
-------------------

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

@ -45,7 +45,7 @@ module Compass::SassExtensions::Functions::GradientSupport
color_stops = color_list.values.map do |pos|
# have to convert absolute units to percentages for use in color stop functions.
stop = pos.stop
stop = stop.div(max).times(Sass::Script::Number.new(100,["%"])) if stop.numerator_units == max.numerator_units
stop = stop.div(max).times(Sass::Script::Number.new(100,["%"])) if stop.numerator_units == max.numerator_units && max.numerator_units != ["%"]
# Make sure the color stops are specified in the right order.
if last_value && last_value.value > stop.value
raise Sass::SyntaxError.new("Color stops must be specified in increasing order")

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

@ -40,20 +40,25 @@
background-image: linear-gradient(top, #dddddd 80%, #aaaaaa 100%); }
.linear-9 {
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #dddddd), color-stop(20%, #aaaaaa));
background-image: -moz-linear-gradient(top, #dddddd 0%, #aaaaaa 20%);
background-image: linear-gradient(top, #dddddd 0%, #aaaaaa 20%); }
.linear-10 {
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(80%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(40%, #dddddd), color-stop(50%, #aaaaaa));
background-image: -moz-linear-gradient(top, #dddddd 40%, #aaaaaa 50%);
background-image: linear-gradient(top, #dddddd 40%, #aaaaaa 50%); }
.linear-11 {
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(80%, #dddddd), color-stop(90%, #000000), color-stop(100%, #aaaaaa));
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(40%, #dddddd), color-stop(45%, #000000), color-stop(50%, #aaaaaa));
background-image: -moz-linear-gradient(top, #dddddd 40%, #000000 45%, #aaaaaa 50%);
background-image: linear-gradient(top, #dddddd 40%, #000000 45%, #aaaaaa 50%); }
.linear-12 {
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #ffffff), color-stop(33%, #0000ff), color-stop(67%, #000000));
background-image: -moz-linear-gradient(top, #ffffff 0%, #0000ff 33%, #000000 67%);
background-image: linear-gradient(top, #ffffff 0%, #0000ff 33%, #000000 67%); }
.radial-1 {
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -moz-radial-gradient(center center, circle, #dddddd 0%, #aaaaaa 100%);
@ -90,6 +95,6 @@
background-image: radial-gradient(center center, circle, #dddddd 20%, #aaaaaa 50px); }
.alpha-linear {
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(80%, rgba(255, 255, 255, 0)), color-stop(90%, rgba(255, 127, 127, 0.5)), color-stop(100%, #ffffff));
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(40%, rgba(255, 255, 255, 0)), color-stop(45%, rgba(255, 127, 127, 0.5)), color-stop(50%, #ffffff));
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5) 45%, #ffffff 50%);
background-image: linear-gradient(top, rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5) 45%, #ffffff 50%); }

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

@ -33,6 +33,9 @@
.linear-11
+linear-gradient(color_stops(#dddddd 40%, black, #aaaaaa 50%))
.linear-12
+linear-gradient(color-stops(white, blue 33%, black 67%))
.radial-1
// A default radial gradient:
A centered gradient having the shape of the container (aka ellipse)