compass 0.10.6 → 0.11.alpha.0

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

@@ -1,7 +1,7 @@
 .noprint, .no-print {
   display: none; }
 
-address.print-only, blockquote.print-only, center.print-only, dir.print-only, div.print-only, dd.print-only, dl.print-only, dt.print-only, fieldset.print-only, form.print-only, frameset.print-only, h1.print-only, h2.print-only, h3.print-only, h4.print-only, h5.print-only, h6.print-only, hr.print-only, isindex.print-only, menu.print-only, noframes.print-only, noscript.print-only, ol.print-only, p.print-only, pre.print-only, ul.print-only {
+address.print-only, blockquote.print-only, center.print-only, dir.print-only, div.print-only, dd.print-only, dl.print-only, dt.print-only, fieldset.print-only, form.print-only, frameset.print-only, h1.print-only, h2.print-only, h3.print-only, h4.print-only, h5.print-only, h6.print-only, hr.print-only, isindex.print-only, menu.print-only, noframes.print-only, noscript.print-only, ol.print-only, p.print-only, pre.print-only, ul.print-only, article.print-only, aside.print-only, dialog.print-only, figure.print-only, footer.print-only, header.print-only, hgroup.print-only, nav.print-only, section.print-only {
   display: block; }
 
 a.print-only, abbr.print-only, acronym.print-only, b.print-only, basefont.print-only, bdo.print-only, big.print-only, br.print-only, cite.print-only, code.print-only, dfn.print-only, em.print-only, font.print-only, i.print-only, img.print-only, input.print-only, kbd.print-only, label.print-only, q.print-only, s.print-only, samp.print-only, select.print-only, small.print-only, span.print-only, strike.print-only, strong.print-only, sub.print-only, sup.print-only, textarea.print-only, tt.print-only, u.print-only, var.print-only {

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

@@ -47,10 +47,10 @@ a img {
 
 body.registered a.registered-only, body.registered abbr.registered-only, body.registered acronym.registered-only, body.registered b.registered-only, body.registered basefont.registered-only, body.registered bdo.registered-only, body.registered big.registered-only, body.registered br.registered-only, body.registered cite.registered-only, body.registered code.registered-only, body.registered dfn.registered-only, body.registered em.registered-only, body.registered font.registered-only, body.registered i.registered-only, body.registered img.registered-only, body.registered input.registered-only, body.registered kbd.registered-only, body.registered label.registered-only, body.registered q.registered-only, body.registered s.registered-only, body.registered samp.registered-only, body.registered select.registered-only, body.registered small.registered-only, body.registered span.registered-only, body.registered strike.registered-only, body.registered strong.registered-only, body.registered sub.registered-only, body.registered sup.registered-only, body.registered textarea.registered-only, body.registered tt.registered-only, body.registered u.registered-only, body.registered var.registered-only {
   display: inline; }
-body.registered address.registered-only, body.registered blockquote.registered-only, body.registered center.registered-only, body.registered dir.registered-only, body.registered div.registered-only, body.registered dd.registered-only, body.registered dl.registered-only, body.registered dt.registered-only, body.registered fieldset.registered-only, body.registered form.registered-only, body.registered frameset.registered-only, body.registered h1.registered-only, body.registered h2.registered-only, body.registered h3.registered-only, body.registered h4.registered-only, body.registered h5.registered-only, body.registered h6.registered-only, body.registered hr.registered-only, body.registered isindex.registered-only, body.registered menu.registered-only, body.registered noframes.registered-only, body.registered noscript.registered-only, body.registered ol.registered-only, body.registered p.registered-only, body.registered pre.registered-only, body.registered ul.registered-only {
+body.registered address.registered-only, body.registered blockquote.registered-only, body.registered center.registered-only, body.registered dir.registered-only, body.registered div.registered-only, body.registered dd.registered-only, body.registered dl.registered-only, body.registered dt.registered-only, body.registered fieldset.registered-only, body.registered form.registered-only, body.registered frameset.registered-only, body.registered h1.registered-only, body.registered h2.registered-only, body.registered h3.registered-only, body.registered h4.registered-only, body.registered h5.registered-only, body.registered h6.registered-only, body.registered hr.registered-only, body.registered isindex.registered-only, body.registered menu.registered-only, body.registered noframes.registered-only, body.registered noscript.registered-only, body.registered ol.registered-only, body.registered p.registered-only, body.registered pre.registered-only, body.registered ul.registered-only, body.registered article.registered-only, body.registered aside.registered-only, body.registered dialog.registered-only, body.registered figure.registered-only, body.registered footer.registered-only, body.registered header.registered-only, body.registered hgroup.registered-only, body.registered nav.registered-only, body.registered section.registered-only {
   display: block; }
 
 body.unregistered a.unregistered-only, body.unregistered abbr.unregistered-only, body.unregistered acronym.unregistered-only, body.unregistered b.unregistered-only, body.unregistered basefont.unregistered-only, body.unregistered bdo.unregistered-only, body.unregistered big.unregistered-only, body.unregistered br.unregistered-only, body.unregistered cite.unregistered-only, body.unregistered code.unregistered-only, body.unregistered dfn.unregistered-only, body.unregistered em.unregistered-only, body.unregistered font.unregistered-only, body.unregistered i.unregistered-only, body.unregistered img.unregistered-only, body.unregistered input.unregistered-only, body.unregistered kbd.unregistered-only, body.unregistered label.unregistered-only, body.unregistered q.unregistered-only, body.unregistered s.unregistered-only, body.unregistered samp.unregistered-only, body.unregistered select.unregistered-only, body.unregistered small.unregistered-only, body.unregistered span.unregistered-only, body.unregistered strike.unregistered-only, body.unregistered strong.unregistered-only, body.unregistered sub.unregistered-only, body.unregistered sup.unregistered-only, body.unregistered textarea.unregistered-only, body.unregistered tt.unregistered-only, body.unregistered u.unregistered-only, body.unregistered var.unregistered-only {
   display: inline; }
-body.unregistered address.unregistered-only, body.unregistered blockquote.unregistered-only, body.unregistered center.unregistered-only, body.unregistered dir.unregistered-only, body.unregistered div.unregistered-only, body.unregistered dd.unregistered-only, body.unregistered dl.unregistered-only, body.unregistered dt.unregistered-only, body.unregistered fieldset.unregistered-only, body.unregistered form.unregistered-only, body.unregistered frameset.unregistered-only, body.unregistered h1.unregistered-only, body.unregistered h2.unregistered-only, body.unregistered h3.unregistered-only, body.unregistered h4.unregistered-only, body.unregistered h5.unregistered-only, body.unregistered h6.unregistered-only, body.unregistered hr.unregistered-only, body.unregistered isindex.unregistered-only, body.unregistered menu.unregistered-only, body.unregistered noframes.unregistered-only, body.unregistered noscript.unregistered-only, body.unregistered ol.unregistered-only, body.unregistered p.unregistered-only, body.unregistered pre.unregistered-only, body.unregistered ul.unregistered-only {
+body.unregistered address.unregistered-only, body.unregistered blockquote.unregistered-only, body.unregistered center.unregistered-only, body.unregistered dir.unregistered-only, body.unregistered div.unregistered-only, body.unregistered dd.unregistered-only, body.unregistered dl.unregistered-only, body.unregistered dt.unregistered-only, body.unregistered fieldset.unregistered-only, body.unregistered form.unregistered-only, body.unregistered frameset.unregistered-only, body.unregistered h1.unregistered-only, body.unregistered h2.unregistered-only, body.unregistered h3.unregistered-only, body.unregistered h4.unregistered-only, body.unregistered h5.unregistered-only, body.unregistered h6.unregistered-only, body.unregistered hr.unregistered-only, body.unregistered isindex.unregistered-only, body.unregistered menu.unregistered-only, body.unregistered noframes.unregistered-only, body.unregistered noscript.unregistered-only, body.unregistered ol.unregistered-only, body.unregistered p.unregistered-only, body.unregistered pre.unregistered-only, body.unregistered ul.unregistered-only, body.unregistered article.unregistered-only, body.unregistered aside.unregistered-only, body.unregistered dialog.unregistered-only, body.unregistered figure.unregistered-only, body.unregistered footer.unregistered-only, body.unregistered header.unregistered-only, body.unregistered hgroup.unregistered-only, body.unregistered nav.unregistered-only, body.unregistered section.unregistered-only {
   display: block; }

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

@@ -0,0 +1,66 @@
+.stretched-completely {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0; }
+
+.stretched-horizontally {
+  position: absolute;
+  left: 0;
+  right: 0; }
+
+.stretched-right {
+  position: absolute;
+  left: 0;
+  right: 50%; }
+
+.left-pane {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 50%; }
+
+.stretched-left {
+  position: absolute;
+  left: 50%;
+  right: 0; }
+
+.right-pane {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  right: 0; }
+
+.stretched-down {
+  position: absolute;
+  top: 0;
+  bottom: 50%; }
+
+.top-pane {
+  position: absolute;
+  top: 0;
+  bottom: 50%;
+  left: 0;
+  right: 0; }
+
+.stretched-up {
+  position: absolute;
+  top: 50%;
+  bottom: 0; }
+
+.bottom-pane {
+  position: absolute;
+  top: 50%;
+  bottom: 0;
+  left: 0;
+  right: 0; }
+
+.viewport {
+  position: absolute;
+  top: 10px;
+  bottom: 30px;
+  left: 40px;
+  right: 20px; }

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

@@ -0,0 +1,305 @@
+.apply-origin-2d {
+  -moz-transform-origin: 2px 5%;
+  -webkit-transform-origin: 2px 5%;
+  -o-transform-origin: 2px 5%;
+  transform-origin: 2px 5%; }
+
+.apply-origin-3d {
+  -webkit-transform-origin: 2px 5% 2in;
+  transform-origin: 2px 5% 2in; }
+
+.transform-origin-2d {
+  -moz-transform-origin: 100px 100px;
+  -webkit-transform-origin: 100px 100px;
+  -o-transform-origin: 100px 100px;
+  transform-origin: 100px 100px; }
+
+.transform-origin-3d {
+  -webkit-transform-origin: 100px 100px 100px;
+  transform-origin: 100px 100px 100px; }
+
+.transform-2d {
+  -moz-transform: rotateY(20deg);
+  -webkit-transform: rotateY(20deg);
+  -o-transform: rotateY(20deg);
+  transform: rotateY(20deg); }
+
+.transform-3d {
+  -webkit-transform: rotateZ(20deg);
+  transform: rotateZ(20deg); }
+
+.perspective {
+  -webkit-perspective: 500;
+  perspective: 500; }
+
+.perspective-origin {
+  -webkit-perspective-origin: 25% 25%;
+  perspective-origin: 25% 25%; }
+
+.transform-style {
+  -webkit-perspective-origin: preserves-3d;
+  perspective-origin: preserves-3d; }
+
+.backface-visibility {
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden; }
+
+.scale {
+  -moz-transform: scale(30px, 50px);
+  -webkit-transform: scale(30px, 50px);
+  -o-transform: scale(30px, 50px);
+  transform: scale(30px, 50px); }
+
+.scale-3d {
+  -webkit-transform: scale(30px, 50px);
+  transform: scale(30px, 50px); }
+
+.scale-with-perspective {
+  -moz-transform: perspective(500) scale(30px, 50px);
+  -webkit-transform: perspective(500) scale(30px, 50px);
+  -o-transform: perspective(500) scale(30px, 50px);
+  transform: perspective(500) scale(30px, 50px); }
+
+.scale-3d-with-perspective {
+  -webkit-transform: perspective(500) scale(30px, 50px);
+  transform: perspective(500) scale(30px, 50px); }
+
+.scale-x {
+  -moz-transform: scaleX(30px);
+  -webkit-transform: scaleX(30px);
+  -o-transform: scaleX(30px);
+  transform: scaleX(30px); }
+
+.scale-x-3d {
+  -webkit-transform: scaleX(30px);
+  transform: scaleX(30px); }
+
+.scale-x-with-perspective {
+  -moz-transform: perspective(500) scaleX(30px);
+  -webkit-transform: perspective(500) scaleX(30px);
+  -o-transform: perspective(500) scaleX(30px);
+  transform: perspective(500) scaleX(30px); }
+
+.scale-x-3d-with-perspective {
+  -webkit-transform: perspective(500) scaleX(30px);
+  transform: perspective(500) scaleX(30px); }
+
+.scale-y {
+  -moz-transform: scaleY(50px);
+  -webkit-transform: scaleY(50px);
+  -o-transform: scaleY(50px);
+  transform: scaleY(50px); }
+
+.scale-y-3d {
+  -webkit-transform: scaleY(50px);
+  transform: scaleY(50px); }
+
+.scale-y-with-perspective {
+  -moz-transform: perspective(500) scaleY(50px);
+  -webkit-transform: perspective(500) scaleY(50px);
+  -o-transform: perspective(500) scaleY(50px);
+  transform: perspective(500) scaleY(50px); }
+
+.scale-y-3d-with-perspective {
+  -webkit-transform: perspective(500) scaleY(50px);
+  transform: perspective(500) scaleY(50px); }
+
+.scale-z {
+  -webkit-transform: scaleZ(50px);
+  transform: scaleZ(50px); }
+
+.scale-z-with-perspective {
+  -webkit-transform: perspective(500) scaleZ(50px);
+  transform: perspective(500) scaleZ(50px); }
+
+.scale3d {
+  -webkit-transform: scale3d(30px, 50px, 100px);
+  transform: scale3d(30px, 50px, 100px); }
+
+.scaled3-with-perspective {
+  -webkit-transform: perspective(500) scale3d(30px, 50px, 100px);
+  transform: perspective(500) scale3d(30px, 50px, 100px); }
+
+.rotate {
+  -moz-transform: perspective(500) rotate(25deg);
+  -webkit-transform: perspective(500) rotate(25deg);
+  -o-transform: perspective(500) rotate(25deg);
+  transform: perspective(500) rotate(25deg); }
+
+.rotate-with-perspective {
+  -moz-transform: perspective(500) rotate(25deg);
+  -webkit-transform: perspective(500) rotate(25deg);
+  -o-transform: perspective(500) rotate(25deg);
+  transform: perspective(500) rotate(25deg); }
+
+.rotate-z {
+  -moz-transform: rotate(25deg);
+  -webkit-transform: rotate(25deg);
+  -o-transform: rotate(25deg);
+  transform: rotate(25deg); }
+
+.rotate-z-with-perspective {
+  -moz-transform: perspective(500) rotate(25deg);
+  -webkit-transform: perspective(500) rotate(25deg);
+  -o-transform: perspective(500) rotate(25deg);
+  transform: perspective(500) rotate(25deg); }
+
+.rotate-x {
+  -webkit-transform: rotateX(25deg);
+  transform: rotateX(25deg); }
+
+.rotate-x-with-perspective {
+  -webkit-transform: perspective(500) rotateX(25deg);
+  transform: perspective(500) rotateX(25deg); }
+
+.rotate-y {
+  -webkit-transform: rotateY(25deg);
+  transform: rotateY(25deg); }
+
+.rotate-y-with-perspective {
+  -webkit-transform: perspective(500) rotateY(25deg);
+  transform: perspective(500) rotateY(25deg); }
+
+.rotate-3d {
+  -webkit-transform: rotate3d(5, 2, 1, 75deg);
+  transform: rotate3d(5, 2, 1, 75deg); }
+
+.rotate-3d-with-perspective {
+  -webkit-transform: perspective(500) rotate3d(5, 2, 1, 75deg);
+  transform: perspective(500) rotate3d(5, 2, 1, 75deg); }
+
+.translate {
+  -moz-transform: translate(20px, 30%);
+  -webkit-transform: translate(20px, 30%);
+  -o-transform: translate(20px, 30%);
+  transform: translate(20px, 30%); }
+
+.translate-with-perspective {
+  -moz-transform: perspective(500) translate(20px, 30%);
+  -webkit-transform: perspective(500) translate(20px, 30%);
+  -o-transform: perspective(500) translate(20px, 30%);
+  transform: perspective(500) translate(20px, 30%); }
+
+.translate-3d {
+  -webkit-transform: translate(20px, 30%);
+  transform: translate(20px, 30%); }
+
+.translate-3d-with-perspective {
+  -webkit-transform: perspective(500) translate(20px, 30%);
+  transform: perspective(500) translate(20px, 30%); }
+
+.translate-x {
+  -moz-transform: translateX(30px);
+  -webkit-transform: translateX(30px);
+  -o-transform: translateX(30px);
+  transform: translateX(30px); }
+
+.translate-x-3d {
+  -webkit-transform: translateX(30px);
+  transform: translateX(30px); }
+
+.translate-x-with-perspective {
+  -moz-transform: perspective(500) translateX(30px);
+  -webkit-transform: perspective(500) translateX(30px);
+  -o-transform: perspective(500) translateX(30px);
+  transform: perspective(500) translateX(30px); }
+
+.translate-x-3d-with-perspective {
+  -webkit-transform: perspective(500) translateX(30px);
+  transform: perspective(500) translateX(30px); }
+
+.translate-y {
+  -moz-transform: translateY(30px);
+  -webkit-transform: translateY(30px);
+  -o-transform: translateY(30px);
+  transform: translateY(30px); }
+
+.translate-y-3d {
+  -webkit-transform: translateY(30px);
+  transform: translateY(30px); }
+
+.translate-y-with-perspective {
+  -moz-transform: perspective(500) translateY(30px);
+  -webkit-transform: perspective(500) translateY(30px);
+  -o-transform: perspective(500) translateY(30px);
+  transform: perspective(500) translateY(30px); }
+
+.translate-y-3d-with-perspective {
+  -webkit-transform: perspective(500) translateY(30px);
+  transform: perspective(500) translateY(30px); }
+
+.translate-z {
+  -webkit-transform: translateZ(30px);
+  transform: translateZ(30px); }
+
+.translate-z-with-perspective {
+  -webkit-transform: perspective(500) translateZ(30px);
+  transform: perspective(500) translateZ(30px); }
+
+.translate-3d {
+  -webkit-transform: translate3d(30px, 50px, 75px);
+  transform: translate3d(30px, 50px, 75px); }
+
+.translate-3d-with-perspective {
+  -webkit-transform: perspective(500) translate3d(30px, 50px, 75px);
+  transform: perspective(500) translate3d(30px, 50px, 75px); }
+
+.skew {
+  -moz-transform: skew(20deg, 50deg);
+  -webkit-transform: skew(20deg, 50deg);
+  -o-transform: skew(20deg, 50deg);
+  transform: skew(20deg, 50deg); }
+
+.skew-3d {
+  -webkit-transform: skew(20deg, 50deg);
+  transform: skew(20deg, 50deg); }
+
+.skew-x {
+  -moz-transform: skewX(20deg);
+  -webkit-transform: skewX(20deg);
+  -o-transform: skewX(20deg);
+  transform: skewX(20deg); }
+
+.skew-x-3d {
+  -webkit-transform: skewX(20deg);
+  transform: skewX(20deg); }
+
+.skew-y {
+  -moz-transform: skewY(20deg);
+  -webkit-transform: skewY(20deg);
+  -o-transform: skewY(20deg);
+  transform: skewY(20deg); }
+
+.skew-y-3d {
+  -webkit-transform: skewY(20deg);
+  transform: skewY(20deg); }
+
+.create-transform-2d {
+  -moz-transform: perspective(500) scale(20px, 20px) rotateX(25deg) rotateY(25deg) rotate3d(false 50px) translateX(50px) translateZ(50deg) skew(50deg, 50%);
+  -webkit-transform: perspective(500) scale(20px, 20px) rotateX(25deg) rotateY(25deg) rotate3d(false 50px) translateX(50px) translateZ(50deg) skew(50deg, 50%);
+  -o-transform: perspective(500) scale(20px, 20px) rotateX(25deg) rotateY(25deg) rotate3d(false 50px) translateX(50px) translateZ(50deg) skew(50deg, 50%);
+  transform: perspective(500) scale(20px, 20px) rotateX(25deg) rotateY(25deg) rotate3d(false 50px) translateX(50px) translateZ(50deg) skew(50deg, 50%);
+  -moz-transform-origin: 50%;
+  -webkit-transform-origin: 50%;
+  -o-transform-origin: 50%;
+  transform-origin: 50%; }
+
+.create-transform-3d {
+  -moz-transform: perspective(500) scale3d(20px, 20px, 20px) rotateX(25deg) rotateY(25deg) rotateZ(25deg) rotate3d(false 50px) translate3d(50px, 50px, 50deg) skew(50deg, 50%);
+  -webkit-transform: perspective(500) scale3d(20px, 20px, 20px) rotateX(25deg) rotateY(25deg) rotateZ(25deg) rotate3d(false 50px) translate3d(50px, 50px, 50deg) skew(50deg, 50%);
+  -o-transform: perspective(500) scale3d(20px, 20px, 20px) rotateX(25deg) rotateY(25deg) rotateZ(25deg) rotate3d(false 50px) translate3d(50px, 50px, 50deg) skew(50deg, 50%);
+  transform: perspective(500) scale3d(20px, 20px, 20px) rotateX(25deg) rotateY(25deg) rotateZ(25deg) rotate3d(false 50px) translate3d(50px, 50px, 50deg) skew(50deg, 50%);
+  -moz-transform-origin: 50% 50%;
+  -webkit-transform-origin: 50% 50%;
+  -o-transform-origin: 50% 50%;
+  transform-origin: 50% 50%; }
+
+.simple-transform {
+  -moz-transform:  scale(25px, 25px) rotateZ(25deg) translate(10px, 10px) skew(30deg, 30deg);
+  -webkit-transform:  scale(25px, 25px) rotateZ(25deg) translate(10px, 10px) skew(30deg, 30deg);
+  -o-transform:  scale(25px, 25px) rotateZ(25deg) translate(10px, 10px) skew(30deg, 30deg);
+  transform:  scale(25px, 25px) rotateZ(25deg) translate(10px, 10px) skew(30deg, 30deg);
+  -moz-transform-origin: 10% 10%;
+  -webkit-transform-origin: 10% 10%;
+  -o-transform-origin: 10% 10%;
+  transform-origin: 10% 10%; }

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

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

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

@@ -1,68 +1,200 @@
 @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%))
 
 .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))