From 6a3d024cc1bcef5d13fe39e4c63a62400b1ab936 Mon Sep 17 00:00:00 2001
From: Richard Herrera <rich@doctyper.com>
Date: Sun, 26 Feb 2012 00:55:52 -0800
Subject: [PATCH] Updated with the following:

- Added stylesheet tests for prefixed transition properties.
- transition-property mixin now passes all tests.
- single-transition mixin now passes all tests.
- Updated rewrite to respect user specified browser support.
---
 .../stylesheets/compass/css3/_transition.scss | 95 ++++++++++++++-----
 .../stylesheets/compass/css/transition.css    | 24 ++++-
 .../stylesheets/compass/sass/transition.scss  |  5 +-
 3 files changed, 99 insertions(+), 25 deletions(-)

diff --git a/frameworks/compass/stylesheets/compass/css3/_transition.scss b/frameworks/compass/stylesheets/compass/css3/_transition.scss
index ee2cec54..c092e43c 100644
--- a/frameworks/compass/stylesheets/compass/css3/_transition.scss
+++ b/frameworks/compass/stylesheets/compass/css3/_transition.scss
@@ -31,7 +31,29 @@ $transitionable-prefixed-properties: transform, transform-origin !default;
 // * also accepts "all" or "none"
 
 @mixin transition-property($properties: $default-transition-property) {
-  @include prefix-friendly-transition(unquote($properties));
+  @if type-of($properties) == string { $properties: unquote($properties); }
+
+  $match: false;
+
+  @each $prefixed-property in $transitionable-prefixed-properties {
+    @if $properties == $prefixed-property {
+      $match: true;
+    }
+  }
+
+  @if $match {
+    @if $experimental-support-for-webkit    { -webkit-transition-property: -webkit-#{$properties}; }
+    @if $experimental-support-for-mozilla   { -moz-transition-property: -moz-#{$properties}; }
+    @if $experimental-support-for-microsoft { -ms-transition-property: -ms-#{$properties}; }
+    @if $experimental-support-for-opera     { -o-transition-property: -o-#{$properties}; }
+    @include experimental(transition-property, $properties,
+      not -moz, not -webkit, not -o, not -ms, not -khtml, official
+    );
+  } @else {
+    @include experimental(transition-property, $properties,
+      -moz, -webkit, -o, -ms, not -khtml, official
+    );
+  }
 }
 
 // One or more durations in seconds
@@ -78,29 +100,56 @@ $transitionable-prefixed-properties: transform, transform-origin !default;
   $function: $default-transition-function,
   $delay: $default-transition-delay
 ) {
+  $match: false;
+
+  @each $prefixed-property in $transitionable-prefixed-properties {
+    @if $property == $prefixed-property {
+      $match: true;
+    }
+  }
+
   @if $property and $duration and $function {
     // Shorthand (see https://github.com/chriseppstein/compass/issues/585)
     @if $delay {
-      -webkit-transition: $property $duration $function;
-      -webkit-transition-delay: $delay;
-      @include experimental(transition, $property $duration $function $delay,
-        -moz,
-        not -webkit,
-        -o,
-        -ms,
-        not -khtml,
-        official
-      );
+      @if $match {
+        @if $experimental-support-for-webkit    { -webkit-transition: -webkit-#{$property} $duration $function; -webkit-transition-delay: $delay; }
+        @if $experimental-support-for-mozilla   { -moz-transition: -moz-#{$property} $duration $function $delay; }
+        @if $experimental-support-for-microsoft { -ms-transition: -ms-#{$property} $duration $function $delay; }
+        @if $experimental-support-for-opera     { -o-transition: -o-#{$property} $duration $function $delay; }
+        @include experimental(transition, $property $duration $function $delay,
+          not -moz, not -webkit, not -o, not -ms, not -khtml, official
+        );
+      } @else {
+        @if $experimental-support-for-webkit    { -webkit-transition: $property $duration $function; -webkit-transition-delay: $delay; }
+        @include experimental(transition, $property $duration $function $delay,
+          -moz,
+          not -webkit,
+          -o,
+          -ms,
+          not -khtml,
+          official
+        );
+      }
     }
     @else {
-      @include experimental(transition, $property $duration $function,
-        -moz,
-        -webkit,
-        -o,
-        -ms,
-        not -khtml,
-        official
-      );
+      @if $match {
+        @if $experimental-support-for-webkit    { -webkit-transition: -webkit-#{$property} $duration $function; }
+        @if $experimental-support-for-mozilla   { -moz-transition: -moz-#{$property} $duration $function; }
+        @if $experimental-support-for-microsoft { -ms-transition: -ms-#{$property} $duration $function; }
+        @if $experimental-support-for-opera     { -o-transition: -o-#{$property} $duration $function; }
+        @include experimental(transition, $property $duration $function,
+          not -moz, not -webkit, not -o, not -ms, not -khtml, official
+        );
+      } @else {
+        @include experimental(transition, $property $duration $function,
+          -moz,
+          -webkit,
+          -o,
+          -ms,
+          not -khtml,
+          official
+        );
+      }
     }
   }
   @else {
@@ -198,10 +247,10 @@ $transitionable-prefixed-properties: transform, transform-origin !default;
     }
   }
 
-  -webkit-transition: $webkit-transition;
-  -moz-transition: $moz-transition;
-  -ms-transition: $ms-transition;
-  -o-transition: $o-transition;
+  @if $experimental-support-for-webkit    { -webkit-transition: $webkit-transition; }
+  @if $experimental-support-for-mozilla   { -moz-transition: $moz-transition; }
+  @if $experimental-support-for-microsoft { -ms-transition: $ms-transition; }
+  @if $experimental-support-for-opera     { -o-transition: $o-transition; }
 
   @include experimental(transition, $transition,
     not -moz, not -webkit, not -o, not -ms, not -khtml, official
diff --git a/test/fixtures/stylesheets/compass/css/transition.css b/test/fixtures/stylesheets/compass/css/transition.css
index 1d34c025..c7c939b1 100644
--- a/test/fixtures/stylesheets/compass/css/transition.css
+++ b/test/fixtures/stylesheets/compass/css/transition.css
@@ -25,4 +25,26 @@
   -moz-transition-duration: 0.2s, 0.5s, 0.2s;
   -ms-transition-duration: 0.2s, 0.5s, 0.2s;
   -o-transition-duration: 0.2s, 0.5s, 0.2s;
-  transition-duration: 0.2s, 0.5s, 0.2s; }
\ No newline at end of file
+  transition-duration: 0.2s, 0.5s, 0.2s; }
+
+.single-transform-transition-without-delay {
+  -webkit-transition: -webkit-transform 0.6s ease-out;
+  -moz-transition: -moz-transform 0.6s ease-out;
+  -ms-transition: -ms-transform 0.6s ease-out;
+  -o-transition: -o-transform 0.6s ease-out;
+  transition: transform 0.6s ease-out; }
+
+.single-transform-transition-with-delay {
+  -webkit-transition: -webkit-transform 0.6s ease-out;
+  -webkit-transition-delay: 0.2s;
+  -moz-transition: -moz-transform 0.6s ease-out 0.2s;
+  -ms-transition: -ms-transform 0.6s ease-out 0.2s;
+  -o-transition: -o-transform 0.6s ease-out 0.2s;
+  transition: transform 0.6s ease-out 0.2s; }
+
+.transition-property {
+  -webkit-transition-property: -webkit-transform;
+  -moz-transition-property: -moz-transform;
+  -ms-transition-property: -ms-transform;
+  -o-transition-property: -o-transform;
+  transition-property: transform; }
diff --git a/test/fixtures/stylesheets/compass/sass/transition.scss b/test/fixtures/stylesheets/compass/sass/transition.scss
index 9fa9edde..706ef113 100644
--- a/test/fixtures/stylesheets/compass/sass/transition.scss
+++ b/test/fixtures/stylesheets/compass/sass/transition.scss
@@ -3,4 +3,7 @@
 .single-transition-without-delay  { @include single-transition(all, 0.6s, ease-out); }
 .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)); }
\ No newline at end of file
+.transition-duration-list { @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); }
+.transition-property { @include transition-property(transform); }