transform-origin.js 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. module.exports = [
  2. {
  3. 'should': 'Should mirror (x-offset: 0 means 0%)',
  4. 'expected': 'div { transform-origin:100%; }',
  5. 'input': 'div { transform-origin:0; }',
  6. 'reversable': false
  7. },
  8. {
  9. 'should': 'Should mirror (x-offset)',
  10. 'expected': 'div { transform-origin:90.25%; }',
  11. 'input': 'div { transform-origin:9.75%; }',
  12. 'reversable': true
  13. },
  14. {
  15. 'should': 'Should mirror calc (x-offset)',
  16. 'expected': 'div { transform-origin: -moz-calc(100% - (((25%/2) * 10px))); }',
  17. 'input': 'div { transform-origin: -moz-calc(((25%/2) * 10px)); }',
  18. 'reversable': false
  19. },
  20. {
  21. 'should': 'Should not mirror (x-offset: not percent, not calc)',
  22. 'expected': 'div { transform-origin:10.75px; }',
  23. 'input': 'div { transform-origin:10.75px; }',
  24. 'reversable': false
  25. },
  26. {
  27. 'should': 'Should mirror (offset-keyword)',
  28. 'expected': 'div { transform-origin:right; }',
  29. 'input': 'div { transform-origin:left; }',
  30. 'reversable': true
  31. },
  32. {
  33. 'should': 'Should mirror (x-offset y-offset: 0 means 0%)',
  34. 'expected': 'div { transform-origin:100% 0; }',
  35. 'input': 'div { transform-origin:0 0; }',
  36. 'reversable': false
  37. },
  38. {
  39. 'should': 'Should mirror with y being calc (x-offset y-offset: 0 means 0%)',
  40. 'expected': 'div { transform-origin:100% -webkit-calc(15% * (3/2)); }',
  41. 'input': 'div { transform-origin:0 -webkit-calc(15% * (3/2)); }',
  42. 'reversable': false
  43. },
  44. {
  45. 'should': 'Should mirror percent (x-offset y-offset)',
  46. 'expected': 'div { transform-origin:30.25% 10%; }',
  47. 'input': 'div { transform-origin:69.75% 10%; }',
  48. 'reversable': true
  49. },
  50. {
  51. 'should': 'Should mirror with x being calc (x-offset y-offset)',
  52. 'expected': 'div { transform-origin: -webkit-calc(100% - (15% * (3/2))) 30.25%; }',
  53. 'input': 'div { transform-origin: -webkit-calc(15% * (3/2)) 30.25%; }',
  54. 'reversable': false
  55. },
  56. {
  57. 'should': 'Should mirror with y being calc (x-offset y-offset)',
  58. 'expected': 'div { transform-origin:30.25% calc(15% * (3/2)); }',
  59. 'input': 'div { transform-origin:69.75% calc(15% * (3/2)); }',
  60. 'reversable': true
  61. },
  62. {
  63. 'should': 'Should mirror (y-offset x-offset-keyword)',
  64. 'expected': 'div { transform-origin:70% right; }',
  65. 'input': 'div { transform-origin:70% left; }',
  66. 'reversable': true
  67. },
  68. {
  69. 'should': 'Should mirror with calc (y-offset x-offset-keyword)',
  70. 'expected': 'div { transform-origin:-ms-calc(140%/2) right; }',
  71. 'input': 'div { transform-origin:-ms-calc(140%/2) left; }',
  72. 'reversable': true
  73. },
  74. {
  75. 'should': 'Should mirror (x-offset-keyword y-offset)',
  76. 'expected': 'div { transform-origin:right 70%; }',
  77. 'input': 'div { transform-origin:left 70%; }',
  78. 'reversable': true
  79. },
  80. {
  81. 'should': 'Should mirror with calc (x-offset-keyword y-offset)',
  82. 'expected': 'div { transform-origin:right -moz-calc(((140%/2))); }',
  83. 'input': 'div { transform-origin:left -moz-calc(((140%/2))); }',
  84. 'reversable': true
  85. },
  86. {
  87. 'should': 'Should mirror (y-offset-keyword x-offset)',
  88. 'expected': 'div { transform-origin:top 30.25%; }',
  89. 'input': 'div { transform-origin:top 69.75%; }',
  90. 'reversable': true
  91. },
  92. {
  93. 'should': 'Should not mirror with x being calc (y-offset-keyword x-offset)',
  94. 'expected': 'div { transform-origin:top calc(100% - (((140%/2)))); }',
  95. 'input': 'div { transform-origin:top calc(((140%/2))); }',
  96. 'reversable': false
  97. },
  98. {
  99. 'should': 'Should mirror (x-offset-keyword y-offset-keyword)',
  100. 'expected': 'div { transform-origin:right top; }',
  101. 'input': 'div { transform-origin:left top; }',
  102. 'reversable': true
  103. },
  104. {
  105. 'should': 'Should mirror (y-offset-keyword x-offset-keyword)',
  106. 'expected': 'div { transform-origin:top right; }',
  107. 'input': 'div { transform-origin:top left; }',
  108. 'reversable': true
  109. },
  110. {
  111. 'should': 'Should mirror (x-offset y-offset z-offset)',
  112. 'expected': 'div { transform-origin:80.25% 30% 10%; }',
  113. 'input': 'div { transform-origin:19.75% 30% 10%; }',
  114. 'reversable': true
  115. },
  116. {
  117. 'should': 'Should mirror with x being calc (x-offset y-offset z-offset)',
  118. 'expected': 'div { transform-origin: calc(100% - (25% * 3 + 20px)) 30% 10%; }',
  119. 'input': 'div { transform-origin: calc(25% * 3 + 20px) 30% 10%; }',
  120. 'reversable': false
  121. },
  122. {
  123. 'should': 'Should mirror (y-offset x-offset-keyword z-offset)',
  124. 'expected': 'div { transform-origin:20% right 10%; }',
  125. 'input': 'div { transform-origin:20% left 10%; }',
  126. 'reversable': true
  127. },
  128. {
  129. 'should': 'Should mirror (x-offset-keyword y-offset z-offset)',
  130. 'expected': 'div { transform-origin:left 20% 10%; }',
  131. 'input': 'div { transform-origin:right 20% 10%; }',
  132. 'reversable': true
  133. },
  134. {
  135. 'should': 'Should mirror (x-offset-keyword y-offset-keyword z-offset)',
  136. 'expected': 'div { transform-origin:left bottom 10%; }',
  137. 'input': 'div { transform-origin:right bottom 10%; }',
  138. 'reversable': true
  139. },
  140. {
  141. 'should': 'Should mirror (y-offset-keyword x-offset-keyword z-offset)',
  142. 'expected': 'div { transform-origin:bottom left 10%; }',
  143. 'input': 'div { transform-origin:bottom right 10%; }',
  144. 'reversable': true
  145. }
  146. ]