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

deprecation notices to the changelog.

.gitignore

@@ -24,3 +24,4 @@ doc-src/.bundle
 .bundle
 attic
 devbin
+.rvmrc

Rakefile

@@ -5,7 +5,7 @@ require 'compass'
 
 # ----- Default: Testing ------
 
-task :default => :run_tests
+task :default => :test
 
 require 'rake/testtask'
 require 'fileutils'

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', :git => "git://github.com/chriseppstein/nanoc.git"
-gem 'nanoc3', :require => false, :git => "git://github.com/chriseppstein/nanoc.git", :branch => "3.1.x"
 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"

doc-src/Gemfile.lock

@@ -1,38 +1,42 @@
 GIT
   remote: git://github.com/chriseppstein/nanoc.git
-  revision: 3982942
+  revision: 4ecb400489c83fd2068659de0c651733b8dad28f
-  branch: 3.1.x
   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)
+    activesupport (3.0.1)
-    coderay (0.9.3)
+    coderay (0.9.5)
-    compass-susy-plugin (0.7.0)
+    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)
+    fssm (0.2.0)
-    haml (3.0.16)
+    haml (3.0.23)
-    json (1.4.5)
+    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)
+    serve (1.0.0)
-      activesupport (>= 2.0.2)
+      activesupport (~> 3.0.1)
-    thor (0.14.0)
+      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

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

doc-src/content/examples/compass/css3/gradient/markup.haml

@@ -1,35 +1,41 @@
-%p
+.ex
-  this box has no gradients
-
   .gradient-example
+  %p
+    This box has no gradients
 
+.ex
+  #radial-gradient.gradient-example
   %p
     This will yield a radial gradient with an apparent specular highlight  
 
-#radial-gradient.gradient-example
+.ex
-
+  #linear-gradient.gradient-example
   %p
     This yields a linear gradient spanning from $start to $end coordinates  
 
-#linear-gradient.gradient-example
+.ex
-
+  #v-gradient.gradient-example
   %p
     This yields a gradient starting at the top with #fff, ending in #aaa  
 
-#v-gradient.gradient-example
+.ex
-
+  #v-gradient-2.gradient-example
   %p
     Same as above but with a #ccc at the halfway point  
 
-#v-gradient-2.gradient-example
+.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
 
+.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.

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

doc-src/content/homepage.haml

@@ -0,0 +1,7 @@
+---
+title: Compass Home
+body_id: home
+layout: homepage
+---
+
+Yo!

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
+  %p.warning
-    The box-shadow mixin is used to give a block element a drop shadow.
+    This import is deprecated. Please import
+    <a href="/docs/reference/compass/css3/box_shadow_v2/" class="better">box_shadow_v2</a> instead.

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.

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.

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.

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

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
+  %p.warning
-    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>.
+    This import is deprecated. Please import
+    <a href="/docs/reference/compass/css3/text-shadow-v2/" class="better">text_shadow_v2</a> instead.

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

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
+  %p.warning
-    Provides mixins for CSS3 transforms. See <a href="http://www.w3.org/TR/css3-2d-transforms/">W3C: CSS 2D transforms</a>.
+    This import is deprecated. Please import
+    <a href="/docs/reference/compass/css3/transform-v2/" class="better">transform_v2</a> instead.

doc-src/content/stylesheets/_examples.sass

@@ -4,6 +4,8 @@
     h1
       text-align: center
 
+  #demo
+    +clearfix
   #how
     +full(12)
     +pie-clearfix

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

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)

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> 

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.
+

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.
+       
+       
+

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!
+

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"

doc-src/layouts/partials/sidebar/item.haml

@@ -1,2 +1,4 @@
-%li{:class => ("selected" if @selected)}
+- classes = [("selected" if @selected), ("deprecated" if @current_item[:deprecated])].compact.join(" ")
-  %a{:href => default_path(@current_item), :class => ("selected" if @selected)}= @crumb
+%li{:class => classes}
+  %a{:href => default_path(@current_item), :class => classes}
+    %span= @crumb

doc-src/lib/data_sources/nanoc_monkey_patches.rb

@@ -1,12 +1,12 @@
 class Nanoc3::Site
   def cached(key)
-    if cache.has_key?(key)
+    if cached_stuff.has_key?(key)
-      cache[key]
+      cached_stuff[key]
     else
-      cache[key]= yield
+      cached_stuff[key]= yield
     end
   end
-  def cache
+  def cached_stuff
-    @cache ||= {}
+    @cached_stuff ||= {}
   end
 end

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

frameworks/compass/stylesheets/compass/_css3.scss

@@ -1,15 +1 @@
-@import "css3/border-radius";
+@import "css3/version-1";
-@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";

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;

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

frameworks/compass/stylesheets/compass/css3/_box-shadow.scss

@@ -1,31 +1,8 @@
-// @doc off
+@import "box-shadow-v2";
-// 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.
 
+// 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;
+  @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.";
-  @if $inset {
+  @include single-box-shadow($color, $hoff, $voff, $blur, $spread, $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
-    );
-  }
 }
+

frameworks/compass/stylesheets/compass/css3/_columns.scss

@@ -1,55 +1,60 @@
 @import "shared";
 
 // Specify the number of columns
-@mixin column-count($n) {
+@mixin column-count($count) {
-  @include experimental(column-count, $n,
+  @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) {
+@mixin column-gap($width) {
-  @include experimental(column-gap, $u,
+  @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) {
+@mixin column-width($width) {
-  @include experimental(column-width, $u,
+  @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) {
+@mixin column-rule-width($width) {
-  @include experimental(rule-width, $w,
+  @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) {
+@mixin column-rule-style($style) {
-  @include experimental(rule-style, unquote($s),
+  @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($color) {
-@mixin column-rule-color($c) {
+  @include experimental(rule-color, $color,
-  @include experimental(rule-color, unquote($s),
     -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 column-rule(1px, solid, #c00)
-  @include experimental(column-rule, $w $s $c,
+//
+// 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
   );
 }

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
+//     // This yields a linear gradient starting at white passing
-// thru blue at 33% down and then to black
+//     // 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
+//     // This yields a linear gradient starting at white passing
-// thru blue at 33% down and then to black at 67% until the end
+//     // 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) {
+@mixin linear-gradient($color-stops, $start: false, $image: false) {
-  // Firefox's gradient api is nice.
+  @if $image {
-  // Webkit's gradient api sucks -- hence these backflips:
+    @if $start {
-  $background: unquote("");
+      @warn "The linear-gradient mixin is deprecated. Instead use: @include background-image(#{$image}, linear-gradient(#{$start}, #{$color-stops}))";
-  @if $image { $background : $image + unquote(", "); }
+    } @else {
-  $start: unquote($start);
+      @warn "The linear-gradient mixin is deprecated. Instead use: @include background-image(#{$image}, linear-gradient(#{$color-stops}))";
-  $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));
     }
-  @if $experimental-support-for-mozilla {
+  } @else {
-    background-image: #{$background}-moz-linear-gradient($start, $color-stops);
+    @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) {
+@mixin radial-gradient($color-stops, $center-position: false, $image: false) {
-  $center-position: unquote($center-position);
+  @if $image {
-  $end-pos: grad-end-position($color-stops, true);
+    @if $center-position {
-  $background: unquote("");
+      @warn "The radial-gradient mixin is deprecated. Instead use: @include background-image(#{$image}, radial-gradient(#{$center-position}, #{$color-stops}))";
-  @if $image { $background: $image + unquote(", "); }
+    } @else {
-  @if $experimental-support-for-webkit {
+      @warn "The radial-gradient mixin is deprecated. Instead use: @include background-image(#{$image}, radial-gradient(#{$color-stops}))";
-    background-image: #{$background}-webkit-gradient(radial, grad-point($center-position), 0, grad-point($center-position), $end-pos, grad-color-stops($color-stops));
     }
-  @if $experimental-support-for-mozilla {
+  } @else {
-    background-image: #{$background}-moz-radial-gradient($center-position, circle, $color-stops);
+    @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));
 }

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

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

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

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";

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";

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

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],
+        compiler_opts.merge!(:force => options[:force],
-                             :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,

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

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
 

lib/compass/sass_extensions/functions.rb

@@ -2,9 +2,9 @@ module Compass::SassExtensions::Functions
 end
 
 %w(
-  selectors enumerate urls display
+  selectors enumerate urls display if
-  inline_image image_size gradient_support
+  inline_image image_size constants gradient_support
-  font_files constants lists colors trig
+  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?

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

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)

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
+          parse_color_stop(arg)
-          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")
         else
-            raise Sass::SyntaxError, "Couldn't parse a color stop from: #{arg.value}"
+          raise Sass::SyntaxError, "Not a valid color stop: #{arg.class.name}: #{arg}"
-          end
-          ColorStop.new(color, stop)
-        else
-          raise Sass::SyntaxError, "Not a valid color stop: #{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

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

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)}')"
+    inline_image_string(data(real_path), compute_mime_type(path, mime_type))
-    Sass::Script::String.new(url)
   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

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

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

test/fixtures/stylesheets/compass/css/box.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 .hbox {
   display: -moz-box;
   display: -webkit-box;

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

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

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

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: -moz-radial-gradient(center center, #dddddd 0%, #aaaaaa 100px);
-  background-image: radial-gradient(center center, circle, #dddddd 0%, #aaaaaa 100%); }
+  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: -moz-radial-gradient(center center, #dddddd 0%, #aaaaaa 100px);
-  background-image: radial-gradient(center center, circle, #dddddd 0%, #aaaaaa 100%); }
+  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: -moz-radial-gradient(top center, #dddddd 0%, #aaaaaa 100px);
-  background-image: radial-gradient(top center, circle, #dddddd 0%, #aaaaaa 100%); }
+  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: -moz-radial-gradient(center center, #dddddd 0%, #aaaaaa 100px);
-  background-image: radial-gradient(center center, circle, #dddddd 0%, #aaaaaa 100%); }
+  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: -moz-radial-gradient(top center, #dddddd 0%, #aaaaaa 100px);
-  background-image: radial-gradient(top center, circle, #dddddd 0%, #aaaaaa 100%); }
+  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: -moz-radial-gradient(center center, #dddddd 20px, #aaaaaa 50px);
-  background-image: radial-gradient(center center, circle, #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: -moz-radial-gradient(center center, #dddddd 20%, #aaaaaa 50px);
-  background-image: radial-gradient(center center, circle, #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')"; }

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

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

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

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())")