compass 0.13.alpha.0 → 0.13.alpha.2

data/test/fixtures/stylesheets/compass/sass/background-clip.scss

@@ -2,7 +2,9 @@
 
 .background-clip { @include background-clip('border-box'); }
 
-.background-clip-khtml { 
+.background-clip-multiple { @include background-clip('border-box', padding-box, content-box); }
+
+.background-clip-khtml {
   $experimental-support-for-khtml:true;
-  @include background-clip('border-box');
+  @include background-clip(border-box);
 }

data/test/fixtures/stylesheets/compass/sass/background-origin.scss

@@ -0,0 +1,10 @@
+@import "compass/css3/background-origin";
+
+.background-origin { @include background-origin('border-box'); }
+
+.background-origin-multiple { @include background-origin('border-box', padding-box, content-box); }
+
+.background-origin-khtml {
+  $experimental-support-for-khtml:true;
+  @include background-origin(border-box);
+}

data/test/fixtures/stylesheets/compass/sass/background-size.scss

@@ -0,0 +1,12 @@
+@import "compass/css3/background-size";
+
+.background-size-default { @include background-size; }
+
+.background-size-single { @include background-size(50% 25%); }
+
+.background-size-multiple { @include background-size(4em 3em, $default-background-size, 50%); }
+
+.background-size-khtml {
+  $experimental-support-for-khtml:true;
+  @include background-size;
+}

data/test/fixtures/stylesheets/compass/sass/columns.scss

@@ -4,8 +4,26 @@
 .column-count       { @include column-count(5);               }
 .column-gap         { @include column-gap(10px);              }
 .column-width       { @include column-width(90px);            }
+.column-span        { @include column-span(all);              }
 .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);   }
+.column-break-before{ @include column-break(before, always);}
+.column-break-after { @include column-break(after, always); }
+.column-break-inside{ @include column-break(inside);        }
+.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);   }
+.column-break-before 			{ @include break-before(always);   }
+.column-break-after 			{ @include break-after(always);    }
+.column-break-inside 			{ @include break-inside();         }
+.column-break-before-shortcut 	{ @include column-break(before, always);}
+.column-break-after-shortcut 	{ @include column-break(after, always); }
+.column-break-inside-shortcut 	{ @include column-break(inside);        }

data/test/fixtures/stylesheets/compass/sass/filters.scss

@@ -0,0 +1,24 @@
+@import "compass/css3/filter";
+
+.blur {
+  @include filter(blur(5px));
+}
+.brightness {
+  @include filter(brightness(0.2));
+}
+// We can enable this test case when sass commit 38f3c4be8bc15c130c5b1cc5880c9131e1bcb08f is released.
+// .saturate {
+//   @include filter(saturate(50%));
+// }
+.hue-rotate {
+  @include filter(hue-rotate(20deg));
+}
+.contrast {
+  @include filter(contrast(150%));
+}
+.grayscale {
+  @include filter(grayscale(150%));
+}
+.sepia {
+  @include filter(sepia(150%));
+}

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

@@ -15,7 +15,7 @@ $experimental-support-for-svg: true
 
 .bg-linear-gradient-angle2-svg
   +background-image(linear-gradient(top left, blue, black))
-  
+
 .bg-all-gradient-types-with-simplification
   +background-with-css2-fallback(image-url("4x6.png"), linear-gradient(top left, #ddd, #aaa), radial-gradient(center center, #ddd, #aaa 100px), #ffcc00)
 
@@ -34,10 +34,17 @@ $experimental-support-for-svg: true
 .transparent-in-linear-gradient
   +background-image(#fff linear-gradient(top left, transparent, #aaa))
 
-.transparent-in-linear-gradient
-  +background-image(radial-gradient(center center, #ddd, transparent 100px))
+.currentColor-in-linear-gradient
+  +background-image(#fff linear-gradient(top left, transparent, currentColor))
+
+.rgba-in-linear-gradient
+  +background-image(#fff linear-gradient(top left, rgba(255,255,255,0.8), rgba(0,0,0,0.1)))
 
 .bg-radial-gradient
+  +background-image(radial-gradient(center center, #ddd, transparent 100px))
+
+.currentColor-in-radial-gradient
+  +background-image(radial-gradient(center center, currentColor, transparent 100px))
 
 .bg-linear-gradient-with-angle
   +background-image(linear-gradient(-45deg, #ddd, #aaa))

data/test/fixtures/stylesheets/compass/sass/hyphenation.scss

@@ -0,0 +1,11 @@
+@import "compass/css3/hyphenation";
+
+.word-break {
+	@include word-break(keep-all);
+}
+.hyphens {
+	@include hyphens(manual);
+}
+.hyphenate {
+	@include hyphenation;
+}

data/test/fixtures/stylesheets/compass/sass/replacement.scss

@@ -0,0 +1,22 @@
+@import "compass/typography/text/replacement";
+.basic {
+  @include replace-text("4x6.png");
+}
+.with-dimensions {
+  @include replace-text-with-dimensions("4x6.png");
+}
+.with-dimensions-inline {
+  @include replace-text-with-dimensions("4x6.png", $inline: true);
+}
+.with-position {
+  @include replace-text("4x6.png", 10px, top);
+}
+.with-arbitrary-url {
+  @include replace-text(url(http://google.com/logo.gif), 10px, top);
+}
+.with-inline-url {
+  @include replace-text(inline-image("4x6.png"), 10px, top);
+}
+.with-image-url {
+  @include replace-text(image-url("4x6.png"), 10px, top);
+}

data/test/fixtures/stylesheets/compass/sass/selection.scss

@@ -0,0 +1,13 @@
+@import "compass/css3/selection";
+
+@include selection {
+  background-color: #fe57a1;
+  color: #fff;
+}
+
+.hot-pink {
+  @include selection("&") {
+    background-color: #fe57a1;
+    color: #fff;
+  }
+}

data/test/fixtures/stylesheets/compass/sass/text_shadow.scss

@@ -1,6 +1,11 @@
 @import "compass/css3/text-shadow";
 
-.single-text-shadow { @include single-text-shadow;}
+.default-single-text-shadow { @include single-text-shadow;}
+.none { @include single-text-shadow(none);}
+.color-only { @include single-text-shadow(#ccc);}
+.color-first-with-params { @include single-text-shadow(#ccc, 2px, 2px, 5px, 2px);}
+.color-last-with-params { @include single-text-shadow(2px, 2px, 5px, 2px, #ccc);}
 .default-text-shadow { @include text-shadow;}
 .multiple-text-shadows-with-default { @include text-shadow(default, 2px 2px 5px #222);}
 .multiple-text-shadows { @include text-shadow(4px 4px 10px #444, 2px 2px 5px #222);}
+.multiple-text-shadows-with-spread { @include text-shadow(4px 4px 10px 1px #444, 2px 2px 5px 3px #222);}

data/test/fixtures/stylesheets/compass/sass/transition.scss

@@ -4,10 +4,21 @@
 .single-transition-with-delay     { @include single-transition(all, 0.6s, ease-out, 0.2s); }
 .transition-duration-string { @include transition-duration("0.2s, 0.5s, 0.2s"); }
 .transition-duration-list { @include transition-duration((0.2s, 0.5s, 0.2s)); }
+.multiple-transition-durations { @include transition-duration(0.2s, 0.5s, 0.2s); }
 .single-transform-transition-without-delay  { @include single-transition(transform, 0.6s, ease-out); }
 .single-transform-transition-with-delay     { @include single-transition(transform, 0.6s, ease-out, 0.2s); }
 .transform-transition { @include transition(transform 0.6s ease-out) }
 .multiple-transitions { @include transition(transform 0.6s ease-out, opacity 0.2s ease-in) }
 .transition-property { @include transition-property(transform); }
+.transition-properties { @include transition-property(transform, opacity, width, height, left, top); }
 .multiple-transition-properties { @include transition-property((opacity, transform, left)); }
 .default-transition { @include transition(); }
+.transition-timing { @include transition-timing-function(ease-in); }
+.transition-timings { @include transition-timing-function(ease-in, cubic-bezier(1,0,1,0)); }
+.transition-timings-list { @include transition-timing-function((ease-in, cubic-bezier(1,0,1,0))); }
+.transition-timings-string { @include transition-timing-function("ease-in, cubic-bezier(1,0,1,0)"); }
+.transition-delay { @include transition-delay(1s); }
+.transition-delays { @include transition-delay(1s, 2s, 3s); }
+.transition-delays-list { @include transition-delay((1s, 2s, 3s)); }
+.transition-delays-string { @include transition-delay("1s, 2s, 3s"); }
+.regression-912 { @include transition((background-color 0.5s ease-in 0s, width 0.5s ease-out 0s, height 0.5s ease-in 0s, top 0.5s ease-out 0s)); }

data/test/fixtures/stylesheets/compass/sass/units.scss

@@ -0,0 +1,45 @@
+$base-font-size: 16px;
+
+@import "compass/typography/units";
+
+.foo {
+	width: 600px;
+	height: 200px;
+}
+
+.foo .test {
+	/* 16px for margins should be 1em */
+	margin-top: convert-length(16px, em);
+
+	/* 16px for margins should be 2.66667% (relative to parent's width) */
+	margin-right: convert-length(16px, '%', $to-context: 600px);
+
+	/* 1.35em for margins should be 3.6% (relative to parent's width,
+	 * even for top and bottom margins) */
+	margin-bottom: convert-length(1.35em, '%', $to-context: 600px);
+
+	/* 16px for margins should be 2ex */
+	margin-left: convert-length(16px, ex);
+}
+
+.bar {
+	font-size: 18px;
+	width: 360px;
+}
+
+.bar .test {
+	/* 150% for line-height should be 27px */
+	line-height: convert-length(150%, px, 18px);
+
+	/* 1px should always be .0625rem for this page */
+	border-top: convert-length(1px, rem);
+
+	/* 2em for this element should be 9.525mm (relative to own font-size, as inherited) */
+	margin-top: convert-length(2em, mm, 18px);
+
+	/* 2px for margins should be .55556% (relative to parent's width) */
+	margin-right: convert-length(2px, '%', $to-context: 360px);
+
+	/* 1rem should always be 16px for this page, even when own font-size is 18px */
+	margin-bottom: convert-length(1rem, px);
+}

data/test/fixtures/stylesheets/compass/sass/user-interface.scss

@@ -4,9 +4,14 @@
   @include user-select(none);
 }
 
+@include input-placeholder {
+  color: #bfbfbf;
+  font-style: italic;
+}
+
 .input-placeholder {
-	@include input-placeholder {
-		color: #bfbfbf;
-		font-style: italic;
-	}
-}
+  @include input-placeholder("&") {
+    color: #bfbfbf;
+    font-style: italic;
+  }
+}

data/test/fixtures/stylesheets/compass/sass/utilities.scss

@@ -18,3 +18,13 @@ p.dark-with-args  { @include contrasted(#5F1210, green, blue); }
 
 
 @include alternating-rows-and-columns(red, white, blue);
+
+p.ellipsis {
+  @include ellipsis;
+}
+
+p.ellipsis.moz {
+  $legacy-support-for-mozilla: true;
+  $use-mozilla-ellipsis-binding: true;
+  @include ellipsis;
+}

data/test/fixtures/stylesheets/compass/sass/vertical_rhythm.scss

@@ -1,16 +1,217 @@
-@import "compass/typography/vertical_rhythm";
+// Test all functions and mixins, at least indirectly.
+// functions:
+// * rhythm
+// * lines-for-font-size
+//
+// mixins:
+// * establish-baseline
+// * output-rhythm
+// * debug-vertical-alignment
+// * adjust-font-size-to
+// * adjust-leading-to
+// * leader
+// * margin-leader
+// * padding-leader
+// * trailer
+// * margin-trailer
+// * padding-trailer
+// * rhythm
+// * rhythm-margins
+// * rhythm-padding
+// * apply-side-rhythm-border
+// * leading-border
+// * trailing-border
+// * rhythm-borders
+// * horizontal-borders (h-borders)
+//
+// deprecated mixins:
+// * reset-baseline
 
 $base-font-size: 14px;
 $base-line-height: 16px;
+@import "compass/typography/vertical_rhythm";
+
+@include establish-baseline;
+
+.small {
+	@include adjust-font-size-to(12px, 1);
+}
+
+.padded {
+	@include rhythm(1, 1, 1, 1);
+}
+
+.small-padded {
+	@include adjust-font-size-to(12px, 1);
+	@include rhythm(1, 1, 1, 1, 12px);
+}
+
+.borders {
+	@include h-borders(1px, 1);
+}
+
+.large-borders {
+	@include adjust-font-size-to(24px, 3);
+	@include h-borders(6px, 1, 24px);
+}
+
+.reset {
+	@include reset-baseline;
+}
+
+
+/* New test using em output */
+$base-font-size: 18px;
+$base-line-height: $base-font-size * 1.4;
+$rhythm-unit: em;
+$default-rhythm-border-style: solid #aaa;
+
+@import "compass/typography/vertical_rhythm";
 
 @include establish-baseline;
 
-.small { @include adjust-font-size-to(12px,1); }
+.container {
+	@include debug-vertical-alignment;
+}
+
+p {
+	@include margin-leader;
+	@include margin-trailer;
+}
+
+th,
+td {
+	@include rhythm-padding(.25);
+}
+
+// Incremental leading made easy!
+.caption {
+	@include adjust-font-size-to(13px, 4/5);
+}
+
+.spaced-out {
+	@include adjust-leading-to(1.5);
+}
+
+blockquote {
+	@include rhythm-margins;
+	padding: 0 rhythm();
+}
+
+.fig-quote {
+	> blockquote {
+		@include trailer(.5);
+	}
+	.source {
+		@include adjust-font-size-to(13px, auto);
+		@include trailer(.5, 13px);
+	}
+}
+
+.panel {
+	@include adjust-font-size-to(16px);
+	@include rhythm-borders($font-size: 16px);
+}
+
+/* New using rem output with pixel fallbacks */
+$base-font-size: 18px;
+$base-line-height: $base-font-size * 1.4;
+$rhythm-unit: rem;
+$default-rhythm-border-style: solid #aaa;
+@import "compass/typography/vertical_rhythm";
+
+@include establish-baseline;
+
+.container {
+	@include debug-vertical-alignment;
+}
+
+p {
+	@include margin-leader;
+	@include margin-trailer;
+}
+
+th,
+td {
+	@include rhythm-padding(.25);
+}
+
+/* Incremental leading made easy! */
+.caption {
+	@include adjust-font-size-to(.85rem, 4/5);
+}
+
+.spaced-out {
+	@include adjust-leading-to(1.5);
+}
+
+blockquote {
+	@include rhythm-margins;
+	padding: 0 rhythm();
+}
+
+.fig-quote {
+	> blockquote {
+		@include trailer(.5);
+	}
+	.source {
+		@include adjust-font-size-to(.85rem, auto);
+		@include trailer(.5);
+	}
+}
+
+.panel {
+	@include rhythm-borders;
+}
+
+/* New using px output */
+$base-font-size: 18px;
+$base-line-height: $base-font-size * 1.4;
+$rhythm-unit: px;
+$default-rhythm-border-style: solid #aaa;
+@import "compass/typography/vertical_rhythm";
+
+@include establish-baseline;
+
+.container {
+	@include debug-vertical-alignment;
+}
+
+p {
+	@include margin-leader;
+	@include margin-trailer;
+}
+
+th,
+td {
+	@include rhythm-padding(.25);
+}
+
+/* Incremental leading made easy! */
+.caption {
+	@include adjust-font-size-to(.85rem, 4/5);
+}
+
+.spaced-out {
+	@include adjust-leading-to(1.5);
+}
+
+blockquote {
+	@include rhythm-margins;
+	padding: 0 rhythm();
+}
 
-.padded { @include rhythm(1,1,1,1); }
-.small-padded { @include adjust-font-size-to(12px,1); @include rhythm(1,1,1,1,12px); }
+.fig-quote {
+	> blockquote {
+		@include trailer(.5);
+	}
+	.source {
+		@include adjust-font-size-to(.85rem, auto);
+		@include trailer(.5);
+	}
+}
 
-.borders { @include h-borders(1px,1); }
-.large-borders { @include adjust-font-size-to(24px,3); @include h-borders(6px,1,24px); }
+.panel {
+	@include rhythm-borders;
+}
 
-.reset { @include reset-baseline; }