compass 0.11.beta.5 → 0.11.beta.6

data/lib/compass/sass_extensions/functions/lists.rb

@@ -18,8 +18,9 @@ module Compass::SassExtensions::Functions::Lists
   def compact(*args)
     sep = :comma
     if args.size == 1 && args.first.is_a?(Sass::Script::List)
-      args = args.first.value
-      sep = args.first.separator
+      list = args.first
+      args = list.value
+      sep = list.separator
     end
     Sass::Script::List.new(args.reject{|a| !a.to_bool}, sep)
   end

data/lib/compass/sass_extensions/sprites/engines/chunky_png_engine.rb

@@ -19,8 +19,12 @@ module Compass
             else
               x = image.left - (image.left / image.width).ceil * image.width
               while x < width do
-                output_png.replace! input_png, x, image.top
-                x += image.width
+                begin
+                  output_png.replace! input_png, x, image.top
+                  x += image.width 
+                rescue ChunkyPNG::OutOfBounds
+                  break;
+                end
               end
             end
           end

data/lib/compass/sass_extensions/sprites/sprite_map.rb

@@ -1,7 +1,7 @@
 module Compass
   class SpriteMap
     attr_reader :uri, :options
-
+    VAILD_FILE_NAME = /\A#{Sass::SCSS::RX::IDENT}\Z/
 
     def find_relative(*args)
       nil
@@ -30,7 +30,13 @@ module Compass
 
     # Returns an Array of image names without the file extension
     def sprite_names
-      @sprite_names ||= files.collect { |file| File.basename(file, '.png') }
+      @sprite_names ||= files.collect do |file|
+        filename = File.basename(file, '.png')
+        unless VAILD_FILE_NAME =~ filename
+          raise Compass::Error, "Sprite file names must be legal css identifiers. Please rename #{File.basename(file)}"
+        end
+        filename
+      end
     end
     
     # Returns the sass options for this sprite

data/lib/compass/sass_extensions/sprites/sprites.rb

@@ -9,7 +9,7 @@ module Compass
     end
 
     def self.discover_sprites(uri)
-      self.load_map(uri, options).files
+      self.load_map(uri, {}).files
     end
 
     def self.sprite_name(file)

data/test/fixtures/stylesheets/compass/css/fonts.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 @font-face {
   font-family: "font1";
   src: url('/tmp/fonts/font1.eot');

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

@@ -2,19 +2,27 @@
   background: white url("foo.png"); }
 
 .bg-shortcut-linear-gradient {
-  background: white ;
   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 {
-  background: white ;
   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-all-gradient-types-with-simplification {
+  background: #ffcc00;
+  background: url('/images/4x6.png?busted=true'), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'), #ffcc00;
+  background: 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)), #ffcc00;
+  background: url('/images/4x6.png?busted=true'), -moz-linear-gradient(top left, #dddddd, #aaaaaa), -moz-radial-gradient(center center, #dddddd, #aaaaaa 100px), #ffcc00;
+  background: url('/images/4x6.png?busted=true'), -o-linear-gradient(top left, #dddddd, #aaaaaa), -o-radial-gradient(center center, #dddddd, #aaaaaa 100px), #ffcc00;
+  background: url('/images/4x6.png?busted=true'), linear-gradient(top left, #dddddd, #aaaaaa), radial-gradient(center center, #dddddd, #aaaaaa 100px), #ffcc00; }
+
 .bg-simple-image {
   background-image: url("foo.png"); }
 
@@ -23,6 +31,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,32 +39,33 @@
   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 {
-  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
-  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: linear-gradient(top left -45deg, #dddddd, #aaaaaa); }
+  background-image: -webkit-gradient(linear, -45deg, -45deg, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
+  background-image: -moz-linear-gradient(-45deg, #dddddd, #aaaaaa);
+  background-image: -o-linear-gradient(-45deg, #dddddd, #aaaaaa);
+  background-image: linear-gradient(-45deg, #dddddd, #aaaaaa); }
 
 .bg-radial-gradient-with-angle-and-shape {
-  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
-  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: radial-gradient(center center 45deg, ellipse cover, #dddddd, #aaaaaa 100px); }
+  background-image: -webkit-gradient(radial, 45deg, 0, 45deg, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
+  background-image: -moz-radial-gradient(45deg, ellipse cover, #dddddd, #aaaaaa 100px);
+  background-image: -o-radial-gradient(45deg, ellipse cover, #dddddd, #aaaaaa 100px);
+  background-image: radial-gradient(45deg, ellipse cover, #dddddd, #aaaaaa 100px); }
 
 .bg-all-gradient-types {
   background-image: url('/images/4x6.png?busted=true'), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
   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 +78,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 +95,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 +254,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 +262,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 +270,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 +278,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 +286,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 +294,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 +302,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 +310,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 +318,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 +326,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 +334,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 +342,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 +350,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 +358,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 +366,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 +374,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 +382,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 +390,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 +398,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 +406,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 {