compass 0.12.2 → 0.13.alpha.4

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

@@ -8,12 +8,12 @@
   text-shadow: 0px 0px 1px #cccccc; }
 
 .color-first-with-params {
-  text-shadow: 2px 2px 5px #cccccc, 2px 2px 5px 2px #cccccc;
-  text-shadow: 2px 2px 5px 2px #cccccc, 2px 2px 5px 2px #cccccc; }
+  text-shadow: 2px 2px 5px #cccccc;
+  text-shadow: 2px 2px 5px 2px #cccccc; }
 
 .color-last-with-params {
-  text-shadow: 2px 2px 5px #cccccc, 2px 2px 5px 2px #cccccc;
-  text-shadow: 2px 2px 5px 2px #cccccc, 2px 2px 5px 2px #cccccc; }
+  text-shadow: 2px 2px 5px #cccccc;
+  text-shadow: 2px 2px 5px 2px #cccccc; }
 
 .default-text-shadow {
   text-shadow: 0px 0px 1px #aaaaaa; }
@@ -25,5 +25,5 @@
   text-shadow: 4px 4px 10px #444444, 2px 2px 5px #222222; }
 
 .multiple-text-shadows-with-spread {
-  text-shadow: 4px 4px 10px #444444, 4px 4px 10px 1px #444444, 2px 2px 5px #222222, 2px 2px 5px 3px #222222;
-  text-shadow: 4px 4px 10px 1px #444444, 4px 4px 10px 1px #444444, 2px 2px 5px 3px #222222, 2px 2px 5px 3px #222222; }
+  text-shadow: 4px 4px 10px #444444, 2px 2px 5px #222222;
+  text-shadow: 4px 4px 10px 1px #444444, 2px 2px 5px 3px #222222; }

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

@@ -72,6 +72,12 @@
   -o-transition-property: opacity, -o-transform, left;
   transition-property: opacity, transform, left; }
 
+.default-transition {
+  -webkit-transition: all 1s;
+  -moz-transition: all 1s;
+  -o-transition: all 1s;
+  transition: all 1s; }
+
 .transition-timing {
   -webkit-transition-timing-function: ease-in;
   -moz-transition-timing-function: ease-in;

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

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

data/test/fixtures/stylesheets/compass/css/user-interface.css

@@ -1,4 +1,25 @@
 .user-select {
+  -moz-user-select: -moz-none;
   -webkit-user-select: none;
-  -moz-user-select: none;
+  -ms-user-select: none;
   user-select: none; }
+
+::-webkit-input-placeholder {
+  color: #bfbfbf;
+  font-style: italic; }
+:-moz-placeholder {
+  color: #bfbfbf;
+  font-style: italic; }
+:-ms-input-placeholder {
+  color: #bfbfbf;
+  font-style: italic; }
+
+.input-placeholder::-webkit-input-placeholder {
+  color: #bfbfbf;
+  font-style: italic; }
+.input-placeholder:-moz-placeholder {
+  color: #bfbfbf;
+  font-style: italic; }
+.input-placeholder:-ms-input-placeholder {
+  color: #bfbfbf;
+  font-style: italic; }

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

@@ -54,3 +54,18 @@ tfoot th, tfoot td {
   background-color: white; }
   tfoot th.even, tfoot th:nth-child(2n), tfoot td.even, tfoot td:nth-child(2n) {
     background-color: yellow; }
+
+p.ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  -ms-text-overflow: ellipsis;
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis; }
+
+p.ellipsis.moz {
+  white-space: nowrap;
+  overflow: hidden;
+  -ms-text-overflow: ellipsis;
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+  -moz-binding: url('/tmp/xml/ellipsis.xml#ellipsis'); }

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

@@ -1,45 +1,214 @@
-* html {
-  font-size: 87.5%; }
-
 html {
-  font-size: 14px;
-  line-height: 1.143em; }
+  font-size: 87.5%;
+  line-height: 1.14286em; }
 
 .small {
-  font-size: 0.857em;
-  line-height: 1.333em; }
+  font-size: 0.85714em;
+  line-height: 1.33333em; }
 
 .padded {
-  margin-top: 1.143em;
-  padding-top: 1.143em;
-  padding-bottom: 1.143em;
-  margin-bottom: 1.143em; }
+  margin-top: 1.14286em;
+  padding-top: 1.14286em;
+  padding-bottom: 1.14286em;
+  margin-bottom: 1.14286em; }
 
 .small-padded {
-  font-size: 0.857em;
-  line-height: 1.333em;
-  margin-top: 1.333em;
-  padding-top: 1.333em;
-  padding-bottom: 1.333em;
-  margin-bottom: 1.333em; }
+  font-size: 0.85714em;
+  line-height: 1.33333em;
+  margin-top: 1.33333em;
+  padding-top: 1.33333em;
+  padding-bottom: 1.33333em;
+  margin-bottom: 1.33333em; }
 
 .borders {
+  border-top-width: 0.07143em;
   border-top-style: solid;
-  border-top-width: 0.071em;
-  padding-top: 1.071em;
+  padding-top: 1.07143em;
+  border-bottom-width: 0.07143em;
   border-bottom-style: solid;
-  border-bottom-width: 0.071em;
-  padding-bottom: 1.071em; }
+  padding-bottom: 1.07143em; }
 
 .large-borders {
-  font-size: 1.714em;
+  font-size: 1.71429em;
   line-height: 2em;
-  border-top-style: solid;
   border-top-width: 0.25em;
-  padding-top: 0.417em;
-  border-bottom-style: solid;
+  border-top-style: solid;
+  padding-top: 0.41667em;
   border-bottom-width: 0.25em;
-  padding-bottom: 0.417em; }
+  border-bottom-style: solid;
+  padding-bottom: 0.41667em; }
 
 .reset {
-  line-height: 1.143em; }
+  line-height: 1.14286em; }
+
+/* New test using em output */
+html {
+  font-size: 112.5%;
+  line-height: 1.4em; }
+
+.container {
+  background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
+  background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
+  background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
+  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
+  -webkit-background-size: 100% 1.4em;
+  -moz-background-size: 100% 1.4em;
+  -o-background-size: 100% 1.4em;
+  background-size: 100% 1.4em;
+  background-position: left top; }
+
+p {
+  margin-top: 1.4em;
+  margin-bottom: 1.4em; }
+
+th,
+td {
+  padding-top: 0.35em;
+  padding-bottom: 0.35em; }
+
+.caption {
+  font-size: 0.72222em;
+  line-height: 1.55077em; }
+
+.spaced-out {
+  line-height: 2.1em; }
+
+blockquote {
+  margin-top: 1.4em;
+  margin-bottom: 1.4em;
+  padding: 0 1.4em; }
+
+.fig-quote > blockquote {
+  margin-bottom: 0.7em; }
+.fig-quote .source {
+  font-size: 0.72222em;
+  line-height: 1.93846em;
+  margin-bottom: 0.96923em; }
+
+.panel {
+  font-size: 0.88889em;
+  line-height: 1.575em;
+  border-width: 0.0625em;
+  border-style: solid;
+  border-color: #aaaaaa;
+  padding: 1.5125em; }
+
+/* New using rem output with pixel fallbacks */
+html {
+  font-size: 112.5%;
+  line-height: 1.4em; }
+
+.container {
+  background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
+  background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
+  background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
+  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
+  -webkit-background-size: 100% 1.4rem;
+  -moz-background-size: 100% 1.4rem;
+  -o-background-size: 100% 1.4rem;
+  background-size: 100% 1.4rem;
+  background-position: left top; }
+
+p {
+  margin-top: 25px;
+  margin-top: 1.4rem;
+  margin-bottom: 25px;
+  margin-bottom: 1.4rem; }
+
+th,
+td {
+  padding-top: 6px;
+  padding-top: 0.35rem;
+  padding-bottom: 6px;
+  padding-bottom: 0.35rem; }
+
+/* Incremental leading made easy! */
+.caption {
+  font-size: 15px;
+  font-size: 0.85rem;
+  line-height: 20px;
+  line-height: 1.12rem; }
+
+.spaced-out {
+  line-height: 38px;
+  line-height: 2.1rem; }
+
+blockquote {
+  margin-top: 25px;
+  margin-top: 1.4rem;
+  margin-bottom: 25px;
+  margin-bottom: 1.4rem;
+  padding: 0 1.4rem; }
+
+.fig-quote > blockquote {
+  margin-bottom: 13px;
+  margin-bottom: 0.7rem; }
+.fig-quote .source {
+  font-size: 15px;
+  font-size: 0.85rem;
+  line-height: 25px;
+  line-height: 1.4rem;
+  margin-bottom: 13px;
+  margin-bottom: 0.7rem; }
+
+.panel {
+  border-width: 1px;
+  border-width: 0.05556rem;
+  border-style: solid;
+  border-color: #aaaaaa;
+  padding: 24px;
+  padding: 1.34444rem; }
+
+/* New using px output */
+* html {
+  font-size: 112.5%; }
+
+html {
+  font-size: 18px;
+  line-height: 25px; }
+
+.container {
+  background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
+  background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
+  background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
+  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
+  -webkit-background-size: 100% 25px;
+  -moz-background-size: 100% 25px;
+  -o-background-size: 100% 25px;
+  background-size: 100% 25px;
+  background-position: left top; }
+
+p {
+  margin-top: 25px;
+  margin-bottom: 25px; }
+
+th,
+td {
+  padding-top: 6px;
+  padding-bottom: 6px; }
+
+/* Incremental leading made easy! */
+.caption {
+  font-size: 15px;
+  line-height: 20px; }
+
+.spaced-out {
+  line-height: 37px; }
+
+blockquote {
+  margin-top: 25px;
+  margin-bottom: 25px;
+  padding: 0 25px; }
+
+.fig-quote > blockquote {
+  margin-bottom: 12px; }
+.fig-quote .source {
+  font-size: 15px;
+  line-height: 25px;
+  margin-bottom: 12px; }
+
+.panel {
+  border-width: 1px;
+  border-style: solid;
+  border-color: #aaaaaa;
+  padding: 24px; }

data/test/fixtures/stylesheets/compass/sass/animation-with-legacy-ie.scss

@@ -0,0 +1,19 @@
+@import "compass/css3/animation";
+@import "compass/css3/opacity";
+
+$legacy-support-for-ie8: true;
+$legacy-support-for-ie7: true;
+$legacy-support-for-ie6: true;
+
+@include keyframes(test) {
+  0%, 100% {
+    @include opacity(1);
+  }
+  50% {
+    @include opacity(0);
+  }
+}
+
+.animation {
+  @include animation(test);
+}

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

@@ -0,0 +1,13 @@
+@import "compass/css3/animation";
+
+@include keyframes(test) {
+  0%, 100% {
+    background-color: red; }
+  50% {
+    background-color: blue;
+  }
+}
+
+.animation {
+  @include animation(test);
+}

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,14 +4,15 @@
 .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-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);            }
@@ -20,9 +21,9 @@
 .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-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');        }
+.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/flexbox.scss

@@ -0,0 +1,44 @@
+@import "compass/css3/flexbox";
+
+.flex {
+	@include display-flex;
+	@include flex-flow(column nowrap);
+	@include justify-content(space-between);
+	@include align-content(center);
+	@include align-items(flex-end);
+}
+
+.flex-item {
+	@include flex(1 1 auto);
+	@include align-self(flex-start);
+	@include order(2);
+}
+
+$flex-legacy-enabled: true;
+.flex-legacy {
+	@include display-flex;
+	@include flex-flow(row nowrap);
+	@include justify-content(flex-end);
+	@include align-content(flex-start);
+	@include align-items(baseline);
+}
+
+.flex-item-legacy {
+	@include flex(2 1 20em);
+	@include align-self(stretch);
+	@include order(3);
+}
+$flex-wrap-required: true;
+.flex-legacy {
+	@include display-flex;
+	@include flex-flow(row wrap);
+	@include justify-content(space-around);
+	@include align-content(stretch);
+	@include align-items(flex-start);
+}
+
+.flex-item-legacy {
+	@include flex(1 2 50%);
+	@include align-self(flex-start);
+	@include order(1);
+}

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))
@@ -96,3 +103,25 @@ $experimental-support-for-svg: false
 .ie-alpha-filter
   +filter-gradient(rgba(#fff, 1), rgba(#fff, 0))
 
+.linear-gradient-new
+  +background(linear-gradient(to bottom, #ff0000 0%, #88aa44 100%))
+
+$use-legacy-gradient-syntax: true
+ 
+.linear-gradient-old
+  +background(linear-gradient(top, #ff0000 0%, #88aa44 100%))
+ 
+// This setting is only important when we can't tell which syntax is being used.
+// * That is only ever true when the angle is specified in deg
+// * original webkit syntax does not support deg (see output)
+// * if $support-for-original-webkit-gradients and type-of($angle) == "number" : @WARN
+$use-legacy-gradient-syntax: false
+ 
+.linear-gradient-unknown-new
+  +background(linear-gradient(120deg, #ff0000 0%, #88aa44 100%))
+ 
+$use-legacy-gradient-syntax: true
+ 
+.linear-gradient-unknown-old
+  +background(linear-gradient(120deg, #ff0000 0%, #88aa44 100%))
+

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/transition.scss

@@ -12,6 +12,7 @@
 .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))); }
@@ -21,4 +22,3 @@
 .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

@@ -2,4 +2,16 @@
 
 .user-select {
   @include user-select(none);
-}
+}
+
+@include input-placeholder {
+  color: #bfbfbf;
+  font-style: italic;
+}
+
+.input-placeholder {
+  @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;
+}