Fix the flip transform on both axis

This fix the bug that made calling flip without any argument (`element.flip()`)
not work.

3 files changed, 140 insertions, 2 deletions

diff --git a/spec/spec/element.js b/spec/spec/element.js
index 8846474..28f30dd 100644
--- a/spec/spec/element.js
+++ b/spec/spec/element.js
@@ -314,7 +314,7 @@ describe('Element', function() {
     })
     it('flips the element on both axis', function() {
       rect.transform({ flip: 'both' })
-      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([-1,0,0,-1,0,0])
+      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([-1,0,0,-1,100,100])
     })
   })
 
diff --git a/spec/spec/fx.js b/spec/spec/fx.js
index 5e5f68c..78101d4 100644
--- a/spec/spec/fx.js
+++ b/spec/spec/fx.js
@@ -1782,6 +1782,34 @@ describe('FX', function() {
     expect(ctm.f).toBe(0)
   })
 
+  it('animate a flip(x) transform with an offset', function() {
+    var ctm
+
+    fx.transform({flip: 'x', offset: 20}).start()
+
+    jasmine.clock().tick(125) // Have the animation be 1/4 of the way (not halfway as usual because of a bug in the node method getCTM on Firefox)
+    fx.step()
+
+    ctm = rect.ctm()
+    expect(ctm.a).toBe(0.5)
+    expect(ctm.b).toBe(0)
+    expect(ctm.c).toBe(0)
+    expect(ctm.d).toBe(1)
+    expect(ctm.e).toBe(10)
+    expect(ctm.f).toBe(0)
+
+    jasmine.clock().tick(475) // Have the animation reach its end
+    fx.step()
+
+    ctm = rect.ctm()
+    expect(ctm.a).toBe(-1)
+    expect(ctm.b).toBe(0)
+    expect(ctm.c).toBe(0)
+    expect(ctm.d).toBe(1)
+    expect(ctm.e).toBe(40)
+    expect(ctm.f).toBe(0)
+  })
+
   it('animate a flip(y) transform', function() {
     var ctm
 
@@ -1810,6 +1838,90 @@ describe('FX', function() {
     expect(ctm.f).toBe(300)
   })
 
+  it('animate a flip(y) transform with an offset', function() {
+    var ctm
+
+    fx.transform({flip: 'y', offset: 20}).start()
+
+    jasmine.clock().tick(125) // Have the animation be 1/4 of the way (not halfway as usual because of a bug in the node method getCTM on Firefox)
+    fx.step()
+
+    ctm = rect.ctm()
+    expect(ctm.a).toBe(1)
+    expect(ctm.b).toBe(0)
+    expect(ctm.c).toBe(0)
+    expect(ctm.d).toBe(0.5)
+    expect(ctm.e).toBe(0)
+    expect(ctm.f).toBe(10)
+
+    jasmine.clock().tick(475) // Have the animation reach its end
+    fx.step()
+
+    ctm = rect.ctm()
+    expect(ctm.a).toBe(1)
+    expect(ctm.b).toBe(0)
+    expect(ctm.c).toBe(0)
+    expect(ctm.d).toBe(-1)
+    expect(ctm.e).toBe(0)
+    expect(ctm.f).toBe(40)
+  })
+
+  it('animate a flip() transform', function() {
+    var ctm
+
+    fx.transform({flip: 'both'}).start()
+
+    jasmine.clock().tick(125) // Have the animation be 1/4 of the way (not halfway as usual because of a bug in the node method getCTM on Firefox)
+    fx.step()
+
+    ctm = rect.ctm()
+    expect(ctm.a).toBe(0.5)
+    expect(ctm.b).toBe(0)
+    expect(ctm.c).toBe(0)
+    expect(ctm.d).toBe(0.5)
+    expect(ctm.e).toBe(75)
+    expect(ctm.f).toBe(75)
+
+    jasmine.clock().tick(475) // Have the animation reach its end
+    fx.step()
+
+    ctm = rect.ctm()
+    expect(ctm.a).toBe(-1)
+    expect(ctm.b).toBe(0)
+    expect(ctm.c).toBe(0)
+    expect(ctm.d).toBe(-1)
+    expect(ctm.e).toBe(300)
+    expect(ctm.f).toBe(300)
+  })
+
+  it('animate a flip() transform with an offset', function() {
+    var ctm
+
+    fx.transform({flip: 'both', offset: 20}).start()
+
+    jasmine.clock().tick(125) // Have the animation be 1/4 of the way (not halfway as usual because of a bug in the node method getCTM on Firefox)
+    fx.step()
+
+    ctm = rect.ctm()
+    expect(ctm.a).toBe(0.5)
+    expect(ctm.b).toBe(0)
+    expect(ctm.c).toBe(0)
+    expect(ctm.d).toBe(0.5)
+    expect(ctm.e).toBe(10)
+    expect(ctm.f).toBe(10)
+
+    jasmine.clock().tick(475) // Have the animation reach its end
+    fx.step()
+
+    ctm = rect.ctm()
+    expect(ctm.a).toBe(-1)
+    expect(ctm.b).toBe(0)
+    expect(ctm.c).toBe(0)
+    expect(ctm.d).toBe(-1)
+    expect(ctm.e).toBe(40)
+    expect(ctm.f).toBe(40)
+  })
+
   it('animate relative matrix transform', function(){
     var ctm
 
diff --git a/spec/spec/matrix.js b/spec/spec/matrix.js
index 3f1eadd..0816f66 100644
--- a/spec/spec/matrix.js
+++ b/spec/spec/matrix.js
@@ -152,7 +152,7 @@ describe('Matrix', function() {
     })
 
   })
-  
+
   describe('clone()', function() {
     it('returns a clone of the matrix', function() {
       var matrix = new SVG.Matrix(2, 0, 0, 5, 0, 0)
@@ -333,6 +333,32 @@ describe('Matrix', function() {
         expect(matrix.f).toBe(203)
       })
     })
+    describe('with no axis given', function() {
+      it('performs a flip over the horizontal and vertical axis with no argument', function() {
+        var matrix = new SVG.Matrix(1, 0, 0, 1, 4, 3).flip()
+
+        expect(matrix.a).toBe(-1)
+        expect(matrix.d).toBe(-1)
+        expect(matrix.e).toBe(4)
+        expect(matrix.f).toBe(3)
+      })
+      it('performs a flip over the horizontal and vertical axis over a given point with one argument that represent both coordinates', function() {
+        var matrix = new SVG.Matrix(1, 0, 0, 1, 4, 3).flip(100)
+
+        expect(matrix.a).toBe(-1)
+        expect(matrix.d).toBe(-1)
+        expect(matrix.e).toBe(204)
+        expect(matrix.f).toBe(203)
+      })
+      it('performs a flip over the horizontal and vertical axis over a given point with two arguments', function() {
+        var matrix = new SVG.Matrix(1, 0, 0, 1, 4, 3).flip(50, 100)
+
+        expect(matrix.a).toBe(-1)
+        expect(matrix.d).toBe(-1)
+        expect(matrix.e).toBe(104)
+        expect(matrix.f).toBe(203)
+      })
+    })
   })
 
   describe('skew()', function() {