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

add opera support for the css3 gradient syntax

Browse Source
This commit is contained in:
Chris Eppstein 2011-03-30 10:20:27 -07:00
parent 96f1e4dc96
commit da57adc49d
5 changed files with 74 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frameworks/compass/stylesheets/compass/css3/_images.scss
View File

@ -21,6 +21,7 @@
@if $experimental-support-for-svg and prefixed(-svg, $backgrounds) { background: -svg($backgrounds); }
@if $experimental-support-for-webkit and prefixed(-webkit, $backgrounds) { background: -webkit($backgrounds); }
@if $experimental-support-for-mozilla and prefixed(-moz, $backgrounds) { background: -moz($backgrounds); }
@if $experimental-support-for-opera and prefixed(-o, $backgrounds) { background: -o($backgrounds); }
@if $experimental-support-for-pie and (prefixed(-pie, $backgrounds) or $mult-bgs) { -pie-background: -pie($backgrounds); }
background: $backgrounds;
}
@ -43,7 +44,8 @@
@if $experimental-support-for-svg and prefixed(-svg, $images) { background-image: -svg($images); background-size: 100%; }
@if $experimental-support-for-webkit and prefixed(-webkit, $images) { background-image: -webkit($images); }
@if $experimental-support-for-mozilla and prefixed(-moz, $images) { background-image: -moz($images); }
@if $experimental-support-for-pie and (prefixed(-pie, $images) or -compass-list-size($images) > 1) { @warn "PIE does not support background-image. Use @include background(#{$images}) instead." }
@if $experimental-support-for-opera and prefixed(-o, $images) { background-image: -o($images); }
@if $experimental-support-for-pie and (prefixed(-pie, $images) or -compass-list-size($images) > 1) { @warn "PIE does not support background-image. Use @include background(#{$images}) instead." }
background-image: $images ;
}
@ -67,6 +69,7 @@
@mixin border-image($value) {
@if $experimental-support-for-mozilla { -moz-border-image: -moz(-compass-list($value)); }
@if $experimental-support-for-webkit { -webkit-border-image: -webkit(-compass-list($value)); }
@if $experimental-support-for-opera { -o-border-image: -o(-compass-list($value)); }
@if $experimental-support-for-svg { border-image: -svg(-compass-list($value)); }
border-image: $value;
}
@ -75,6 +78,7 @@
@mixin list-style-image($image) {
@if $experimental-support-for-mozilla and prefixed(-moz, $image) { list-style-image: -moz($image); }
@if $experimental-support-for-webkit and prefixed(-webkit, $image) { list-style-image: -webkit($image); }
@if $experimental-support-for-opera and prefixed(-o, $image) { list-style-image: -o($image); }
@if $experimental-support-for-svg and prefixed(-svg, $image) { list-style-image: -svg($image); }
list-style-image: $image ;
}
@ -84,6 +88,7 @@
$value: -compass-list($value);
@if $experimental-support-for-mozilla and prefixed(-moz, $value) { list-style-image: -moz($value); }
@if $experimental-support-for-webkit and prefixed(-webkit, $value) { list-style-image: -webkit($value); }
@if $experimental-support-for-opera and prefixed(-o, $value) { list-style-image: -o($value); }
@if $experimental-support-for-svg and prefixed(-svg, $value) { list-style-image: -svg($value); }
list-style-image: $value ;
}
@ -93,6 +98,7 @@
$value: -compass-list($value);
@if $experimental-support-for-mozilla and prefixed(-moz, $value) { content: -moz($value); }
@if $experimental-support-for-webkit and prefixed(-webkit, $value) { content: -webkit($value); }
@if $experimental-support-for-opera and prefixed(-o, $value) { content: -o($value); }
@if $experimental-support-for-svg and prefixed(-svg, $value) { content: -svg($value); }
content: $value ;
}

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

@ -1,6 +1,6 @@
module Compass::SassExtensions::Functions::GradientSupport
GRADIENT_ASPECTS = %w(webkit moz svg pie css2).freeze
GRADIENT_ASPECTS = %w(webkit moz svg pie css2 o).freeze
class ColorStop < Sass::Script::Literal
attr_accessor :color, :stop
@ -77,6 +77,9 @@ module Compass::SassExtensions::Functions::GradientSupport
def to_moz(options = self.options)
Sass::Script::String.new("-moz-#{to_s(options)}")
end
def to_o(options = self.options)
Sass::Script::String.new("-o-#{to_s(options)}")
end
def to_svg(options = self.options)
# XXX Add shape support if possible
radial_svg_gradient(color_stops, position_and_angle || _center_position)
@ -128,6 +131,9 @@ module Compass::SassExtensions::Functions::GradientSupport
def to_moz(options = self.options)
Sass::Script::String.new("-moz-#{to_s(options)}")
end
def to_o(options = self.options)
Sass::Script::String.new("-o-#{to_s(options)}")
end
def to_svg(options = self.options)
linear_svg_gradient(color_stops, position_and_angle || Sass::Script::String.new("top"))
end

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

@ -6,6 +6,7 @@
background: white url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
background: white -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background: white -moz-linear-gradient(top left, #dddddd, #aaaaaa);
background: white -o-linear-gradient(top left, #dddddd, #aaaaaa);
background: white linear-gradient(top left, #dddddd, #aaaaaa); }
.bg-shortcut-radial-gradient {
@ -13,6 +14,7 @@
background: white url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
background: white -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background: white -moz-radial-gradient(center center, #dddddd, #aaaaaa 100px);
background: white -o-radial-gradient(center center, #dddddd, #aaaaaa 100px);
background: white radial-gradient(center center, #dddddd, #aaaaaa 100px); }
.bg-simple-image {
@ -23,6 +25,7 @@
background-size: 100%;
background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -moz-linear-gradient(top left, #dddddd, #aaaaaa);
background-image: -o-linear-gradient(top left, #dddddd, #aaaaaa);
background-image: linear-gradient(top left, #dddddd, #aaaaaa); }
.bg-radial-gradient {
@ -30,6 +33,7 @@
background-size: 100%;
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, #dddddd, #aaaaaa 100px);
background-image: -o-radial-gradient(center center, #dddddd, #aaaaaa 100px);
background-image: radial-gradient(center center, #dddddd, #aaaaaa 100px); }
.bg-linear-gradient-with-angle {
@ -37,6 +41,7 @@
background-size: 100%;
background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -moz-linear-gradient(top left -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 {
@ -44,6 +49,7 @@
background-size: 100%;
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 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 {
@ -51,11 +57,13 @@
background-size: 100%;
background-image: url('/images/4x6.png?busted=true'), -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa)), -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: url('/images/4x6.png?busted=true'), -moz-linear-gradient(top left, #dddddd, #aaaaaa), -moz-radial-gradient(center center, #dddddd, #aaaaaa 100px);
background-image: url('/images/4x6.png?busted=true'), -o-linear-gradient(top left, #dddddd, #aaaaaa), -o-radial-gradient(center center, #dddddd, #aaaaaa 100px);
background-image: url('/images/4x6.png?busted=true'), linear-gradient(top left, #dddddd, #aaaaaa), radial-gradient(center center, #dddddd, #aaaaaa 100px); }
.border-image-gradient {
-moz-border-image: -moz-radial-gradient(#00ff00, #ff0000 100px) 100 stretch;
-webkit-border-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #00ff00), color-stop(100%, #ff0000)) 100 stretch;
-o-border-image: -o-radial-gradient(#00ff00, #ff0000 100px) 100 stretch;
border-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDBmZjAwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmYwMDAwIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g') 100 stretch;
border-image: radial-gradient(#00ff00, #ff0000 100px) 100 stretch; }
@ -68,12 +76,14 @@
.direct-list-image-with-gradient {
list-style-image: -moz-radial-gradient(#00ff00, #ff0000 10px);
list-style-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 10, color-stop(0%, #00ff00), color-stop(100%, #ff0000));
list-style-image: -o-radial-gradient(#00ff00, #ff0000 10px);
list-style-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMGZmMDAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjAwMDAiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
list-style-image: radial-gradient(#00ff00, #ff0000 10px); }
.shorthand-list-image-with-gradient {
list-style-image: outside -moz-radial-gradient(#00ff00, #ff0000 10px);
list-style-image: outside -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 10, color-stop(0%, #00ff00), color-stop(100%, #ff0000));
list-style-image: outside -o-radial-gradient(#00ff00, #ff0000 10px);
list-style-image: outside url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMGZmMDAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjAwMDAiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
list-style-image: outside radial-gradient(#00ff00, #ff0000 10px); }
@ -83,132 +93,158 @@
.content-with-gradient {
content: -moz-radial-gradient(#00ff00, #ff0000 10px);
content: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 10, color-stop(0%, #00ff00), color-stop(100%, #ff0000));
content: -o-radial-gradient(#00ff00, #ff0000 10px);
content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMGZmMDAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjAwMDAiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
content: radial-gradient(#00ff00, #ff0000 10px); }
.bg-linear-gradient-no-position {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -moz-linear-gradient(#dddddd, #aaaaaa);
background-image: -o-linear-gradient(#dddddd, #aaaaaa);
background-image: linear-gradient(#dddddd, #aaaaaa); }
.bg-radial-gradient-no-position {
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -moz-radial-gradient(#dddddd, #aaaaaa 100px);
background-image: -o-radial-gradient(#dddddd, #aaaaaa 100px);
background-image: radial-gradient(#dddddd, #aaaaaa 100px); }
.image-fallback {
background-image: image(-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa)), url('/images/4x6.png?busted=true'), #cc0000);
background-image: image(-moz-radial-gradient(#dddddd, #aaaaaa 100px), url('/images/4x6.png?busted=true'), #cc0000);
background-image: image(-o-radial-gradient(#dddddd, #aaaaaa 100px), url('/images/4x6.png?busted=true'), #cc0000);
background-image: image(radial-gradient(#dddddd, #aaaaaa 100px), url('/images/4x6.png?busted=true'), #cc0000); }
.cross-fade {
background-image: cross-fade(-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa)), url('/images/4x6.png?busted=true'));
background-image: cross-fade(-moz-radial-gradient(#dddddd, #aaaaaa 100px), url('/images/4x6.png?busted=true'));
background-image: cross-fade(-o-radial-gradient(#dddddd, #aaaaaa 100px), url('/images/4x6.png?busted=true'));
background-image: cross-fade(radial-gradient(#dddddd, #aaaaaa 100px), url('/images/4x6.png?busted=true')); }
.unknown-function-wrapper {
background: foo(-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa)));
background: foo(-moz-radial-gradient(#dddddd, #aaaaaa 100px));
background: foo(-o-radial-gradient(#dddddd, #aaaaaa 100px));
background: foo(radial-gradient(#dddddd, #aaaaaa 100px)); }
.linear-1 {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -moz-linear-gradient(top, #dddddd, #aaaaaa);
background-image: -o-linear-gradient(top, #dddddd, #aaaaaa);
background-image: linear-gradient(top, #dddddd, #aaaaaa); }
.linear-2 {
background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -moz-linear-gradient(left, #dddddd, #aaaaaa);
background-image: -o-linear-gradient(left, #dddddd, #aaaaaa);
background-image: linear-gradient(left, #dddddd, #aaaaaa); }
.linear-3 {
background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -moz-linear-gradient(top left, #dddddd, #aaaaaa);
background-image: -o-linear-gradient(top left, #dddddd, #aaaaaa);
background-image: linear-gradient(top left, #dddddd, #aaaaaa); }
.linear-4 {
background-image: -webkit-gradient(linear, 100% 0%, 0% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -moz-linear-gradient(top right, #dddddd, #aaaaaa);
background-image: -o-linear-gradient(top right, #dddddd, #aaaaaa);
background-image: linear-gradient(top right, #dddddd, #aaaaaa); }
.linear-5 {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(50%, #cccccc), color-stop(100%, #aaaaaa));
background-image: -moz-linear-gradient(top, #dddddd, #cccccc, #aaaaaa);
background-image: -o-linear-gradient(top, #dddddd, #cccccc, #aaaaaa);
background-image: linear-gradient(top, #dddddd, #cccccc, #aaaaaa); }
.linear-6 {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(20%, #cccccc), color-stop(100%, #aaaaaa));
background-image: -moz-linear-gradient(top, #dddddd, #cccccc 20%, #aaaaaa);
background-image: -o-linear-gradient(top, #dddddd, #cccccc 20%, #aaaaaa);
background-image: linear-gradient(top, #dddddd, #cccccc 20%, #aaaaaa); }
.linear-7 {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(20%, #cccccc), color-stop(60%, #eeeeee), color-stop(100%, #aaaaaa));
background-image: -moz-linear-gradient(top, #dddddd, #cccccc 20%, #eeeeee, #aaaaaa);
background-image: -o-linear-gradient(top, #dddddd, #cccccc 20%, #eeeeee, #aaaaaa);
background-image: linear-gradient(top, #dddddd, #cccccc 20%, #eeeeee, #aaaaaa); }
.linear-8 {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(80%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -moz-linear-gradient(top, #dddddd 80%, #aaaaaa);
background-image: -o-linear-gradient(top, #dddddd 80%, #aaaaaa);
background-image: linear-gradient(top, #dddddd 80%, #aaaaaa); }
.linear-9 {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(20%, #aaaaaa));
background-image: -moz-linear-gradient(top, #dddddd, #aaaaaa 20%);
background-image: -o-linear-gradient(top, #dddddd, #aaaaaa 20%);
background-image: linear-gradient(top, #dddddd, #aaaaaa 20%); }
.linear-10 {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #dddddd), color-stop(50%, #aaaaaa));
background-image: -moz-linear-gradient(top, #dddddd 40%, #aaaaaa 50%);
background-image: -o-linear-gradient(top, #dddddd 40%, #aaaaaa 50%);
background-image: linear-gradient(top, #dddddd 40%, #aaaaaa 50%); }
.linear-11 {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #dddddd), color-stop(45%, #000000), color-stop(50%, #aaaaaa));
background-image: -moz-linear-gradient(top, #dddddd 40%, #000000, #aaaaaa 50%);
background-image: -o-linear-gradient(top, #dddddd 40%, #000000, #aaaaaa 50%);
background-image: linear-gradient(top, #dddddd 40%, #000000, #aaaaaa 50%); }
.linear-12 {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(33%, #0000ff), color-stop(67%, #000000));
background-image: -moz-linear-gradient(top, #ffffff, #0000ff 33%, #000000 67%);
background-image: -o-linear-gradient(top, #ffffff, #0000ff 33%, #000000 67%);
background-image: linear-gradient(top, #ffffff, #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, #dddddd, #aaaaaa 100px);
background-image: -o-radial-gradient(center center, #dddddd, #aaaaaa 100px);
background-image: radial-gradient(center center, #dddddd, #aaaaaa 100px); }
.radial-2 {
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, #dddddd, #aaaaaa 100px);
background-image: -o-radial-gradient(center center, #dddddd, #aaaaaa 100px);
background-image: radial-gradient(center center, #dddddd, #aaaaaa 100px); }
.radial-3 {
background-image: -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -moz-radial-gradient(top center, #dddddd, #aaaaaa 100px);
background-image: -o-radial-gradient(top center, #dddddd, #aaaaaa 100px);
background-image: radial-gradient(top center, #dddddd, #aaaaaa 100px); }
.radial-4 {
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, #dddddd, #aaaaaa 100px);
background-image: -o-radial-gradient(center center, #dddddd, #aaaaaa 100px);
background-image: radial-gradient(center center, #dddddd, #aaaaaa 100px); }
.radial-5 {
background-image: -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -moz-radial-gradient(top center, #dddddd, #aaaaaa 100px);
background-image: -o-radial-gradient(top center, #dddddd, #aaaaaa 100px);
background-image: radial-gradient(top center, #dddddd, #aaaaaa 100px); }
.radial-6 {
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 50, color-stop(40%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -moz-radial-gradient(center center, #dddddd 20px, #aaaaaa 50px);
background-image: -o-radial-gradient(center center, #dddddd 20px, #aaaaaa 50px);
background-image: radial-gradient(center center, #dddddd 20px, #aaaaaa 50px); }
.radial-7 {
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 50, color-stop(20%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -moz-radial-gradient(center center, #dddddd 20%, #aaaaaa 50px);
background-image: -o-radial-gradient(center center, #dddddd 20%, #aaaaaa 50px);
background-image: radial-gradient(center center, #dddddd 20%, #aaaaaa 50px); }
.alpha-linear {
background-image: -webkit-gradient(linear, 50% 0%, 50% 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), #ffffff 50%);
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5), #ffffff 50%);
background-image: linear-gradient(top, rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5), #ffffff 50%); }
.linear-svg-1 {
@ -216,6 +252,7 @@
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -moz-linear-gradient(top, #dddddd, #aaaaaa);
background-image: -o-linear-gradient(top, #dddddd, #aaaaaa);
background-image: linear-gradient(top, #dddddd, #aaaaaa); }
.linear-svg-2 {
@ -223,6 +260,7 @@
background-size: 100%;
background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -moz-linear-gradient(left, #dddddd, #aaaaaa);
background-image: -o-linear-gradient(left, #dddddd, #aaaaaa);
background-image: linear-gradient(left, #dddddd, #aaaaaa); }
.linear-svg-3 {
@ -230,6 +268,7 @@
background-size: 100%;
background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -moz-linear-gradient(top left, #dddddd, #aaaaaa);
background-image: -o-linear-gradient(top left, #dddddd, #aaaaaa);
background-image: linear-gradient(top left, #dddddd, #aaaaaa); }
.linear-svg-4 {
@ -237,6 +276,7 @@
background-size: 100%;
background-image: -webkit-gradient(linear, 100% 0%, 0% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -moz-linear-gradient(top right, #dddddd, #aaaaaa);
background-image: -o-linear-gradient(top right, #dddddd, #aaaaaa);
background-image: linear-gradient(top right, #dddddd, #aaaaaa); }
.linear-svg-5 {
@ -244,6 +284,7 @@
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(50%, #cccccc), color-stop(100%, #aaaaaa));
background-image: -moz-linear-gradient(top, #dddddd, #cccccc, #aaaaaa);
background-image: -o-linear-gradient(top, #dddddd, #cccccc, #aaaaaa);
background-image: linear-gradient(top, #dddddd, #cccccc, #aaaaaa); }
.linear-svg-6 {
@ -251,6 +292,7 @@
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(20%, #cccccc), color-stop(100%, #aaaaaa));
background-image: -moz-linear-gradient(top, #dddddd, #cccccc 20%, #aaaaaa);
background-image: -o-linear-gradient(top, #dddddd, #cccccc 20%, #aaaaaa);
background-image: linear-gradient(top, #dddddd, #cccccc 20%, #aaaaaa); }
.linear-svg-7 {
@ -258,6 +300,7 @@
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(20%, #cccccc), color-stop(60%, #eeeeee), color-stop(100%, #aaaaaa));
background-image: -moz-linear-gradient(top, #dddddd, #cccccc 20%, #eeeeee, #aaaaaa);
background-image: -o-linear-gradient(top, #dddddd, #cccccc 20%, #eeeeee, #aaaaaa);
background-image: linear-gradient(top, #dddddd, #cccccc 20%, #eeeeee, #aaaaaa); }
.linear-svg-8 {
@ -265,6 +308,7 @@
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(80%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -moz-linear-gradient(top, #dddddd 80%, #aaaaaa);
background-image: -o-linear-gradient(top, #dddddd 80%, #aaaaaa);
background-image: linear-gradient(top, #dddddd 80%, #aaaaaa); }
.linear-svg-9 {
@ -272,6 +316,7 @@
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(20%, #aaaaaa));
background-image: -moz-linear-gradient(top, #dddddd, #aaaaaa 20%);
background-image: -o-linear-gradient(top, #dddddd, #aaaaaa 20%);
background-image: linear-gradient(top, #dddddd, #aaaaaa 20%); }
.linear-svg-10 {
@ -279,6 +324,7 @@
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #dddddd), color-stop(50%, #aaaaaa));
background-image: -moz-linear-gradient(top, #dddddd 40%, #aaaaaa 50%);
background-image: -o-linear-gradient(top, #dddddd 40%, #aaaaaa 50%);
background-image: linear-gradient(top, #dddddd 40%, #aaaaaa 50%); }
.linear-svg-11 {
@ -286,6 +332,7 @@
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #dddddd), color-stop(45%, #000000), color-stop(50%, #aaaaaa));
background-image: -moz-linear-gradient(top, #dddddd 40%, #000000, #aaaaaa 50%);
background-image: -o-linear-gradient(top, #dddddd 40%, #000000, #aaaaaa 50%);
background-image: linear-gradient(top, #dddddd 40%, #000000, #aaaaaa 50%); }
.linear-svg-12 {
@ -293,6 +340,7 @@
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(33%, #0000ff), color-stop(67%, #000000));
background-image: -moz-linear-gradient(top, #ffffff, #0000ff 33%, #000000 67%);
background-image: -o-linear-gradient(top, #ffffff, #0000ff 33%, #000000 67%);
background-image: linear-gradient(top, #ffffff, #0000ff 33%, #000000 67%); }
.radial-svg-1 {
@ -300,6 +348,7 @@
background-size: 100%;
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, #dddddd, #aaaaaa 100px);
background-image: -o-radial-gradient(center center, #dddddd, #aaaaaa 100px);
background-image: radial-gradient(center center, #dddddd, #aaaaaa 100px); }
.radial-svg-2 {
@ -307,6 +356,7 @@
background-size: 100%;
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, #dddddd, #aaaaaa 100px);
background-image: -o-radial-gradient(center center, #dddddd, #aaaaaa 100px);
background-image: radial-gradient(center center, #dddddd, #aaaaaa 100px); }
.radial-svg-3 {
@ -314,6 +364,7 @@
background-size: 100%;
background-image: -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -moz-radial-gradient(top center, #dddddd, #aaaaaa 100px);
background-image: -o-radial-gradient(top center, #dddddd, #aaaaaa 100px);
background-image: radial-gradient(top center, #dddddd, #aaaaaa 100px); }
.radial-svg-4 {
@ -321,6 +372,7 @@
background-size: 100%;
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, #dddddd, #aaaaaa 100px);
background-image: -o-radial-gradient(center center, #dddddd, #aaaaaa 100px);
background-image: radial-gradient(center center, #dddddd, #aaaaaa 100px); }
.radial-svg-5 {
@ -328,6 +380,7 @@
background-size: 100%;
background-image: -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -moz-radial-gradient(top center, #dddddd, #aaaaaa 100px);
background-image: -o-radial-gradient(top center, #dddddd, #aaaaaa 100px);
background-image: radial-gradient(top center, #dddddd, #aaaaaa 100px); }
.radial-svg-6 {
@ -335,6 +388,7 @@
background-size: 100%;
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 50, color-stop(40%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -moz-radial-gradient(center center, #dddddd 20px, #aaaaaa 50px);
background-image: -o-radial-gradient(center center, #dddddd 20px, #aaaaaa 50px);
background-image: radial-gradient(center center, #dddddd 20px, #aaaaaa 50px); }
.radial-svg-7 {
@ -342,6 +396,7 @@
background-size: 100%;
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 50, color-stop(20%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -moz-radial-gradient(center center, #dddddd 20%, #aaaaaa 50px);
background-image: -o-radial-gradient(center center, #dddddd 20%, #aaaaaa 50px);
background-image: radial-gradient(center center, #dddddd 20%, #aaaaaa 50px); }
.alpha-linear-svg {
@ -349,6 +404,7 @@
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 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), #ffffff 50%);
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5), #ffffff 50%);
background-image: linear-gradient(top, rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5), #ffffff 50%); }
.ie-horizontal-filter {

1
test/fixtures/stylesheets/compass/css/pie.css vendored
View File

@ -13,6 +13,7 @@
.gradient {
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff0000), color-stop(100%, #0000ff));
background: -moz-linear-gradient(#ff0000, #0000ff);
background: -o-linear-gradient(#ff0000, #0000ff);
-pie-background: linear-gradient(#ff0000, #0000ff);
background: linear-gradient(#ff0000, #0000ff); }

3
test/fixtures/stylesheets/compass/css/utilities.css vendored
View File

@ -15,12 +15,15 @@
p.light {
background-color: #b0201e;
color: black; }
p.dark {
background-color: #5f1210;
color: white; }
p.light-with-args {
background-color: #b0201e;
color: green; }
p.dark-with-args {
background-color: #5f1210;
color: blue; }