Merge branch 'css3-v2' of github.com:chriseppstein/compass into css3-v2

renamed default variable in has-layout mixin to more appropriate name $approach
generate docs on the css3 images module.
2010-11-15 16:28:59 -06:00 · 2010-11-15 16:28:53 -06:00 · 2010-11-15 03:50:00 -08:00 · 2010-11-15 03:48:59 -08:00 · 2010-11-15 03:47:57 -08:00 · 2010-11-15 03:46:44 -08:00
60 changed files with 2307 additions and 285 deletions
--- a/.gitignore
+++ b/.gitignore
@ -24,3 +24,4 @@ doc-src/.bundle
 .bundle
 attic
 devbin
+.rvmrc
--- a/2
+++ b/2
@ -5,7 +5,7 @@ require 'compass'

 # ----- Default: Testing ------

-task :default => :run_tests
+task :default => :test

 require 'rake/testtask'
 require 'fileutils'
--- a/doc-src/Gemfile
+++ b/doc-src/Gemfile
@ -1,16 +1,15 @@
 source :gemcutter

-# We can switch nanoc to a normal gem when 3.1.3 is released.
-gem 'nanoc3', :require => false, :git => "git://github.com/chriseppstein/nanoc.git", :branch => "3.1.x"
+gem 'nanoc3', :git => "git://github.com/chriseppstein/nanoc.git"
 gem 'rdiscount'
 gem 'thor'
 gem 'rack'
 gem 'mime-types'
 gem 'fssm'
-gem 'serve', "0.10.2"
+gem 'serve', "1.0.0"
 gem 'nokogiri'
 gem 'coderay'
-gem 'haml', ">=3.0.6", :require => 'sass'
+gem 'haml', ">=3.0.23", :require => 'sass'
 gem 'rake'
 gem 'compass', :path => ".."
 gem 'compass-susy-plugin', ">=0.7.0.pre8"
--- a/doc-src/Gemfile.lock
+++ b/doc-src/Gemfile.lock
@ -1,38 +1,42 @@
 GIT
  remote: git://github.com/chriseppstein/nanoc.git
-  revision: 3982942
-  branch: 3.1.x
+  revision: 4ecb400489c83fd2068659de0c651733b8dad28f
  specs:
-    nanoc3 (3.1.2)
+    nanoc3 (3.2.0a3)
      cri (>= 1.0.0)

 PATH
-  remote: /Users/chris/Projects/compass
+  remote: /Users/bmathis/Documents/Workspace/compass-projects/compass
  specs:
-    compass (0.10.6)
+    compass (0.11.alpha.0.c9a684c)
      haml (>= 3.0.4)

 GEM
  remote: http://rubygems.org/
  specs:
-    activesupport (2.3.8)
-    coderay (0.9.3)
-    compass-susy-plugin (0.7.0)
+    activesupport (3.0.1)
+    coderay (0.9.5)
+    compass-susy-plugin (0.8.1)
      compass (>= 0.10.0)
    cri (1.0.1)
    css-slideshow (0.2.0)
      compass (>= 0.10.0.rc3)
-    fssm (0.1.4)
-    haml (3.0.16)
-    json (1.4.5)
+    fssm (0.2.0)
+    haml (3.0.23)
+    i18n (0.4.2)
+    json (1.4.6)
    mime-types (1.16)
    nokogiri (1.4.3.1)
    rack (1.2.1)
    rake (0.8.7)
    rdiscount (1.6.5)
-    serve (0.10.2)
-      activesupport (>= 2.0.2)
-    thor (0.14.0)
+    serve (1.0.0)
+      activesupport (~> 3.0.1)
+      i18n (~> 0.4.1)
+      rack (~> 1.2.1)
+      tzinfo (~> 0.3.23)
+    thor (0.14.4)
+    tzinfo (0.3.23)

 PLATFORMS
  ruby
@ -43,7 +47,7 @@ DEPENDENCIES
  compass-susy-plugin (>= 0.7.0.pre8)
  css-slideshow (= 0.2.0)
  fssm
-  haml (>= 3.0.6)
+  haml (>= 3.0.23)
  json
  mime-types
  nanoc3!
@ -51,5 +55,5 @@ DEPENDENCIES
  rack
  rake
  rdiscount
-  serve (= 0.10.2)
+  serve (= 1.0.0)
  thor
--- a/doc-src/content/CHANGELOG.markdown
+++ b/doc-src/content/CHANGELOG.markdown
@ -7,32 +7,81 @@ layout: article
 COMPASS CHANGELOG
 =================

-0.11.alpha.1 (UNRELEASED)
-------------------------
+Upgrading compass is really easy.
+Don't let all these details [scare you...](/docs/tutorials/upgrading/im-scared/)
+
+The Documentation for the [latest stable release](http://compass-style.org/docs/):
+
+The Documentation for the [latest preview release](http://beta.compass-style.org/docs/)
+
+0.11.alpha.1   (11/16/2010)
+---------------------------
+
+Note: Compass does not currently support Sass 3.1 alphas.
+
+### Deprecations

 * Deprecated imports and APIs from v0.10 have been removed.
+* Changed defaults for the box-shadow and text-shadow mixins.
+  Previously the horizontal and vertical offset were both 1, which
+  expected a top left light source. They are now set to 0 which assumes
+  a direct light source, a more generic default.
+* The linear-gradient and radial-gradient mixins have been deprecated.
+  Instead use the background-image mixin and pass it a gradient function.
+  The deprecation warning will print out the correct call for you to use.
+* The `css3` import is deprecated as well as the following css3 modules:
+  `box-shadow`, `text-shadow`, and `transform`. Instead import `css3/version-2`,
+  `box-shadow-v2`, `text-shadow-v2`, and `transform-v2` respectively.
+  However, you will only get deprecation warnings if you actually use
+  one of the deprecated mixins. The imports will be restored by 1.0
+  with the new, betterer APIs.
+* Passing an argument to the `blueprint-scaffolding` mixin is not necessary
+  and has been deprecated.
+* Some blueprint color defaults now use color functions instead of color arithmetic.
+  This may result in different output for those who have color customizations.

 ### Blueprint

-* Deprecations:
-  - Passing an argument to the blueprint-scaffolding mixin is not necessary
-    and has been deprecated.
-* Some color defaults now use color functions instead of color arithmetic.
-  This may result in different output for those who have color customizations.
 * Updated from blueprint 0.9 to blueprint 1.0
-  * Added detailed explanations to core uncompressed CSS files [CMM]
  * Added .info and .alert classes to forms.css [CMM]
  * Fixed numerous bugs in forms, including the fieldset padding bug in IE6-8 [CMM]
  * Fixed specificity problems in typography.css and grid.css [CMM]
  * See Lighthouse for more bug fixes
-  * Full [changelog][blueprint_10_change]
+  * Full [blueprint changelog][blueprint_10_change]
  * If for some reason you'd like to stay on the older version of blueprint you can run
    the following command in your project before you upgrade (or after temporarily downgrading):
    `compass unpack blueprint`

+### CSS3 v2.0
+
+Our CSS3 module makes writing CSS3 today almost as easy as it will be when all
+the browsers officially support the new features. The second version of the
+compass CSS module brings the API up to date with developments over the past
+6 to 9 months of browser changes and more closely matching the most recent CSS
+specifications. Summary of changes:
+
+* Support for multiple box shadows and text shadows
+* Support for 2d and 3d transforms
+* Opt-in SVG support for gradients in opera and IE9.
+  Set `$experimental-support-for-svg : true` in your
+  stylesheet to enable it.
+* Fixed a radial gradient position bug.
+* To generate a simple linear gradient in IE6 & 7, you can now use
+  the `filter-gradient` mixin.
+* New `background-image` mixin with gradient support and allowing
+  up to 10 images.
+* Gradient support for the border-image property.
+* Gradient support for list-style-image property.
+* Gradient support for the content property.

 ### Helpers

+* `linear-gradient()` & `radial-gradient()` helpers now intercept standard css
+  functions and parse them into Sass Literals. These work with new vendor helpers
+  (`-moz()`, `-webkit`, `-o`, `-ie`, and `-svg` (yes I know svg is not a vendor))
+  to return specific representations of the linear & radial gradients. The
+  `prefixed()` function will check a value to see if it has a certain
+  vendor-specific representation.
 * New color helpers: `adjust-lightness`, `adjust-saturation`, `scale-lightness`, and `scale-saturation`
  make it easier to construct apis that manipulate these color attributes.
 * The `elements-of-type()` helper now returns html5 elements when the display is `block`
@ -47,10 +96,34 @@ COMPASS CHANGELOG
  If you provide a number with units of `deg` then it will return a unitless number
  after converting to radians. Otherwise, it assumes the number is a radian length measure
  and passes the units along to the result.
+* `ie-hex-str($color)` returns a #AARRGGBB formatted color suitable for
+  passing to IE filters.
+* A new function `if()` that allows you to switch on a value without using `@if`.
+  Usage: `if($truth-value, $value-if-true, $value-if-false)`.
+* Compass has added a number of new helper functions for lists that begin with
+  `-compass`, helpers that begin with `-compass` should be considered "private" and
+  are not to be used by compass users. Sass 3.1 will have proper list support,
+  these are a work around until that time.
+
+### Configuration
+
+* Added a new configuration property to disable sass warnings: `disable_warnings`
+
+### Core Framework
+
+* New layout mixins for absolute positioning: stretch, stretch-x, stretch-y

 ### Rails

-* Better integration with rails 3 (XXX Details)
+* In rails 3, there's no need for an initializer. Instead we use a
+  Railstie.
+* We now default to app/stylesheets for sass files and public/stylesheets for
+  css files -- though they can still be changed after installation or on the
+  command line during project initialization.
+* Compass is now a gem plugin in a rails environment.
+* In a rails3 environment the compass configuration can now be
+  changed without restarting the rails server process.
+

 0.10.7 (UNRELEASED)
 -------------------
--- a/doc-src/content/examples/compass/css3/gradient/markup.haml
+++ b/doc-src/content/examples/compass/css3/gradient/markup.haml
@ -1,35 +1,41 @@
-%p
-  this box has no gradients
+.ex
+  .gradient-example
+  %p
+    This box has no gradients

-.gradient-example
-
-%p
+.ex
+  #radial-gradient.gradient-example
+  %p
    This will yield a radial gradient with an apparent specular highlight  

-#radial-gradient.gradient-example
-
-%p
+.ex
+  #linear-gradient.gradient-example
+  %p
    This yields a linear gradient spanning from $start to $end coordinates  

-#linear-gradient.gradient-example
-
-%p
+.ex
+  #v-gradient.gradient-example
+  %p
    This yields a gradient starting at the top with #fff, ending in #aaa  

-#v-gradient.gradient-example
-
-%p
+.ex
+  #v-gradient-2.gradient-example
+  %p
    Same as above but with a #ccc at the halfway point  

-#v-gradient-2.gradient-example
-
-%p
+.ex
+  #v-gradient-3.gradient-example
+  %p
    Same as the first example but with #ccc at the
    30% from the top, and #bbb at 70% from the top  

-#v-gradient-3.gradient-example

-%p
+.ex
+  #h-gradient.gradient-example
+  %p
    This yields a horizontal linear gradient spanning from left to right.

-#h-gradient.gradient-example
+.ex
+  #svg-gradient.gradient-example
+  %p
+    This gradient has SVG support enabled for opera and IE9.
--- a/doc-src/content/examples/compass/css3/gradient/stylesheet.sass
+++ b/doc-src/content/examples/compass/css3/gradient/stylesheet.sass
@ -1,10 +1,16 @@
-@import compass/css3
+@import compass
+.ex
+  width: 48%
+  margin-right: 2%
+  float: left
+  +clearfix

 .gradient-example
  width: 80px
  height: 80px
  background: red
-  margin: 20px
+  float: left
+  margin: 1em 1em 0 0

 // This will yield a radial gradient with an apparent specular highlight  
 #radial-gradient
@ -29,3 +35,9 @@
 // This yields a horizontal linear gradient spanning from left to right.
 #h-gradient
  +linear-gradient(color-stops(#fff, #ddd), left)
+
+#svg-gradient
+  $experimental-support-for-svg: true
+  +linear-gradient(color-stops(#2AC363, #CD8C14, #9C4CC2), left)
+  width: 80px
+  height: 80px
--- a/doc-src/content/homepage.haml
+++ b/doc-src/content/homepage.haml
@ -0,0 +1,7 @@
+---
+title: Compass Home
+body_id: home
+layout: homepage
+---
+
+Yo!
--- a/doc-src/content/reference/compass/css3/box_shadow.haml
+++ b/doc-src/content/reference/compass/css3/box_shadow.haml
@ -1,15 +1,17 @@
 --- 
 title: Compass Box Shadow
-crumb: Box Shadow
+crumb: Box Shadow (Deprecated)
 framework: compass
 stylesheet: compass/css3/_box-shadow.scss
 meta_description: Specify the box shadow for all browsers.
 layout: core
+deprecated: true
 classnames:
  - reference
  - core
  - css3
 ---
 - render 'reference' do
-  %p
-    The box-shadow mixin is used to give a block element a drop shadow.
+  %p.warning
+    This import is deprecated. Please import
+    <a href="/docs/reference/compass/css3/box_shadow_v2/" class="better">box_shadow_v2</a> instead.
--- a/doc-src/content/reference/compass/css3/box_shadow_v2.haml
+++ b/doc-src/content/reference/compass/css3/box_shadow_v2.haml
@ -0,0 +1,15 @@
+--- 
+title: Compass Box Shadow (v2)
+crumb: Box Shadow (v2)
+framework: compass
+stylesheet: compass/css3/_box-shadow-v2.scss
+meta_description: Specify the box shadow for all browsers.
+layout: core
+classnames:
+  - reference
+  - core
+  - css3
+---
+- render 'reference' do
+  %p
+    The box-shadow mixins are used to apply an inset or drop shadow to a block element.
--- a/doc-src/content/reference/compass/css3/gradient.haml
+++ b/doc-src/content/reference/compass/css3/gradient.haml
@ -12,4 +12,8 @@ classnames:
 ---
 - render 'reference' do
  %p
-    Provides a mixin to create cross-browser CSS3 gradients.
+    Provides mixins to create cross-browser CSS3 gradients.
+    To enable SVG gradient support in Opera and IE9, set
+    <code>$experimental-support-for-svg: true</code> in your stylesheet.
+    NOTE: At this time, opera won't render an SVG background on a element
+    with a border.
--- a/doc-src/content/reference/compass/css3/images.haml
+++ b/doc-src/content/reference/compass/css3/images.haml
@ -0,0 +1,16 @@
+--- 
+title: Compass Images
+crumb: Images
+framework: compass
+stylesheet: compass/css3/_images.scss
+meta_description: Specify linear gradients and radial gradients for many browsers.
+layout: core
+classnames:
+  - reference
+  - core
+  - css3
+---
+- render 'reference' do
+  %p
+    Provides mixins that work across many modern browsers with the latest
+    CSS3 image rendering primitives.
--- a/doc-src/content/reference/compass/css3/text-shadow-v2.haml
+++ b/doc-src/content/reference/compass/css3/text-shadow-v2.haml
@ -0,0 +1,15 @@
+--- 
+title: Compass Text Shadow (v2)
+crumb: Text Shadow (v2)
+framework: compass
+stylesheet: compass/css3/_text-shadow-v2.scss
+meta_description: Specify the text shadow for all browsers.
+layout: core
+classnames:
+  - reference
+  - core
+  - css3
+---
+- render 'reference' do
+  %p
+    Provides a mixin for CSS text shadows. See <a href="http://www.w3.org/TR/2003/CR-css3-text-20030514/#text-shadows">CSS3 spec: text-shadow</a>.
--- a/doc-src/content/reference/compass/css3/text_shadow.haml
+++ b/doc-src/content/reference/compass/css3/text_shadow.haml
@ -1,15 +1,17 @@
 --- 
 title: Compass Text Shadow
-crumb: Text Shadow
+crumb: Text Shadow (Deprecated)
 framework: compass
 stylesheet: compass/css3/_text-shadow.scss
 meta_description: Specify the text shadow for all browsers.
 layout: core
+deprecated: true
 classnames:
  - reference
  - core
  - css3
 ---
 - render 'reference' do
-  %p
-    Provides a mixin for CSS text shadows. See <a href="http://www.w3.org/TR/2003/CR-css3-text-20030514/#text-shadows">CSS3 spec: text-shadow</a>.
+  %p.warning
+    This import is deprecated. Please import
+    <a href="/docs/reference/compass/css3/text-shadow-v2/" class="better">text_shadow_v2</a> instead.
--- a/doc-src/content/reference/compass/css3/transform-v2.haml
+++ b/doc-src/content/reference/compass/css3/transform-v2.haml
@ -0,0 +1,15 @@
+--- 
+title: Compass Transform (v2)
+crumb: Transform (v2)
+framework: compass
+stylesheet: compass/css3/_transform-v2.scss
+meta_description: Specify the 2D transformation for all browsers.
+layout: core
+classnames:
+  - reference
+  - core
+  - css3
+---
+- render 'reference' do
+  %p
+    Provides mixins for CSS3 2D and 3D transforms. See <a href="http://www.w3.org/TR/css3-2d-transforms/">W3C: CSS 2D transforms</a> and See <a href="http://www.w3.org/TR/css3-3d-transforms/">W3C: CSS 3D transforms</a>.
--- a/doc-src/content/reference/compass/css3/transform.haml
+++ b/doc-src/content/reference/compass/css3/transform.haml
@ -1,15 +1,17 @@
 --- 
 title: Compass Transform
-crumb: Transform
+crumb: Transform (Deprecated)
 framework: compass
 stylesheet: compass/css3/_transform.scss
 meta_description: Specify the 2D transformation for all browsers.
 layout: core
+deprecated: true
 classnames:
  - reference
  - core
  - css3
 ---
 - render 'reference' do
-  %p
-    Provides mixins for CSS3 transforms. See <a href="http://www.w3.org/TR/css3-2d-transforms/">W3C: CSS 2D transforms</a>.
+  %p.warning
+    This import is deprecated. Please import
+    <a href="/docs/reference/compass/css3/transform-v2/" class="better">transform_v2</a> instead.
--- a/doc-src/content/stylesheets/_examples.sass
+++ b/doc-src/content/stylesheets/_examples.sass
@ -4,6 +4,8 @@
    h1
      text-align: center

+  #demo
+    +clearfix
  #how
    +full(12)
    +pie-clearfix
--- a/doc-src/content/stylesheets/_reference.scss
+++ b/doc-src/content/stylesheets/_reference.scss
@ -103,3 +103,10 @@ body.helpers {
    dl { @extend dl.table; }
  }
 }
+
+.warning {
+  $warning-color: #900;
+  color: $warning-color;
+  a { color: $warning-color; text-decoration: underline; }
+  a.better { color: adjust-hue($warning-color, 120deg); @include hover-link; }
+}
--- a/doc-src/content/stylesheets/_sidebar.sass
+++ b/doc-src/content/stylesheets/_sidebar.sass
@ -55,6 +55,8 @@ aside[role="sidebar"]
        background: #f5f5f5
        &.selected
          font-weight: bold
+        &.deprecated span
+          text-decoration: line-through
        &:hover, &:focus, &.selected
          +border-radius
          +text-shadow(lighten($c, 15), 0, 1px)
--- a/doc-src/content/tutorials/configuration-reference.markdown
+++ b/doc-src/content/tutorials/configuration-reference.markdown
@ -202,6 +202,13 @@ command line will override the corresponding settings in your configuration file
 		  approach.
 		</td> 
 	</tr> 
+	<tr> 
+		<td style="vertical-align:top;"><code>disable_warnings</code> </td> 
+		<td style="vertical-align:top;">Boolean </td> 
+		<td style="vertical-align:top;">
+		  Set this to true to silence deprecation warnings.
+		</td> 
+	</tr> 
 	<tr> 
 		<td style="vertical-align:top;"><code>sass_options</code> </td> 
 		<td style="vertical-align:top;">Hash </td> 
--- a/doc-src/content/tutorials/upgrading/css3-v2.markdown
+++ b/doc-src/content/tutorials/upgrading/css3-v2.markdown
@ -0,0 +1,10 @@
+The `css3` import is deprecated as well as the following css3 modules:
+`box-shadow`, `text-shadow`, and `transform`. Instead import `css3/version-2`,
+`box-shadow-v2`, `text-shadow-v2`, and `transform-v2` respectively.
+However, you will only get deprecation warnings if you actually use
+one of the deprecated mixins. The imports will be restored by 1.0
+with the new, betterer APIs.
+
+You should read about what changed, update your stylesheets accordingly
+and then update your imports to the new version.
+
--- a/doc-src/content/tutorials/upgrading/im-scared.markdown
+++ b/doc-src/content/tutorials/upgrading/im-scared.markdown
@ -0,0 +1,58 @@
+---
+title: I'm Scared to Upgrade
+layout: tutorial
+crumb: Scared to Upgrade?
+classnames:
+  - tutorial
+---
+# I'm scared to upgrade.
+
+Why? Don't ya trust me? I won't break your stylesheets. Cross my heart. All those
+200+ github issues were feature requests. Honest. But you know, they might change
+a little. Probably not in any meaningful way. Like a default that used to be
+specified in the output might be omitted because it's the browser default anyway.
+
+## Trust but verify.
+
+But you should probably keep me on my toes. Follow these simple steps to see
+what changed to your stylesheets:
+
+*(Steps beginning with a $ are command line commands. Don't type the $.)*
+
+1. $ cd my_compass_project
+2. $ compass compile --force
+3. $ cp -r stylesheets stylesheets.backup
+4. $ gem install compass --pre # you might need to type sudo first if you're on mac or linux.
+5. $ compass compile --force
+6. Take note of any deprecation warnings printed in red during the compile.
+7. If you have textmate and installed the `mate` command line tool:<br>
+   $ diff -r stylesheets.backup stylesheets | mate
+8. If you have not installed the `mate` tool:<br>
+   $ sudo ln -s /Applications/TextMate.app/Contents/Resources/mate /usr/local/bin/mate
+   Then perform step 7.
+9. If you do not have Textmate, run the diff command like so:
+   $ diff -y -r stylesheets.backup stylesheets | less
+10. Scroll or use your arrow keys to review the differences between the files.
+11. If you're satisfied: $ git commit -a -m "Upgraded compass"
+12. If you're scared again:
+    A. Don't panic.
+    B. Read the [CHANGELOG](http://compass-style.org/docs/CHANGELOG/) and
+       see if the changes are explained there.
+    B. Send an email to the [mailing list](http://groups.google.com/group/compass-users)
+       explaining the problem and providing enough context like snippets from your diff
+       and the relevant snippets of your sass/scss files. In rare cases we might request
+       that you construct a simple compass project that exhibits the issue and make an
+       archive of it and send us an email with it attached.
+    C. If it's pretty obviously a bug. Please file an issue
+       on [github](http://github.com/chriseppstein/compass/issues). If you're experiencing
+       a crash, please run the command with the --trace option and record the output for
+       diagnostic purposes.
+    D. $ sudo gem uninstall compass
+       Select the newest version of compass. You have now downgraded to the old
+       version of compass.
+    E. $ compass compile --force
+    F. Diff the folders as in steps 7 through 9.
+13. Breathe a sigh of relief.
+       
+       
+
--- a/doc-src/content/upgrading/css3-v2.markdown
+++ b/doc-src/content/upgrading/css3-v2.markdown
@ -0,0 +1,197 @@
+---
+title: Upgrading to the Compass CSS3 API Version 2
+crumb: CSS3 API Upgrade
+classnames:
+  - tutorial
+layout: tutorial
+---
+
+The Compass CSS3 API is the easiest way to take advantage of the advanced CSS3 capabilities
+offered by modern browsers. The initial version (v1) of the Compass CSS3 API is now more than
+1 year old and the specification continues to evolve. The Compass team is dedicated to keeping
+our library up-to-date so that you can continue to stay at the fore-front of modern web design.
+To this end, a new version of the CSS3 API has been created for the compass v0.11 release. The
+old version of the API still exists and works, but some aspects of the old API are now
+deprecated and will be removed v0.12. This document will guide you through the steps that
+are required to stay up to date.
+
+<a name="box-shadow"></a>
+## Box Shadow
+
+The `box-shadow` mixin API has been changed. To upgrade to the new box shadow API, you should
+`@import "compass/css3/box-shadow-v2"` or `@import "compass/css3/version-2"`. Once you have
+changed your imports, it is expected that you have migrated your code to the new version,
+until then, you will receive a deprecation warning from each place in your code where you use
+deprecated mixins.
+ 
+Two new mixins are now provided:
+
+1. `single-box-shadow` - This is the old version of the box shadow mixin renamed.
+   It is optimized for creating a single box shadow with nice defaults that result
+   in approximately what you're expecting when you think of a box shadow and allow
+   for simple overriding of defaults using keyword-style arguments.
+2. `multiple-box-shadow` - This mixin allows you to specify up to 10 shadows to be
+   applied. Each argument to this mixin is a space delimited list of values specifying
+   a shadow.
+
+Additionally, the `box-shadow` mixin is now a shortcut for the `multiple-box-shadow`
+mixin because this most closely matches the CSS3 specification.
+   
+To upgrade, you have two choices:
+
+1. Change the mixin from `box-shadow` to `single-box-shadow` and keep the arguments
+   unchanged. For instance:
+   
+       @include box-shadow(darken($border_color, 40), 5px, 5px, 2px, 3px, inset)
+   
+   would now become:
+   
+       @include single-box-shadow(darken($border_color, 40), 5px, 5px, 2px, 3px, inset)
+   
+2. Keep including the `box-shadow` mixin but update the arguments to be a space delimited
+   list. For instance:
+   
+       @include box-shadow(darken($border_color, 40), 5px, 5px, 2px, 3px, inset)
+   
+   would now become:
+   
+       @include box-shadow(inset 5px 5px 2px 3px darken($border_color, 40))
+
+<a name="text-shadow"></a>
+## Text-Shadow
+
+The `text-shadow` mixin API has been changed in the exact same ways as the `box-shadow` mixin.
+The available mixins are now `single-text-shadow` which functions as before, with `text-shadow`
+and `multiple-text-shadows` accepting up to 10 space-delimited shadow arguments. Upgrade by following
+the process listed above. 
+
+<a name="transform"></a>
+## Transform
+
+The `transform` mixin API has been changed. To upgrade to the new transform API, you should
+`@import "compass/css3/transform-v2"` or `@import "compass/css3/version-2"`. Once you have
+changed your imports, it is expected that you have migrated your code to the new version.
+Until then, you will receive a deprecation warning from each place in your code where you are
+using a deprecated mixin.
+
+There are several major changes to _how_ the transform mixins are built, to help accomodate
+3D transforms while managing the complexity of the options. The old API had few enough options
+that the main `transform` mixin listed them all as arguments. The new API for the same mixin
+expects a single string with all your transforms listed as they would be in CSS. There are also
+two new mixins to handle backwards compatability, and people who preffer long lists of arguments:
+
+1. `create-transform` - This is a full list of all the possible arguments that can be used in a
+   2 or 3D transform, including origin coordinates and so on. It's a bit overwhelming in scope,
+   and not the recommended technique.
+
+2. `simple-transform` - This mixin is compatable with the old API, and is optimized for some basic
+   2D transforms. To keep your old transforms in place, simply rename them from `transform` to 
+   `simple-transform`.
+
+For the sake of managing complexity and more closely mimicing css, origin settings have been removed 
+from all the other transform mixins. Origins should be set directly with the `transform-origin` mixin.
+
+Because we now support both 2D and 3D transforms, and these transforms overlapp while having different
+browser support lists, it became important to let you select which browsers you are targeting with each
+transform. With the 3D transforms it is clear, but the 2D transform mixins now all include a final argument
+that toggles (true/false) between the full list of 2D-supporting browsers, and the shorter list of
+3D-supporting browsers. The argument '3D-only' argument defaults to `false` (2D). You only need to worry 
+about this if you have 2D transforms that you only want applied in a 3D context.
+
+In a 3D context you have the additional issue of perspective. The `perspective` mixin can be set on a
+parent element to define the 3D stage for all it's decendants, but perspective can also be set on an
+element-by-element basis. Because the latter option happens within the transform property (and must be
+the first value in the CSS), a `perspective` argument has also been added to all the relevant 
+transform mixins.
+
+To update your generic `transform` mixins, you have two opions:
+
+1. Change the mixin name from `transform` to `simple-transform` and keep the arguments unchanged. For instance:
+
+       @include transform(1.5, 45deg, 1em, 2em, 5deg, -5deg, 100%, 0%)
+   
+   would now become:
+   
+       @include simple-transform(1.5, 45deg, 1em, 2em, 5deg, -5deg, 100%, 0%)
+
+2. Keep including the `transform` mixin, but update the arguments to be a space delimited list of transforms. 
+   You may need to split out a distinct transform-origin mixin with this approach. For instance:
+
+       @include transform(1.5, 45deg, 1em, 2em, 5deg, -5deg, 100%, 0%)
+
+   would now become:
+
+       @include transform(scale(1.5) rotate(45deg) translateX(1em) translateY(2em) skewX(5deg) skewY(-5deg))
+       @include transform-origin(100%, 0%)
+
+To upgrade your transform partials (`scale`, `rotate`, `translate`, `skew` and related mixins) you only have one option.
+You need to strip any transform-origin arguments into their own mixin, as above.
+
+The full set of mixins is now as follows:
+
+* `transform-origin` - ( _[ origin-x, origin-y, origin-z, 3D-only ]_ )
+  * `transform-origin2d` - a shortcut for 2D origins with only x and y arguments, automatically targets 2D browsers
+  * `transform-origin3d` - a shortcut for 3D origins with x, y and z arguments, automatically targets 3D browsers
+  * `apply-origin` - ( origin _[, 3D-only ]_ ) uses a single, space-delimited argument for the coordinates
+
+* `transform` - ( transforms _[, 3D-only ]_ )
+  * `transform2d`, `transform3d` - shortcuts that automatically target the 2D or 3D browser lists
+  * `simple-transform`, `create-transform` - longform mixins that take 1 argument per transform option
+
+* `perspective` - ( perspective )
+  * `perspective-origin` - the 'viewer location' set as coordinates
+
+* `transform-style` - ( style )
+  - 'flat' or 'preserves-3d'
+
+* `backface-visibility` - ( _[ visibility ]_ )
+  - 'visible' or 'hidden'
+
+* `scale` - ( _[ scale-x, scale-y, perspective, 3D-only ]_ )
+  * `scaleX`, `scaleY` - shortcuts for the basic 2D scaling
+  * `scaleZ`, `scale3d` - shortcuts for the 3D options
+
+* `rotate` - ( _[ rotation, perspective, 3D-only ]_ )
+  * `rotateX`, `rotateY` - shortcuts for 3D rotations on the x and y axis
+  * `rotate3d` - takes three 'vector' arguments that create the axis, and a fourth argument for the angle of rotation
+
+* `translate` - ( _[ translate-x, translate-y, perspective, 3D-only ]_ )
+  * `translateX`, `translateY` - shortcuts for the basic 2D translations
+  * `translateZ`, `translate3d` - shortcuts for the 3D options
+
+* `skew` - ( _[ skew-x, skew-y, 3D-only ]_ )
+  * `skewX`, `skewY` - shortcuts for skewing along a single axis
+
+Many of the arguments are optional because of default settings that you can override in your code.
+Here is a full list of the defaults:
+
+    // Transform Origin
+    $default-originx    : 50%               !default; 
+    $default-originy    : 50%               !default;
+    $default-originz    : 50%               !default;
+
+    // Scale
+    $default-scalex     : 1.25              !default;
+    $default-scaley     : $default-scalex   !default;
+    $default-scalez     : $default-scalex   !default;
+
+    // Rotate
+    $default-rotate     : 45deg             !default;
+
+    // Rotate3d
+    $default-vectorx    : 1                 !default;
+    $default-vectory    : 1                 !default;
+    $default-vectorz    : 1                 !default;
+
+    // Translate
+    $default-transx     : 1em               !default;
+    $default-transy     : $default-transx   !default;
+    $default-transz     : $default-transx   !default;
+
+    // Skew
+    $default-skewx      : 5deg              !default;
+    $default-skewy      : 5deg              !default;
+
+Transforms can be quite complex and difficult to understand properly, but there are many good blog
+posts on the topic if you need help. Enjoy!
+
--- a/doc-src/layouts/homepage.haml
+++ b/doc-src/layouts/homepage.haml
@ -0,0 +1,15 @@
+!!! Strict
+%html
+  %head
+    %title
+      #{@item[:title]} - Compass
+    %meta{ :content => "text/html; charset=utf-8", "http-equiv" => "Content-Type" }
+    - if @item[:meta_description]
+      %meta{:name => "description", :content => @item[:meta_description]}
+    %link(rel="shortcut icon" type="image/png" href="/docs/images/compass_icon.png")
+    %link{ :href => "/docs/stylesheets/legacy/main.css", :rel => "stylesheet", :type => "text/css", :media => "screen" }
+    %script{:src => "/docs/javascripts/jquery-1.3.2.min.js", :type => "text/javascript"}
+  %body{body_attributes(@item)}
+    = yield
+    %script(src="/docs/javascripts/fixups.js" deferred)
+    = render "partials/analytics"
--- a/doc-src/layouts/partials/sidebar/item.haml
+++ b/doc-src/layouts/partials/sidebar/item.haml
@ -1,2 +1,4 @@
-%li{:class => ("selected" if @selected)}
-  %a{:href => default_path(@current_item), :class => ("selected" if @selected)}= @crumb
+- classes = [("selected" if @selected), ("deprecated" if @current_item[:deprecated])].compact.join(" ")
+%li{:class => classes}
+  %a{:href => default_path(@current_item), :class => classes}
+    %span= @crumb
--- a/doc-src/lib/data_sources/nanoc_monkey_patches.rb
+++ b/doc-src/lib/data_sources/nanoc_monkey_patches.rb
@ -1,12 +1,12 @@
 class Nanoc3::Site
  def cached(key)
-    if cache.has_key?(key)
-      cache[key]
+    if cached_stuff.has_key?(key)
+      cached_stuff[key]
    else
-      cache[key]= yield
+      cached_stuff[key]= yield
    end
  end
-  def cache
-    @cache ||= {}
+  def cached_stuff
+    @cached_stuff ||= {}
  end
 end
--- a/doc-src/lib/stylesheets/sass_extensions.rb
+++ b/doc-src/lib/stylesheets/sass_extensions.rb
@ -61,8 +61,12 @@ module Sass
      attr_accessor :imported_filename unless method_defined? :imported_filename
    end
    class CommentNode < Node
+      unless defined?(PRE_COMMENT)
        PRE_COMMENT = %r{(^ */*\**(\s*\|)?( |$))}
+      end
+      unless defined?(POST_COMMENT)
        POST_COMMENT = %r{ *\*/$}
+      end
      def self.clean(docstring)
        docstring.gsub(/@doc off(.*?)@doc on/m, '')
      end
--- a/frameworks/compass/stylesheets/compass/_css3.scss
+++ b/frameworks/compass/stylesheets/compass/_css3.scss
@ -1,15 +1 @@
-@import "css3/border-radius";
-@import "css3/inline-block";
-@import "css3/opacity";
-@import "css3/box-shadow";
-@import "css3/text-shadow";
-@import "css3/columns";
-@import "css3/box-sizing";
-@import "css3/box";
-@import "css3/gradient";
-@import "css3/background-clip";
-@import "css3/background-origin";
-@import "css3/background-size";
-@import "css3/font-face";
-@import "css3/transform";
-@import "css3/transition";
+@import "css3/version-1";
--- a/frameworks/compass/stylesheets/compass/_support.scss
+++ b/frameworks/compass/stylesheets/compass/_support.scss
@ -23,3 +23,5 @@ $experimental-support-for-opera     : true !default;
 $experimental-support-for-microsoft : true !default;
 // Support for khtml in experimental css3 properties.
 $experimental-support-for-khtml     : true !default;
+// Support for svg in experimental css3 properties.
+$experimental-support-for-svg     : false !default;
--- a/frameworks/compass/stylesheets/compass/css3/_box-shadow-v2.scss
+++ b/frameworks/compass/stylesheets/compass/css3/_box-shadow-v2.scss
@ -0,0 +1,98 @@
+// @doc off
+// These defaults make the arguments optional for this mixin
+// If you like, set different defaults before importing.
+// @doc on
+
+@import "shared";
+
+
+// The default color for box shadows
+$default-box-shadow-color: #333333 !default;
+
+// The default horizontal offset. Positive is to the right.
+$default-box-shadow-h-offset: 0px !default;
+
+// The default vertical offset. Positive is down.
+$default-box-shadow-v-offset: 0px !default;
+
+// The default blur length.
+$default-box-shadow-blur: 5px !default;
+
+// The default spread length.
+$default-box-shadow-spread : false !default;
+
+// The default shadow instet: inset or false (for standard shadow).
+$default-box-shadow-inset : false !default;
+
+// Provides cross-browser CSS box shadows for Webkit, Gecko, and CSS3.
+// Arguments are color, horizontal offset, vertical offset, blur length, spread length, and inset.
+@mixin single-box-shadow(
+  $color  : $default-box-shadow-color,
+  $hoff   : $default-box-shadow-h-offset,
+  $voff   : $default-box-shadow-v-offset,
+  $blur   : $default-box-shadow-blur,
+  $spread : $default-box-shadow-spread,
+  $inset  : $default-box-shadow-inset
+) {
+  @if not ($inset == true or $inset == false or $inset == inset) {
+    @warn "$inset expected to be true or the inset keyword. Got #{$inset} instead. Using: inset";
+  }
+
+  @if $color == none {
+    @include multiple-box-shadows(none);
+  } @else {
+    $full   : $hoff $voff;
+    @if $blur   { $full: $full $blur;   }
+    @if $spread { $full: $full $spread; }
+    @if $color  { $full: $full $color;  }
+    @if $inset  { $full: inset $full;   }
+    @include multiple-box-shadows($full);
+  }
+}
+
+// Provides cross-browser box shadows when one or more box shadows are needed.
+@mixin multiple-box-shadows(
+  $shadow-1 : default,
+  $shadow-2 : false,
+  $shadow-3 : false,
+  $shadow-4 : false,
+  $shadow-5 : false,
+  $shadow-6 : false,
+  $shadow-7 : false,
+  $shadow-8 : false,
+  $shadow-9 : false,
+  $shadow-10: false
+) {
+  
+  @if not ($default-box-shadow-inset == true or $default-box-shadow-inset == false or $default-box-shadow-inset == inset) {
+    @warn "$default-box-shadow-inset expected to be true or the inset keyword. Got #{$default-box-shadow-inset} instead. Using: inset";
+  }
+  
+  @if $shadow-1 == default {
+    $shadow-1 : -compass-space-list(compact(if($default-box-shadow-inset, inset), $default-box-shadow-h-offset, $default-box-shadow-v-offset, $default-box-shadow-blur, $default-box-shadow-spread, $default-box-shadow-color));
+  }
+  
+  $shadow : compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10);
+  @include experimental(box-shadow, $shadow,
+    -moz, -webkit, -o, not -ms, not -khtml, official
+  );
+}
+
+@mixin box-shadow(
+  $shadow-1 : default,
+  $shadow-2 : false,
+  $shadow-3 : false,
+  $shadow-4 : false,
+  $shadow-5 : false,
+  $shadow-6 : false,
+  $shadow-7 : false,
+  $shadow-8 : false,
+  $shadow-9 : false,
+  $shadow-10: false
+) {
+  @include multiple-box-shadows(
+    $shadow-1, $shadow-2, $shadow-3,
+    $shadow-4, $shadow-5, $shadow-6,
+    $shadow-7, $shadow-8, $shadow-9, $shadow-10
+  );
+}
--- a/frameworks/compass/stylesheets/compass/css3/_box-shadow.scss
+++ b/frameworks/compass/stylesheets/compass/css3/_box-shadow.scss
@ -1,31 +1,8 @@
-// @doc off
-// These defaults make the arguments optional for this mixin
-// If you like, set different defaults before importing.
-// @doc on
-
-@import "shared";
-
-// The default color for box shadows
-$default-box-shadow-color: #333333 !default;
-
-// The default horizontal offset. Positive is to the right.
-$default-box-shadow-h-offset: 1px !default;
-
-// The default vertical offset. Positive is down.
-$default-box-shadow-v-offset: 1px !default;
-
-// The default blur length.
-$default-box-shadow-blur: 5px !default;
-
-// The default spread length.
-$default-box-shadow-spread : false !default;
-
-// The default shadow instet: inset or false (for standard shadow).
-$default-box-shadow-inset : false !default;
-
-// Provides cross-browser CSS box shadows for Webkit, Gecko, and CSS3.
-// Arguments are color, horizontal offset, vertical offset, blur length, spread length, and inset.
+@import "box-shadow-v2";

+// This mixin is deprecated.
+// Use the box-shadow mixin from compass/css3/box-shadow-v2 instead.
+// @deprecated
@mixin box-shadow(
  $color  : $default-box-shadow-color, 
  $hoff   : $default-box-shadow-h-offset, 
@ -34,20 +11,7 @@ $default-box-shadow-inset : false !default;
  $spread : $default-box-shadow-spread, 
  $inset  : $default-box-shadow-inset
 ) {
-  $full   : $color $hoff $voff $blur $spread;
-  @if $inset {
-    @if not ($inset == true or $inset == inset) {
-      @warn "$inset expected to be true or the inset keyword. Got #{$inset} instead. The box shadow will be inset."
-    }
-    $full: $full inset;
-  }
-  @if $color == none {
-    @include experimental(box-shadow, none,
-      -moz, -webkit, -o, not -ms, not -khtml, official
-    );
-  } @else {  
-    @include experimental(box-shadow, $full,
-      -moz, -webkit, -o, not -ms, not -khtml, official
-    );
-  }
+  @warn "This version of the box-shadow mixin has been deprecated. Please read: http://compass-style.org/docs/upgrading/css3-v2/#box-shadow for details.";
+  @include single-box-shadow($color, $hoff, $voff, $blur, $spread, $inset);
 }
+
--- a/frameworks/compass/stylesheets/compass/css3/_columns.scss
+++ b/frameworks/compass/stylesheets/compass/css3/_columns.scss
@ -1,55 +1,60 @@
@import "shared";

 // Specify the number of columns
-@mixin column-count($n) {
-  @include experimental(column-count, $n,
+@mixin column-count($count) {
+  @include experimental(column-count, $count,
    -moz, -webkit, -o, not -ms, not -khtml, official
  );
 }

 // Specify the gap between columns e.g. `20px`
-@mixin column-gap($u) {
-  @include experimental(column-gap, $u,
+@mixin column-gap($width) {
+  @include experimental(column-gap, $width,
    -moz, -webkit, -o, not -ms, not -khtml, official
  );
 }

 // Specify the width of columns e.g. `100px`
-@mixin column-width($u) {
-  @include experimental(column-width, $u,
+@mixin column-width($width) {
+  @include experimental(column-width, $width,
    -moz, -webkit, -o, not -ms, not -khtml, official
  );
 }

 // Specify the width of the rule between columns e.g. `1px`
-@mixin column-rule-width($w) {
-  @include experimental(rule-width, $w,
+@mixin column-rule-width($width) {
+  @include experimental(rule-width, $width,
    -moz, -webkit, -o, not -ms, not -khtml, official
  );
 }

 // Specify the style of the rule between columns e.g. `dotted`.
 // This works like border-style.
-@mixin column-rule-style($s) {
-  @include experimental(rule-style, unquote($s),
+@mixin column-rule-style($style) {
+  @include experimental(rule-style, unquote($style),
    -moz, -webkit, -o, not -ms, not -khtml, official
  );
 }

-// Specify the style of the rule between columns e.g. `dotted`.
+// Specify the color of the rule between columns e.g. `blue`.
 // This works like border-color.
-
-@mixin column-rule-color($c) {
-  @include experimental(rule-color, unquote($s),
+@mixin column-rule-color($color) {
+  @include experimental(rule-color, $color,
    -moz, -webkit, -o, not -ms, not -khtml, official
  );
 }

-// Mixin encompassing all column rule rules
+// Mixin encompassing all column rule properties
 // For example:
-//     +column-rule(1px, solid, #c00)
-@mixin column-rule($w, $s: solid, $c: black) {
-  @include experimental(column-rule, $w $s $c,
+//
+//     @include column-rule(1px, solid, #c00)
+//
+// Or the values can be space separated:
+//
+//     @include column-rule(1px solid #c00)
+@mixin column-rule($width, $style: false, $color: false) {
+  $full : -compass-space-list(compact($width, $style, $color));
+  @include experimental(column-rule, $full,
    -moz, -webkit, -o, not -ms, not -khtml, official
  );
 }
--- a/frameworks/compass/stylesheets/compass/css3/_gradient.scss
+++ b/frameworks/compass/stylesheets/compass/css3/_gradient.scss
@ -1,82 +1,106 @@
-@import "shared";
+@import "compass/utilities/general/hacks";
+@import "images";

-// This yields a linear gradient spanning from top to bottom
+// The linear gradient mixin works best across browsers if you use percentage-based color stops.
 //
+// Examples:
+//
+//     // This yields a linear gradient spanning from top to bottom
 //     +linear-gradient(color-stops(white, black))
 //
-// This yields a linear gradient spanning from bottom to top
-//
+//     // This yields a linear gradient spanning from bottom to top
 //     +linear-gradient(color-stops(white, black), bottom)
 //
-// This yields a linear gradient spanning from left to right
-//
+//     // This yields a linear gradient spanning from left to right
 //     +linear-gradient(color-stops(white, black), left)
 //
-// This yields a linear gradient starting at white passing
-// thru blue at 33% down and then to black
-//
+//     // This yields a linear gradient starting at white passing
+//     // thru blue at 33% down and then to black
 //     +linear-gradient(color-stops(white, blue 33%, black))
 //
-// This yields a linear gradient starting at white passing
-// thru blue at 33% down and then to black at 67% until the end
-//
+//     // This yields a linear gradient starting at white passing
+//     // thru blue at 33% down and then to black at 67% until the end
 //     +linear-gradient(color-stops(white, blue 33%, black 67%))
 //
-// This yields a linear gradient on top of a background image
-//
+//     // This yields a background image on top of the gradient; requires an image
+//     // with an alpha-layer.
 //     +linear-gradient(color_stops(white,black), top, image-url('noise.png'))
+//
 // Browsers Supported:
 //
 // - Chrome
 // - Safari
 // - Firefox 3.6
+// - Opera

-@mixin linear-gradient($color-stops, $start: top, $image: false) {
-  // Firefox's gradient api is nice.
-  // Webkit's gradient api sucks -- hence these backflips:
-  $background: unquote("");
-  @if $image { $background : $image + unquote(", "); }
-  $start: unquote($start);
-  $end: opposite-position($start);
-  @if $experimental-support-for-webkit {
-    background-image: #{$background}-webkit-gradient(linear, grad-point($start), grad-point($end), grad-color-stops($color-stops));
+@mixin linear-gradient($color-stops, $start: false, $image: false) {
+  @if $image {
+    @if $start {
+      @warn "The linear-gradient mixin is deprecated. Instead use: @include background-image(#{$image}, linear-gradient(#{$start}, #{$color-stops}))";
+    } @else {
+      @warn "The linear-gradient mixin is deprecated. Instead use: @include background-image(#{$image}, linear-gradient(#{$color-stops}))";
    }
-  @if $experimental-support-for-mozilla {
-    background-image: #{$background}-moz-linear-gradient($start, $color-stops);
+  } @else {
+    @if $start {
+      @warn "The linear-gradient mixin is deprecated. Instead use: @include background-image(linear-gradient(#{$start}, #{$color-stops}))";
+    } @else {
+      @warn "The linear-gradient mixin is deprecated. Instead use: @include background-image(linear-gradient(#{$color-stops}))";
    }
-  background-image: #{$background}linear-gradient($start, $color-stops);
+  }
+  @if not $start { $start: top; }
+  @include background-image($image, linear-gradient($start, $color-stops));
 }

-// Due to limitation's of webkit, the radial gradient mixin works best if you use
+// Emit a IE-Specific filters that renders a simple linear gradient.
+// For use in IE 6 - 8. Best practice would have you apply this via a
+// conditional IE stylesheet, but if you must, you should place this before
+// any background-image properties that you have specified.
+@mixin filter-gradient($start-color, $end-color, $orientation: vertical) {
+  @include has-layout;
+  $gradient-type: if($orientation == vertical, 0, 1);
+  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=#{$gradient-type}, startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}');
+  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=#{$gradient-type}, startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}')";
+}
+
+// Because of webkit's limitations, the radial gradient mixin works best if you use
 // pixel-based color stops.
 //
 // Examples:
 //
 //     // Defaults to a centered, 100px radius gradient
 //     +radial-gradient(color-stops(#c00, #00c))
+//
 //     // 100px radius gradient in the top left corner
 //     +radial-gradient(color-stops(#c00, #00c), top left)
+//
 //     // Three colors, ending at 50px and passing thru #fff at 25px
 //     +radial-gradient(color-stops(#c00, #fff, #00c 50px))
-//     // a background image on top of the gradient
-//     // Requires an image with an alpha-layer.
+//
+//     // A background image on top of a 100px radius gradient; requires an image
+//     // with an alpha-layer.
 //     +radial-gradient(color_stops(#c00, #fff), top left, image-url("noise.png")))
+//
 // Browsers Supported:
 //
 // - Chrome
 // - Safari
 // - Firefox 3.6
+// - Opera

-@mixin radial-gradient($color-stops, $center-position: center center, $image: false) {
-  $center-position: unquote($center-position);
-  $end-pos: grad-end-position($color-stops, true);
-  $background: unquote("");
-  @if $image { $background: $image + unquote(", "); }
-  @if $experimental-support-for-webkit {
-    background-image: #{$background}-webkit-gradient(radial, grad-point($center-position), 0, grad-point($center-position), $end-pos, grad-color-stops($color-stops));
+@mixin radial-gradient($color-stops, $center-position: false, $image: false) {
+  @if $image {
+    @if $center-position {
+      @warn "The radial-gradient mixin is deprecated. Instead use: @include background-image(#{$image}, radial-gradient(#{$center-position}, #{$color-stops}))";
+    } @else {
+      @warn "The radial-gradient mixin is deprecated. Instead use: @include background-image(#{$image}, radial-gradient(#{$color-stops}))";
    }
-  @if $experimental-support-for-mozilla {
-    background-image: #{$background}-moz-radial-gradient($center-position, circle, $color-stops);
+  } @else {
+    @if $center-position {
+      @warn "The radial-gradient mixin is deprecated. Instead use: @include background-image(radial-gradient(#{$center-position}, #{$color-stops}))";
+    } @else {
+      @warn "The radial-gradient mixin is deprecated. Instead use: @include background-image(radial-gradient(#{$color-stops}))";
    }
-  background-image: #{$background}radial-gradient($center-position, circle, $color-stops);
+  }
+  @if not $center-position { $center-position: center center; }
+  @include background-image($image, radial-gradient($center-position, $color-stops));
 }
--- a/frameworks/compass/stylesheets/compass/css3/_images.scss
+++ b/frameworks/compass/stylesheets/compass/css3/_images.scss
@ -0,0 +1,52 @@
+@import "shared";
+
+
+@mixin background-image(
+  $image-1,
+  $image-2: false,
+  $image-3: false,
+  $image-4: false,
+  $image-5: false,
+  $image-6: false,
+  $image-7: false,
+  $image-8: false,
+  $image-9: false,
+  $image-10: false
+) {
+  $images: compact($image-1, $image-2, $image-3, $image-4, $image-5, $image-6, $image-7, $image-8, $image-9, $image-10);
+
+  @if $experimental-support-for-svg     and prefixed(-svg,    $images) { background-image:    -svg($images); }
+  @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); }
+                                                                         background-image:         $images;
+}
+
+@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-svg     {         border-image:    -svg(-compass-list($value)); }
+                                                  border-image:                       $value;
+}
+
+@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-svg     and prefixed(-svg,    $image) { list-style-image:    -svg($image); }
+                                                                        list-style-image:         $image ;
+}
+
+@mixin list-style($value) {
+  $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-svg     and prefixed(-svg,    $value) { list-style-image:    -svg($value); }
+                                                                        list-style-image:         $value ;
+}
+
+@mixin content($value) {
+  $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-svg     and prefixed(-svg,    $value) { content:    -svg($value); }
+                                                                        content:         $value ;
+}
--- a/frameworks/compass/stylesheets/compass/css3/_text-shadow-v2.scss
+++ b/frameworks/compass/stylesheets/compass/css3/_text-shadow-v2.scss
@ -0,0 +1,72 @@
+@import "shared";
+
+// These defaults make the arguments optional for this mixin
+// If you like, set different defaults in your project
+
+$default-text-shadow-color:    #aaa !default;
+$default-text-shadow-h-offset: 0px  !default;
+$default-text-shadow-v-offset: 0px  !default;
+$default-text-shadow-blur:     1px  !default;
+
+// Provides CSS text shadows.
+// Arguments are color, horizontal offset, vertical offset, and blur
+@mixin single-text-shadow(
+  $color: $default-text-shadow-color,
+  $hoff: $default-text-shadow-h-offset,
+  $voff: $default-text-shadow-v-offset,
+  $blur: $default-text-shadow-blur
+) {
+  // XXX I'm surprised we don't need experimental support for this property.
+  @if $color == none {
+    text-shadow: none;
+  } @else {
+    text-shadow: $color $hoff $voff $blur;    
+  }
+}
+
+// Provides cross-browser text shadows when one or more shadows are needed.
+@mixin multiple-text-shadows(
+  $shadow-1 : $default-text-shadow-color $default-text-shadow-h-offset $default-text-shadow-v-offset $default-text-shadow-blur,
+  $shadow-2 : false,
+  $shadow-3 : false,
+  $shadow-4 : false,
+  $shadow-5 : false,
+  $shadow-6 : false,
+  $shadow-7 : false,
+  $shadow-8 : false,
+  $shadow-9 : false,
+  $shadow-10: false
+) {
+  // Ugh. Sass needs variable argument support.
+  $shadow : $shadow-1;
+  @if $shadow-2  { $shadow: $shadow, $shadow-2;  }
+  @if $shadow-3  { $shadow: $shadow, $shadow-3;  }
+  @if $shadow-4  { $shadow: $shadow, $shadow-4;  }
+  @if $shadow-5  { $shadow: $shadow, $shadow-5;  }
+  @if $shadow-6  { $shadow: $shadow, $shadow-6;  }
+  @if $shadow-7  { $shadow: $shadow, $shadow-7;  }
+  @if $shadow-8  { $shadow: $shadow, $shadow-8;  }
+  @if $shadow-9  { $shadow: $shadow, $shadow-9;  }
+  @if $shadow-10 { $shadow: $shadow, $shadow-10; }
+  // Anticlimactic, we know.
+  text-shadow: $shadow
+}
+
+@mixin text-shadow(
+  $shadow-1 : $default-text-shadow-color $default-text-shadow-h-offset $default-text-shadow-v-offset $default-text-shadow-blur,
+  $shadow-2 : false,
+  $shadow-3 : false,
+  $shadow-4 : false,
+  $shadow-5 : false,
+  $shadow-6 : false,
+  $shadow-7 : false,
+  $shadow-8 : false,
+  $shadow-9 : false,
+  $shadow-10: false
+) {
+  @include multiple-text-shadows(
+    $shadow-1, $shadow-2, $shadow-3,
+    $shadow-4, $shadow-5, $shadow-6,
+    $shadow-7, $shadow-8, $shadow-9, $shadow-10
+  );
+}
--- a/frameworks/compass/stylesheets/compass/css3/_transform-v2.scss
+++ b/frameworks/compass/stylesheets/compass/css3/_transform-v2.scss
@ -0,0 +1,546 @@
+@import "shared";
+
+// Note ----------------------------------------------------------------------
+// Safari is the only browser that currently supports 3D transforms.
+// Because of that it can be important to control whether a given 2D transform 
+// uses the full range of experimental browser prefixes, or only the 3D list.
+// To make that easy, all 2D transforms include an browser-targeting toggle ($only3d)
+// to switch between the two support lists. The toggle defaults to 'false' (2D), 
+// and also accepts 'true' (3D). Currently the lists are as follows:
+// 2D: Mozilla, Webkit, Opera, Official
+// 3D: Webkit, Official **(Only Safari Supports 3D perspective)**
+
+// Available Transforms ------------------------------------------------------
+// - Scale (2d and 3d)
+// - Rotate (2d and 3d)
+// - Translate (2d and 3d)
+// - Skew (2d only)
+
+// Transform Parameters ------------------------------------------------------
+// - Transform Origin (2d and 3d)
+// - Perspective (3d)
+// - Perspective Origin (3d)
+// - Transform Style (3d)
+// - Backface Visibility (3d)
+
+// Mixins --------------------------------------------------------------------
+// transform-origin
+//  - shortcuts:  transform-origin2d, transform-origin3d
+//  - helpers:    apply-origin
+// transform
+//  - shortcuts:  transform2d, transform3d
+//  - helpers:    simple-transform, create-transform
+// perspective
+//  - helpers:    perspective-origin
+// transform-style
+// backface-visibility
+// scale
+//  - shortcuts:  scaleX, scaleY, scaleZ, scale3d
+// rotate
+//  - shortcuts:  rotateX, rotateY, rotate3d
+// translate
+//  - shortcuts:  translateX, translateY, translateZ, translate3d
+// skew
+//  - shortcuts:  skewX, skewY
+
+// Defaults ------------------------------------------------------------------
+
+// Transform Origin
+$default-originx    : 50%               !default; 
+$default-originy    : 50%               !default;
+$default-originz    : 50%               !default;
+
+// Scale
+$default-scalex     : 1.25              !default;
+$default-scaley     : $default-scalex   !default;
+$default-scalez     : $default-scalex   !default;
+
+// Rotate
+$default-rotate     : 45deg             !default;
+
+// Rotate3d
+$default-vectorx    : 1                 !default;
+$default-vectory    : 1                 !default;
+$default-vectorz    : 1                 !default;
+
+// Translate
+$default-transx     : 1em               !default;
+$default-transy     : $default-transx   !default;
+$default-transz     : $default-transx   !default;
+
+// Skew
+$default-skewx      : 5deg              !default;
+$default-skewy      : 5deg              !default;
+
+
+// Transform-origin ----------------------------------------------------------
+
+// Transform-origin sent as a complete string
+// @include apply-origin( origin [, 3D-only ] )
+// where 'origin' is a string containing 1-3 (x/y/z) coordinates
+// in percentages, absolute (px, cm, in, em etc..) or relative (left, top, right, bottom, center) units
+@mixin apply-origin(
+  $origin, 
+  $only3d: false
+) {
+  @if $only3d { 
+    @include experimental(transform-origin, $origin, 
+      not -moz, -webkit, not -o, not -ms, not -khtml, official
+    );
+  } @else {
+    @include experimental(transform-origin, $origin, 
+      -moz, -webkit, -o, not -ms, not -khtml, official
+    );
+  }
+}
+
+// Transform-origin sent as individual arguments
+// @include transform-origin( [ origin-x, origin-y, origin-z, 3D-only ] )
+// where the 3 'origin-' arguments represent x/y/z coordinates
+// ** setting z coordinates triggers 3D support list, leave false for 2D support
+@mixin transform-origin(
+  $originx: $default-originx, 
+  $originy: $default-originy,
+  $originz: false,
+  $only3d: $originz
+) {
+  $origin: unquote('');
+  @if $originx or $originy or $originz {
+    @if $originx { $origin: $originx; } @else { $origin: 50%; }
+    @if $originy { $origin: $origin $originy; } @else { @if $originz { $origin: $origin 50%; }}
+    @if $originz { $origin: $origin $originz; $only3d: true; }
+    @include apply-origin($origin, $only3d);
+  }
+}
+
+// Shortcut to target all browsers with 2D transform support
+// @include transform-origin( [ origin-x, origin-y ] )
+@mixin transform-origin2d(
+  $originx: $default-originx, 
+  $originy: $default-originy
+) {
+  @include transform-origin($originx, $originy);
+}
+
+// Shortcut to target all browsers with 3D transform support
+// @include transform-origin( [ origin-x, origin-y, origin-z ] )
+@mixin transform-origin3d(
+  $originx: $default-originx, 
+  $originy: $default-originy,
+  $originz: $default-originz
+) {
+  @include transform-origin($originx, $originy, $originz, true);
+}
+
+
+// Transform -----------------------------------------------------------------
+
+// Transform sent as a complete string
+// @include transform( transforms [, 3D-only ] )
+// where 'transforms' is a string of all the transforms to be applied
+@mixin transform(
+  $transform, 
+  $only3d: false
+) {
+  @if $only3d { 
+    @include experimental(transform, $transform, 
+      not -moz, -webkit, not -o, not -ms, not -khtml, official
+    );
+  } @else {
+    @include experimental(transform, $transform, 
+      -moz, -webkit, -o, not -ms, not -khtml, official
+    );
+  }
+}
+
+// Shortcut to target all browsers with 2D transform support
+@mixin transform2d($trans) {
+  @include transform($trans, false);
+}
+
+// Shortcut to target only browsers with 3D transform support
+@mixin transform3d($trans) {
+  @include transform($trans, true);
+}
+
+
+// 3D Parameters -------------------------------------------------------------
+
+// Set the perspective of 3D transforms on the children of an element
+// @include perspective( perspective )
+// where 'perspective' is a uniless number representing the depth of the z-axis
+// the higher the perspective, the more exagerated the foreshortening. 
+// values from 500 to 1000 are more-or-less "normal" - a good starting-point.
+@mixin perspective($p) {
+  @include experimental(perspective, $p, 
+    not -moz, -webkit, not -o, not -ms, not -khtml, official
+  );
+}
+
+// Set the origin position for the perspective
+// @include perspective-origin( [ origin-x, origin-y ] )
+// where the two arguments represent x/y coordinates
+@mixin perspective-origin(
+  $originx: 50%, 
+  $originy: false
+) {
+  $po: $originx;
+  @if $originy { $po: $po $originy; }
+  @include experimental(perspective-origin, $po, 
+    not -moz, -webkit, not -o, not -ms, not -khtml, official
+  );
+}
+
+// Determine whether a 3D objects children also live in the given 3D space
+// @include transform-style( [ style ] )
+// where 'style' can be either 'flat' or 'preserves-3d'
+// browsers default to flat, mixin defaults to preserves-3d
+@mixin transform-style($ts: unquote("preserves-3d")) {
+  @include experimental(perspective-origin, $ts, 
+    not -moz, -webkit, not -o, not -ms, not -khtml, official
+  );
+}
+
+// Determine the visibility of an element when it's back is turned
+// @include backface-visibility( [ visibility ] )
+// where 'visibility can be either 'visible' or 'hidden'
+// browsers default to visible, mixin defaults to hidden
+@mixin backface-visibility($bv: unquote("hidden")) {
+  @include experimental(backface-visibility, $bv, 
+    not -moz, -webkit, not -o, not -ms, not -khtml, official
+  );  
+}
+
+
+// Transform Partials --------------------------------------------------------
+// These work well on their own, but they don't add to each other, they override.
+// Use along with transform parameter mixins to adjust origin, perspective and style
+// ---------------------------------------------------------------------------
+
+
+// Scale ---------------------------------------------------------------------
+
+// Scale an object along the x and y axis
+// @include scale( [ scale-x, scale-y, perspective, 3D-only ] )
+// where the 'scale-' arguments are unitless multipliers of the x and y dimensions
+// and perspective, which works the same as the stand-alone perspective property/mixin 
+// but applies to the individual element (multiplied with any parent perspective)
+@mixin scale(
+  $scalex: $default-scalex, 
+  $scaley: $scalex, 
+  $perspective: false,
+  $only3d: false
+) {
+  $trans: scale($scalex, $scaley);
+  @if $perspective { $trans: perspective($perspective) $trans; }
+  @include transform($trans, $only3d);
+}
+
+// Scale an object along the x axis
+// @include scaleX( [ scale-x, perspective, 3D-only ] )
+@mixin scaleX(
+  $scale: $default-scalex, 
+  $perspective: false,
+  $only3d: false
+) {
+  $trans: scaleX($scale);
+  @if $perspective { $trans: perspective($perspective) $trans; }
+  @include transform($trans, $only3d);
+}
+
+// Scale an object along the y axis
+// @include scaleY( [ scale-y, perspective, 3D-only ] )
+@mixin scaleY(
+  $scale: $default-scaley, 
+  $perspective: false,
+  $only3d: false
+) {
+  $trans: scaleY($scale);
+  @if $perspective { $trans: perspective($perspective) $trans; }
+  @include transform($trans, $only3d);
+}
+
+// Scale an object along the z axis
+// @include scaleZ( [ scale-z, perspective ] )
+@mixin scaleZ(
+  $scale: $default-scalez, 
+  $perspective: false
+) {
+  $trans: scaleZ($scale);
+  @if $perspective { $trans: perspective($perspective) $trans; }
+  @include transform3d($trans);
+}
+
+// Scale and object along all three axis
+// @include scale3d( [ scale-x, scale-y, scale-z, perspective ] )
+@mixin scale3d(
+  $scalex: $default-scalex, 
+  $scaley: $default-scaley, 
+  $scalez: $default-scalez, 
+  $perspective: false
+) {
+  $trans: scale3d($scalex, $scaley, $scalez);
+  @if $perspective { $trans: perspective($perspective) $trans; }
+  @include transform3d($trans);
+}
+
+
+// Rotate --------------------------------------------------------------------
+
+// Rotate an object around the z axis  (2D)
+// @include rotate( [ rotation, perspective, 3D-only ] )
+// where 'rotation' is an angle set in degrees (deg) or radian (rad) units
+@mixin rotate(
+  $rotate: $default-rotate, 
+  $perspective: false,
+  $only3d: false
+) {
+  $trans: rotate($rotate);
+  @if $perspective { $trans: perspective($perspective) $trans; }
+  @include transform($trans, $only3d);
+}
+
+// A longcut for 'rotate' in case you forget that 'z' is implied
+@mixin rotateZ(
+  $rotate: $default-rotate, 
+  $perspective: false,
+  $only3d: false
+) {
+  @include rotate($rotate, $perspective, $only3d);
+}
+
+// Rotate an object around the x axis (3D)
+// @include rotateX( [ rotation, perspective ] )
+@mixin rotateX(
+  $rotate: $default-rotate, 
+  $perspective: false
+) {
+  $trans: rotateX($rotate);
+  @if $perspective { $trans: perspective($perspective) $trans; }
+  @include transform3d($trans);
+}
+
+// Rotate an object around the y axis (3D)
+// @include rotate( [ rotation, perspective ] )
+@mixin rotateY(
+  $rotate: $default-rotate, 
+  $perspective: false
+) {
+  $trans: rotateY($rotate);
+  @if $perspective { $trans: perspective($perspective) $trans; }
+  @include transform3d($trans);
+}
+
+// Rotate an object around an arbitrary axis (3D)
+// @include rotate( [ vector-x, vector-y, vector-z, rotation, perspective ] )
+// where the 'vector-' arguments accept unitless numbers
+// these numbers are not important on their own, but in relation to one another
+// creating an axis from your transform-origin, along the axis of Xx = Yy = Zz
+@mixin rotate3d(
+  $vectorx: $default-vectorx, 
+  $vectory: $default-vectory, 
+  $vectorz: $default-vectorz, 
+  $rotate: $default-rotate, 
+  $perspective: false
+) {
+  $trans: rotate3d($vectorx, $vectory, $vectorz, $rotate);
+  @if $perspective { $trans: perspective($perspective) $trans; }
+  @include transform3d($trans);
+}
+
+
+// Translate -----------------------------------------------------------------
+
+// Move an object along the x or y axis (2D)
+// @include translate( [ translate-x, translate-y, perspective, 3D-only ] )
+// where the 'translate-' arguments accept any distance in percentages or absolute (px, cm, in, em etc..) units
+@mixin translate(
+  $transx: $default-transx, 
+  $transy: $default-transy,
+  $perspective: false,
+  $only3d: false
+) {
+  $trans: translate($transx, $transy);
+  @if $perspective { $trans: perspective($perspective) $trans; }
+  @include transform($trans, $only3d);
+}
+
+// Move an object along the x axis (2D)
+// @include translate( [ translate-x, perspective, 3D-only ] )
+@mixin translateX(
+  $transx: $default-transx,
+  $perspective: false,
+  $only3d: false
+) {
+  $trans: translateX($transx);
+  @if $perspective { $trans: perspective($perspective) $trans; }
+  @include transform($trans, $only3d);
+}
+
+// Move an object along the y axis (2D)
+// @include translate( [ translate-y, perspective, 3D-only ] )
+@mixin translateY(
+  $transy: $default-transy,
+  $perspective: false,
+  $only3d: false
+) {
+  $trans: translateY($transy);
+  @if $perspective { $trans: perspective($perspective) $trans; }
+  @include transform($trans, $only3d);
+}
+
+// Move an object along the z axis (3D)
+// @include translate( [ translate-z, perspective ] )
+@mixin translateZ(
+  $transz: $default-transz,
+  $perspective: false
+) {
+  $trans: translateZ($transz);
+  @if $perspective { $trans: perspective($perspective) $trans; }
+  @include transform3d($trans);
+}
+
+// Move an object along the x, y and z axis (3D)
+// @include translate( [ translate-x, translate-y, translate-z, perspective ] )
+@mixin translate3d(
+  $transx: $default-transx, 
+  $transy: $default-transy, 
+  $transz: $default-transz,
+  $perspective: false
+) {
+  $trans: translate3d($transx, $transy, $transz);
+  @if $perspective { $trans: perspective($perspective) $trans; }
+  @include transform3d($trans);
+}
+
+
+// Skew ----------------------------------------------------------------------
+
+// Skew an element
+// @include skew( [ skew-x, skew-y, 3D-only ] )
+// where the 'skew-' arguments accept css angles in degrees (deg) or radian (rad) units
+@mixin skew(
+  $skewx: $default-skewx, 
+  $skewy: $default-skewy, 
+  $only3d: false
+) {
+  $trans: skew($skewx, $skewy);
+  @include transform($trans, $only3d);
+}
+
+// Skew an element along the x axiz
+// @include skew( [ skew-x, 3D-only ] )
+@mixin skewX(
+  $skewx: $default-skewx, 
+  $only3d: false
+) {
+  $trans: skewX($skewx);
+  @include transform($trans, $only3d);
+}
+
+// Skew an element along the y axis
+// @include skew( [ skew-y, 3D-only ] )
+@mixin skewY(
+  $skewy: $default-skewy, 
+  $only3d: false
+) {
+  $trans: skewY($skewy);
+  @include transform($trans, $only3d);
+}
+
+
+// Full transform mixins -----------------------------------------------------
+// For settings any combination of transforms as arguments
+// These are complex and not highly recommended for daily use
+// They are mainly here for backwards-compatability purposes
+// * they include origin adjustments
+// * scale takes a multiplier (unitless), rotate and skew take degrees (deg)
+// ---------------------------------------------------------------------------
+
+
+// The full list of options
+@mixin create-transform(
+  $perspective: false,
+  $scalex: false,
+  $scaley: false,
+  $scalez: false,
+  $rotatex: false,
+  $rotatey: false,
+  $rotatez: false,
+  $rotate3d: false,
+  $transx: false,
+  $transy: false,
+  $transz: false,
+  $skewx: false,
+  $skewy: false,
+  $originx: false,
+  $originy: false,
+  $originz: false,
+  $only3d: false
+) {
+  $trans: unquote("");
+  
+  // perspective
+  @if $perspective { $trans: perspective($perspective) ; }
+  
+  // scale
+  @if $scalex and $scaley {
+    @if $scalez { $trans: $trans scale3d($scalex, $scaley, $scalez); }
+    @else { $trans: $trans scale($scalex, $scaley); }
+  } @else {
+    @if $scalex { $trans: $trans scaleX($scalex); }
+    @if $scaley { $trans: $trans scaleY($scaley); }
+    @if $scalez { $trans: $trans scaleZ($scalez); }
+  }
+  
+  // rotate
+  @if $rotatex { $trans: $trans rotateX($rotatex); }
+  @if $rotatey { $trans: $trans rotateY($rotatey); }
+  @if $rotatez { $trans: $trans rotate($rotatez); }      
+  @if $rotate3d { $trans: $trans rotate3d($rotate3d); }    
+
+  // translate
+  @if $transx and $transy {
+    @if $transz { $trans: $trans translate3d($transx, $transy, $transz); }
+    @else { $trans: $trans translate($transx, $transy); }
+  } @else {
+    @if $transx { $trans: $trans translateX($transx); }
+    @if $transy { $trans: $trans translateY($transy); }
+    @if $transz { $trans: $trans translateZ($transz); }
+  }
+
+  // skew
+  @if $skewx and $skewy { $trans: $trans skew($skewx, $skewy); } 
+  @else {
+    @if $skewx { $trans: $trans skewX($skewx); }
+    @if $skewy { $trans: $trans skewY($skewy); }
+  }
+
+  // apply it!
+  @include transform($trans, $only3d);
+  @include transform-origin($originx, $originy, $originz, $only3d);
+}
+
+
+// A simplified set of options
+// backwards-compatible with the previous version of the 'transform' mixin
+@mixin simple-transform(
+  $scale: false,
+  $rotate: false,
+  $transx: false,
+  $transy: false,
+  $skewx: false,
+  $skewy: false,
+  $originx: false,
+  $originy: false
+) {
+  @include compact-transform(
+    false, 
+    $scale, $scale, false, 
+    false, false, $rotate, false,
+    $transx, $transy, false, 
+    $skewx, $skewy,
+    $originx, $originy, false,
+    false
+  );
+}
--- a/frameworks/compass/stylesheets/compass/css3/_version-1.scss
+++ b/frameworks/compass/stylesheets/compass/css3/_version-1.scss
@ -0,0 +1,16 @@
+@import "border-radius";
+@import "inline-block";
+@import "opacity";
+@import "box-shadow";
+@import "text-shadow";
+@import "columns";
+@import "box-sizing";
+@import "box";
+@import "images";
+@import "gradient";
+@import "background-clip";
+@import "background-origin";
+@import "background-size";
+@import "font-face";
+@import "transform";
+@import "transition";
--- a/frameworks/compass/stylesheets/compass/css3/_version-2.scss
+++ b/frameworks/compass/stylesheets/compass/css3/_version-2.scss
@ -0,0 +1,16 @@
+@import "border-radius";
+@import "inline-block";
+@import "opacity";
+@import "box-shadow-v2";
+@import "text-shadow-v2";
+@import "columns";
+@import "box-sizing";
+@import "box";
+@import "images";
+@import "gradient";
+@import "background-clip";
+@import "background-origin";
+@import "background-size";
+@import "font-face";
+@import "transform-v2";
+@import "transition";
--- a/frameworks/compass/stylesheets/compass/utilities/general/_hacks.scss
+++ b/frameworks/compass/stylesheets/compass/utilities/general/_hacks.scss
@ -8,14 +8,14 @@ $default-has-layout-approach: zoom !default;
 // This mixin causes an element matching the selector
 // to gain the "hasLayout" property in internet explorer.
 // More information on [hasLayout](http://reference.sitepoint.com/css/haslayout).
-@mixin has-layout($using: $default-has-layout-approach) {
+@mixin has-layout($approach: $default-has-layout-approach) {
  @if $legacy-support-for-ie {
    @if $using == zoom {
      @include has-layout-zoom;
-    } @else if $using == block {
+    } @else if $approach == block {
      @include has-layout-block;
    } @else {
-      @warn "Unknown has-layout approach: #{$using}";
+      @warn "Unknown has-layout approach: #{$approach}";
      @include has-layout-zoom;
    }
  }
--- a/lib/compass/commands/update_project.rb
+++ b/lib/compass/commands/update_project.rb
@ -47,10 +47,10 @@ module Compass

      def new_compiler_instance(additional_options = {})
        compiler_opts = Compass.sass_engine_options
-        compiler_opts.merge!(:quiet => options[:quiet],
-                             :force => options[:force],
+        compiler_opts.merge!(:force => options[:force],
                             :sass_files => explicit_sass_files,
                             :dry_run => options[:dry_run])
+        compiler_opts[:quiet] = options[:quiet] if options[:quiet]
        compiler_opts.merge!(additional_options)
        Compass::Compiler.new(working_path,
          Compass.configuration.sass_path,
--- a/lib/compass/configuration.rb
+++ b/lib/compass/configuration.rb
@ -36,7 +36,8 @@ module Compass
      :asset_cache_buster,
      :line_comments,
      :color_output,
-      :preferred_syntax
+      :preferred_syntax,
+      :disable_warnings
    ].flatten

  end
--- a/lib/compass/configuration/adapters.rb
+++ b/lib/compass/configuration/adapters.rb
@ -46,6 +46,7 @@ module Compass
        engine_opts[:line_comments] = line_comments
        engine_opts[:cache] = cache
        engine_opts[:cache_location] = cache_path
+        engine_opts[:quiet] = disable_warnings if disable_warnings
        engine_opts.merge!(sass_options || {})
      end

--- a/lib/compass/sass_extensions/functions.rb
+++ b/lib/compass/sass_extensions/functions.rb
@ -2,9 +2,9 @@ module Compass::SassExtensions::Functions
 end

 %w(
-  selectors enumerate urls display
-  inline_image image_size gradient_support
-  font_files constants lists colors trig
+  selectors enumerate urls display if
+  inline_image image_size constants gradient_support
+  font_files lists colors trig
 ).each do |func|
  require "compass/sass_extensions/functions/#{func}"
 end
@ -22,6 +22,7 @@ module Sass::Script::Functions
  include Compass::SassExtensions::Functions::Lists
  include Compass::SassExtensions::Functions::Colors
  include Compass::SassExtensions::Functions::Trig
+  include Compass::SassExtensions::Functions::If
 end

 # Wierd that this has to be re-included to pick up sub-modules. Ruby bug?
--- a/lib/compass/sass_extensions/functions/colors.rb
+++ b/lib/compass/sass_extensions/functions/colors.rb
@ -37,6 +37,15 @@ module Compass::SassExtensions::Functions::Colors
    color.with(:saturation => scale_color_value(color.saturation, amount.value))
  end

+  # returns an IE hex string for a color with an alpha channel
+  # suitable for passing to IE filters.
+  def ie_hex_str(color)
+    assert_type color, :Color
+    alpha = (color.alpha * 255).round
+    alphastr = alpha.to_s(16).rjust(2, '0')
+    Sass::Script::String.new("##{alphastr}#{color.send(:hex_str)[1..-1]}".upcase)
+  end
+
  private
  def scale_color_value(value, amount)
    if amount > 0
--- a/lib/compass/sass_extensions/functions/constants.rb
+++ b/lib/compass/sass_extensions/functions/constants.rb
@ -9,7 +9,7 @@ module Compass::SassExtensions::Functions::Constants
      when "right" then "left"
      when "center" then "center"
      else
-        raise Sass::SyntaxError, "Cannot determine the opposite of #{pos}"
+        pos
      end
    end
    Sass::Script::String.new(opposite.join(" "), position.type)
--- a/lib/compass/sass_extensions/functions/gradient_support.rb
+++ b/lib/compass/sass_extensions/functions/gradient_support.rb
@ -5,17 +5,29 @@ module Compass::SassExtensions::Functions::GradientSupport
    def initialize(*values)
      self.values = values
    end
+    def join_with
+      ", "
+    end
    def inspect
-      values.map{|v| v.inspect}.join(", ")
+      to_s
    end
    def to_s
-      inspect
+      values.map {|v| v.to_s }.join(join_with)
+    end
+  end
+
+  class SpaceList < List
+    def join_with
+      " "
    end
  end

  class ColorStop < Sass::Script::Literal
    attr_accessor :color, :stop
    def initialize(color, stop = nil)
+      unless Sass::Script::Color === color || Sass::Script::Funcall === color
+        raise Sass::SyntaxError, "Expected a color. Got: #{color}"
+      end
      self.color, self.stop = color, stop
    end
    def inspect
@ -35,9 +47,135 @@ module Compass::SassExtensions::Functions::GradientSupport
    end
  end

+  class RadialGradient < Sass::Script::Literal
+    attr_accessor :position_and_angle, :shape_and_size, :color_stops
+    def initialize(position_and_angle, shape_and_size, color_stops)
+      unless color_stops.values.size >= 2
+        raise Sass::SyntaxError, "At least two color stops are required for a radial-gradient"
+      end
+      self.position_and_angle = position_and_angle
+      self.shape_and_size = shape_and_size
+      self.color_stops = color_stops
+    end
+    def inspect
+      to_s
+    end
+    def to_s
+      s = "radial-gradient("
+      s << position_and_angle.to_s << ", " if position_and_angle
+      s << shape_and_size.to_s << ", " if shape_and_size
+      s << color_stops.to_s
+      s << ")"
+    end
+    def to_webkit
+      args = [
+        grad_point(position_and_angle || Sass::Script::String.new("center center")),
+        "0",
+        grad_point(position_and_angle || Sass::Script::String.new("center center")),
+        grad_end_position(color_stops, Sass::Script::Bool.new(true)),
+        grad_color_stops(color_stops)
+      ]
+      Sass::Script::String.new("-webkit-gradient(radial, #{args.join(', ')})")
+
+    end
+    def to_moz
+      Sass::Script::String.new("-moz-#{to_s}")
+    end
+    def to_svg
+      # XXX Add shape support if possible
+      radial_svg_gradient(color_stops, position_and_angle || Sass::Script::String.new("center center"))
+    end
+  end
+
+  class LinearGradient < Sass::Script::Literal
+    attr_accessor :color_stops, :position_and_angle
+    def initialize(position_and_angle, color_stops)
+      unless color_stops.values.size >= 2
+        raise Sass::SyntaxError, "At least two color stops are required for a linear-gradient"
+      end
+      self.position_and_angle = position_and_angle
+      self.color_stops = color_stops
+    end
+    def inspect
+      to_s
+    end
+    def to_s
+      s = "linear-gradient("
+      s << position_and_angle.to_s << ", " if position_and_angle
+      s << color_stops.to_s
+      s << ")"
+    end
+    def to_webkit
+      args = []
+      args << grad_point(position_and_angle || Sass::Script::String.new("top"))
+      args << grad_point(opposite_position(position_and_angle || Sass::Script::String.new("top")))
+      args << grad_color_stops(color_stops)
+      Sass::Script::String.new("-webkit-gradient(linear, #{args.join(', ')})")
+    end
+    def to_moz
+      Sass::Script::String.new("-moz-#{to_s}")
+    end
+    def to_svg
+      linear_svg_gradient(color_stops, position_and_angle || Sass::Script::String.new("top"))
+    end
+  end
+
  module Functions
+
+    def radial_gradient(position_and_angle, shape_and_size, *color_stops)
+      # Have to deal with variable length/meaning arguments.
+      if color_stop?(shape_and_size)
+        color_stops.unshift(shape_and_size)
+        shape_and_size = nil
+      elsif list_of_color_stops?(shape_and_size)
+        # Support legacy use of the color-stops() function
+        color_stops = shape_and_size.values + color_stops
+        shape_and_size = nil
+      end
+      shape_and_size = nil if shape_and_size && !shape_and_size.to_bool # nil out explictly passed falses
+      # ditto for position_and_angle
+      if color_stop?(position_and_angle)
+        color_stops.unshift(position_and_angle)
+        position_and_angle = nil
+      elsif list_of_color_stops?(position_and_angle)
+        color_stops = position_and_angle.values + color_stops
+        position_and_angle = nil
+      end
+      position_and_angle = nil if position_and_angle && !position_and_angle.to_bool
+
+      # Support legacy use of the color-stops() function
+      if color_stops.size == 1 && list_of_color_stops?(color_stops.first)
+        color_stops = color_stops.first.values
+      end
+      RadialGradient.new(position_and_angle, shape_and_size, send(:color_stops, *color_stops))
+    end
+
+    def linear_gradient(position_and_angle, *color_stops)
+      if color_stop?(position_and_angle)
+        color_stops.unshift(position_and_angle)
+        position_and_angle = nil
+      elsif list_of_color_stops?(position_and_angle)
+        color_stops = position_and_angle.values + color_stops
+        position_and_angle = nil
+      end
+      position_and_angle = nil if position_and_angle && !position_and_angle.to_bool
+
+      # Support legacy use of the color-stops() function
+      if color_stops.size == 1 && list_of_color_stops?(color_stops.first)
+        color_stops = color_stops.first.values
+      end
+      LinearGradient.new(position_and_angle, send(:color_stops, *color_stops))
+    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|
+        "color-stop(#{stop.inspect}, #{color.inspect})"
+      end
+      Sass::Script::String.new(stops.join(", "))
+    end
+
+    def color_stops_in_percentages(color_list)
      assert_list(color_list)
      normalize_stops!(color_list)
      max = color_list.values.last.stop
@ -51,10 +189,8 @@ module Compass::SassExtensions::Functions::GradientSupport
          raise Sass::SyntaxError.new("Color stops must be specified in increasing order")
        end
        last_value = stop
-        "color-stop(#{stop.inspect}, #{pos.color.inspect})"
+        [stop, pos.color]
      end
-      
-      Sass::Script::String.new(color_stops.join(", "))
    end

    # returns the end position of the gradient from the color stop
@ -102,9 +238,11 @@ module Compass::SassExtensions::Functions::GradientSupport
      else
        case position
        when /top|bottom/
-          "left #{position}"
+          "center #{position}"
        when /left|right/
-          "#{position} top"
+          "#{position} center"
+        when /center/
+          "center center"
        else
          position
        end
@ -120,35 +258,140 @@ module Compass::SassExtensions::Functions::GradientSupport
    def color_stops(*args)
      List.new(*args.map do |arg|
        case arg
+        when ColorStop
+          arg
        when Sass::Script::Color
          ColorStop.new(arg)
        when Sass::Script::String
          # We get a string as the result of concatenation
          # So we have to reparse the expression
-          color = stop = nil
-          expr = Sass::Script::Parser.parse(arg.value, 0, 0)
-          case expr
-          when Sass::Script::Color
-            color = expr
-          when Sass::Script::Funcall
-            color = expr
-          when Sass::Script::Operation
-            unless expr.instance_variable_get("@operator") == :concat
-              # This should never happen.
-              raise Sass::SyntaxError, "Couldn't parse a color stop from: #{arg.value}"
-            end
-            color = expr.instance_variable_get("@operand1")
-            stop = expr.instance_variable_get("@operand2")
+          parse_color_stop(arg)
        else
-            raise Sass::SyntaxError, "Couldn't parse a color stop from: #{arg.value}"
-          end
-          ColorStop.new(color, stop)
-        else
-          raise Sass::SyntaxError, "Not a valid color stop: #{arg}"
+          raise Sass::SyntaxError, "Not a valid color stop: #{arg.class.name}: #{arg}"
        end
      end)
    end
+
+    def linear_svg_gradient(color_stops, start)
+      x1, y1 = grad_point(start).to_s.split
+      x2, y2 = grad_point(opposite_position(start)).to_s.split
+      stops = color_stops_in_percentages(color_stops)
+
+      svg = linear_svg(stops, x1, y1, x2, y2)
+      inline_image_string(svg.gsub(/\s+/, ' '), 'image/svg+xml')
+    end
+
+    def radial_svg_gradient(color_stops, center)
+      cx, cy = grad_point(center).to_s.split
+      r = grad_end_position(color_stops,  Sass::Script::Bool.new(true))
+      stops = color_stops_in_percentages(color_stops)
+
+      svg = radial_svg(stops, cx, cy, r)
+      inline_image_string(svg.gsub(/\s+/, ' '), 'image/svg+xml')
+    end
+
+    # Returns a comma-delimited list after removing any non-true values
+    def compact(*args)
+      List.new(*args.reject{|a| !a.to_bool})
+    end
+
+    # Returns a list object from a value that was passed.
+    # This can be used to unpack a space separated list that got turned
+    # into a string by sass before it was passed to a mixin.
+    def _compass_list(arg)
+      return arg if arg.is_a?(List)
+      values = case arg
+        when Sass::Script::String
+          expr = Sass::Script::Parser.parse(arg.value, 0, 0)
+          if expr.is_a?(Sass::Script::Operation)
+            extract_list_values(expr)
+          elsif expr.is_a?(Sass::Script::Funcall)
+            expr.perform(Sass::Environment.new) #we already evaluated the args in context so no harm in using a fake env
+          else
+            [arg]
+          end
+        else
+          [arg]
+        end
+
+      SpaceList.new(*values)
+    end
+
+    # Get the nth value from a list
+    def _compass_nth(list, place)
+      if place.value == "last"
+        list.values.last
+      elsif place.value == "first"
+        list.values.first
+      else
+        list.values[place.value - 1]
+      end
+    end
+
+    def _compass_space_list(list)
+      if list.is_a?(List) && !list.is_a?(SpaceList)
+        SpaceList.new(*list.values)
+      elsif list.is_a?(SpaceList)
+        list
+      else
+        SpaceList.new(list)
+      end
+    end
+
+    # slice a sublist from a list
+    def _compass_slice(list, start_index, end_index = nil)
+      end_index ||= Sass::Script::Number.new(-1)
+      start_index = start_index.value
+      end_index = end_index.value
+      start_index -= 1 unless start_index < 0
+      end_index -= 1 unless end_index < 0
+      list.class.new *list.values[start_index..end_index]
+    end
+
+    %w(webkit moz o ms svg).each do |prefix|
+      class_eval <<-RUBY, __FILE__, __LINE__ + 1
+        def _#{prefix}(*args)
+          List.new(*args.map! do |a|
+                      if a.is_a?(List)
+                        a.class.new(*a.values.map{|v| v.respond_to?(:to_#{prefix}) ? v.to_#{prefix} : v})
+                      else
+                        a.respond_to?(:to_#{prefix}) ? a.to_#{prefix} : a
+                      end
+                    end)
+        end
+      RUBY
+    end
+
+    # Check if any of the arguments passed have a tendency towards vendor prefixing.
+    def prefixed(prefix, *args)
+      method = prefix.value.sub(/^-/,"to_").to_sym
+      args.map!{|a| a.is_a?(List) ? a.values : a}.flatten!
+      Sass::Script::Bool.new(args.any?{|a| a.respond_to?(method)})
+    end
+
    private
+    # After using the sass script parser to parse a string, this reconstructs
+    # a list from operands to the space/concat operation
+    def extract_list_values(operation)
+      left = operation.instance_variable_get("@operand1")
+      right = operation.instance_variable_get("@operand2")
+      left = extract_list_values(left) if left.is_a?(Sass::Script::Operation)
+      right = extract_list_values(right) if right.is_a?(Sass::Script::Operation)
+      left = literalize(left) unless left.is_a?(Array)
+      right = literalize(right) unless right.is_a?(Array)
+      Array(left) + Array(right)
+    end
+    # Makes a literal from other various script nodes.
+    def literalize(node)
+      case node
+      when Sass::Script::Literal
+        node
+      when Sass::Script::Funcall
+        node.perform(Sass::Environment.new)
+      else
+        Sass::Script::String.new(node.to_s)
+      end
+    end
    def normalize_stops!(color_list)
      positions = color_list.values
      # fill in the start and end positions, if unspecified
@ -182,9 +425,77 @@ module Compass::SassExtensions::Functions::GradientSupport
       end
      nil
    end
+
    def assert_list(value)
      return if value.is_a?(List)
      raise ArgumentError.new("#{value.inspect} is not a list of color stops. Expected: color_stops(<color> <number>?, ...)")
    end
+
+    def parse_color_stop(arg)
+      return ColorStop.new(arg) if arg.is_a?(Sass::Script::Color)
+      return nil unless arg.is_a?(Sass::Script::String)
+      color = stop = nil
+      expr = Sass::Script::Parser.parse(arg.value, 0, 0)
+      case expr
+      when Sass::Script::Color
+        color = expr
+      when Sass::Script::Funcall
+        color = expr
+      when Sass::Script::Operation
+        unless [:concat, :space].include?(expr.instance_variable_get("@operator"))
+          # This should never happen.
+          raise Sass::SyntaxError, "Couldn't parse a color stop from: #{arg.value}"
+        end
+        color = expr.instance_variable_get("@operand1")
+        stop = expr.instance_variable_get("@operand2")
+      else
+        raise Sass::SyntaxError, "Couldn't parse a color stop from: #{arg.value}"
+      end
+      ColorStop.new(color, stop)
+    end
+
+    def color_stop?(arg)
+      parse_color_stop(arg)
+    rescue
+      nil
+    end
+
+    def list_of_color_stops?(arg)
+      arg.is_a?(List) && arg.values.first.is_a?(ColorStop)
+    end
+
+    def linear_svg(color_stops, x1, y1, x2, y2)
+      gradient = %Q{<linearGradient id="grad" x1="#{x1}" y1="#{y1}" x2="#{x2}" y2="#{y2}">#{color_stops_svg(color_stops)}</linearGradient>}
+      svg(gradient)
+    end
+
+    def radial_svg(color_stops, cx, cy, r)
+      gradient = %Q{<radialGradient id="grad" gradientUnits="userSpaceOnUse" cx="#{cx}" cy="#{cy}" r="#{r}">#{color_stops_svg(color_stops)}</radialGradient>}
+      svg(gradient)
+    end
+
+    # color_stops = array of: [stop, color]
+    def color_stops_svg(color_stops)
+      color_stops.each.map{ |stop, color|
+          %{<stop offset="#{stop.to_s}" stop-color="#{color.inspect}"/>}
+      }.join
+    end
+
+    def svg(gradient)
+      svg = <<-EOS
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg"><defs>#{gradient}</defs><rect x="0" y="0" width="100%" height="100%" fill="url(#grad)" /></svg>
+EOS
+    end
+  end
+  class LinearGradient < Sass::Script::Literal
+    include Functions
+    include Compass::SassExtensions::Functions::Constants
+    include Compass::SassExtensions::Functions::InlineImage
+  end
+  class RadialGradient < Sass::Script::Literal
+    include Functions
+    include Compass::SassExtensions::Functions::Constants
+    include Compass::SassExtensions::Functions::InlineImage
  end
 end
--- a/lib/compass/sass_extensions/functions/if.rb
+++ b/lib/compass/sass_extensions/functions/if.rb
@ -0,0 +1,9 @@
+module Compass::SassExtensions::Functions::If
+  def if(truth, if_true, if_false = nil)
+    if truth.to_bool
+      if_true
+    else
+      if_false || Sass::Script::Bool.new(false)
+    end
+  end
+end
--- a/lib/compass/sass_extensions/functions/inline_image.rb
+++ b/lib/compass/sass_extensions/functions/inline_image.rb
@ -3,8 +3,7 @@ module Compass::SassExtensions::Functions::InlineImage
  def inline_image(path, mime_type = nil)
    path = path.value
    real_path = File.join(Compass.configuration.images_path, path)
-    url = "url('data:#{compute_mime_type(path,mime_type)};base64,#{data(real_path)}')"
-    Sass::Script::String.new(url)
+    inline_image_string(data(real_path), compute_mime_type(path, mime_type))
  end

  def inline_font_files(*args)
@ -19,6 +18,13 @@ module Compass::SassExtensions::Functions::InlineImage
    Sass::Script::String.new(files.join(", "))
  end

+protected
+  def inline_image_string(data, mime_type)
+    data = [data].flatten.pack('m').gsub("\n","")
+    url = "url('data:#{mime_type};base64,#{data}')"
+    Sass::Script::String.new(url)
+  end
+
 private
  def compute_mime_type(path, mime_type = nil)
    return mime_type if mime_type
@ -46,7 +52,7 @@ private

  def data(real_path)
    if File.readable?(real_path)
-      [File.open(real_path, "rb") {|io| io.read}].pack('m').gsub("\n","")
+      File.open(real_path, "rb") {|io| io.read}
    else
      raise Compass::Error, "File not found or cannot be read: #{real_path}"
    end
--- a/test/compass_test.rb
+++ b/test/compass_test.rb
@ -1,6 +1,8 @@
 require 'test_helper'
 require 'fileutils'
 require 'compass'
+require 'compass/logger'
+require 'sass/plugin'

 class CompassTest < Test::Unit::TestCase
  include Compass::TestCaseHelper
--- a/test/fixtures/stylesheets/compass/config.rb
+++ b/test/fixtures/stylesheets/compass/config.rb
@ -12,3 +12,5 @@ line_comments = false
 asset_cache_buster do |path, file|
  "busted=true"
 end
+
+disable_warnings = true
--- a/test/fixtures/stylesheets/compass/css/box.css
+++ b/test/fixtures/stylesheets/compass/css/box.css
@ -1,4 +1,3 @@
-@charset "UTF-8";
 .hbox {
  display: -moz-box;
  display: -webkit-box;
--- a/test/fixtures/stylesheets/compass/css/box_shadow.css
+++ b/test/fixtures/stylesheets/compass/css/box_shadow.css
@ -0,0 +1,17 @@
+.box-shadow {
+  -moz-box-shadow: 0px 0px 5px #333333, 2px 2px 5px #222222;
+  -webkit-box-shadow: 0px 0px 5px #333333, 2px 2px 5px #222222;
+  -o-box-shadow: 0px 0px 5px #333333, 2px 2px 5px #222222;
+  box-shadow: 0px 0px 5px #333333, 2px 2px 5px #222222; }
+
+.single-box-shadow {
+  -moz-box-shadow: 0px 0px 5px #333333;
+  -webkit-box-shadow: 0px 0px 5px #333333;
+  -o-box-shadow: 0px 0px 5px #333333;
+  box-shadow: 0px 0px 5px #333333; }
+
+.multiple-box-shadows {
+  -moz-box-shadow: 0px 0px 5px #333333, 2px 2px 5px #222222;
+  -webkit-box-shadow: 0px 0px 5px #333333, 2px 2px 5px #222222;
+  -o-box-shadow: 0px 0px 5px #333333, 2px 2px 5px #222222;
+  box-shadow: 0px 0px 5px #333333, 2px 2px 5px #222222; }
--- a/test/fixtures/stylesheets/compass/css/columns.css
+++ b/test/fixtures/stylesheets/compass/css/columns.css
@ -0,0 +1,47 @@
+.column-count {
+  -moz-column-count: 5;
+  -webkit-column-count: 5;
+  -o-column-count: 5;
+  column-count: 5; }
+
+.column-gap {
+  -moz-column-gap: 10px;
+  -webkit-column-gap: 10px;
+  -o-column-gap: 10px;
+  column-gap: 10px; }
+
+.column-width {
+  -moz-column-width: 90px;
+  -webkit-column-width: 90px;
+  -o-column-width: 90px;
+  column-width: 90px; }
+
+.column-rule-width {
+  -moz-rule-width: 1px;
+  -webkit-rule-width: 1px;
+  -o-rule-width: 1px;
+  rule-width: 1px; }
+
+.column-rule-style {
+  -moz-rule-style: dotted;
+  -webkit-rule-style: dotted;
+  -o-rule-style: dotted;
+  rule-style: dotted; }
+
+.column-rule-color {
+  -moz-rule-color: blue;
+  -webkit-rule-color: blue;
+  -o-rule-color: blue;
+  rule-color: blue; }
+
+.column-rule {
+  -moz-column-rule: 1px solid blue;
+  -webkit-column-rule: 1px solid blue;
+  -o-column-rule: 1px solid blue;
+  column-rule: 1px solid blue; }
+
+.column-rule-spaced {
+  -moz-column-rule: 1px solid blue;
+  -webkit-column-rule: 1px solid blue;
+  -o-column-rule: 1px solid blue;
+  column-rule: 1px solid blue; }
--- a/test/fixtures/stylesheets/compass/css/fonts.css
+++ b/test/fixtures/stylesheets/compass/css/fonts.css
@ -1,4 +1,4 @@
@charset "UTF-8";
@font-face {
  font-family: "font1";
-  src: local("☺"), url('/css/fonts/font1.woff') format('woff'); }
+  src: local("☺"), url('/tmp/fonts/font1.woff') format('woff'); }
--- a/test/fixtures/stylesheets/compass/css/gradients.css
+++ b/test/fixtures/stylesheets/compass/css/gradients.css
@ -1,11 +1,86 @@
-@charset "UTF-8";
+.bg-simple-image {
+  background-image: url("foo.png"); }
+
+.bg-linear-gradient {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
+  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 0%, #aaaaaa 100%);
+  background-image: linear-gradient(top left, #dddddd 0%, #aaaaaa 100%); }
+
+.bg-radial-gradient {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
+  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 0%, #aaaaaa 100px);
+  background-image: radial-gradient(center center, #dddddd 0%, #aaaaaa 100px); }
+
+.bg-linear-gradient-with-angle {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
+  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 0%, #aaaaaa 100%);
+  background-image: linear-gradient(top left -45deg, #dddddd 0%, #aaaaaa 100%); }
+
+.bg-radial-gradient-with-angle-and-shape {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
+  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 0%, #aaaaaa 100px);
+  background-image: radial-gradient(center center 45deg, ellipse cover, #dddddd 0%, #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-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 0%, #aaaaaa 100%), -moz-radial-gradient(center center, #dddddd 0%, #aaaaaa 100px);
+  background-image: url('/images/4x6.png?busted=true'), linear-gradient(top left, #dddddd 0%, #aaaaaa 100%), radial-gradient(center center, #dddddd 0%, #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;
+  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; }
+
+.direct-list-image-plain {
+  list-style-image: url('/images/4x6.png?busted=true'); }
+
+.shorthand-list-image-plain {
+  list-style-image: outside url("/images/4x6.png?busted=true"); }
+
+.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: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMGZmMDAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjAwMDAiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
+  list-style-image: radial-gradient(#00ff00 0%, #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 url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMGZmMDAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjAwMDAiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
+  list-style-image: outside radial-gradient(#00ff00 0%, #ff0000 10px); }
+
+.content-plain {
+  content: "asdf"; }
+
+.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: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMGZmMDAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjAwMDAiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
+  content: radial-gradient(#00ff00 0%, #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 0%, #aaaaaa 100%);
+  background-image: linear-gradient(#dddddd 0%, #aaaaaa 100%); }
+
+.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 0%, #aaaaaa 100px);
+  background-image: radial-gradient(#dddddd 0%, #aaaaaa 100px); }
+
 .linear-1 {
-  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
  background-image: -moz-linear-gradient(top, #dddddd 0%, #aaaaaa 100%);
  background-image: linear-gradient(top, #dddddd 0%, #aaaaaa 100%); }

 .linear-2 {
-  background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
+  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
  background-image: -moz-linear-gradient(left, #dddddd 0%, #aaaaaa 100%);
  background-image: linear-gradient(left, #dddddd 0%, #aaaaaa 100%); }

@ -20,81 +95,216 @@
  background-image: linear-gradient(top right, #dddddd 0%, #aaaaaa 100%); }

 .linear-5 {
-  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #dddddd), color-stop(50%, #cccccc), color-stop(100%, #aaaaaa));
+  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 0%, #cccccc 50%, #aaaaaa 100%);
  background-image: linear-gradient(top, #dddddd 0%, #cccccc 50%, #aaaaaa 100%); }

 .linear-6 {
-  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #dddddd), color-stop(20%, #cccccc), color-stop(100%, #aaaaaa));
+  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 0%, #cccccc 20%, #aaaaaa 100%);
  background-image: linear-gradient(top, #dddddd 0%, #cccccc 20%, #aaaaaa 100%); }

 .linear-7 {
-  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #dddddd), color-stop(20%, #cccccc), color-stop(60%, #eeeeee), color-stop(100%, #aaaaaa));
+  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 0%, #cccccc 20%, #eeeeee 60%, #aaaaaa 100%);
  background-image: linear-gradient(top, #dddddd 0%, #cccccc 20%, #eeeeee 60%, #aaaaaa 100%); }

 .linear-8 {
-  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(80%, #dddddd), color-stop(100%, #aaaaaa));
+  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 100%);
  background-image: linear-gradient(top, #dddddd 80%, #aaaaaa 100%); }

 .linear-9 {
-  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #dddddd), color-stop(20%, #aaaaaa));
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(20%, #aaaaaa));
  background-image: -moz-linear-gradient(top, #dddddd 0%, #aaaaaa 20%);
  background-image: linear-gradient(top, #dddddd 0%, #aaaaaa 20%); }

 .linear-10 {
-  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(40%, #dddddd), color-stop(50%, #aaaaaa));
+  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: linear-gradient(top, #dddddd 40%, #aaaaaa 50%); }

 .linear-11 {
-  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(40%, #dddddd), color-stop(45%, #000000), color-stop(50%, #aaaaaa));
+  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 45%, #aaaaaa 50%);
  background-image: linear-gradient(top, #dddddd 40%, #000000 45%, #aaaaaa 50%); }

 .linear-12 {
-  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #ffffff), color-stop(33%, #0000ff), color-stop(67%, #000000));
+  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 0%, #0000ff 33%, #000000 67%);
  background-image: linear-gradient(top, #ffffff 0%, #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, circle, #dddddd 0%, #aaaaaa 100%);
-  background-image: radial-gradient(center center, circle, #dddddd 0%, #aaaaaa 100%); }
+  background-image: -moz-radial-gradient(center center, #dddddd 0%, #aaaaaa 100px);
+  background-image: radial-gradient(center center, #dddddd 0%, #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, circle, #dddddd 0%, #aaaaaa 100%);
-  background-image: radial-gradient(center center, circle, #dddddd 0%, #aaaaaa 100%); }
+  background-image: -moz-radial-gradient(center center, #dddddd 0%, #aaaaaa 100px);
+  background-image: radial-gradient(center center, #dddddd 0%, #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, circle, #dddddd 0%, #aaaaaa 100%);
-  background-image: radial-gradient(top center, circle, #dddddd 0%, #aaaaaa 100%); }
+  background-image: -moz-radial-gradient(top center, #dddddd 0%, #aaaaaa 100px);
+  background-image: radial-gradient(top center, #dddddd 0%, #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, circle, #dddddd 0%, #aaaaaa 100%);
-  background-image: radial-gradient(center center, circle, #dddddd 0%, #aaaaaa 100%); }
+  background-image: -moz-radial-gradient(center center, #dddddd 0%, #aaaaaa 100px);
+  background-image: radial-gradient(center center, #dddddd 0%, #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, circle, #dddddd 0%, #aaaaaa 100%);
-  background-image: radial-gradient(top center, circle, #dddddd 0%, #aaaaaa 100%); }
+  background-image: -moz-radial-gradient(top center, #dddddd 0%, #aaaaaa 100px);
+  background-image: radial-gradient(top center, #dddddd 0%, #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, circle, #dddddd 20px, #aaaaaa 50px);
-  background-image: radial-gradient(center center, circle, #dddddd 20px, #aaaaaa 50px); }
+  background-image: -moz-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, circle, #dddddd 20%, #aaaaaa 50px);
-  background-image: radial-gradient(center center, circle, #dddddd 20%, #aaaaaa 50px); }
+  background-image: -moz-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, 0% 0%, 0% 100%, color-stop(40%, rgba(255, 255, 255, 0)), color-stop(45%, rgba(255, 127, 127, 0.5)), color-stop(50%, #ffffff));
+  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) 45%, #ffffff 50%);
  background-image: linear-gradient(top, rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5) 45%, #ffffff 50%); }
+
+.linear-svg-1 {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
+  background-image: -moz-linear-gradient(top, #dddddd 0%, #aaaaaa 100%);
+  background-image: linear-gradient(top, #dddddd 0%, #aaaaaa 100%); }
+
+.linear-svg-2 {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iMCUiIHkxPSI1MCUiIHgyPSIxMDAlIiB5Mj0iNTAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
+  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
+  background-image: -moz-linear-gradient(left, #dddddd 0%, #aaaaaa 100%);
+  background-image: linear-gradient(left, #dddddd 0%, #aaaaaa 100%); }
+
+.linear-svg-3 {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
+  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 0%, #aaaaaa 100%);
+  background-image: linear-gradient(top left, #dddddd 0%, #aaaaaa 100%); }
+
+.linear-svg-4 {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iMTAwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
+  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 0%, #aaaaaa 100%);
+  background-image: linear-gradient(top right, #dddddd 0%, #aaaaaa 100%); }
+
+.linear-svg-5 {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNjY2NjY2MiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhYWFhYWEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
+  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 0%, #cccccc 50%, #aaaaaa 100%);
+  background-image: linear-gradient(top, #dddddd 0%, #cccccc 50%, #aaaaaa 100%); }
+
+.linear-svg-6 {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIyMCUiIHN0b3AtY29sb3I9IiNjY2NjY2MiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhYWFhYWEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
+  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 0%, #cccccc 20%, #aaaaaa 100%);
+  background-image: linear-gradient(top, #dddddd 0%, #cccccc 20%, #aaaaaa 100%); }
+
+.linear-svg-7 {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIyMCUiIHN0b3AtY29sb3I9IiNjY2NjY2MiLz48c3RvcCBvZmZzZXQ9IjYwJSIgc3RvcC1jb2xvcj0iI2VlZWVlZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+  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 0%, #cccccc 20%, #eeeeee 60%, #aaaaaa 100%);
+  background-image: linear-gradient(top, #dddddd 0%, #cccccc 20%, #eeeeee 60%, #aaaaaa 100%); }
+
+.linear-svg-8 {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iI2RkZGRkZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+  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 100%);
+  background-image: linear-gradient(top, #dddddd 80%, #aaaaaa 100%); }
+
+.linear-svg-9 {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIyMCUiIHN0b3AtY29sb3I9IiNhYWFhYWEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(20%, #aaaaaa));
+  background-image: -moz-linear-gradient(top, #dddddd 0%, #aaaaaa 20%);
+  background-image: linear-gradient(top, #dddddd 0%, #aaaaaa 20%); }
+
+.linear-svg-10 {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iI2RkZGRkZCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
+  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: linear-gradient(top, #dddddd 40%, #aaaaaa 50%); }
+
+.linear-svg-11 {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iI2RkZGRkZCIvPjxzdG9wIG9mZnNldD0iNDUlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNhYWFhYWEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
+  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 45%, #aaaaaa 50%);
+  background-image: linear-gradient(top, #dddddd 40%, #000000 45%, #aaaaaa 50%); }
+
+.linear-svg-12 {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIi8+PHN0b3Agb2Zmc2V0PSIzMyUiIHN0b3AtY29sb3I9IiMwMDAwZmYiLz48c3RvcCBvZmZzZXQ9IjY3JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+  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 0%, #0000ff 33%, #000000 67%);
+  background-image: linear-gradient(top, #ffffff 0%, #0000ff 33%, #000000 67%); }
+
+.radial-svg-1 {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
+  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 0%, #aaaaaa 100px);
+  background-image: radial-gradient(center center, #dddddd 0%, #aaaaaa 100px); }
+
+.radial-svg-2 {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
+  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 0%, #aaaaaa 100px);
+  background-image: radial-gradient(center center, #dddddd 0%, #aaaaaa 100px); }
+
+.radial-svg-3 {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjAlIiByPSIxMDAiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNkZGRkZGQiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhYWFhYWEiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
+  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 0%, #aaaaaa 100px);
+  background-image: radial-gradient(top center, #dddddd 0%, #aaaaaa 100px); }
+
+.radial-svg-4 {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
+  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 0%, #aaaaaa 100px);
+  background-image: radial-gradient(center center, #dddddd 0%, #aaaaaa 100px); }
+
+.radial-svg-5 {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjAlIiByPSIxMDAiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNkZGRkZGQiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhYWFhYWEiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
+  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 0%, #aaaaaa 100px);
+  background-image: radial-gradient(top center, #dddddd 0%, #aaaaaa 100px); }
+
+.radial-svg-6 {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNTAiPjxzdG9wIG9mZnNldD0iNDAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
+  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: radial-gradient(center center, #dddddd 20px, #aaaaaa 50px); }
+
+.radial-svg-7 {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNTAiPjxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
+  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: radial-gradient(center center, #dddddd 20%, #aaaaaa 50px); }
+
+.alpha-linear-svg {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0icmdiYSgyNTUsIDI1NSwgMjU1LCAwKSIvPjxzdG9wIG9mZnNldD0iNDUlIiBzdG9wLWNvbG9yPSJyZ2JhKDI1NSwgMTI3LCAxMjcsIDAuNSkiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+  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) 45%, #ffffff 50%);
+  background-image: linear-gradient(top, rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5) 45%, #ffffff 50%); }
+
+.ie-horizontal-filter {
+  *zoom: 1;
+  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFFFFFFF', endColorstr='#FF000000');
+  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFFFFFFF', endColorstr='#FF000000')"; }
+
+.ie-vertical-filter {
+  *zoom: 1;
+  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFFFFF', endColorstr='#FF000000');
+  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFFFFF', endColorstr='#FF000000')"; }
+
+.ie-alpha-filter {
+  *zoom: 1;
+  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFFFFF', endColorstr='#00FFFFFF');
+  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFFFFF', endColorstr='#00FFFFFF')"; }
--- a/test/fixtures/stylesheets/compass/sass/box_shadow.scss
+++ b/test/fixtures/stylesheets/compass/sass/box_shadow.scss
@ -0,0 +1,5 @@
+@import "compass/css3/box-shadow-v2";
+
+.box-shadow { @include box-shadow(default, 2px 2px 5px #222);}
+.single-box-shadow { @include single-box-shadow;}
+.multiple-box-shadows { @include multiple-box-shadows(default, 2px 2px 5px #222);}
--- a/test/fixtures/stylesheets/compass/sass/columns.scss
+++ b/test/fixtures/stylesheets/compass/sass/columns.scss
@ -0,0 +1,10 @@
+@import "compass/css3/columns";
+
+.column-count       { @include column-count(5);               }
+.column-gap         { @include column-gap(10px);              }
+.column-width       { @include column-width(90px);            }
+.column-rule-width  { @include column-rule-width(1px);        }
+.column-rule-style  { @include column-rule-style(dotted);     }
+.column-rule-color  { @include column-rule-color(blue);       }
+.column-rule        { @include column-rule(1px, solid, blue); }
+.column-rule-spaced { @include column-rule(1px solid blue);   }
--- a/test/fixtures/stylesheets/compass/sass/gradients.sass
+++ b/test/fixtures/stylesheets/compass/sass/gradients.sass
@ -1,37 +1,86 @@
@import compass/css3

+$experimental-support-for-svg: true
+.bg-simple-image
+  +background-image(url('foo.png'))
+
+.bg-linear-gradient
+  +background-image(linear-gradient(top left, #ddd, #aaa))
+
+.bg-radial-gradient
+  +background-image(radial-gradient(center center, #ddd, #aaa 100px))
+
+.bg-linear-gradient-with-angle
+  +background-image(linear-gradient(top left -45deg, #ddd, #aaa))
+
+.bg-radial-gradient-with-angle-and-shape
+  +background-image(radial-gradient(center center 45deg, ellipse cover, #ddd, #aaa 100px))
+
+.bg-all-gradient-types
+  +background-image(image-url("4x6.png"), linear-gradient(top left, #ddd, #aaa), radial-gradient(center center, #ddd, #aaa 100px))
+
+.border-image-gradient
+  +border-image(radial-gradient(#0f0,#f00 100px) 100 stretch)
+
+.direct-list-image-plain
+  +list-style-image(image-url("4x6.png"))
+
+.shorthand-list-image-plain
+  +list-style(outside image-url("4x6.png"))
+
+.direct-list-image-with-gradient
+  +list-style-image(radial-gradient(lime, red 10px))
+
+.shorthand-list-image-with-gradient
+  // Note: I haven't seen a browser render this correctly, but they should eventually.
+  +list-style(outside radial-gradient(lime, red 10px))
+
+.content-plain
+  +content("asdf")
+
+.content-with-gradient
+  +content(radial-gradient(lime, red 10px))
+
+$experimental-support-for-svg: false
+
+.bg-linear-gradient-no-position
+  +background-image(linear-gradient(#ddd, #aaa))
+
+.bg-radial-gradient-no-position
+  +background-image(radial-gradient(#ddd, #aaa 100px))
+
 .linear-1
-  +linear-gradient(color_stops(#dddddd, #aaaaaa))
+  +linear-gradient(color-stops(#dddddd, #aaaaaa))

 .linear-2
-  +linear-gradient(color_stops(#dddddd, #aaaaaa), left)
+  +linear-gradient(color-stops(#dddddd, #aaaaaa), left)

 .linear-3
-  +linear-gradient(color_stops(#dddddd, #aaaaaa), unquote("top left"))
+  +linear-gradient(color-stops(#dddddd, #aaaaaa), top left)

 .linear-4
-  +linear-gradient(color_stops(#dddddd, #aaaaaa), unquote("top right"))
+  +linear-gradient(color-stops(#dddddd, #aaaaaa), top right)

 .linear-5
-  +linear-gradient(color_stops(#dddddd, #cccccc, #aaaaaa))
+  +linear-gradient(color-stops(#dddddd, #cccccc, #aaaaaa))

 .linear-6
-  +linear-gradient(color_stops(#dddddd, #cccccc 20%, #aaaaaa))
+  +linear-gradient(color-stops(#dddddd, #cccccc 20%, #aaaaaa))

 .linear-7
-  +linear-gradient(color_stops(#dddddd, #cccccc 20%, #eeeeee, #aaaaaa))
+  +linear-gradient(color-stops(#dddddd, #cccccc 20%, #eeeeee, #aaaaaa))

 .linear-8
-  +linear-gradient(color_stops(#dddddd 80%, #aaaaaa))
+  +linear-gradient(color-stops(#dddddd 80%, #aaaaaa))

 .linear-9
-  +linear-gradient(color_stops(#dddddd, #aaaaaa 20%))
+  +linear-gradient(color-stops(#dddddd, #aaaaaa 20%))

 .linear-10
-  +linear-gradient(color_stops(#dddddd 40%, #aaaaaa 50%))
+  +linear-gradient(color-stops(#dddddd 40%, #aaaaaa 50%))

 .linear-11
-  +linear-gradient(color_stops(#dddddd 40%, black, #aaaaaa 50%))
+  +linear-gradient(color-stops(#dddddd 40%, black, #aaaaaa 50%))

 .linear-12
  +linear-gradient(color-stops(white, blue 33%, black 67%))
@ -39,33 +88,113 @@
 .radial-1
  // A default radial gradient:
     A centered gradient having the shape of the container (aka ellipse)
-  +radial-gradient(color_stops(#dddddd, #aaaaaa))
+  +radial-gradient(color-stops(#dddddd, #aaaaaa 100px))

 .radial-2
  // A centered gradient having the shape of the container (aka ellipse)
-  +radial-gradient(color_stops(#dddddd, #aaaaaa))
+  +radial-gradient(color-stops(#dddddd, #aaaaaa 100px))

 .radial-3
  // A centered gradient at the top having the shape of the container (aka ellipse)
-  +radial-gradient(color_stops(#dddddd, #aaaaaa), unquote("top center"))
+  +radial-gradient(color-stops(#dddddd, #aaaaaa 100px), top center)

 .radial-4
  // A centered gradient having a circular shape
-  +radial-gradient(color_stops(#dddddd, #aaaaaa))
+  +radial-gradient(color-stops(#dddddd, #aaaaaa 100px))

 .radial-5
  // A centered gradient at the top having a circular shape
-  +radial-gradient(color_stops(#dddddd, #aaaaaa), unquote("top center"))
+  +radial-gradient(color-stops(#dddddd, #aaaaaa 100px), top center)

 .radial-6
  // A centered circular gradient with color stops
     The color stops must be absolute units
-  +radial-gradient(color_stops(#dddddd 20px, #aaaaaa 50px))
+  +radial-gradient(color-stops(#dddddd 20px, #aaaaaa 50px))

 .radial-7
  // A centered elliptical gradient with color stops
     The color stops must be relative units
-  +radial-gradient(color_stops(#dddddd 20%, #aaaaaa 50px))
+  +radial-gradient(color-stops(#dddddd 20%, #aaaaaa 50px))

 .alpha-linear
-  +linear-gradient(color_stops(rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5), rgba(255, 255, 255, 1) 50%))
+  +linear-gradient(color-stops(rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5), rgba(255, 255, 255, 1) 50%))
+
+$experimental-support-for-svg: true
+.linear-svg-1
+  +linear-gradient(color-stops(#dddddd, #aaaaaa))
+
+.linear-svg-2
+  +linear-gradient(color-stops(#dddddd, #aaaaaa), left)
+
+.linear-svg-3
+  +linear-gradient(color-stops(#dddddd, #aaaaaa), top left)
+
+.linear-svg-4
+  +linear-gradient(color-stops(#dddddd, #aaaaaa), top right)
+
+.linear-svg-5
+  +linear-gradient(color-stops(#dddddd, #cccccc, #aaaaaa))
+
+.linear-svg-6
+  +linear-gradient(color-stops(#dddddd, #cccccc 20%, #aaaaaa))
+
+.linear-svg-7
+  +linear-gradient(color-stops(#dddddd, #cccccc 20%, #eeeeee, #aaaaaa))
+
+.linear-svg-8
+  +linear-gradient(color-stops(#dddddd 80%, #aaaaaa))
+
+.linear-svg-9
+  +linear-gradient(color-stops(#dddddd, #aaaaaa 20%))
+
+.linear-svg-10
+  +linear-gradient(color-stops(#dddddd 40%, #aaaaaa 50%))
+
+.linear-svg-11
+  +linear-gradient(color-stops(#dddddd 40%, black, #aaaaaa 50%))
+
+.linear-svg-12
+  +linear-gradient(color-stops(white, blue 33%, black 67%))
+
+.radial-svg-1
+  // A default radial gradient:
+     A centered gradient having the shape of the container (aka ellipse)
+  +radial-gradient(color-stops(#dddddd, #aaaaaa 100px))
+
+.radial-svg-2
+  // A centered gradient having the shape of the container (aka ellipse)
+  +radial-gradient(color-stops(#dddddd, #aaaaaa 100px))
+
+.radial-svg-3
+  // A centered gradient at the top having the shape of the container (aka ellipse)
+  +radial-gradient(color-stops(#dddddd, #aaaaaa 100px), top center)
+
+.radial-svg-4
+  // A centered gradient having a circular shape
+  +radial-gradient(color-stops(#dddddd, #aaaaaa 100px))
+
+.radial-svg-5
+  // A centered gradient at the top having a circular shape
+  +radial-gradient(color-stops(#dddddd, #aaaaaa 100px), top center)
+
+.radial-svg-6
+  // A centered circular gradient with color stops
+     The color stops must be absolute units
+  +radial-gradient(color-stops(#dddddd 20px, #aaaaaa 50px))
+
+.radial-svg-7
+  // A centered elliptical gradient with color stops
+     The color stops must be relative units
+  +radial-gradient(color-stops(#dddddd 20%, #aaaaaa 50px))
+
+.alpha-linear-svg
+  +linear-gradient(color-stops(rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5), rgba(255, 255, 255, 1) 50%))
+
+.ie-horizontal-filter
+  +filter-gradient(white, black, horizontal)
+
+.ie-vertical-filter
+  +filter-gradient(white, black, vertical)
+
+.ie-alpha-filter
+  +filter-gradient(rgba(#fff, 1), rgba(#fff, 0))
--- a/test/sass_extensions_test.rb
+++ b/test/sass_extensions_test.rb
@ -59,6 +59,11 @@ class SassExtensionsTest < Test::Unit::TestCase
    assert_equal "25%", evaluate("saturation(adjust-saturation(hsl(50deg, 50%, 50%), -25%))")
  end

+  def test_if_function
+    assert_equal "no", evaluate("if(false, yes, no)")
+    assert_equal "yes", evaluate("if(true, yes, no)")
+  end
+
  def test_trig_functions
    assert_equal "0.841px", evaluate("sin(1px)")
    assert_equal "0.0", evaluate("sin(pi())")
Author	SHA1	Message	Date
B Mathis	40c26b4de1	Merge branch 'css3-v2' of github.com:chriseppstein/compass into css3-v2	2010-11-15 16:28:59 -06:00
B Mathis	e6c28d81f7	renamed default variable in has-layout mixin to more appropriate name $approach	2010-11-15 16:28:53 -06:00
Chris Eppstein	38faf774eb	generate docs on the css3 images module.	2010-11-15 03:50:00 -08:00
Chris Eppstein	0f5746bec0	Use some of the new compass helpers to clean up this code.	2010-11-15 03:48:59 -08:00
Chris Eppstein	795800a85f	Return false if no false value is provided.	2010-11-15 03:47:57 -08:00
Chris Eppstein	0334af1234	start working on upgrade docs.	2010-11-15 03:46:44 -08:00
Chris Eppstein	681bf3742f	Update the changelog and add an upgrading guide.	2010-11-15 02:42:01 -08:00
Chris Eppstein	832d4a2a99	Add a changelog note on the new compass helpers for gradients. No docs on them because they're mostly internal and they match the official CSS syntax.	2010-11-15 00:16:19 -08:00
Chris Eppstein	d34cf1de85	Deprecate the radial-gradient mixin, linear-gradient mixin, and add deprecation notices to the changelog.	2010-11-15 00:02:35 -08:00
Chris Eppstein	8e2b5f4d1c	Add a new configuration property to disable sass warnings: disable_warnings	2010-11-15 00:01:25 -08:00
Chris Eppstein	412468d52a	Better argument names for the columns module, tests for the columns module, accept space separated args for the column-rule mixin.	2010-11-15 00:01:25 -08:00
B Mathis	0e7bef6dbf	updated changelog to indicate changes to the box-shadow and text-shadow mixin defaults	2010-11-14 23:51:02 -06:00
B Mathis	f135ecef34	defaults for text-shadow and box-shadow are better	2010-11-14 23:37:46 -06:00
Chris Eppstein	6817072f49	Handle gradients with those crazy extra arguments in them.	2010-11-14 20:55:11 -08:00
Chris Eppstein	683d58babc	fix the default rake task	2010-11-14 20:41:18 -08:00
Chris Eppstein	721f1370bc	I misread the spec, those are ands, not ors	2010-11-14 20:40:56 -08:00
Chris Eppstein	3e01a9e990	Change the legacy gradient mixins to use the new background-image mixin.	2010-11-14 20:30:04 -08:00
Chris Eppstein	a0f5b5a6ae	Gradients in content too	2010-11-14 18:00:47 -08:00
Chris Eppstein	6c166bee0d	Only emit extra property values for list images when required.	2010-11-14 17:49:19 -08:00
Chris Eppstein	cb0c3775cf	Don't need to slice this list up afterall.	2010-11-14 17:39:30 -08:00
Chris Eppstein	133bf0a078	Gradient support for list-style-image.	2010-11-14 17:35:25 -08:00
Chris Eppstein	e0561d33f9	Trim some whitespace from the svg xml -- saves about 12 bytes from the output per gradient.	2010-11-14 17:04:17 -08:00
Chris Eppstein	4dc455f312	[CSS3] Support for the border-image property.	2010-11-14 16:56:39 -08:00
Chris Eppstein	3ade4e3f3a	handle missing gradient arguments.	2010-11-14 12:40:22 -08:00
Chris Eppstein	5d85df5ca1	ignore rvmrc files.	2010-11-14 11:00:36 -08:00
Chris Eppstein	4ddc3e9bcf	Revert "Updated gitignore" This reverts commit `c9a684c1cf`.	2010-11-14 10:59:49 -08:00
Chris Eppstein	ad06b282cb	New background image mixin with gradient support and up to 10 images.	2010-11-13 23:59:31 -08:00
Chris Eppstein	ff375489f6	less unquotes & underscores, more dashes	2010-11-13 23:59:31 -08:00
B Mathis	21a316c594	added home page layout for serving new home page deisgn	2010-11-13 17:28:23 -06:00
B Mathis	9338e134ce	updated Gemfiles	2010-11-13 17:27:33 -06:00
B Mathis	c9a684c1cf	Updated gitignore Conflicts: .gitignore	2010-11-13 17:24:35 -06:00
Chris Eppstein	2f40eb9f7f	Gradient mixin for IE6-8 using filters, only does simple linear gradients and must be applied seperately from the linear-gradient mixin. Closes GH-183.	2010-11-13 00:49:16 -08:00
Chris Eppstein	073c0d136c	This is maddening.	2010-11-13 00:47:55 -08:00
Chris Eppstein	7406a627f8	A new function: if()	2010-11-13 00:46:41 -08:00
Chris Eppstein	f2def7bf3b	Add note about an opera bug.	2010-11-12 23:00:14 -08:00
Chris Eppstein	5ca9dacc36	Tweak the gradient docs to explain svg support.	2010-11-12 22:53:50 -08:00
Chris Eppstein	af5ab4e6c9	Clean up the gradient demo page.	2010-11-12 22:01:26 -08:00
Chris Eppstein	20d3e705e3	Update nanoc so we can use the new watcher.	2010-11-12 21:45:24 -08:00
Chris Eppstein	955cfa75cf	Make the new deprecated library documentation more obviously deprecated.	2010-11-12 20:28:54 -08:00
Irina Dumitrascu	60257ed673	Docs: improved CSS3/Gradient	2010-11-12 17:32:06 -08:00
Irina Dumitrascu	9d4da89071	Fixed the position evaluation for radial gradients top should mean top center (not top left) left should mean center left (not top left) center should mean center center (it was wrongly evaluated to "50%" Safari would not show the gradient at all, SVG would place it in center left) This does not affect linear gradients.	2010-11-12 17:32:06 -08:00
Irina Dumitrascu	6326835d5e	Opt-in SVG support for gradients (linear & radial)	2010-11-12 17:32:06 -08:00
Chris Eppstein	efa9e2408d	upgrade some gems	2010-11-12 17:10:12 -08:00
Eric Meyer	5341211c42	documentation for new transform api	2010-11-12 17:10:12 -08:00
Eric Meyer	e56505a0ce	document new text shadow api	2010-11-12 17:10:12 -08:00
Eric Meyer	37b0bde605	multiple box shadow mixins use defaults	2010-11-12 17:10:12 -08:00
Eric Meyer	371e2103a7	text shadows v2, supports multiple shadows	2010-11-12 17:10:11 -08:00
Eric Meyer	782e6979ea	2d and 3d transforms, version 2, closes 170	2010-11-12 17:10:11 -08:00
Eric Meyer	290aac3a7e	2d and 3d transforms, version 2, closes 170	2010-11-12 17:10:11 -08:00
Chris Eppstein	509282f916	Document the new box shadow api	2010-11-12 17:10:11 -08:00
Chris Eppstein	b7285f9b85	Create a new version of the box shadow api to accomodate multiple box shadows.	2010-11-12 17:10:11 -08:00
Chris Eppstein	fb33dff089	What I'd like the box shadow upgrade to be -- not legal syntax.	2010-11-12 17:10:11 -08:00