transforms.js 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  1. module.exports = [
  2. {
  3. 'should': 'Should mirror transform : matrix',
  4. 'expected': 'div { transform: matrix(2, 0.1, 20.75, 2, 2, 2); }',
  5. 'input': 'div { transform: matrix(2, -0.1, -20.75, 2, -2, 2); }',
  6. 'reversable': true
  7. },
  8. {
  9. 'should': 'Should mirror transform (with no digits before dot): matrix',
  10. 'expected': 'div { transform: matrix(2, 0.1, 0.75, 2, 2, 2); }',
  11. 'input': 'div { transform: matrix(2, -0.1, -.75, 2, -2, 2); }',
  12. 'reversable': false
  13. },
  14. {
  15. 'should': 'Should mirror transform with calc: matrix',
  16. 'expected': 'div { transform: matrix( -moz-calc(((25%/2) * 10px)), calc(-1*(((25%/2) * 10px))), 20.75, 2, 2, 2 ); }',
  17. 'input': 'div { transform: matrix( -moz-calc(((25%/2) * 10px)), calc(((25%/2) * 10px)), -20.75, 2, -2, 2 ); }',
  18. 'reversable': false
  19. },
  20. {
  21. 'should': 'Should mirror transform : matrix3d',
  22. 'expected': 'div { transform:matrix3d(0.227114470162179, 0.127248412323519, 0, 0.000811630714323203, 0.113139853456515, 1.53997196559414, 0, 0.000596368270149729, 0, 0, 1, 0, -165, 67, 0, 1); }',
  23. 'input': 'div { transform:matrix3d(0.227114470162179, -0.127248412323519, 0, -0.000811630714323203, -0.113139853456515, 1.53997196559414, 0, 0.000596368270149729, 0, 0, 1, 0, 165, 67, 0, 1); }',
  24. 'reversable': true
  25. },
  26. {
  27. 'should': 'Should mirror transform (with no digits before dot): matrix3d',
  28. 'expected': 'div { transform:matrix3d(0.227114470162179, 0.127248412323519, 0, 0.000811630714323203, 0.113139853456515, 1.53997196559414, 0, 0.000596368270149729, 0, 0, 1, 0, -165, 67, 0, 1); }',
  29. 'input': 'div { transform:matrix3d(0.227114470162179, -.127248412323519, 0, -0.000811630714323203, -0.113139853456515, 1.53997196559414, 0, 0.000596368270149729, 0, 0, 1, 0, 165, 67, 0, 1); }',
  30. 'reversable': false
  31. },
  32. {
  33. 'should': 'Should mirror transform with calc : matrix3d',
  34. 'expected': 'div { transform:matrix3d(0.227114470162179, 0.127248412323519, 0, 0.000811630714323203, 0.113139853456515, 1.53997196559414, 0, 0.000596368270149729, 0, 0, 1, 0, calc(-1*(((25%/2) * 10px))), 67, 0, 1); }',
  35. 'input': 'div { transform:matrix3d(0.227114470162179, -0.127248412323519, 0, -0.000811630714323203, -0.113139853456515, 1.53997196559414, 0, 0.000596368270149729, 0, 0, 1, 0, calc(((25%/2) * 10px)), 67, 0, 1); }',
  36. 'reversable': false
  37. },
  38. {
  39. 'should': 'Should mirror transform : translate',
  40. 'expected': 'div { transform: translate(-10.75px); }',
  41. 'input': 'div { transform: translate(10.75px); }',
  42. 'reversable': true
  43. },
  44. {
  45. 'should': 'Should mirror transform (with no digits before dot): translate',
  46. 'expected': 'div { transform: translate(-0.75px); }',
  47. 'input': 'div { transform: translate(.75px); }',
  48. 'reversable': false
  49. },
  50. {
  51. 'should': 'Should mirror transform with calc: translate',
  52. 'expected': 'div { transform: translate(-moz-calc(-1*(((25%/2) * 10px)))); }',
  53. 'input': 'div { transform: translate(-moz-calc(((25%/2) * 10px))); }',
  54. 'reversable': false
  55. },
  56. {
  57. 'should': 'Should mirror transform : translateX',
  58. 'expected': 'div { transform: translateX(-50.25px); }',
  59. 'input': 'div { transform: translateX(50.25px); }',
  60. 'reversable': true
  61. },
  62. {
  63. 'should': 'Should mirror transform (with no digits before dot): translateX',
  64. 'expected': 'div { transform: translateX(-0.25px); }',
  65. 'input': 'div { transform: translateX(.25px); }',
  66. 'reversable': false
  67. },
  68. {
  69. 'should': 'Should mirror transform with calc : translateX',
  70. 'expected': 'div { transform: translateX(-ms-calc(-1*(((25%/2) * 10px))))); }',
  71. 'input': 'div { transform: translateX(-ms-calc(((25%/2) * 10px)))); }',
  72. 'reversable': false
  73. },
  74. {
  75. 'should': 'Should mirror transform : translate3d',
  76. 'expected': 'div { transform: translate3d(-12.75px, 50%, 3em); }',
  77. 'input': 'div { transform: translate3d(12.75px, 50%, 3em); }',
  78. 'reversable': true
  79. },
  80. {
  81. 'should': 'Should mirror transform (with no digits before dot): translate3d',
  82. 'expected': 'div { transform: translate3d(-0.75px, 50%, 3em); }',
  83. 'input': 'div { transform: translate3d(.75px, 50%, 3em); }',
  84. 'reversable': false
  85. },
  86. {
  87. 'should': 'Should mirror transform with calc: translate3d',
  88. 'expected': 'div { transform: translate3d(-webkit-calc(-1*(((25%/2) * 10px))))), 50%, calc(((25%/2) * 10px))))); }',
  89. 'input': 'div { transform: translate3d(-webkit-calc(((25%/2) * 10px)))), 50%, calc(((25%/2) * 10px))))); }',
  90. 'reversable': false
  91. },
  92. {
  93. 'should': 'Should mirror transform : rotate',
  94. 'expected': 'div { transform: rotate(-20.75deg); }',
  95. 'input': 'div { transform: rotate(20.75deg); }',
  96. 'reversable': true
  97. },
  98. {
  99. 'should': 'Should mirror transform (with no digits before dot): rotate',
  100. 'expected': 'div { transform: rotate(-0.75deg); }',
  101. 'input': 'div { transform: rotate(.75deg); }',
  102. 'reversable': false
  103. },
  104. {
  105. 'should': 'Should mirror transform with calc: rotate',
  106. 'expected': 'div { transform: rotate(calc(-1*(((25%/2) * 10deg)))); }',
  107. 'input': 'div { transform: rotate(calc(((25%/2) * 10deg))); }',
  108. 'reversable': false
  109. },
  110. {
  111. 'should': 'Should mirror transform : rotate3d',
  112. 'expected': 'div { transform: rotate3d(10, -20.15, 10, -45.14deg); }',
  113. 'input': 'div { transform: rotate3d(10, 20.15, 10, 45.14deg); }',
  114. 'reversable': true
  115. },
  116. {
  117. 'should': 'Should mirror transform (with no digits before dot): rotate3d',
  118. 'expected': 'div { transform: rotate3d(10, -20, 10, -0.14deg); }',
  119. 'input': 'div { transform: rotate3d(10, 20, 10, .14deg); }',
  120. 'reversable': false
  121. },
  122. {
  123. 'should': 'Should mirror transform with calc: rotate3d',
  124. 'expected': 'div { transform: rotate3d(10, -20.15, 10, calc(-1*(((25%/2) * 10deg)))); }',
  125. 'input': 'div { transform: rotate3d(10, 20.15, 10, calc(((25%/2) * 10deg))); }',
  126. 'reversable': false
  127. },
  128. {
  129. 'should': 'Should not mirror transform : rotateX',
  130. 'expected': 'div { transform: rotateX(45deg); }',
  131. 'input': 'div { transform: rotateX(45deg); }',
  132. 'reversable': false
  133. },
  134. {
  135. 'should': 'Should not mirror transform with calc: rotateX',
  136. 'expected': 'div { transform: rotateX(calc(((25%/2) * 10deg))); }',
  137. 'input': 'div { transform: rotateX(calc(((25%/2) * 10deg))); }',
  138. 'reversable': false
  139. },
  140. {
  141. 'should': 'Should not mirror transform : rotateY',
  142. 'expected': 'div { transform: rotateY(45deg); }',
  143. 'input': 'div { transform: rotateY(45deg); }',
  144. 'reversable': false
  145. },
  146. {
  147. 'should': 'Should not mirror transform with calc: rotateY',
  148. 'expected': 'div { transform: rotateY(calc(((25%/2) * 10deg))); }',
  149. 'input': 'div { transform: rotateY(calc(((25%/2) * 10deg))); }',
  150. 'reversable': false
  151. },
  152. {
  153. 'should': 'Should mirror transform : rotateZ',
  154. 'expected': 'div { transform: rotateZ(-45.75deg); }',
  155. 'input': 'div { transform: rotateZ(45.75deg); }',
  156. 'reversable': true
  157. },
  158. {
  159. 'should': 'Should mirror transform (with no digits before dot): rotateZ',
  160. 'expected': 'div { transform: rotateZ(-0.75deg); }',
  161. 'input': 'div { transform: rotateZ(.75deg); }',
  162. 'reversable': false
  163. },
  164. {
  165. 'should': 'Should mirror transform with calc: rotateZ',
  166. 'expected': 'div { transform: rotateZ(-ms-calc(-1*(((25%/2) * 10deg)))); }',
  167. 'input': 'div { transform: rotateZ(-ms-calc(((25%/2) * 10deg))); }',
  168. 'reversable': false
  169. },
  170. {
  171. 'should': 'Should mirror transform : skew',
  172. 'expected': 'div { transform: skew(-20.25rad,-30deg); }',
  173. 'input': 'div { transform: skew(20.25rad,30deg); }',
  174. 'reversable': true
  175. },
  176. {
  177. 'should': 'Should mirror transform (with no digits before dot): skew',
  178. 'expected': 'div { transform: skew(-0.25rad,-30deg); }',
  179. 'input': 'div { transform: skew(.25rad,30deg); }',
  180. 'reversable': false
  181. },
  182. {
  183. 'should': 'Should mirror transform with calc: skew',
  184. 'expected': 'div { transform: skew(calc(-1*(((25%/2) * 10rad))),calc(-1*(((25%/2) * 10deg)))); }',
  185. 'input': 'div { transform: skew(calc(((25%/2) * 10rad)),calc(((25%/2) * 10deg))); }',
  186. 'reversable': false
  187. },
  188. {
  189. 'should': 'Should mirror transform : skewX',
  190. 'expected': 'div { transform: skewX(-20.75rad); }',
  191. 'input': 'div { transform: skewX(20.75rad); }',
  192. 'reversable': true
  193. },
  194. {
  195. 'should': 'Should mirror transform (with no digits before dot): skewX',
  196. 'expected': 'div { transform: skewX(-0.75rad); }',
  197. 'input': 'div { transform: skewX(.75rad); }',
  198. 'reversable': false
  199. },
  200. {
  201. 'should': 'Should mirror transform with calc: skewX',
  202. 'expected': 'div { transform: skewX(-moz-calc(-1*(((25%/2) * 10rad)))); }',
  203. 'input': 'div { transform: skewX(-moz-calc(((25%/2) * 10rad))); }',
  204. 'reversable': false
  205. },
  206. {
  207. 'should': 'Should mirror transform : skewY',
  208. 'expected': 'div { transform: skewY(-10.75grad); }',
  209. 'input': 'div { transform: skewY(10.75grad); }',
  210. 'reversable': true
  211. },
  212. {
  213. 'should': 'Should mirror transform (with no digits before dot): skewY',
  214. 'expected': 'div { transform: skewY(-0.75grad); }',
  215. 'input': 'div { transform: skewY(.75grad); }',
  216. 'reversable': false
  217. },
  218. {
  219. 'should': 'Should mirror transform with calc: skewY',
  220. 'expected': 'div { transform: skewY(calc(-1*(((25%/2) * 10grad)))); }',
  221. 'input': 'div { transform: skewY(calc(((25%/2) * 10grad))); }',
  222. 'reversable': false
  223. },
  224. {
  225. 'should': 'Should mirror multiple transforms : translateX translateY Rotate',
  226. 'expected': 'div { transform: translateX(-50.25px) translateY(50.25px) rotate(-20.75deg); }',
  227. 'input': 'div { transform: translateX(50.25px) translateY(50.25px) rotate(20.75deg); }',
  228. 'reversable': true
  229. },
  230. {
  231. 'should': 'Should mirror multiple transforms with calc : translateX translateY Rotate',
  232. 'expected': 'div { transform: translateX(-ms-calc(-1*(((25%/2) * 10px)))) translateY(-moz-calc(((25%/2) * 10rad))) rotate(calc(-1*(((25%/2) * 10grad)))); }',
  233. 'input': 'div { transform: translateX(-ms-calc(((25%/2) * 10px))) translateY(-moz-calc(((25%/2) * 10rad))) rotate(calc(((25%/2) * 10grad))); }',
  234. 'reversable': false
  235. }
  236. ]