background-position.js 3.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. module.exports = [
  2. {
  3. 'should': 'Should mirror position (keywords only)',
  4. 'expected': 'div {background-position:top left, right bottom}',
  5. 'input': 'div {background-position:top right, left bottom}',
  6. 'reversable': true
  7. },
  8. {
  9. 'should': 'Should ignore mirroring invalid position',
  10. 'expected': 'div {background-position:25% left, right 25%;}',
  11. 'input': 'div {background-position:75% left, left 25%;}',
  12. 'reversable': true
  13. },
  14. {
  15. 'should': 'Should complement percentage horizontal position ',
  16. 'expected': 'div {background-position:100% 75%;}',
  17. 'input': 'div {background-position:0 75%;}',
  18. 'reversable': false
  19. },
  20. {
  21. 'should': 'Should complement percentage horizontal position with calc',
  22. 'expected': 'div {background-position:calc(100% - (30% + 50px)) 75%;}',
  23. 'input': 'div {background-position:calc(30% + 50px) 75%;}',
  24. 'reversable': false
  25. },
  26. {
  27. 'should': 'Should complement percentage horizontal position ',
  28. 'expected': 'div {background-position:81.25% 75%, 10.75% top;}',
  29. 'input': 'div {background-position:18.75% 75%, 89.25% top;}',
  30. 'reversable': true
  31. },
  32. {
  33. 'should': 'Should complement percentage horizontal position with calc',
  34. 'expected': 'div {background-position:calc(100% - (30% + 50px)) calc(30% + 50px), 10.75% top;}',
  35. 'input': 'div {background-position:calc(30% + 50px) calc(30% + 50px), 89.25% top;}',
  36. 'reversable': false
  37. },
  38. {
  39. 'should': 'Should mirror background-position',
  40. 'expected': 'div {background-position:right 75%, left top;}',
  41. 'input': 'div {background-position:left 75%, right top;}',
  42. 'reversable': true
  43. },
  44. {
  45. 'should': 'Should mirror background-position (calc)',
  46. 'expected': 'div {background-position:right -ms-calc(30% + 50px), left top;}',
  47. 'input': 'div {background-position:left -ms-calc(30% + 50px), right top;}',
  48. 'reversable': true
  49. },
  50. {
  51. 'should': 'Should complement percentage: position-x (treat 0 as 0%)',
  52. 'expected': 'div {background-position-x:100%, 0%;}',
  53. 'input': 'div {background-position-x:0, 100%;}',
  54. 'reversable': false
  55. },
  56. {
  57. 'should': 'Should complement percentage: position-x',
  58. 'expected': 'div {background-position-x:81.75%, 11%;}',
  59. 'input': 'div {background-position-x:18.25%, 89%;}',
  60. 'reversable': true
  61. },
  62. {
  63. 'should': 'Should complement percentage with calc: position-x',
  64. 'expected': 'div {background-position-x:calc(100% - (30% + 50px)), -webkit-calc(100% - (30% + 50px));}',
  65. 'input': 'div {background-position-x:calc(30% + 50px), -webkit-calc(30% + 50px);}',
  66. 'reversable': false
  67. },
  68. {
  69. 'should': 'Should mirror position-x',
  70. 'expected': 'div {background-position-x:right, left;}',
  71. 'input': 'div {background-position-x:left, right;}',
  72. 'reversable': true
  73. },
  74. {
  75. 'should': 'Should mirror position-x (calc)',
  76. 'expected': 'div {background-position-x:calc(100% - (30% + 50px)), calc(100% - (50px * 5));}',
  77. 'input': 'div {background-position-x:calc(30% + 50px), calc(50px * 5);}',
  78. 'reversable': false
  79. },
  80. {
  81. 'should': 'Should keep as is: position-x',
  82. 'expected': 'div {background-position-x:100px, 0px;}',
  83. 'input': 'div {background-position-x:100px, 0px;}',
  84. 'reversable': true
  85. },
  86. {
  87. 'should': 'Should mirror background-position edge offsets (4 values)',
  88. 'expected': 'div {background-position: left 5px bottom 5px, bottom 15px right 15px;}',
  89. 'input': 'div {background-position: right 5px bottom 5px, bottom 15px left 15px;}',
  90. 'reversable': true
  91. },
  92. {
  93. 'should': 'Should mirror background-position edge offsets (3 values)',
  94. 'expected': 'div {background-position: left 5px bottom, top 15px right;}',
  95. 'input': 'div {background-position: right 5px bottom, top 15px left;}',
  96. 'reversable': true
  97. }
  98. ]