From a86a94e4c222c29a2cb33b474078e25b28aa9576 Mon Sep 17 00:00:00 2001
From: Chris Eppstein <chris@eppsteins.net>
Date: Sun, 5 Dec 2010 21:02:16 -0800
Subject: [PATCH] Add support for the -ms prefix in 2D transforms. Closes
 GH-224.

---
 .../stylesheets/compass/css3/_transform.scss  |  4 +--
 .../stylesheets/compass/css/transform.css     | 28 +++++++++++++++++++
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/frameworks/compass/stylesheets/compass/css3/_transform.scss b/frameworks/compass/stylesheets/compass/css3/_transform.scss
index e6342229..064f7ce3 100644
--- a/frameworks/compass/stylesheets/compass/css3/_transform.scss
+++ b/frameworks/compass/stylesheets/compass/css3/_transform.scss
@@ -94,7 +94,7 @@ $default-skew-y      : 5deg                  !default;
     );
   } @else {
     @include experimental(transform-origin, $origin,
-      -moz, -webkit, -o, not -ms, not -khtml, official
+      -moz, -webkit, -o, -ms, not -khtml, official
     );
   }
 }
@@ -137,7 +137,7 @@ $default-skew-y      : 5deg                  !default;
     );
   } @else {
     @include experimental(transform, $transform,
-      -moz, -webkit, -o, not -ms, not -khtml, official
+      -moz, -webkit, -o, -ms, not -khtml, official
     );
   }
 }
diff --git a/test/fixtures/stylesheets/compass/css/transform.css b/test/fixtures/stylesheets/compass/css/transform.css
index 09788ee2..73ba64ec 100644
--- a/test/fixtures/stylesheets/compass/css/transform.css
+++ b/test/fixtures/stylesheets/compass/css/transform.css
@@ -2,6 +2,7 @@
   -moz-transform-origin: 2px 5%;
   -webkit-transform-origin: 2px 5%;
   -o-transform-origin: 2px 5%;
+  -ms-transform-origin: 2px 5%;
   transform-origin: 2px 5%; }
 
 .apply-origin-3d {
@@ -12,6 +13,7 @@
   -moz-transform-origin: 100px 100px;
   -webkit-transform-origin: 100px 100px;
   -o-transform-origin: 100px 100px;
+  -ms-transform-origin: 100px 100px;
   transform-origin: 100px 100px; }
 
 .transform-origin-3d {
@@ -22,6 +24,7 @@
   -moz-transform: rotateY(20deg);
   -webkit-transform: rotateY(20deg);
   -o-transform: rotateY(20deg);
+  -ms-transform: rotateY(20deg);
   transform: rotateY(20deg); }
 
 .transform-3d {
@@ -48,6 +51,7 @@
   -moz-transform: scale(30px, 50px);
   -webkit-transform: scale(30px, 50px);
   -o-transform: scale(30px, 50px);
+  -ms-transform: scale(30px, 50px);
   transform: scale(30px, 50px); }
 
 .scale-3d {
@@ -58,6 +62,7 @@
   -moz-transform: perspective(500) scale(30px, 50px);
   -webkit-transform: perspective(500) scale(30px, 50px);
   -o-transform: perspective(500) scale(30px, 50px);
+  -ms-transform: perspective(500) scale(30px, 50px);
   transform: perspective(500) scale(30px, 50px); }
 
 .scale-3d-with-perspective {
@@ -68,6 +73,7 @@
   -moz-transform: scaleX(30px);
   -webkit-transform: scaleX(30px);
   -o-transform: scaleX(30px);
+  -ms-transform: scaleX(30px);
   transform: scaleX(30px); }
 
 .scale-x-3d {
@@ -78,6 +84,7 @@
   -moz-transform: perspective(500) scaleX(30px);
   -webkit-transform: perspective(500) scaleX(30px);
   -o-transform: perspective(500) scaleX(30px);
+  -ms-transform: perspective(500) scaleX(30px);
   transform: perspective(500) scaleX(30px); }
 
 .scale-x-3d-with-perspective {
@@ -88,6 +95,7 @@
   -moz-transform: scaleY(50px);
   -webkit-transform: scaleY(50px);
   -o-transform: scaleY(50px);
+  -ms-transform: scaleY(50px);
   transform: scaleY(50px); }
 
 .scale-y-3d {
@@ -98,6 +106,7 @@
   -moz-transform: perspective(500) scaleY(50px);
   -webkit-transform: perspective(500) scaleY(50px);
   -o-transform: perspective(500) scaleY(50px);
+  -ms-transform: perspective(500) scaleY(50px);
   transform: perspective(500) scaleY(50px); }
 
 .scale-y-3d-with-perspective {
@@ -124,24 +133,28 @@
   -moz-transform: perspective(500) rotate(25deg);
   -webkit-transform: perspective(500) rotate(25deg);
   -o-transform: perspective(500) rotate(25deg);
+  -ms-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);
+  -ms-transform: perspective(500) rotate(25deg);
   transform: perspective(500) rotate(25deg); }
 
 .rotate-z {
   -moz-transform: rotate(25deg);
   -webkit-transform: rotate(25deg);
   -o-transform: rotate(25deg);
+  -ms-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);
+  -ms-transform: perspective(500) rotate(25deg);
   transform: perspective(500) rotate(25deg); }
 
 .rotate-x {
@@ -172,12 +185,14 @@
   -moz-transform: translate(20px, 30%);
   -webkit-transform: translate(20px, 30%);
   -o-transform: translate(20px, 30%);
+  -ms-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%);
+  -ms-transform: perspective(500) translate(20px, 30%);
   transform: perspective(500) translate(20px, 30%); }
 
 .translate-3d {
@@ -192,6 +207,7 @@
   -moz-transform: translateX(30px);
   -webkit-transform: translateX(30px);
   -o-transform: translateX(30px);
+  -ms-transform: translateX(30px);
   transform: translateX(30px); }
 
 .translate-x-3d {
@@ -202,6 +218,7 @@
   -moz-transform: perspective(500) translateX(30px);
   -webkit-transform: perspective(500) translateX(30px);
   -o-transform: perspective(500) translateX(30px);
+  -ms-transform: perspective(500) translateX(30px);
   transform: perspective(500) translateX(30px); }
 
 .translate-x-3d-with-perspective {
@@ -212,6 +229,7 @@
   -moz-transform: translateY(30px);
   -webkit-transform: translateY(30px);
   -o-transform: translateY(30px);
+  -ms-transform: translateY(30px);
   transform: translateY(30px); }
 
 .translate-y-3d {
@@ -222,6 +240,7 @@
   -moz-transform: perspective(500) translateY(30px);
   -webkit-transform: perspective(500) translateY(30px);
   -o-transform: perspective(500) translateY(30px);
+  -ms-transform: perspective(500) translateY(30px);
   transform: perspective(500) translateY(30px); }
 
 .translate-y-3d-with-perspective {
@@ -248,6 +267,7 @@
   -moz-transform: skew(20deg, 50deg);
   -webkit-transform: skew(20deg, 50deg);
   -o-transform: skew(20deg, 50deg);
+  -ms-transform: skew(20deg, 50deg);
   transform: skew(20deg, 50deg); }
 
 .skew-3d {
@@ -258,6 +278,7 @@
   -moz-transform: skewX(20deg);
   -webkit-transform: skewX(20deg);
   -o-transform: skewX(20deg);
+  -ms-transform: skewX(20deg);
   transform: skewX(20deg); }
 
 .skew-x-3d {
@@ -268,6 +289,7 @@
   -moz-transform: skewY(20deg);
   -webkit-transform: skewY(20deg);
   -o-transform: skewY(20deg);
+  -ms-transform: skewY(20deg);
   transform: skewY(20deg); }
 
 .skew-y-3d {
@@ -278,28 +300,34 @@
   -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%);
+  -ms-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%;
+  -ms-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%);
+  -ms-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%;
+  -ms-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);
+  -ms-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%;
+  -ms-transform-origin: 10% 10%;
   transform-origin: 10% 10%; }