From da57adc49d4c75b56235390cad4c5721b8961a24 Mon Sep 17 00:00:00 2001 From: Chris Eppstein Date: Wed, 30 Mar 2011 10:20:27 -0700 Subject: [PATCH] add opera support for the css3 gradient syntax --- .../stylesheets/compass/css3/_images.scss | 8 ++- .../functions/gradient_support.rb | 8 ++- .../stylesheets/compass/css/gradients.css | 56 +++++++++++++++++++ test/fixtures/stylesheets/compass/css/pie.css | 1 + .../stylesheets/compass/css/utilities.css | 3 + 5 files changed, 74 insertions(+), 2 deletions(-) diff --git a/frameworks/compass/stylesheets/compass/css3/_images.scss b/frameworks/compass/stylesheets/compass/css3/_images.scss index 8ad01d4368..cda3c2ffda 100644 --- a/frameworks/compass/stylesheets/compass/css3/_images.scss +++ b/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 ; } diff --git a/lib/compass/sass_extensions/functions/gradient_support.rb b/lib/compass/sass_extensions/functions/gradient_support.rb index 1aadd51168..faa31f3485 100644 --- a/lib/compass/sass_extensions/functions/gradient_support.rb +++ b/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 @@ def to_webkit(options = self.options) 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 @@ def to_webkit(options = self.options) 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 diff --git a/test/fixtures/stylesheets/compass/css/gradients.css b/test/fixtures/stylesheets/compass/css/gradients.css index c3586f4679..45ff67d0f0 100644 --- a/test/fixtures/stylesheets/compass/css/gradients.css +++ b/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 { diff --git a/test/fixtures/stylesheets/compass/css/pie.css b/test/fixtures/stylesheets/compass/css/pie.css index c911df071a..ec8ac2890a 100644 --- a/test/fixtures/stylesheets/compass/css/pie.css +++ b/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); } diff --git a/test/fixtures/stylesheets/compass/css/utilities.css b/test/fixtures/stylesheets/compass/css/utilities.css index aef752a421..354c84dce5 100644 --- a/test/fixtures/stylesheets/compass/css/utilities.css +++ b/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; }