onclick events are now bound with SVG.on, prefixed globals, relax tests to work with svgdom, image loading uses eveents now, can now run jasmine tessts with svgdom when jasmine globally available

17 files changed, 285 insertions, 184 deletions

diff --git a/spec/spec/boxes.js b/spec/spec/boxes.js
index e152079..bac3b1e 100644
--- a/spec/spec/boxes.js
+++ b/spec/spec/boxes.js
@@ -131,7 +131,7 @@ describe('RBox', function() {
   it('creates a new instance from an element', function() {
     var rect = draw.rect(100, 100).move(100, 25).stroke({width:0})
     var box = new SVG.RBox(rect).transform(rect.doc().screenCTM().inverse()).addOffset()
-    expect(roundBox(box)).toEqual(jasmine.objectContaining({
+    expect(window.roundBox(box)).toEqual(jasmine.objectContaining({
       x: 100, y: 25, cx: 150, cy: 75, width: 100, height: 100
     }))
   })
@@ -201,7 +201,7 @@ describe('Boxes', function() {
     it('returns the elements box in absolute screen coordinates by default', function() {
       var box = rect.rbox()
 
-      expect(roundBox(box)).toEqual(jasmine.objectContaining(roundBox({
+      expect(window.roundBox(box)).toEqual(jasmine.objectContaining(window.roundBox({
         x: 70 + offset.e, y: 200 + offset.f, width: 100, height: 360
       })))
 
@@ -210,7 +210,7 @@ describe('Boxes', function() {
     it('returns the elements box in coordinates of given element (doc)', function() {
       var box = rect.rbox(draw)
 
-      expect(roundBox(box)).toEqual(jasmine.objectContaining({
+      expect(window.roundBox(box)).toEqual(jasmine.objectContaining({
         x: 240, y: 500, width: 200, height: 720
       }))
     })
@@ -218,7 +218,7 @@ describe('Boxes', function() {
     it('returns the elements box in coordinates of given element (nested)', function() {
       var box = rect.rbox(nested)
 
-      expect(roundBox(box)).toEqual(jasmine.objectContaining({
+      expect(window.roundBox(box)).toEqual(jasmine.objectContaining({
         x: 70, y: 200, width: 100, height: 360
       }))
     })
diff --git a/spec/spec/circle.js b/spec/spec/circle.js
index 41cf2b0..3595ba0 100644
--- a/spec/spec/circle.js
+++ b/spec/spec/circle.js
@@ -170,7 +170,7 @@ describe('Circle', function() {
   describe('translate()', function() {
     it('sets the translation of an element', function() {
       circle.transform({ x: 12, y: 12 })
-      expect(matrixStringToArray(circle.node.getAttribute('transform'))).toEqual([1,0,0,1,12,12])
+      expect(window.matrixStringToArray(circle.node.getAttribute('transform'))).toEqual([1,0,0,1,12,12])
     })
   })
   
diff --git a/spec/spec/doc.js b/spec/spec/doc.js
index d825c76..03828a4 100644
--- a/spec/spec/doc.js
+++ b/spec/spec/doc.js
@@ -35,11 +35,11 @@ describe('Doc', function() {
 
   describe('remove()', function() {
     it('removes the doc from the dom', function() {
-      var cnt = document.getElementsByTagName('body')[0].querySelectorAll('svg').length
+      var cnt = window.document.querySelectorAll('svg').length
       draw.remove()
-      expect(document.getElementsByTagName('body')[0].querySelectorAll('svg').length).toBe(cnt-1)
+      expect(window.document.querySelectorAll('svg').length).toBe(cnt-1)
       draw = SVG(drawing).size(100,100);
-      expect(document.getElementsByTagName('body')[0].querySelectorAll('svg').length).toBe(cnt)
+      expect(window.document.querySelectorAll('svg').length).toBe(cnt)
     })
   })
 
diff --git a/spec/spec/element.js b/spec/spec/element.js
index 618bbe5..1f3f107 100644
--- a/spec/spec/element.js
+++ b/spec/spec/element.js
@@ -72,15 +72,10 @@ describe('Element', function() {
       rect.style('cursor', 'pointer')
       expect(rect.node.style.cursor).toBe('pointer')
     })
-    it('redirects to the style() method when setting a style string', function() {
+    it('sets the style attribute correctly', function() {
       rect.attr('style', 'cursor:move;')
       expect(rect.node.style.cursor).toBe('move')
     })
-    it('removes style attribute on node if the style is empty', function() {
-      rect.style('cursor', 'move')
-      rect.style('cursor', '')
-      expect(rect.style.cursor).toBe(undefined)
-    })
     it('acts as a global getter when no arguments are given', function() {
       rect.fill('#ff0066')
       expect(rect.attr().fill).toBe('#ff0066')
@@ -142,19 +137,19 @@ describe('Element', function() {
   describe('style()', function() {
     it('sets the style with key and value arguments', function() {
       var rect = draw.rect(100,100).style('cursor', 'crosshair')
-      expect(stripped(rect.node.style.cssText)).toBe('cursor:crosshair;')
+      expect(window.stripped(rect.node.style.cssText)).toBe('cursor:crosshair')
     })
     it('sets multiple styles with an object as the first argument', function() {
       var rect = draw.rect(100,100).style({ cursor: 'help', display: 'block' })
-      expect(stripped(rect.node.style.cssText)).toMatch(/cursor:help;/)
-      expect(stripped(rect.node.style.cssText)).toMatch(/display:block;/)
-      expect(stripped(rect.node.style.cssText).length).toBe(('display:block;cursor:help;').length)
+      expect(window.stripped(rect.node.style.cssText)).toMatch(/cursor:help/)
+      expect(window.stripped(rect.node.style.cssText)).toMatch(/display:block/)
+      expect(window.stripped(rect.node.style.cssText).length).toBe(('display:block;cursor:help').length)
     })
     it('sets multiple styles with a css string as the first argument', function() {
       var rect = draw.rect(100,100).style('cursor: help; display: block;')
-      expect(stripped(rect.node.style.cssText)).toMatch(/cursor:help;/)
-      expect(stripped(rect.node.style.cssText)).toMatch(/display:block;/)
-      expect(stripped(rect.node.style.cssText).length).toBe(('display:block;cursor:help;').length)
+      expect(window.stripped(rect.node.style.cssText)).toMatch(/cursor:help/)
+      expect(window.stripped(rect.node.style.cssText)).toMatch(/display:block/)
+      expect(window.stripped(rect.node.style.cssText).length).toBe(('display:block;cursor:help').length)
     })
     it('gets a style with a string key as the fists argument', function() {
       var rect = draw.rect(100,100).style({ cursor: 'progress', display: 'block' })
@@ -162,17 +157,17 @@ describe('Element', function() {
     })
     it('gets the full css string with no argument', function() {
       var rect = draw.rect(100,100).style({ cursor: 's-resize', display: 'none' })
-      expect(stripped(rect.style())).toMatch(/display:none;/)
-      expect(stripped(rect.style())).toMatch(/cursor:s-resize;/)
-      expect(stripped(rect.style()).length).toBe(('cursor:s-resize;display:none;').length)
+      expect(window.stripped(rect.style())).toMatch(/display:none/)
+      expect(window.stripped(rect.style())).toMatch(/cursor:s-resize/)
+      expect(window.stripped(rect.style()).length).toBe(('cursor:s-resize;display:none').length)
     })
     it('removes a style if the value is an empty string', function() {
       var rect = draw.rect(100,100).style({ cursor: 'n-resize', display: '' })
-      expect(stripped(rect.style())).toBe('cursor:n-resize;')
+      expect(window.stripped(rect.style())).toBe('cursor:n-resize')
     })
     it('removes a style if the value explicitly set to null', function() {
       var rect = draw.rect(100,100).style('cursor', 'w-resize')
-      expect(stripped(rect.style())).toBe('cursor:w-resize;')
+      expect(window.stripped(rect.style())).toBe('cursor:w-resize')
       rect.style('cursor', null)
       expect(rect.style()).toBe('')
     })
@@ -190,44 +185,44 @@ describe('Element', function() {
     })
     it('sets the translation of and element', function() {
       rect.transform({ x: 10, y: 11 })
-      expect(matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([1,0,0,1,10,11])
+      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([1,0,0,1,10,11])
     })
     it('performs an absolute translation', function() {
       rect.transform({ x: 10, y: 11 }).transform({ x: 20, y: 21 })
-      expect(matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([1,0,0,1,20,21])
+      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([1,0,0,1,20,21])
     })
     it('performs a relative translation when relative is set to true', function() {
       rect.transform({ x: 10, y: 11 }).transform({ x: 20, y: 21, relative: true })
-      expect(matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([1,0,0,1,30,32])
+      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([1,0,0,1,30,32])
     })
     it('performs a relative translation with relative flag', function() {
       rect.transform({ x: 10, y: 11 }).transform({ x: 20, y: 21 }, true)
-      expect(matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([1,0,0,1,30,32])
+      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([1,0,0,1,30,32])
     })
     it('sets the scaleX and scaleY of an element', function() {
       rect.transform({ scaleX: 0.5, scaleY: 2 })
-      expect(matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([0.5,0,0,2,25,-50])
+      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([0.5,0,0,2,25,-50])
     })
     it('performs a uniform scale with scale given', function() {
       rect.transform({ scale: 3 })
-      expect(matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([3,0,0,3,-100,-100])
+      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([3,0,0,3,-100,-100])
     })
     it('also works with only skaleX', function() {
       rect.transform({ scaleX: 3 })
-      expect(matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([3,0,0,1,-100,0])
+      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([3,0,0,1,-100,0])
     })
     it('also works with only skaleY', function() {
       rect.transform({ scaleY: 3 })
-      expect(matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([1,0,0,3,0,-100])
+      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([1,0,0,3,0,-100])
     })
     
     it('performs an absolute scale by default', function() {
       rect.transform({ scale: 3 }).transform({ scale: 0.5 })
-      expect(matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([0.5,0,0,0.5,25,25])
+      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([0.5,0,0,0.5,25,25])
     })
     it('performs a relative scale with a relative flag', function() {
       rect.transform({ scaleX: 0.5, scaleY: 2 }).transform({ scaleX: 3, scaleY: 4 }, true)
-      expect(matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([1.5,0,0,8,-25,-350])
+      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([1.5,0,0,8,-25,-350])
     })
     it('sets the skewX of an element with center on the element', function() {
       ctm = rect.transform({ skewX: 10 }).ctm()
@@ -295,31 +290,31 @@ describe('Element', function() {
     })
     it('transforms element using a matrix', function() {
       rect.transform({ a: 0.5, c: 0.5 })
-      expect(matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([0.5,0,0.5,1,0,0])
+      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([0.5,0,0.5,1,0,0])
     })
     it('transforms relative using a matrix', function() {
       rect.transform({ a: 0.5, c: 0.5 }).transform(new SVG.Matrix({ e: 20, f: 20 }), true)
-      expect(matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([0.5,0,0.5,1,20,20])
+      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([0.5,0,0.5,1,20,20])
     })
     it('flips the element on x axis', function() {
       rect.transform({ flip: 'x' })
-      expect(matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([-1,0,0,1,100,0])
+      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([-1,0,0,1,100,0])
     })
     it('flips the element on x axis with offset', function() {
       rect.transform({ flip: 'x', offset: 20 })
-      expect(matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([-1,0,0,1,40,0])
+      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([-1,0,0,1,40,0])
     })
     it('flips the element on y axis with offset', function() {
       rect.transform({ flip: 'y', offset: 20 })
-      expect(matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([1,0,0,-1,0,40])
+      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([1,0,0,-1,0,40])
     })
     it('flips the element on both axis with offset', function() {
       rect.transform({ flip: 'both', offset: 20 })
-      expect(matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([-1,0,0,-1,40,40])
+      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([-1,0,0,-1,40,40])
     })
     it('flips the element on both axis', function() {
       rect.transform({ flip: 'both' })
-      expect(matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([-1,0,0,-1,0,0])
+      expect(window.matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([-1,0,0,-1,0,0])
     })
   })
 
@@ -331,7 +326,7 @@ describe('Element', function() {
     })
 
     it('removes the transform attribute', function() {
-      expect(matrixStringToArray(circle.node.getAttribute('transform'))).toEqual([1,0,0,1,50,100])
+      expect(window.matrixStringToArray(circle.node.getAttribute('transform'))).toEqual([1,0,0,1,50,100])
       circle.untransform()
       expect(circle.node.getAttribute('transform')).toBeNull()
     })
diff --git a/spec/spec/event.js b/spec/spec/event.js
index 7354e6f..0b9fe5b 100644
--- a/spec/spec/event.js
+++ b/spec/spec/event.js
@@ -10,26 +10,26 @@ describe('Event', function() {
 
   beforeEach(function() {
     rect = draw.rect(100, 100)
+    spyOn(SVG,'on').and.callThrough()
   })
 
   afterEach(function() {
     toast = context = null
   })
 
-  if (!window.isTouchDevice) {
+  if (!this.isTouchDevice) {
 
     describe('click()', function() {
       it('attaches an onclick event to the node of the element', function() {
-        expect(typeof rect.node.onclick).not.toBe('function')
         rect.click(action)
-        expect(typeof rect.node.onclick).toBe('function')
+        expect(SVG.on).toHaveBeenCalledWith(rect.node, 'click', action)
       })
       it('fires the event on click', function() {
-        dispatchEvent(rect.click(action), 'click')
+        rect.click(action).fire('click')
         expect(toast).toBe('ready')
       })
       it('applies the element as context', function() {
-        dispatchEvent(rect.click(action), 'click')
+        rect.click(action).fire('click')
         expect(context).toBe(rect)
       })
       it('returns the called element', function() {
@@ -39,16 +39,15 @@ describe('Event', function() {
 
     describe('dblclick()', function() {
       it('attaches an ondblclick event to the node of the element', function() {
-        expect(typeof rect.node.ondblclick).not.toBe('function')
         rect.dblclick(action)
-        expect(typeof rect.node.ondblclick).toBe('function')
+        expect(SVG.on).toHaveBeenCalledWith(rect.node, 'dblclick', action)
       })
       it('fires the event on dblclick', function() {
-        dispatchEvent(rect.dblclick(action), 'dblclick')
+        rect.dblclick(action).fire('dblclick')
         expect(toast).toBe('ready')
       })
       it('applies the element as context', function() {
-        dispatchEvent(rect.dblclick(action), 'dblclick')
+        rect.dblclick(action).fire('dblclick')
         expect(context).toBe(rect)
       })
       it('returns the called element', function() {
@@ -58,16 +57,15 @@ describe('Event', function() {
 
     describe('mousedown()', function() {
       it('attaches an onmousedown event to the node of the element', function() {
-        expect(typeof rect.node.onmousedown).not.toBe('function')
         rect.mousedown(action)
-        expect(typeof rect.node.onmousedown).toBe('function')
+        expect(SVG.on).toHaveBeenCalledWith(rect.node, 'mousedown', action)
       })
       it('fires the event on mousedown', function() {
-        dispatchEvent(rect.mousedown(action), 'mousedown')
+        rect.mousedown(action).fire('mousedown')
         expect(toast).toBe('ready')
       })
       it('applies the element as context', function() {
-        dispatchEvent(rect.mousedown(action), 'mousedown')
+        rect.mousedown(action).fire('mousedown')
         expect(context).toBe(rect)
       })
       it('returns the called element', function() {
@@ -77,16 +75,15 @@ describe('Event', function() {
 
     describe('mouseup()', function() {
       it('attaches an onmouseup event to the node of the element', function() {
-        expect(typeof rect.node.onmouseup).not.toBe('function')
         rect.mouseup(action)
-        expect(typeof rect.node.onmouseup).toBe('function')
+        expect(SVG.on).toHaveBeenCalledWith(rect.node, 'mouseup', action)
       })
       it('fires the event on mouseup', function() {
-        dispatchEvent(rect.mouseup(action), 'mouseup')
+        rect.mouseup(action).fire('mouseup')
         expect(toast).toBe('ready')
       })
       it('applies the element as context', function() {
-        dispatchEvent(rect.mouseup(action), 'mouseup')
+        rect.mouseup(action).fire('mouseup')
         expect(context).toBe(rect)
       })
       it('returns the called element', function() {
@@ -96,16 +93,15 @@ describe('Event', function() {
 
     describe('mouseover()', function() {
       it('attaches an onmouseover event to the node of the element', function() {
-        expect(typeof rect.node.onmouseover).not.toBe('function')
         rect.mouseover(action)
-        expect(typeof rect.node.onmouseover).toBe('function')
+        expect(SVG.on).toHaveBeenCalledWith(rect.node, 'mouseover', action)
       })
       it('fires the event on mouseover', function() {
-        dispatchEvent(rect.mouseover(action), 'mouseover')
+        rect.mouseover(action).fire('mouseover')
         expect(toast).toBe('ready')
       })
       it('applies the element as context', function() {
-        dispatchEvent(rect.mouseover(action), 'mouseover')
+        rect.mouseover(action).fire('mouseover')
         expect(context).toBe(rect)
       })
       it('returns the called element', function() {
@@ -115,16 +111,15 @@ describe('Event', function() {
 
     describe('mouseout()', function() {
       it('attaches an onmouseout event to the node of the element', function() {
-        expect(typeof rect.node.onmouseout).not.toBe('function')
         rect.mouseout(action)
-        expect(typeof rect.node.onmouseout).toBe('function')
+        expect(SVG.on).toHaveBeenCalledWith(rect.node, 'mouseout', action)
       })
       it('fires the event on mouseout', function() {
-        dispatchEvent(rect.mouseout(action), 'mouseout')
+        rect.mouseout(action).fire('mouseout')
         expect(toast).toBe('ready')
       })
       it('applies the element as context', function() {
-        dispatchEvent(rect.mouseout(action), 'mouseout')
+        rect.mouseout(action).fire('mouseout')
         expect(context).toBe(rect)
       })
       it('returns the called element', function() {
@@ -134,16 +129,15 @@ describe('Event', function() {
 
     describe('mousemove()', function() {
       it('attaches an onmousemove event to the node of the element', function() {
-        expect(typeof rect.node.onmousemove).not.toBe('function')
         rect.mousemove(action)
-        expect(typeof rect.node.onmousemove).toBe('function')
+        expect(SVG.on).toHaveBeenCalledWith(rect.node, 'mousemove', action)
       })
       it('fires the event on mousemove', function() {
-        dispatchEvent(rect.mousemove(action), 'mousemove')
+        rect.mousemove(action).fire('mousemove')
         expect(toast).toBe('ready')
       })
       it('applies the element as context', function() {
-        dispatchEvent(rect.mousemove(action), 'mousemove')
+        rect.mousemove(action).fire('mousemove')
         expect(context).toBe(rect)
       })
       it('returns the called element', function() {
@@ -158,11 +152,11 @@ describe('Event', function() {
         expect(typeof rect.node.onmouseenter).toBe('function')
       })
       it('fires the event on mouseenter', function() {
-        dispatchEvent(rect.mouseenter(action), 'mouseenter')
+        rect.mouseenter(action).fire('mouseenter')
         expect(toast).toBe('ready')
       })
       it('applies the element as context', function() {
-        dispatchEvent(rect.mouseenter(action), 'mouseenter')
+        rect.mouseenter(action).fire('mouseenter')
         expect(context).toBe(rect)
       })
       it('returns the called element', function() {
@@ -177,11 +171,11 @@ describe('Event', function() {
         expect(typeof rect.node.onmouseleave).toBe('function')
       })
       it('fires the event on mouseleave', function() {
-        dispatchEvent(rect.mouseleave(action), 'mouseleave')
+        rect.mouseleave(action).fire('mouseleave')
         expect(toast).toBe('ready')
       })
       it('applies the element as context', function() {
-        dispatchEvent(rect.mouseleave(action), 'mouseleave')
+        rect.mouseleave(action).fire('mouseleave')
         expect(context).toBe(rect)
       })
       it('returns the called element', function() {
@@ -193,16 +187,15 @@ describe('Event', function() {
 
     describe('touchstart()', function() {
       it('attaches an ontouchstart event to the node of the element', function() {
-        expect(typeof rect.node.ontouchstart).not.toBe('function')
         rect.touchstart(action)
-        expect(typeof rect.node.ontouchstart).toBe('function')
+        expect(SVG.on).toHaveBeenCalledWith(rect.node, 'touchstart', action)
       })
       it('fires the event on touchstart', function() {
-        dispatchEvent(rect.touchstart(action), 'touchstart')
+        rect.touchstart(action).fire('touchstart')
         expect(toast).toBe('ready')
       })
       it('applies the element as context', function() {
-        dispatchEvent(rect.touchstart(action), 'touchstart')
+        rect.touchstart(action).fire('touchstart')
         expect(context).toBe(rect)
       })
       it('returns the called element', function() {
@@ -212,16 +205,15 @@ describe('Event', function() {
 
     describe('touchmove()', function() {
       it('attaches an ontouchmove event to the node of the element', function() {
-        expect(typeof rect.node.ontouchmove).not.toBe('function')
         rect.touchmove(action)
-        expect(typeof rect.node.ontouchmove).toBe('function')
+        expect(SVG.on).toHaveBeenCalledWith(rect.node, 'touchmove', action)
       })
       it('fires the event on touchmove', function() {
-        dispatchEvent(rect.touchmove(action), 'touchmove')
+        rect.touchmove(action).fire('touchmove')
         expect(toast).toBe('ready')
       })
       it('applies the element as context', function() {
-        dispatchEvent(rect.touchmove(action), 'touchmove')
+        rect.touchmove(action).fire('touchmove')
         expect(context).toBe(rect)
       })
       it('returns the called element', function() {
@@ -231,16 +223,15 @@ describe('Event', function() {
 
     describe('touchleave()', function() {
       it('attaches an ontouchleave event to the node of the element', function() {
-        expect(typeof rect.node.ontouchleave).not.toBe('function')
         rect.touchleave(action)
-        expect(typeof rect.node.ontouchleave).toBe('function')
+        expect(SVG.on).toHaveBeenCalledWith(rect.node, 'touchleave', action)
       })
       it('fires the event on touchleave', function() {
-        dispatchEvent(rect.touchleave(action), 'touchleave')
+        rect.touchleave(action).fire('touchleave')
         expect(toast).toBe('ready')
       })
       it('applies the element as context', function() {
-        dispatchEvent(rect.touchleave(action), 'touchleave')
+        rect.touchleave(action).fire('touchleave')
         expect(context).toBe(rect)
       })
       it('returns the called element', function() {
@@ -250,16 +241,15 @@ describe('Event', function() {
 
     describe('touchend()', function() {
       it('attaches an ontouchend event to the node of the element', function() {
-        expect(typeof rect.node.ontouchend).not.toBe('function')
         rect.touchend(action)
-        expect(typeof rect.node.ontouchend).toBe('function')
+        expect(SVG.on).toHaveBeenCalledWith(rect.node, 'touchend', action)
       })
       it('fires the event on touchend', function() {
-        dispatchEvent(rect.touchend(action), 'touchend')
+        rect.touchend(action).fire('touchend')
         expect(toast).toBe('ready')
       })
       it('applies the element as context', function() {
-        dispatchEvent(rect.touchend(action), 'touchend')
+        rect.touchend(action).fire('touchend')
         expect(context).toBe(rect)
       })
       it('returns the called element', function() {
@@ -269,16 +259,15 @@ describe('Event', function() {
 
     describe('touchcancel()', function() {
       it('attaches an ontouchcancel event to the node of the element', function() {
-        expect(typeof rect.node.ontouchcancel).not.toBe('function')
         rect.touchcancel(action)
-        expect(typeof rect.node.ontouchcancel).toBe('function')
+        expect(SVG.on).toHaveBeenCalledWith(rect.node, 'touchcancel', action)
       })
       it('fires the event on touchcancel', function() {
-        dispatchEvent(rect.touchcancel(action), 'touchcancel')
+        rect.touchcancel(action).fire('touchcancel')
         expect(toast).toBe('ready')
       })
       it('applies the element as context', function() {
-        dispatchEvent(rect.touchcancel(action), 'touchcancel')
+        rect.touchcancel(action).fire('touchcancel')
         expect(context).toBe(rect)
       })
       it('returns the called element', function() {
@@ -292,15 +281,15 @@ describe('Event', function() {
   describe('on()', function() {
 
     it('attaches an event to the element', function() {
-      dispatchEvent(rect.on('event', action), 'event')
+      rect.on('event', action).fire('event')
       expect(toast).toBe('ready')
     })
     it('attaches an event to a non svg element', function() {
-      var body = document.getElementsByTagName('body')[0]
-      SVG.on(body, 'event', action)
-      body.dispatchEvent(new CustomEvent('event'))
+      var el = document.createElement('div')
+      SVG.on(el, 'event', action)
+      el.dispatchEvent(new window.CustomEvent('event'))
       expect(toast).toBe('ready')
-      SVG.off(body, 'event', action)
+      SVG.off(el, 'event', action)
     })
     it('attaches multiple handlers on different element', function() {
       var listenerCnt = SVG.listeners.length
@@ -338,11 +327,11 @@ describe('Event', function() {
       expect(SVG.listeners.length).toBe(listenerCnt + 3)                                                           // added listeners on 3 different elements
     })
     it('applies the element as context', function() {
-      dispatchEvent(rect.on('event', action), 'event')
+      rect.on('event', action).fire('event')
       expect(context).toBe(rect)
     })
     it('applies given object as context', function() {
-      dispatchEvent(rect.on('event', action, this), 'event')
+      rect.on('event', action, this).fire('event')
       expect(context).toBe(this)
     })
     it('stores the listener for future reference', function() {
@@ -373,13 +362,13 @@ describe('Event', function() {
 
       expect(Object.keys(SVG.listeners[SVG.handlerMap.indexOf(rect.node)]['event']['*']).length).toBe(0)
 
-      dispatchEvent(rect, 'event')
+      rect.fire('event')
       expect(toast).toBeNull()
 
-      dispatchEvent(rect2, 'event')
+      rect2.fire('event')
       expect(toast).toBe('ready')
 
-      dispatchEvent(rect3, 'event')
+      rect3.fire('event')
       expect(butter).toBe('melting')
 
       expect(SVG.listeners[SVG.handlerMap.indexOf(rect.node)]['event']['*'][action]).toBeUndefined()
@@ -396,13 +385,13 @@ describe('Event', function() {
 
       expect(Object.keys(SVG.listeners[SVG.handlerMap.indexOf(rect.node)]['event']['namespace']).length).toBe(0)
 
-      dispatchEvent(rect, 'event')
+      rect.fire('event')
       expect(toast).toBeNull()
 
-      dispatchEvent(rect2, 'event')
+      rect2.fire('event')
       expect(toast).toBe('ready')
 
-      dispatchEvent(rect3, 'event')
+      rect3.fire('event')
       expect(butter).toBe('melting')
 
       expect(SVG.listeners[SVG.handlerMap.indexOf(rect.node)]['event']['namespace'][action]).toBeUndefined()
@@ -412,7 +401,7 @@ describe('Event', function() {
       rect.on('event.namespace', function() { butter = 'melting'; })
       rect.off('.namespace')
 
-      dispatchEvent(rect, 'event')
+      rect.fire('event')
       expect(toast).toBe('ready')
       expect(butter).toBeNull()
     })
@@ -421,7 +410,7 @@ describe('Event', function() {
       rect.on('event.namespace', function() { butter = 'melting'; })
       rect.off('event')
 
-      dispatchEvent(rect, 'event')
+      rect.fire('event')
       expect(toast).toBeNull()
       expect(butter).toBeNull()
       expect(SVG.listeners[SVG.handlerMap.indexOf(rect.node)]['event']).toBeUndefined()
@@ -430,8 +419,8 @@ describe('Event', function() {
       rect.on('event', action)
       rect.on('click', function() { butter = 'melting' })
       rect.off()
-      dispatchEvent(rect, 'event')
-      dispatchEvent(rect, 'click')
+      rect.fire('event')
+      rect.fire('click')
       expect(toast).toBeNull()
       expect(butter).toBeNull()
       expect(SVG.listeners[SVG.handlerMap.indexOf(rect.node)]).toBeUndefined()
@@ -477,7 +466,7 @@ describe('Event', function() {
     })
     it('fires my own event', function() {
       toast = null
-      rect.fire(new CustomEvent('event'))
+      rect.fire(new window.CustomEvent('event'))
       expect(toast).toBe('ready')
     })
     it('makes the event cancelable', function() {
@@ -494,11 +483,11 @@ describe('Event', function() {
       expect(rect.event()).toBe(null)
     })
     it('returns the last fired event', function() {
-      var event = new CustomEvent('foo')
+      var event = new window.CustomEvent('foo')
       rect.fire(event)
       expect(rect.event()).toBe(event)
 
-      event = new CustomEvent('bar')
+      event = new window.CustomEvent('bar')
       rect.fire(event)
       expect(rect.event()).toBe(event)
     })
diff --git a/spec/spec/fx.js b/spec/spec/fx.js
index dc12626..5e5f68c 100644
--- a/spec/spec/fx.js
+++ b/spec/spec/fx.js
@@ -2194,10 +2194,10 @@ describe('FX', function() {
 
       fx.start()
       // When setting a style color, it get saved as  a rgb() string even if it was passed as an hex code
-      // The style rgb string as spaces while the one returned by SVG.Color do not as show bellow
+      // The style rgb string has spaces while the one returned by SVG.Color do not as show bellow
       // CSS: rgb(255, 255, 255)                    SVG.Color: rgb(255,255,255)
       // The space in the style rbg string are removed so they can be equal
-      expect(rect.style('fill').replace(/ /g, '')).toBe(morph.at(0).toRgb())
+      expect(rect.style('fill').replace(/\s+/g, '')).toBe(morph.at(0).toRgb())
 
       jasmine.clock().tick(250) // Have the animation be half way
       fx.step()
diff --git a/spec/spec/helper.js b/spec/spec/helper.js
index 5c4e35d..576b9b6 100644
--- a/spec/spec/helper.js
+++ b/spec/spec/helper.js
@@ -1,48 +1,161 @@
 // create canavs
-var drawing = document.createElement('div')
+//var drawing, window = window, document = document, SVG = SVG
+
+if(typeof exports === 'object'){
+  window = require('svgdom')
+  SVG = require('../../dist/svg.js')
+  document = window.document
+  drawing = document.documentElement
+  imageUrl = 'spec/fixtures/pixel.png'
+  
+  function tag(name, attrs, children) {
+    var el = document.createElement(name)
+    for(var i in attrs){
+      el.setAttribute(i, attrs[i])
+    }
+    
+    for(var i in children){
+      if(typeof children[i] == 'string')
+        children[i] = document.createTextNode(children[i])
+        
+      el.appendChild(children[i])
+    }
+    
+    return el
+  }
+  
+  // create fixtures in svgdom
+  var el = tag('svg', {
+    height:0,
+    width:0,
+    id:'inlineSVG'
+  },[
+    tag('defs', {}, [
+      tag('linearGradient', {}, [
+        tag('stop', {offset: '5%',  'stop-color': 'green'}),
+        tag('stop', {offset: '95%', 'stop-color': 'gold'}),
+      ]),
+      tag('radialGradient', {}, [
+        tag('stop', {offset: '5%',  'stop-color': 'green'}),
+        tag('stop', {offset: '95%', 'stop-color': 'gold'}),
+      ])
+    ]),
+    tag('desc', {}, ['Some description']),
+    tag('path', {
+      id: 'lineAB',
+      d: 'M 100 350 l 150 -300',
+      stroke: 'red',
+      'stroke-width': '3',
+      fill: 'none'
+    }),
+    tag('path', {
+      id: 'lineBC',
+      d: 'M 250 50 l 150 300',
+      stroke: 'red',
+      'stroke-width': '3',
+      fill: 'none'
+    }),
+    tag('path', {
+      d: 'M 175 200 l 150 0',
+      stroke: 'green',
+      'stroke-width': '3',
+      fill: 'none'
+    }),
+    tag('path', {
+      d: 'M 100 350 q 150 -300 300 0',
+      stroke: 'blue',
+      'stroke-width': '5',
+      fill: 'none'
+    }),
+    tag('g', {
+      stroke: 'black',
+      'stroke-width': '2',
+      fill: 'black',
+      id: 'pointGroup'
+    },[
+      tag('circle', {
+        id: 'pointA',
+        cx: '100',
+        cy: '350',
+        r: '3',
+      }),
+      tag('circle', {
+        id: 'pointB',
+        cx: '250',
+        cy: '50',
+        r: '50',
+      }),
+      tag('circle', {
+        id: 'pointC',
+        cx: '400',
+        cy: '350',
+        r: '50',
+      })
+    ]),
+    tag('g', {
+      'font-size': '30',
+      font: 'sans-serif',
+      fill: 'black',
+      stroke: 'none',
+      'text-anchor': 'middle',
+      id: 'labelGroup'
+    },[
+      tag('text', {
+        id: 'pointA',
+        cx: '100',
+        cy: '350',
+        dy: '-30',
+      }, ['A']),
+      tag('text', {
+        id: 'pointB',
+        cx: '250',
+        cy: '50',
+        dy: '-10',
+      }, ['B']),
+      tag('text', {
+        id: 'pointC',
+        cx: '400',
+        cy: '350',
+        dx: '30',
+      }, ['C'])
+    ]),
+    tag('polygon', {points: '200,10 250,190 160,210'}),
+    tag('polyline', {points: '20,20 40,25 60,40 80,120 120,140 200,180'})
+  ])
+  
+  document.appendChild(el)
+  
+}else{
+  drawing = document.createElement('div')
+  document.getElementsByTagName('body')[0].appendChild(drawing)
+  imageUrl = 'fixtures/pixel.png'
+}
 drawing.id = 'drawing'
-document.getElementsByTagName('body')[0].appendChild(drawing)
 draw = SVG(drawing).size(100,100)
 
 // raw path data
 svgPath = 'M88.006,61.994c3.203,0,6.216-1.248,8.481-3.514C98.752,56.215,100,53.203,100,50c0-3.204-1.248-6.216-3.513-8.481 c-2.266-2.265-5.278-3.513-8.481-3.513c-2.687,0-5.237,0.877-7.327,2.496h-7.746l5.479-5.479 c5.891-0.757,10.457-5.803,10.457-11.896c0-6.614-5.381-11.995-11.994-11.995c-6.093,0-11.14,4.567-11.896,10.457l-5.479,5.479 v-7.747c1.618-2.089,2.495-4.641,2.495-7.327c0-3.204-1.247-6.216-3.513-8.481C56.216,1.248,53.204,0,50,0 c-3.204,0-6.216,1.248-8.481,3.513c-2.265,2.265-3.513,5.277-3.513,8.481c0,2.686,0.877,5.237,2.495,7.327v7.747l-5.479-5.479 c-0.757-5.89-5.803-10.457-11.896-10.457c-6.614,0-11.995,5.381-11.995,11.995c0,6.093,4.567,11.139,10.458,11.896l5.479,5.479 h-7.747c-2.089-1.619-4.641-2.496-7.327-2.496c-3.204,0-6.216,1.248-8.481,3.513C1.248,43.784,0,46.796,0,50 c0,3.203,1.248,6.216,3.513,8.48c2.265,2.266,5.277,3.514,8.481,3.514c2.686,0,5.237-0.877,7.327-2.496h7.747l-5.479,5.479 c-5.891,0.757-10.458,5.804-10.458,11.896c0,6.614,5.381,11.994,11.995,11.994c6.093,0,11.139-4.566,11.896-10.457l5.479-5.479 v7.749c-3.63,4.7-3.291,11.497,1.018,15.806C43.784,98.752,46.796,100,50,100c3.204,0,6.216-1.248,8.481-3.514 c4.309-4.309,4.647-11.105,1.018-15.806v-7.749l5.479,5.479c0.757,5.891,5.804,10.457,11.896,10.457 c6.613,0,11.994-5.38,11.994-11.994c0-6.093-4.566-11.14-10.457-11.896l-5.479-5.479h7.746 C82.769,61.117,85.319,61.994,88.006,61.994z M76.874,68.354c4.705,0,8.52,3.814,8.52,8.521c0,4.705-3.814,8.52-8.52,8.52 s-8.52-3.814-8.52-8.52l-12.33-12.33V81.98c3.327,3.328,3.327,8.723,0,12.049c-3.327,3.328-8.722,3.328-12.049,0 c-3.327-3.326-3.327-8.721,0-12.049V64.544l-12.33,12.33c0,4.705-3.814,8.52-8.52,8.52s-8.52-3.814-8.52-8.52 c0-4.706,3.814-8.521,8.52-8.521l12.33-12.33H18.019c-3.327,3.328-8.722,3.328-12.049,0c-3.327-3.326-3.327-8.721,0-12.048 s8.722-3.327,12.049,0h17.438l-12.33-12.33c-4.706,0-8.52-3.814-8.52-8.52c0-4.706,3.814-8.52,8.52-8.52s8.52,3.814,8.52,8.52 l12.33,12.33V18.019c-3.327-3.327-3.327-8.722,0-12.049s8.722-3.327,12.049,0s3.327,8.722,0,12.049v17.438l12.33-12.33 c0-4.706,3.814-8.52,8.52-8.52s8.52,3.814,8.52,8.52c0,4.705-3.814,8.52-8.52,8.52l-12.33,12.33h17.438 c3.327-3.327,8.722-3.327,12.049,0s3.327,8.722,0,12.048c-3.327,3.328-8.722,3.328-12.049,0H64.544L76.874,68.354z'
 
 // image url
-imageUrl = 'fixtures/pixel.png'
+
 
 // lorem ipsum text
 loremIpsum = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sodales\n imperdiet auctor. Nunc ultrices lectus at erat dictum pharetra\n elementum ante posuere. Duis turpis risus, blandit nec elementum et,\n posuere eget lacus. Aliquam et risus magna, eu aliquet nibh. Fusce\n consequat mi quis purus varius sagittis euismod urna interdum.\n Curabitur aliquet orci quis felis semper vulputate. Vestibulum ac nisi\n magna, id dictum diam. Proin sed metus vel magna blandit\n sodales. Pellentesque at neque ultricies nunc euismod rutrum ut in\n lorem. Mauris euismod tellus in tellus tempus interdum. Phasellus\n mattis sapien et leo feugiat dictum. Vestibulum at volutpat velit.'
 
-// test for touch device
-window.isTouchDevice = 'ontouchstart' in document.documentElement
+beforeEach(function(){
+  // test for touch device
+  this.isTouchDevice = 'ontouchstart' in document.documentElement
+})
 
 // strip spaces from result
-function stripped(string) {
-  return string.replace(/\s+/g, '')
-}
-
-// dispatch an event
-function dispatchEvent(element, name) {
-  var e
-
-  if (document.createEvent) {
-    e = document.createEvent('HTMLEvents')
-    e.initEvent(name, true, true)
-  } else {
-    e = document.createEventObject()
-    e.eventType = name
-  }
-
-  e.eventName = name
-
-  if (document.createEvent)
-    element.node.dispatchEvent(e)
-  else
-    element.node.fireEvent('on' + name, e)
+window.stripped = function(string) {
+  string = string.replace(/\s+/g, '')
+  if(string.slice(-1) == ';') string = string.slice(0, -1)
+  return string
 }
 
 // This is needed because of IE11 which uses space as a delimiter in matrix
-function matrixStringToArray(source){
+window.matrixStringToArray = function(source){
   return source
     .replace(/matrix\(|\)/, '')
     .split(SVG.regex.delimiter)
@@ -50,7 +163,7 @@ function matrixStringToArray(source){
 }
 
 // This is needed because of IE11 creating values like 2.99999 when calculating a transformed box
-function roundBox(box) {
+window.roundBox = function(box) {
   return new SVG.Box(
     Math.round(box.x),
     Math.round(box.y),
diff --git a/spec/spec/image.js b/spec/spec/image.js
index c81d68a..c7ffd22 100644
--- a/spec/spec/image.js
+++ b/spec/spec/image.js
@@ -67,7 +67,7 @@ describe('Image', function() {
       expect(image._error).toBe(errorCb.cb)
     })
     it('executes the error callback', function() {
-      expect(errorCb.cb).toHaveBeenCalledWith(jasmine.any(Event))
+      expect(errorCb.cb).toHaveBeenCalledWith(jasmine.any(window.Event))
     })
     it('does not execute the load callback', function() {
       expect(loadCb).not.toHaveBeenCalled()
diff --git a/spec/spec/matrix.js b/spec/spec/matrix.js
index 8fd40b4..3f1eadd 100644
--- a/spec/spec/matrix.js
+++ b/spec/spec/matrix.js
@@ -438,7 +438,7 @@ describe('Matrix', function() {
 
   describe('native()', function() {
     it('returns the node reference', function() {
-      expect(new SVG.Matrix().native() instanceof SVGMatrix).toBeTruthy()
+      expect(new SVG.Matrix().native() instanceof window.SVGMatrix).toBeTruthy()
     })
   })
 
diff --git a/spec/spec/memory.js b/spec/spec/memory.js
index c7bb942..32773a0 100644
--- a/spec/spec/memory.js
+++ b/spec/spec/memory.js
@@ -12,9 +12,8 @@ describe('Memory', function () {
 
   describe('remember()', function() {
     it('accepts an object with values', function() {
-      rect.remember({ bbox: rect.bbox() })
-      rect.size(200,300)
-      expect(rect.remember('bbox').width).toBe(100)
+      rect.remember({ some: {cool:'and',nested:'stuff',foo:5} })
+      expect(rect.remember('some').foo).toBe(5)
     })
     it('accepts key / value arguments', function() {
       rect.remember('fill', rect.attr('fill'))
diff --git a/spec/spec/path.js b/spec/spec/path.js
index 86db90d..50ff986 100644
--- a/spec/spec/path.js
+++ b/spec/spec/path.js
@@ -128,7 +128,7 @@ describe('Path', function() {
       var box = path.bbox()
       expect(box.width).toBeCloseTo(234)
     })
-    it('gets the width of the element aithout an agrument', function() {
+    it('gets the width of the element without an argument', function() {
       path.width(456)
       expect(path.width()).toBeCloseTo(456)
     })
@@ -140,7 +140,7 @@ describe('Path', function() {
       var box = path.bbox()
       expect(box.height).toBeCloseTo(654)
     })
-    it('gets the height of the element aithout an agrument', function() {
+    it('gets the height of the element without an argument', function() {
       path.height(321)
       expect(path.height()).toBeCloseTo(321)
     })
diff --git a/spec/spec/point.js b/spec/spec/point.js
index ae10ec8..8eacb84 100644
--- a/spec/spec/point.js
+++ b/spec/spec/point.js
@@ -134,7 +134,7 @@ describe('Point', function() {
 
   describe('native()', function() {
     it('returns native SVGPoint', function() {
-      expect(new SVG.Point().native() instanceof SVGPoint).toBeTruthy()
+      expect(new SVG.Point().native() instanceof window.SVGPoint).toBeTruthy()
     })
   })
 })
diff --git a/spec/spec/rect.js b/spec/spec/rect.js
index 84de937..5ce65c0 100644
--- a/spec/spec/rect.js
+++ b/spec/spec/rect.js
@@ -15,8 +15,7 @@ describe('Rect', function() {
     })
     it('should set the value of x with the first argument', function() {
       rect.x(123)
-      var box = rect.bbox()
-      expect(box.x).toBe(123)
+      expect(rect.node.getAttribute('x')).toBe('123')
     })
   })
   
@@ -26,8 +25,7 @@ describe('Rect', function() {
     })
     it('should set the value of y with the first argument', function() {
       rect.y(345)
-      var box = rect.bbox()
-      expect(box.y).toBe(345)
+      expect(rect.node.getAttribute('y')).toBe('345')
     })
   })
   
diff --git a/spec/spec/svg.js b/spec/spec/svg.js
index 43e41d3..bb6e5b5 100644
--- a/spec/spec/svg.js
+++ b/spec/spec/svg.js
@@ -1,11 +1,11 @@
 describe('SVG', function() {
-  
+
   describe('()', function() {
     var drawing, wrapper
     
     beforeEach(function() {
-      wrapper = document.createElement('div')
-      document.getElementsByTagName('body')[0].appendChild(wrapper)
+      wrapper = document.createElement('svg')
+      document.documentElement.appendChild(wrapper)
       drawing = SVG(wrapper)
     })
     
@@ -87,18 +87,16 @@ describe('SVG', function() {
     var drawing, wrapper, parser
   
     beforeEach(function() {
-      wrapper = document.createElement('div')
-      document.getElementsByTagName('body')[0].appendChild(wrapper)
+      wrapper = document.createElement('svg')
+      document.documentElement.appendChild(wrapper)
       drawing = SVG(wrapper)
-      
-      parser = document.getElementsByTagName('body')[0].lastChild
     })
   
     it('creates a parser element when calling SVG()', function() {
       expect(SVG.parser.draw.node.nodeName).toBe('svg')
     })
     it('hides the parser', function() {
-      expect(SVG.parser.draw.node.getAttribute('style')).toBe('overflow: hidden; top: -100%; left: -100%; position: absolute; opacity: 0;')
+      expect(window.stripped(SVG.parser.draw.node.getAttribute('style'))).toBe('overflow:hidden;top:-100%;left:-100%;position:absolute;opacity:0')
     })
     it('holds polyline and path', function() {
       expect(SVG.select('polyline', SVG.parser.draw.node).first().type).toBe('polyline')
diff --git a/spec/spec/text.js b/spec/spec/text.js
index 690cf3d..83b1596 100644
--- a/spec/spec/text.js
+++ b/spec/spec/text.js
@@ -151,12 +151,12 @@ describe('Text', function() {
     it('adds content in a nested tspan', function() {
       text.text('It is a bear!')
       expect(text.node.childNodes[0].nodeType).toBe(1)
-      expect(text.node.childNodes[0].childNodes[0].nodeValue).toBe('It is a bear!')
+      expect(text.node.childNodes[0].childNodes[0].data).toBe('It is a bear!')
     })
     it('adds content in a nested tspan even with an empty string', function() {
       text.text('')
       expect(text.node.childNodes[0].nodeType).toBe(1)
-      expect(text.node.childNodes[0].childNodes[0].nodeValue).toBe('')
+      expect(text.node.childNodes[0].childNodes[0].data).toBe('')
     })
     it('creates multiple lines with a newline separated string', function() {
       text.text('It is\nJUST\na bear!')
@@ -177,9 +177,9 @@ describe('Text', function() {
         add.plain('hut')
       })
       expect(text.node.childNodes[0].nodeType).toBe(1)
-      expect(text.node.childNodes[0].childNodes[0].nodeValue).toBe('mastaba')
+      expect(text.node.childNodes[0].childNodes[0].data).toBe('mastaba')
       expect(text.node.childNodes[1].nodeType).toBe(3)
-      expect(text.node.childNodes[1].nodeValue).toBe('hut')
+      expect(text.node.childNodes[1].data).toBe('hut')
     })
   })
 
@@ -187,12 +187,12 @@ describe('Text', function() {
     it('adds content without a tspan', function() {
       text.plain('It is a bear!')
       expect(text.node.childNodes[0].nodeType).toBe(3)
-      expect(text.node.childNodes[0].nodeValue).toBe('It is a bear!')
+      expect(text.node.childNodes[0].data).toBe('It is a bear!')
     })
     it('clears content before adding new content', function() {
       text.plain('It is not a bear!')
       expect(text.node.childNodes.length).toBe(1)
-      expect(text.node.childNodes[0].nodeValue).toBe('It is not a bear!')
+      expect(text.node.childNodes[0].data).toBe('It is not a bear!')
     })
     it('restores the content from the dom', function() {
       text.plain('Just plain text!')
@@ -204,12 +204,12 @@ describe('Text', function() {
     it('adds content in a tspan', function() {
       text.tspan('It is a bear!')
       expect(text.node.childNodes[0].nodeType).toBe(1)
-      expect(text.node.childNodes[0].childNodes[0].nodeValue).toBe('It is a bear!')
+      expect(text.node.childNodes[0].childNodes[0].data).toBe('It is a bear!')
     })
     it('clears content before adding new content', function() {
       text.tspan('It is not a bear!')
       expect(text.node.childNodes.length).toBe(1)
-      expect(text.node.childNodes[0].childNodes[0].nodeValue).toBe('It is not a bear!')
+      expect(text.node.childNodes[0].childNodes[0].data).toBe('It is not a bear!')
     })
   })
 
@@ -257,28 +257,28 @@ describe('Text', function() {
       text.clear().build(true)
       text.plain('A great piece!')
       text.plain('Another great piece!')
-      expect(text.node.childNodes[0].nodeValue).toBe('A great piece!')
-      expect(text.node.childNodes[1].nodeValue).toBe('Another great piece!')
+      expect(text.node.childNodes[0].data).toBe('A great piece!')
+      expect(text.node.childNodes[1].data).toBe('Another great piece!')
     })
     it('enables adding multiple tspan nodes when given true', function() {
       text.clear().build(true)
       text.tspan('A great piece!')
       text.tspan('Another great piece!')
-      expect(text.node.childNodes[0].childNodes[0].nodeValue).toBe('A great piece!')
-      expect(text.node.childNodes[1].childNodes[0].nodeValue).toBe('Another great piece!')
+      expect(text.node.childNodes[0].childNodes[0].data).toBe('A great piece!')
+      expect(text.node.childNodes[1].childNodes[0].data).toBe('Another great piece!')
     })
     it('disables adding multiple plain text nodes when given false', function() {
       text.clear().build(true)
       text.plain('A great piece!')
       text.build(false).plain('Another great piece!')
-      expect(text.node.childNodes[0].nodeValue).toBe('Another great piece!')
+      expect(text.node.childNodes[0].data).toBe('Another great piece!')
       expect(text.node.childNodes[1]).toBe(undefined)
     })
     it('disables adding multiple tspan nodes when given false', function() {
       text.clear().build(true)
       text.tspan('A great piece!')
       text.build(false).tspan('Another great piece!')
-      expect(text.node.childNodes[0].childNodes[0].nodeValue).toBe('Another great piece!')
+      expect(text.node.childNodes[0].childNodes[0].data).toBe('Another great piece!')
       expect(text.node.childNodes[1]).toBe(undefined)
     })
   })
diff --git a/spec/spec/transformations.js b/spec/spec/transformations.js
index 72767af..3399981 100644
--- a/spec/spec/transformations.js
+++ b/spec/spec/transformations.js
@@ -196,8 +196,8 @@ describe('Transformations:', function() {
         expect(morphed.b).toEqual(0)
         expect(morphed.c).toEqual(0)
         expect(morphed.d).toBeCloseTo(0.6)
-        expect(morphed.e).toEqual(20)
-        expect(morphed.f).toEqual(20)
+        expect(morphed.e).toBeCloseTo(20)
+        expect(morphed.f).toBeCloseTo(20)
       })
     })
   })  
diff --git a/spec/support/jasmine.json b/spec/support/jasmine.json
new file mode 100644
index 0000000..c7845fc
--- /dev/null
+++ b/spec/support/jasmine.json
@@ -0,0 +1,9 @@
+{
+  "spec_dir": "spec/spec",
+  "spec_files": [
+    "!(helpers).js"
+  ],
+  "helpers": [
+    "helpers.js"
+  ]
+}