Flip perspective-origin declarations

MohammadYounes · May 21, 2020 · 23c0b28 · 23c0b28
1 parent a2f9748
commit 23c0b28
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 2 deletions.
diff --git a/lib/plugin.js b/lib/plugin.js
@@ -292,8 +292,8 @@ module.exports = {
       }
     },
     {
-      'name': 'transform origin',
-      'expr': /transform-origin/ig,
+      'name': 'transform and perspective origin',
+      'expr': /(?:transform|perspective)-origin/ig,
       'cache': null,
       'flip': function (value, context) {
         if (value === '0') {

diff --git a/test/data/perspective-origin.js b/test/data/perspective-origin.js
@@ -0,0 +1,92 @@
+module.exports = [
+  {
+    'should': 'Should mirror (x-offset: 0 means 0%)',
+    'expected': 'div { perspective-origin:100%; }',
+    'input': 'div { perspective-origin:0; }',
+    'reversable': false
+  },
+  {
+    'should': 'Should mirror (x-offset)',
+    'expected': 'div { perspective-origin:90.25%; }',
+    'input': 'div { perspective-origin:9.75%; }',
+    'reversable': true
+  },
+  {
+    'should': 'Should mirror calc (x-offset)',
+    'expected': 'div { perspective-origin: -moz-calc(100% - (((25%/2) * 10px))); }',
+    'input': 'div { perspective-origin: -moz-calc(((25%/2) * 10px)); }',
+    'reversable': false
+  },
+  {
+    'should': 'Should not mirror (x-offset: not percent, not calc)',
+    'expected': 'div { perspective-origin:10.75px; }',
+    'input': 'div { perspective-origin:10.75px; }',
+    'reversable': false
+  },
+  {
+    'should': 'Should mirror (offset-keyword)',
+    'expected': 'div { perspective-origin:right; }',
+    'input': 'div { perspective-origin:left; }',
+    'reversable': true
+  },
+  {
+    'should': 'Should mirror (x-offset y-offset: 0 means 0%)',
+    'expected': 'div { perspective-origin:100% 0; }',
+    'input': 'div { perspective-origin:0 0; }',
+    'reversable': false
+  },
+  {
+    'should': 'Should mirror with y being calc (x-offset y-offset: 0 means 0%)',
+    'expected': 'div { perspective-origin:100% -webkit-calc(15% * (3/2)); }',
+    'input': 'div { perspective-origin:0 -webkit-calc(15% * (3/2)); }',
+    'reversable': false
+  },
+  {
+    'should': 'Should mirror percent (x-offset y-offset)',
+    'expected': 'div { perspective-origin:30.25% 10%; }',
+    'input': 'div { perspective-origin:69.75% 10%; }',
+    'reversable': true
+  },
+  {
+    'should': 'Should mirror with x being calc (x-offset y-offset)',
+    'expected': 'div { perspective-origin: -webkit-calc(100% - (15% * (3/2))) 30.25%; }',
+    'input': 'div { perspective-origin: -webkit-calc(15% * (3/2)) 30.25%; }',
+    'reversable': false
+  },
+  {
+    'should': 'Should mirror with y being calc (x-offset y-offset)',
+    'expected': 'div { perspective-origin:30.25% calc(15% * (3/2)); }',
+    'input': 'div { perspective-origin:69.75% calc(15% * (3/2)); }',
+    'reversable': true
+  },
+  {
+    'should': 'Should mirror (x-offset-keyword y-offset)',
+    'expected': 'div { perspective-origin:right 70%; }',
+    'input': 'div { perspective-origin:left 70%; }',
+    'reversable': true
+  },
+  {
+    'should': 'Should mirror with calc (x-offset-keyword y-offset)',
+    'expected': 'div { perspective-origin:right -moz-calc(((140%/2))); }',
+    'input': 'div { perspective-origin:left -moz-calc(((140%/2))); }',
+    'reversable': true
+  },
+  {
+    'should': 'Should mirror (x-offset-keyword y-offset-keyword)',
+    'expected': 'div { perspective-origin:right top; }',
+    'input': 'div { perspective-origin:left top; }',
+    'reversable': true
+  },
+  {
+    'should': 'Should mirror (x-offset-keyword y-offset-keyword)',
+    'expected': 'div { perspective-origin:left bottom; }',
+    'input': 'div { perspective-origin:right bottom; }',
+    'reversable': true
+  },
+  {
+    'should': 'Should mirror (y-offset-keyword x-offset-keyword)',
+    'expected': 'div { perspective-origin:bottom left; }',
+    'input': 'div { perspective-origin:bottom right; }',
+    'reversable': true
+  }
+]
diff --git a/test/test.js b/test/test.js
@@ -11,6 +11,7 @@ var tests = {
   '# Values (N Value Syntax):': require('./data/values-n-syntax.js'),
   '# Transforms:': require('./data/transforms.js'),
   '# Transform Origin:': require('./data/transform-origin.js'),
+  '# Perspective Origin:': require('./data/perspective-origin.js'),
   '# RTLCSS (Options):': require('./data/rtlcss-options.js'),
   '# RTLCSS (Directives):': require('./data/rtlcss-directives.js'),
   '# RTLCSS (String Map):': require('./data/rtlcss-stringMap.js'),