Merged all changes and fixes from SVG 1.1 into this branch

6 files changed, 219 insertions, 56 deletions

diff --git a/spec/index.html b/spec/index.html
index db1ae59..526cda6 100755
--- a/spec/index.html
+++ b/spec/index.html
@@ -84,6 +84,7 @@
 <script src="spec/number.js"></script>
 <script src="spec/array.js"></script>
 <script src="spec/hyperlink.js"></script>
+<script src="spec/fx.js"></script>
 
 <script type="text/javascript">
   (function() {
diff --git a/spec/spec/doc.js b/spec/spec/doc.js
index 81e47f9..96e8cf5 100755
--- a/spec/spec/doc.js
+++ b/spec/spec/doc.js
@@ -21,4 +21,13 @@ describe('Doc', function() {
     })
   })
   
+  describe('remove()', function() {
+    it('removes the doc from the dom', function() {
+      draw.remove()
+      expect(document.getElementsByTagName('body')[0].querySelectorAll('svg').length).toBe(2)
+      draw = SVG(drawing).size(100,100);
+      expect(document.getElementsByTagName('body')[0].querySelectorAll('svg').length).toBe(3)
+    })
+  })
+  
 })
\ No newline at end of file
diff --git a/spec/spec/ellipse.js b/spec/spec/ellipse.js
index 027802c..d2a492b 100755
--- a/spec/spec/ellipse.js
+++ b/spec/spec/ellipse.js
@@ -64,7 +64,7 @@ describe('Ellipse', function() {
       expect(ellipse.node.getAttribute('rx')).toBe('30')
       expect(ellipse.node.getAttribute('ry')).toBe('30')
     })
-    it('sets the and ry value correctly when given 0', function() {
+    it('sets the rx and ry value correctly when given 0', function() {
       ellipse.radius(11, 0)
       expect(ellipse.node.getAttribute('rx')).toBe('11')
       expect(ellipse.node.getAttribute('ry')).toBe('0')
diff --git a/spec/spec/event.js b/spec/spec/event.js
index 01e6e7d..cb6c4ef 100644
--- a/spec/spec/event.js
+++ b/spec/spec/event.js
@@ -1,9 +1,11 @@
 describe('Event', function() {
   var rect, context
     , toast = null
-    , action = function() {
+    , fruitsInDetail = null,
+    action = function(e) {
         toast = 'ready'
         context = this
+        fruitsInDetail = e.detail || null
       }
 
   beforeEach(function() {
@@ -149,7 +151,7 @@ describe('Event', function() {
       })
     })
 
-    describe('mouseenter()', function() {
+    /*describe('mouseenter()', function() {
       it('attaches an onmouseenter event to the node of the element', function() {
         expect(typeof rect.node.onmouseenter).not.toBe('function')
         rect.mouseenter(action)
@@ -185,7 +187,7 @@ describe('Event', function() {
       it('returns the called element', function() {
         expect(rect.mouseleave(action)).toBe(rect)
       })
-    })
+    })*/
 
   } else {
 
@@ -286,34 +288,56 @@ describe('Event', function() {
 
   }
 
-  describe('registerEvent()', function() {
-    it('creates a new custom event and stores it in the events object', function() {
-      expect(SVG.events['my:event']).toBeUndefined()
-      SVG.registerEvent('my:event')
-      expect(SVG.events['my:event'] instanceof CustomEvent).toBeTruthy()
-    })
-  })
 
   describe('on()', function() {
 
-    beforeEach(function() {
-      SVG.registerEvent('my:event')
-    })
-
     it('attaches and event to the element', function() {
-      dispatchEvent(rect.on('my:event', action), 'my:event')
+      dispatchEvent(rect.on('event', action), 'event')
       expect(toast).toBe('ready')
     })
+    it('attaches multiple handlers on different element', function() {
+      var listenerCnt = SVG.listeners.length
+      
+      var rect2 = draw.rect(100,100);
+      var rect3 = draw.rect(100,100);
+      
+      rect.on('event', action)
+      rect2.on('event', action)
+      rect3.on('event', function(){ butter = 'melting' })
+      rect3.on('event', action)
+      
+      expect(Object.keys(SVG.listeners[SVG.handlerMap.indexOf(rect.node)]['event']['*']).length).toBe(1)  // 1 listener on rect
+      expect(Object.keys(SVG.listeners[SVG.handlerMap.indexOf(rect3.node)]['event']['*']).length).toBe(2) // 2 listener on rect3
+      expect(SVG.listeners.length).toBe(listenerCnt + 3)                                                  // added listeners on 3 different elements
+    })
+    if('attaches a handler to a namespaced event', function(){
+      var listenerCnt = SVG.listeners.length
+      
+      var rect2 = draw.rect(100,100);
+      var rect3 = draw.rect(100,100);
+      
+      rect.on('event.namespace1', action)
+      rect2.on('event.namespace2', action)
+      rect3.on('event.namespace3', function(){ butter = 'melting' })
+      rect3.on('event', action)
+      
+      expect(Object.keys(SVG.listeners[SVG.handlerMap.indexOf(rect.node)]['event']['*'])).toBeUndefined()          // no global listener on rect
+      expect(Object.keys(SVG.listeners[SVG.handlerMap.indexOf(rect.node)]['event']['namespace1']).length).toBe( 1) // 1 namespaced listener on rect
+      expect(Object.keys(SVG.listeners[SVG.handlerMap.indexOf(rect2.node)]['event']['namespace2']).length).toBe(1) // 1 namespaced listener on rect
+      expect(Object.keys(SVG.listeners[SVG.handlerMap.indexOf(rect3.node)]['event']['*']).length).toBe(1)          // 1 gobal listener on rect3
+      expect(Object.keys(SVG.listeners[SVG.handlerMap.indexOf(rect3.node)]['event']['namespace3']).length).toBe(1) // 1 namespaced listener on rect3
+      expect(SVG.listeners.length).toBe(listenerCnt + 3)                                                           // added listeners on 3 different elements
+    })
     it('applies the element as context', function() {
-      dispatchEvent(rect.on('my:event', action), 'my:event')
+      dispatchEvent(rect.on('event', action), 'event')
       expect(context).toBe(rect)
     })
     it('stores the listener for future reference', function() {
-      rect.on('my:event', action)
-      expect(SVG.listeners[rect.node]['my:event'][action]).not.toBeUndefined()
+      rect.on('event', action)
+      expect(SVG.listeners[SVG.handlerMap.indexOf(rect.node)]['event']['*'][action]).not.toBeUndefined()
     })
     it('returns the called element', function() {
-      expect(rect.on('my:event', action)).toBe(rect)
+      expect(rect.on('event', action)).toBe(rect)
     })
   })
 
@@ -322,57 +346,102 @@ describe('Event', function() {
 
     beforeEach(function() {
       butter = null
-      SVG.registerEvent('my:event')
     })
 
-    it('detaches a specific event listener', function() {
-      rect.on('my:event', action)
-      rect.off('my:event', action)
-      dispatchEvent(rect, 'my:event')
+    it('detaches a specific event listener, all other still working', function() {
+      rect2 = draw.rect(100,100);
+      rect3 = draw.rect(100,100);
+      
+      rect.on('event', action)
+      rect2.on('event', action)
+      rect3.on('event', function(){ butter = 'melting' })
+      
+      rect.off('event', action)
+      
+      expect(Object.keys(SVG.listeners[SVG.handlerMap.indexOf(rect.node)]['event']['*']).length).toBe(0)
+      
+      dispatchEvent(rect, 'event')
       expect(toast).toBeNull()
-      expect(SVG.listeners[rect.node]['my:event'][action]).toBeUndefined()
+      
+      dispatchEvent(rect2, 'event')
+      expect(toast).toBe('ready')
+      
+      dispatchEvent(rect3, 'event')
+      expect(butter).toBe('melting')
+      
+      expect(SVG.listeners[SVG.handlerMap.indexOf(rect.node)]['event']['*'][action]).toBeUndefined()
+    })
+    it('detaches a specific namespaced event listener, all other still working', function() {
+      rect2 = draw.rect(100,100);
+      rect3 = draw.rect(100,100);
+      
+      rect.on('event.namespace', action)
+      rect2.on('event.namespace', action)
+      rect3.on('event.namespace', function(){ butter = 'melting' })
+      
+      rect.off('event.namespace', action)
+      
+      expect(Object.keys(SVG.listeners[SVG.handlerMap.indexOf(rect.node)]['event']['namespace']).length).toBe(0)
+      
+      dispatchEvent(rect, 'event')
+      expect(toast).toBeNull()
+      
+      dispatchEvent(rect2, 'event')
+      expect(toast).toBe('ready')
+      
+      dispatchEvent(rect3, 'event')
+      expect(butter).toBe('melting')
+      
+      expect(SVG.listeners[SVG.handlerMap.indexOf(rect.node)]['event']['namespace'][action]).toBeUndefined()
     })
     it('detaches all listeners for an event without a listener given', function() {
-      rect.on('my:event', action)
-      rect.on('my:event', function() { butter = 'melting' })
-      rect.off('my:event')
-      dispatchEvent(rect, 'my:event')
+      rect.on('event', action)
+      rect.on('event.namespace', function() { butter = 'melting'; console.log('called'); })
+      rect.off('event')
+
+      dispatchEvent(rect, 'event')
       expect(toast).toBeNull()
       expect(butter).toBeNull()
-      expect(SVG.listeners[rect.node]['my:event']).toBeUndefined()
+      expect(SVG.listeners[SVG.handlerMap.indexOf(rect.node)]['event']).toBeUndefined()
     })
     it('detaches all listeners without an argument', function() {
-      rect.on('my:event', action)
+      rect.on('event', action)
       rect.on('click', function() { butter = 'melting' })
       rect.off()
-      dispatchEvent(rect, 'my:event')
+      dispatchEvent(rect, 'event')
       dispatchEvent(rect, 'click')
       expect(toast).toBeNull()
       expect(butter).toBeNull()
-      expect(SVG.listeners[rect.node]).toBeUndefined()
+      expect(SVG.listeners[SVG.handlerMap.indexOf(rect.node)]).toBeUndefined()
     })
     it('returns the called element', function() {
-      expect(rect.off('my:event', action)).toBe(rect)
+      expect(rect.off('event', action)).toBe(rect)
     })
   })
 
   describe('fire()', function() {
 
     beforeEach(function() {
-      SVG.registerEvent('my:event')
-      rect.on('my:event', action)
+      rect.on('event', action)
     })
 
     it('fires an event for the element', function() {
       expect(toast).toBeNull()
-      rect.fire('my:event')
+      rect.fire('event')
       expect(toast).toBe('ready')
+      expect(fruitsInDetail).toBe(null)
     })
     it('returns the called element', function() {
-      expect(rect.fire('my:event')).toBe(rect)
+      expect(rect.fire('event')).toBe(rect)
+    })
+    it('fires event with additional data', function() {
+      expect(fruitsInDetail).toBeNull()
+      rect.fire('event', {apple:1})
+      expect(fruitsInDetail).not.toBe(null)
+      expect(fruitsInDetail.apple).toBe(1)
     })
-
   })
+  
 
 })
 
@@ -381,4 +450,3 @@ describe('Event', function() {
 
 
 
-
diff --git a/spec/spec/fx.js b/spec/spec/fx.js
new file mode 100644
index 0000000..2ae372d
--- /dev/null
+++ b/spec/spec/fx.js
@@ -0,0 +1,60 @@
+describe('FX', function() {
+  var rect, fx;
+
+  beforeEach(function() {
+    rect = draw.rect(100,100).move(100,100)
+    fx = rect.animate(500)
+  })
+
+  it('creates an instance of SVG.FX', function() {
+    expect(fx instanceof SVG.FX).toBe(true)
+  })
+
+  it('animates the x/y-attr', function(done) {
+  
+    fx.move(200,200).after(function(){
+    
+      expect(rect.x()).toBe(200)
+      expect(rect.y()).toBe(200)
+      done()
+    
+    });
+    
+    setTimeout(function(){
+      expect(rect.x()).toBeGreaterThan(100)
+      expect(rect.y()).toBeGreaterThan(100)
+    }, 250)
+
+  })
+  
+  it('animates matrix', function(done) {
+    
+    fx.transform({a:0.8, b:0.4, c:-0.15, d:0.7, e: 90.3, f: 27.07}).after(function(){
+    
+      var ctm = rect.ctm()
+      expect(ctm.a).toBeCloseTo(0.8)
+      expect(ctm.b).toBeCloseTo(0.4)
+      expect(ctm.c).toBeCloseTo(-0.15)
+      expect(ctm.d).toBeCloseTo(0.7)
+      expect(ctm.e).toBeCloseTo(90.3)
+      expect(ctm.f).toBeCloseTo(27.07)
+      
+      done()
+    
+    })
+    
+    setTimeout(function(){
+    
+      var ctm = rect.ctm();
+      console.log(ctm);
+      expect(ctm.a).toBeLessThan(1)
+      expect(ctm.b).toBeGreaterThan(0)
+      expect(ctm.c).toBeLessThan(0)
+      expect(ctm.d).toBeGreaterThan(0)
+      expect(ctm.e).toBeGreaterThan(0)
+      expect(ctm.f).toBeGreatherThan(0)
+    }, 250)
+    
+  })
+
+})
\ No newline at end of file
diff --git a/spec/spec/use.js b/spec/spec/use.js
index ed0d567..f5ab3a8 100755
--- a/spec/spec/use.js
+++ b/spec/spec/use.js
@@ -1,25 +1,50 @@
 describe('Use', function() {
-  var use, rect
+  var use
 
-  beforeEach(function() {
-    rect = draw.rect(100,100)
-    use = draw.use(rect)
-  })
+  describe('on a container element', function() {
+    var rect
 
-  it('creates an instance of SVG.Use', function() {
-    expect(use instanceof SVG.Use).toBe(true)
-  })
+    beforeEach(function() {
+      rect = draw.rect(100,100)
+      use = draw.use(rect)
+    })
 
-  it('sets the target element id to its href attribute', function() {
-    expect(use.node.getAttributeNS(SVG.xlink, 'href')).toBe('#' + rect)
-  })
+    it('creates an instance of SVG.Use', function() {
+      expect(use instanceof SVG.Use).toBe(true)
+    })
+
+    it('sets the target element id to its href attribute', function() {
+      expect(use.node.getAttributeNS(SVG.xlink, 'href')).toBe('#' + rect)
+    })
+
+    it('stores a reference to the target element', function() {
+      expect(use.target).toBe(rect)
+    })
 
-  it('stores a reference to the target element', function() {
-    expect(use.target).toBe(rect)
+    it('adopts the geometry of the target element', function() {
+      expect(use.bbox()).toEqual(rect.bbox())
+    })
   })
 
-  it('adopts the geometry of the target element', function() {
-    expect(use.bbox()).toEqual(rect.bbox())
+  describe('on an external path', function() {
+    var file = 'http://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg'
+      , id = 'flowRoot1882'
+
+    beforeEach(function() {
+      use = draw.use(id, file)
+    })
+
+    it('creates an instance of SVG.Use', function() {
+      expect(use instanceof SVG.Use).toBe(true)
+    })
+
+    it('sets the target element id and file path to its href attribute', function() {
+      expect(use.node.getAttributeNS(SVG.xlink, 'href')).toBe(file + '#' + id)
+    })
+
+    it('stores a reference to the target element', function() {
+      expect(use.target).toBe(id)
+    })
   })
   
 })
\ No newline at end of file