add opera support for the css3 gradient syntax

frameworks/compass/stylesheets/compass/css3/_images.scss

@@ -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 ;
 }

lib/compass/sass_extensions/functions/gradient_support.rb

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

test/fixtures/stylesheets/compass/css/gradients.css

@@ -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 {

test/fixtures/stylesheets/compass/css/pie.css

@@ -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); }
 

test/fixtures/stylesheets/compass/css/utilities.css

@@ -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; }