compass 0.13.alpha.2 → 0.13.alpha.3

data/frameworks/compass/stylesheets/compass/css3/_transition.scss

@@ -68,7 +68,7 @@ $transitionable-prefixed-values: transform, transform-origin !default;
   @if type-of($duration-1) == string { $duration-1: unquote($duration-1); }
   $durations: compact($duration-1, $duration-2, $duration-3, $duration-4, $duration-5, $duration-6, $duration-7, $duration-8, $duration-9, $duration-10);
   @include experimental(transition-duration, $durations,
-    -moz, -webkit, -o, not -ms, not -khtml, official
+    -moz, -webkit, not -ms, -o, not -khtml, official
   );
 }
 
@@ -92,7 +92,7 @@ $transitionable-prefixed-values: transform, transform-origin !default;
   $function-1: unquote($function-1);
   $functions: compact($function-1, $function-2, $function-3, $function-4, $function-5, $function-6, $function-7, $function-8, $function-9, $function-10);
   @include experimental(transition-timing-function, $functions,
-    -moz, -webkit, -o, not -ms, not -khtml, official
+    -moz, -webkit, not -ms, -o, not -khtml, official
   );
 }
 
@@ -115,7 +115,7 @@ $transitionable-prefixed-values: transform, transform-origin !default;
   @if type-of($delay-1) == string { $delay-1: unquote($delay-1); }
   $delays: compact($delay-1, $delay-2, $delay-3, $delay-4, $delay-5, $delay-6, $delay-7, $delay-8, $delay-9, $delay-10);
   @include experimental(transition-delay, $delays,
-    -moz, -webkit, -o, not -ms, not -khtml, official
+    -moz, -webkit, not -ms, -o, not -khtml, official
   );
 }
 

data/frameworks/compass/stylesheets/compass/css3/_user-interface.scss

@@ -1,17 +1,15 @@
-// User Interface ------------------------------------------------------------
+// User Interface
 // This file can be expanded to handle all the user interface properties as
 // they become available in browsers:
 // http://www.w3.org/TR/2000/WD-css3-userint-20000216
+
 @import "shared";
 
-// ----------------------------------------------------------------------------
 // @private css3-feature-support variables must always include a list of five boolean values
-// representing in order: -moz, -webkit, -o, -ms, -khtml
+// representing in order: -moz, -webkit, -ms, -o, -khtml
 //   - mozilla support handled seperately below
-$userselect-support: not -moz, -webkit, not -o, -ms, -khtml;
+$userselect-support: not -moz, -webkit, -ms, not -o, -khtml;
 
-// ----------------------------------------------------------------------------
-// Mixins
 
 // This property controls the selection model and granularity of an element.
 //

data/lib/compass/commands.rb

@@ -3,7 +3,7 @@ end
 
 require 'compass/commands/registry'
 
-%w(base generate_grid_background default help list_frameworks project_base
+%w(base project_base default help list_frameworks 
    update_project watch_project create_project clean_project extension_command
    imports installer_command print_version project_stats stamp_pattern
    sprite validate_project write_configuration interactive unpack_extension

data/lib/compass/commands/update_project.rb

@@ -129,7 +129,6 @@ module Compass
             parser.options[:project_name] = arguments.shift if File.directory?(arguments.first)
             unless arguments.empty?
               parser.options[:sass_files] = arguments.dup
-              parser.options[:force] = true
             end
           end
         end

data/lib/compass/configuration/data.rb

@@ -142,7 +142,7 @@ module Compass
 
       def watch(glob, &block)
         @watches ||= []
-        @watches << Watcher::Watch.new(glob, block)
+        @watches << Watcher::Watch.new(glob, &block)
       end
       
       def watches

data/lib/compass/exec/project_options_parser.rb

@@ -20,6 +20,10 @@ module Compass::Exec::ProjectOptionsParser
       self.options[:project_type] = project_type.to_sym
     end
 
+    opts.on('--app-dir PATH', 'The base directory for your application.') do |project_path|
+      self.options[:project_path] = project_path
+    end
+
     opts.on('--sass-dir SRC_DIR', "The source directory where you keep your sass stylesheets.") do |sass_dir|
       set_dir_or_path(:sass, sass_dir)
     end
@@ -35,7 +39,7 @@ module Compass::Exec::ProjectOptionsParser
     opts.on('--javascripts-dir JS_DIR', "The directory where you keep your javascripts.") do |javascripts_dir|
       set_dir_or_path(:javascripts, javascripts_dir)
     end
-    
+
     opts.on('--fonts-dir FONTS_DIR', "The directory where you keep your fonts.") do |fonts_dir|
       set_dir_or_path(:fonts, fonts_dir)
     end
@@ -57,6 +61,14 @@ module Compass::Exec::ProjectOptionsParser
     opts.on('--no-line-comments', :NONE, 'Disable line comments.') do
       self.options[:line_comments] = false
     end
+
+    opts.on('--http-path HTTP_PATH', 'Set this to the root of your project when deployed') do |http_path|
+      self.options[:http_path] = http_path
+    end
+
+    opts.on('--generated-images-path GENERATED_IMAGES_PATH', 'The path where you generate your images') do |generated_images_path|
+      self.options[:generated_images_path] = generated_images_path
+    end
   end
 
 end

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

@@ -33,7 +33,7 @@ module Compass::SassExtensions::Functions::CrossBrowserSupport
     Sass::Script::Bool.new(needed)
   end
 
-  %w(webkit moz o ms svg pie css2 owg).each do |prefix|
+  %w(webkit moz o ms svg pie css2).each do |prefix|
     class_eval <<-RUBY, __FILE__, __LINE__ + 1
       # Syntactic sugar to apply the given prefix
       # -moz($arg) is the same as calling prefix(-moz, $arg)

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

@@ -79,7 +79,7 @@ module Compass::SassExtensions::Functions::GradientSupport
       def standardized_prefix(prefix)
         class_eval %Q{
           def to_#{prefix}(options = self.options)
-            Sass::Script::String.new("-#{prefix}-\#{to_s(options)}")
+            Sass::Script::String.new("-#{prefix}-\#{to_s_prefixed(options)}")
           end
         }
       end
@@ -134,22 +134,14 @@ module Compass::SassExtensions::Functions::GradientSupport
       s << color_stops.to_s(options)
       s << ")"
     end
+
+    def to_s_prefixed(options = self.options)
+      to_s(options)
+    end
     
     standardized_prefix :webkit
     standardized_prefix :moz
     standardized_prefix :o
-    
-    def to_owg(options = self.options)
-      args = [
-        grad_point(position || _center_position),
-        Sass::Script::String.new("0"),
-        grad_point(position || _center_position),
-        grad_end_position(color_stops, Sass::Script::Bool.new(true)),
-        grad_color_stops(color_stops)
-      ]
-      args.each {|a| a.options = options}
-      Sass::Script::String.new("-webkit-gradient(radial, #{args.join(', ')})")
-    end
 
     def to_svg(options = self.options)
       # XXX Add shape support if possible
@@ -169,23 +161,48 @@ module Compass::SassExtensions::Functions::GradientSupport
   class LinearGradient < Sass::Script::Literal
     include Gradient
 
-    attr_accessor :color_stops, :position_or_angle
+    attr_accessor :color_stops, :position_or_angle, :legacy
 
     def children
       [color_stops, position_or_angle].compact
     end
 
-    def initialize(position_or_angle, color_stops)
+    def initialize(position_or_angle, color_stops, legacy=false)
       unless color_stops.value.size >= 2
         raise Sass::SyntaxError, "At least two color stops are required for a linear-gradient"
       end
       self.position_or_angle = position_or_angle
       self.color_stops = color_stops
+      self.legacy = legacy
     end
 
-    def to_s(options = self.options)
+    def to_s_prefixed(options = self.options)
       s = "linear-gradient("
-      s << position_or_angle.to_s(options) << ", " if position_or_angle
+      if legacy
+        s << position_or_angle.to_s(options) << ", " if position_or_angle
+      else
+        s << convert_to_or_from_legacy(position_or_angle, options) << ", " if position_or_angle
+      end
+      s << color_stops.to_s(options)
+      s << ")"
+    end
+
+    def convert_to_or_from_legacy(position_or_angle, options = self.options)
+      input = if position_or_angle.is_a?(Sass::Script::Number)
+          position_or_angle
+        else
+          Sass::Script::List.new(position_or_angle.to_s.split(' ').map {|s| Sass::Script::String.new(s) }, :space)
+        end
+      return convert_angle_from_offical(input).to_s(options)
+    end
+
+    def to_s(options = self.options)
+      s = 'linear-gradient('
+      if legacy
+        s << convert_to_or_from_legacy(position_or_angle, options) << ", " if position_or_angle
+      else
+        s << position_or_angle.to_s(options) << ", " if position_or_angle
+      end
       s << color_stops.to_s(options)
       s << ")"
     end
@@ -203,16 +220,6 @@ module Compass::SassExtensions::Functions::GradientSupport
       end
     end
 
-    # Output the original webkit gradient syntax
-    def to_owg(options = self.options)
-      args = []
-      args << grad_point(position_or_angle || Sass::Script::String.new("top"))
-      args << linear_end_position(position_or_angle, color_stops)
-      args << grad_color_stops(color_stops)
-      args.each{|a| a.options = options}
-      Sass::Script::String.new("-webkit-gradient(linear, #{args.join(', ')})")
-    end
-
     def to_svg(options = self.options)
       linear_svg_gradient(color_stops, position_or_angle || Sass::Script::String.new("top"))
     end
@@ -229,6 +236,29 @@ module Compass::SassExtensions::Functions::GradientSupport
   end
 
   module Functions
+
+    def convert_angle_from_offical(deg)
+      if deg.is_a?(Sass::Script::Number)
+        return Sass::Script::Number.new((deg.value.to_f - 450).abs % 360, ['deg'])
+      else
+        args = deg.value
+        direction = []
+        if args[0] == Sass::Script::String.new('to')
+          if args.size < 2
+            direction = args
+          else
+            direction << opposite_position(args[1])
+          end
+        else
+          direction << Sass::Script::String.new('to')
+          args.each do |pos|
+            direction << opposite_position(pos)
+          end
+        end
+        return Sass::Script::String.new(direction.join(' '))
+      end
+    end
+
     # given a position list, return a corresponding position in percents
     # otherwise, returns the original argument
     def grad_point(position)
@@ -314,7 +344,7 @@ module Compass::SassExtensions::Functions::GradientSupport
       RadialGradient.new(position_or_angle, shape_and_size, send(:color_stops, *color_stops))
     end
 
-    def linear_gradient(position_or_angle, *color_stops)
+    def _build_linear_gradient(position_or_angle, *color_stops)
       if color_stop?(position_or_angle)
         color_stops.unshift(position_or_angle)
         position_or_angle = nil
@@ -328,9 +358,19 @@ module Compass::SassExtensions::Functions::GradientSupport
       if color_stops.size == 1 && (stops = list_of_color_stops?(color_stops.first))
         color_stops = stops
       end
+      return [position_or_angle, color_stops]
+    end
+
+    def _linear_gradient(position_or_angle, *color_stops)
+      position_or_angle, color_stops = _build_linear_gradient(position_or_angle, *color_stops)
       LinearGradient.new(position_or_angle, send(:color_stops, *color_stops))
     end
 
+    def _linear_gradient_legacy(position_or_angle, *color_stops)
+      position_or_angle, color_stops = _build_linear_gradient(position_or_angle, *color_stops)
+      LinearGradient.new(position_or_angle, send(:color_stops, *color_stops), true)
+    end
+
     # returns color-stop() calls for use in webkit.
     def grad_color_stops(color_list)
       stops = color_stops_in_percentages(color_list).map do |stop, color|

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

@@ -14,11 +14,7 @@ module Compass::SassExtensions::Functions::Sprites
   # Returns the width of the generated sprite map
   def sprite_width(map, sprite=nil)
     verify_map(map, 'sprite-width')
-    file = if sprite
-      map.image_for(sprite).file
-    else
-      map.filename
-    end
+    file = get_sprite_file(map, sprite)
     width, _ = image_dimensions(file)
     Sass::Script::Number.new(width, ["px"])
   end
@@ -28,11 +24,7 @@ module Compass::SassExtensions::Functions::Sprites
   # Returns the height of the generated sprite map
   def sprite_height(map, sprite=nil)
     verify_map(map, 'sprite-height')
-    file = if sprite
-      map.image_for(sprite).file
-    else
-      map.filename
-    end
+    file = get_sprite_file(map, sprite)
     _, height = image_dimensions(file)
     Sass::Script::Number.new(height, ["px"])
   end
@@ -234,12 +226,16 @@ module Compass::SassExtensions::Functions::Sprites
   Sass::Script::Functions.declare :sprite_position, [:map, :sprite, :offset_x, :offset_y]
   Sass::Script::Functions.declare :sprite_position, [:map, :sprite, :offset_x, :offset_y, :use_percentages]
 
-  def sprite_image(*args)
-    raise Sass::SyntaxError, %Q(The sprite-image() function has been replaced by sprite(). See http://compass-style.org/help/tutorials/spriting/ for more information.)
-  end
-
 protected
 
+  def get_sprite_file(map, sprite=nil)
+    if sprite
+      map.image_for(sprite).file
+    else
+      map.filename
+    end
+  end
+
   def reversed_color_names
     if Sass::Script::Color.const_defined?(:HTML4_COLORS_REVERSE)
       Sass::Script::Color::HTML4_COLORS_REVERSE

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

@@ -130,8 +130,10 @@ module Compass::SassExtensions::Functions::Urls
       end
 
       # Compute the real path to the image on the file stystem if the images_dir is set.
-      real_path = if Compass.configuration.images_dir
-        File.join(Compass.configuration.project_path, Compass.configuration.images_dir, path)
+      real_path = if Compass.configuration.images_path
+        File.join(Compass.configuration.images_path, path)
+      else
+        File.join(Compass.configuration.project_path, path)
       end
 
       # prepend the path to the image if there's one
@@ -195,8 +197,10 @@ module Compass::SassExtensions::Functions::Urls
       end
 
       # Compute the real path to the image on the file stystem if the generated_images_dir is set.
-      real_path = if Compass.configuration.generated_images_dir
-        File.join(Compass.configuration.project_path, Compass.configuration.generated_images_dir, path)
+      real_path = if Compass.configuration.images_path
+        File.join(Compass.configuration.images_path, path)
+      else
+        File.join(Compass.configuration.project_path, path)
       end
 
       # prepend the path to the image if there's one

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

@@ -0,0 +1,10 @@
+module Compass::SassExtensions::Functions::Utility
+
+  def file_exists(path_to_file)
+    path = path_to_file.respond_to?(:value) ? path_to_file.value : path_to_file
+    Sass::Script::Bool.new(File.exists?(path));
+  end
+
+  Sass::Script::Functions.declare :file_exists, [:path_to_file]
+
+end

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

@@ -9,11 +9,11 @@ module Compass
         end
         
         def construct_sprite
-          raise ::Compass::Error, "You must impliment construct_sprite"
+          raise ::Compass::Error, "You must implement construct_sprite"
         end
         
         def save(filename)
-          raise ::Compass::Error, "You must impliment save(filename)"
+          raise ::Compass::Error, "You must implement save(filename)"
         end
         
       end
@@ -22,4 +22,4 @@ module Compass
 end
 
 
-require 'compass/sass_extensions/sprites/engines/chunky_png_engine'
+require 'compass/sass_extensions/sprites/engines/chunky_png_engine'

data/lib/compass/sprite_importer/content.erb

@@ -47,7 +47,8 @@ $<%= name %>-sort-by           : 'none' !default;
   } 
 } @else {
   #{$<%= name %>-sprite-base-class} {
-    background: $<%= name %>-sprites no-repeat;
+    background-image: $<%= name %>-sprites;
+    background-repeat: no-repeat;
   }
 }
 //sass functions to return the dimensions of a sprite image as units

data/lib/compass/watcher/project_watcher.rb

@@ -55,6 +55,9 @@ module Compass
           load_path = Pathname.new(load_path).relative_path_from(Pathname.new(project_path))
           filter = File.join(load_path, SASS_FILTER)
           children = File.join(load_path, ALL_CHILDREN_SASS_FILTER)
+          if filter.match(%r{^./})
+            watches << Watcher::Watch.new(SASS_FILTER, &method(:sass_callback))
+          end
           watches << Watcher::Watch.new(filter, &method(:sass_callback))
           watches << Watcher::Watch.new(children, &method(:sass_callback))
         end
@@ -62,7 +65,7 @@ module Compass
       end
 
       def listen_callback(modified_file, added_file, removed_file)
-        #log_action(:info, ">>> Listen Callback fired", {})
+        #log_action(:info, ">>> Listen Callback fired added: #{added_file}, mod: #{modified_file}, rem: #{removed_file}", {})
         action = nil
         action ||= :modified unless modified_file.empty?
         action ||= :added unless added_file.empty?
@@ -78,7 +81,7 @@ module Compass
       end
 
       def sass_callback(base, file, action)
-        #log_action(:info, ">>> Sass Callback fired #{action}", {})
+        #log_action(:info, ">>> Sass Callback fired #{action}, #{file}", {})
         sass_modified(file) if action == :modified
         sass_added(file) if action == :added
         sass_removed(file) if action == :removed

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

@@ -3,43 +3,39 @@
 
 .bg-shortcut-linear-gradient {
   background: white url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RkZGRkZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-  background: white -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
   background: white -webkit-linear-gradient(top left, #dddddd, #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); }
+  background: white linear-gradient(to bottom right, #dddddd, #aaaaaa); }
 
 .bg-shortcut-radial-gradient {
   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 -webkit-radial-gradient(center center, #dddddd, #aaaaaa 100px);
   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-linear-gradient-angle-svg {
-  background-image: -webkit-linear-gradient(-45deg, #0000ff, #000000);
-  background-image: -moz-linear-gradient(-45deg, #0000ff, #000000);
-  background-image: -o-linear-gradient(-45deg, #0000ff, #000000);
+  background-image: -webkit-linear-gradient(135deg, #0000ff, #000000);
+  background-image: -moz-linear-gradient(135deg, #0000ff, #000000);
+  background-image: -o-linear-gradient(135deg, #0000ff, #000000);
   background-image: linear-gradient(-45deg, #0000ff, #000000); }
 
 .bg-linear-gradient-angle2-svg {
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDBmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
   background-size: 100%;
-  background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #0000ff), color-stop(100%, #000000));
   background-image: -webkit-linear-gradient(top left, #0000ff, #000000);
   background-image: -moz-linear-gradient(top left, #0000ff, #000000);
   background-image: -o-linear-gradient(top left, #0000ff, #000000);
-  background-image: linear-gradient(top left, #0000ff, #000000); }
+  background-image: linear-gradient(to bottom right, #0000ff, #000000); }
 
 .bg-all-gradient-types-with-simplification {
   background: #ffcc00;
   background: url('/images/4x6.png?busted=true'), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RkZGRkZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='), 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'), -webkit-linear-gradient(top left, #dddddd, #aaaaaa), -webkit-radial-gradient(center center, #dddddd, #aaaaaa 100px), #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; }
+  background: url('/images/4x6.png?busted=true'), linear-gradient(to bottom right, #dddddd, #aaaaaa), radial-gradient(center center, #dddddd, #aaaaaa 100px), #ffcc00; }
 
 .bg-simple-image {
   background-image: url("foo.png"); }
@@ -47,61 +43,54 @@
 .bg-linear-gradient {
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RkZGRkZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
   background-size: 100%;
-  background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
   background-image: -webkit-linear-gradient(top left, #dddddd, #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); }
+  background-image: linear-gradient(to bottom right, #dddddd, #aaaaaa); }
 
 .bg-linear-gradient-pixel-stop-from-top {
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIyNSUiIHN0b3AtY29sb3I9IiNkZGRkZGQiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhYWFhYWEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
   background-size: 100%;
-  background-image: -webkit-gradient(linear, 50% 0%, 50% 40, color-stop(25%, #dddddd), color-stop(100%, #aaaaaa));
   background-image: -webkit-linear-gradient(top, #dddddd 10px, #aaaaaa 40px);
   background-image: -moz-linear-gradient(top, #dddddd 10px, #aaaaaa 40px);
   background-image: -o-linear-gradient(top, #dddddd 10px, #aaaaaa 40px);
-  background-image: linear-gradient(top, #dddddd 10px, #aaaaaa 40px); }
+  background-image: linear-gradient(to bottom, #dddddd 10px, #aaaaaa 40px); }
 
 .bg-linear-gradient-pixel-stop-from-left {
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iNTAlIiB4Mj0iMTAwJSIgeTI9IjUwJSI+PHN0b3Agb2Zmc2V0PSIyNSUiIHN0b3AtY29sb3I9IiNkZGRkZGQiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhYWFhYWEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
   background-size: 100%;
-  background-image: -webkit-gradient(linear, 0% 50%, 40 50%, color-stop(25%, #dddddd), color-stop(100%, #aaaaaa));
   background-image: -webkit-linear-gradient(left, #dddddd 10px, #aaaaaa 40px);
   background-image: -moz-linear-gradient(left, #dddddd 10px, #aaaaaa 40px);
   background-image: -o-linear-gradient(left, #dddddd 10px, #aaaaaa 40px);
-  background-image: linear-gradient(left, #dddddd 10px, #aaaaaa 40px); }
+  background-image: linear-gradient(to right, #dddddd 10px, #aaaaaa 40px); }
 
 .transparent-in-linear-gradient {
   background-image: white url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iYmxhY2siIHN0b3Atb3BhY2l0eT0iMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
   background-size: 100%;
-  background-image: white -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, transparent), color-stop(100%, #aaaaaa));
   background-image: white -webkit-linear-gradient(top left, transparent, #aaaaaa);
   background-image: white -moz-linear-gradient(top left, transparent, #aaaaaa);
   background-image: white -o-linear-gradient(top left, transparent, #aaaaaa);
-  background-image: white linear-gradient(top left, transparent, #aaaaaa); }
+  background-image: white linear-gradient(to bottom right, transparent, #aaaaaa); }
 
 .currentColor-in-linear-gradient {
   background-image: white url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iYmxhY2siIHN0b3Atb3BhY2l0eT0iMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iY3VycmVudENvbG9yIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
   background-size: 100%;
-  background-image: white -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, transparent), color-stop(100%, currentColor));
   background-image: white -webkit-linear-gradient(top left, transparent, currentColor);
   background-image: white -moz-linear-gradient(top left, transparent, currentColor);
   background-image: white -o-linear-gradient(top left, transparent, currentColor);
-  background-image: white linear-gradient(top left, transparent, currentColor); }
+  background-image: white linear-gradient(to bottom right, transparent, currentColor); }
 
 .rgba-in-linear-gradient {
   background-image: white url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjgiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
   background-size: 100%;
-  background-image: white -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, rgba(255, 255, 255, 0.8)), color-stop(100%, rgba(0, 0, 0, 0.1)));
   background-image: white -webkit-linear-gradient(top left, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.1));
   background-image: white -moz-linear-gradient(top left, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.1));
   background-image: white -o-linear-gradient(top left, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.1));
-  background-image: white linear-gradient(top left, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.1)); }
+  background-image: white linear-gradient(to bottom right, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.1)); }
 
 .bg-radial-gradient {
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJibGFjayIgc3RvcC1vcGFjaXR5PSIwIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
   background-size: 100%;
-  background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, transparent));
   background-image: -webkit-radial-gradient(center center, #dddddd, transparent 100px);
   background-image: -moz-radial-gradient(center center, #dddddd, transparent 100px);
   background-image: -o-radial-gradient(center center, #dddddd, transparent 100px);
@@ -110,22 +99,20 @@
 .currentColor-in-radial-gradient {
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSJjdXJyZW50Q29sb3IiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9ImJsYWNrIiBzdG9wLW9wYWNpdHk9IjAiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
   background-size: 100%;
-  background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, currentColor), color-stop(100%, transparent));
   background-image: -webkit-radial-gradient(center center, currentColor, transparent 100px);
   background-image: -moz-radial-gradient(center center, currentColor, transparent 100px);
   background-image: -o-radial-gradient(center center, currentColor, transparent 100px);
   background-image: radial-gradient(center center, currentColor, transparent 100px); }
 
 .bg-linear-gradient-with-angle {
-  background-image: -webkit-linear-gradient(-45deg, #dddddd, #aaaaaa);
-  background-image: -moz-linear-gradient(-45deg, #dddddd, #aaaaaa);
-  background-image: -o-linear-gradient(-45deg, #dddddd, #aaaaaa);
+  background-image: -webkit-linear-gradient(135deg, #dddddd, #aaaaaa);
+  background-image: -moz-linear-gradient(135deg, #dddddd, #aaaaaa);
+  background-image: -o-linear-gradient(135deg, #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+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9ImVsbGlwc2UiIGN5PSJjb3ZlciIgcj0iMTAwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
   background-size: 100%;
-  background-image: -webkit-gradient(radial, ellipse cover, 0, ellipse cover, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
   background-image: -webkit-radial-gradient(ellipse cover, #dddddd, #aaaaaa 100px);
   background-image: -moz-radial-gradient(ellipse cover, #dddddd, #aaaaaa 100px);
   background-image: -o-radial-gradient(ellipse cover, #dddddd, #aaaaaa 100px);
@@ -134,15 +121,13 @@
 .bg-all-gradient-types {
   background-image: url('/images/4x6.png?busted=true'), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RkZGRkZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='), 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'), -webkit-linear-gradient(top left, #dddddd, #aaaaaa), -webkit-radial-gradient(center center, #dddddd, #aaaaaa 100px);
   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); }
+  background-image: url('/images/4x6.png?busted=true'), linear-gradient(to bottom right, #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;
   -webkit-border-image: -webkit-radial-gradient(#00ff00, #ff0000 100px) 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;
@@ -156,7 +141,6 @@
 
 .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: -webkit-radial-gradient(#00ff00, #ff0000 10px);
   list-style-image: -o-radial-gradient(#00ff00, #ff0000 10px);
   list-style-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMGZmMDAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjAwMDAiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
@@ -164,7 +148,6 @@
 
 .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 -webkit-radial-gradient(#00ff00, #ff0000 10px);
   list-style-image: outside -o-radial-gradient(#00ff00, #ff0000 10px);
   list-style-image: outside url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMGZmMDAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjAwMDAiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
@@ -175,42 +158,36 @@
 
 .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: -webkit-radial-gradient(#00ff00, #ff0000 10px);
   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: -webkit-linear-gradient(#dddddd, #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: -webkit-radial-gradient(#dddddd, #aaaaaa 100px);
   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(radial-gradient(#dddddd, #aaaaaa 100px), url('/images/4x6.png?busted=true'), #cc0000);
   background-image: image(-webkit-radial-gradient(#dddddd, #aaaaaa 100px), 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(radial-gradient(#dddddd, #aaaaaa 100px), url('/images/4x6.png?busted=true'));
   background-image: cross-fade(-webkit-radial-gradient(#dddddd, #aaaaaa 100px), 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(radial-gradient(#dddddd, #aaaaaa 100px));
   background: foo(-webkit-radial-gradient(#dddddd, #aaaaaa 100px));
   background: foo(-moz-radial-gradient(#dddddd, #aaaaaa 100px));
   background: foo(-o-radial-gradient(#dddddd, #aaaaaa 100px));
@@ -227,3 +204,27 @@
 .ie-alpha-filter {
   *zoom: 1;
   filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFFFFF', endColorstr='#00FFFFFF'); }
+
+.linear-gradient-new {
+  background: -webkit-linear-gradient(top, #ff0000 0%, #88aa44 100%);
+  background: -moz-linear-gradient(top, #ff0000 0%, #88aa44 100%);
+  background: -o-linear-gradient(top, #ff0000 0%, #88aa44 100%);
+  background: linear-gradient(to bottom, #ff0000 0%, #88aa44 100%); }
+
+.linear-gradient-old {
+  background: -webkit-linear-gradient(top, #ff0000 0%, #88aa44 100%);
+  background: -moz-linear-gradient(top, #ff0000 0%, #88aa44 100%);
+  background: -o-linear-gradient(top, #ff0000 0%, #88aa44 100%);
+  background: linear-gradient(to bottom, #ff0000 0%, #88aa44 100%); }
+
+.linear-gradient-unknown-new {
+  background: -webkit-linear-gradient(330deg, #ff0000 0%, #88aa44 100%);
+  background: -moz-linear-gradient(330deg, #ff0000 0%, #88aa44 100%);
+  background: -o-linear-gradient(330deg, #ff0000 0%, #88aa44 100%);
+  background: linear-gradient(120deg, #ff0000 0%, #88aa44 100%); }
+
+.linear-gradient-unknown-old {
+  background: -webkit-linear-gradient(120deg, #ff0000 0%, #88aa44 100%);
+  background: -moz-linear-gradient(120deg, #ff0000 0%, #88aa44 100%);
+  background: -o-linear-gradient(120deg, #ff0000 0%, #88aa44 100%);
+  background: linear-gradient(330deg, #ff0000 0%, #88aa44 100%); }