Sort out leftovers from the old fx module

This commit is mostly to clean up the implementation of the initAnimation
method of the Fx Module (issue #547). It also fixes these issues: #552, #582
and #584.

Here is a list of the changes and fixes that are made:
* Add a plot and array method to SVG.TextPath (issue #582)

* Make the method plot a getter when no parameter is passed for SVG.Polyline,
SVG.Polygon, SVG.Line, SVG.Path (this idea come from issue #547)

* Allow SVG.PointArray to be passed flat array

* Change the regexp SVG.PointArray use to parse string to allow more
flexibility in the way spaces and commas can be used to separate points
(something like this is now accepted: '1, 2, 3, 4')

* Allow plot to be called with 4 parameters when animating an SVG.Line

* Fix a bug in the plain morphing part of SVG.MorphObj that is in the FX module

* Relative value for SVG.Number are now calculated in its morph method (idea
from issue #547)

* Clean up the implementation of the initAnimation method of the FX module
(issues #547, #552, #584)

8 files changed, 557 insertions, 102 deletions

diff --git a/spec/spec/array.js b/spec/spec/array.js
index 614194b..2e57d38 100644
--- a/spec/spec/array.js
+++ b/spec/spec/array.js
@@ -33,11 +33,31 @@ describe('PointArray', function () {
 
     expect(array + '').toBe('0,0.15 -100,-3.141592654 50,100')
   })
+  it('parses a flat array of x/y coordinates to a point array', function() {
+    var array = new SVG.PointArray([1,4, 5,68, 12,24])
+
+    expect(array.value).toEqual([[1,4], [5,68], [12,24]])
+  })
   it('parses points with space delimitered x/y coordinates', function() {
     var array = new SVG.PointArray('221.08 191.79 0.46 191.79 0.46 63.92 63.8 0.46 284.46 0.46 284.46 128.37 221.08 191.79')
 
     expect(array + '').toBe('221.08,191.79 0.46,191.79 0.46,63.92 63.8,0.46 284.46,0.46 284.46,128.37 221.08,191.79')
   })
+  it('parses points with comma delimitered x/y coordinates', function() {
+    var array = new SVG.PointArray('221.08,191.79,0.46,191.79,0.46,63.92,63.8,0.46,284.46,0.46,284.46,128.37,221.08,191.79')
+
+    expect(array + '').toBe('221.08,191.79 0.46,191.79 0.46,63.92 63.8,0.46 284.46,0.46 284.46,128.37 221.08,191.79')
+  })
+  it('parses points with comma and space delimitered x/y coordinates', function() {
+    var array = new SVG.PointArray('221.08, 191.79, 0.46, 191.79, 0.46, 63.92, 63.8, 0.46, 284.46, 0.46, 284.46, 128.37, 221.08, 191.79')
+
+    expect(array + '').toBe('221.08,191.79 0.46,191.79 0.46,63.92 63.8,0.46 284.46,0.46 284.46,128.37 221.08,191.79')
+  })
+  it('parses points with space and comma delimitered x/y coordinates', function() {
+    var array = new SVG.PointArray('221.08 ,191.79 ,0.46 ,191.79 ,0.46 ,63.92 ,63.8 ,0.46 ,284.46 ,0.46 ,284.46 ,128.37 ,221.08 ,191.79')
+
+    expect(array + '').toBe('221.08,191.79 0.46,191.79 0.46,63.92 63.8,0.46 284.46,0.46 284.46,128.37 221.08,191.79')
+  })
   it('parses points with redundant spaces at the end', function() {
     var array = new SVG.PointArray('2176.6,1708.8 2176.4,1755.8 2245.8,1801.5 2297,1787.8  ')
 
@@ -55,6 +75,13 @@ describe('PointArray', function () {
 
     expect(array + '').toBe('1,2')
   })
+  it('parses odd number of points in a flat array of x/y coordinates and silently remove the odd point', function() {
+    // this  is according to spec: https://svgwg.org/svg2-draft/shapes.html#DataTypePoints
+
+    var array = new SVG.PointArray([1, 2, 3])
+
+    expect(array.value).toEqual([[1,2]])
+  })
 })
 
 describe('PathArray', function () {
diff --git a/spec/spec/fx.js b/spec/spec/fx.js
index 49b373b..b8357db 100644
--- a/spec/spec/fx.js
+++ b/spec/spec/fx.js
@@ -1580,4 +1580,353 @@ describe('FX', function() {
     expect(ctm.e).toBe(0)
     expect(ctm.f).toBe(0)
   })
+
+  describe('when animating plots', function() {
+    it('should allow plot animations to be chained', function() {
+      var pathString1 = 'M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80'
+        , pathString2 = 'M10 80 C 40 150, 65 150, 95 80 S 150 10, 180 80'
+        , path = draw.path(pathString1)
+        , morph
+
+      fx = path.animate(1000).plot(pathString2).animate(1000).plot(pathString1)
+      morph = new SVG.PathArray(pathString1).morph(pathString2)
+
+      fx.start()
+      expect(path.array()).toEqual(morph.at(0))
+
+      jasmine.clock().tick(500) // Have the first animation be half way
+      fx.step()
+      expect(path.array()).toEqual(morph.at(0.5))
+
+      jasmine.clock().tick(500) // Have the first animation reach its end
+      fx.step()
+      expect(path.array()).toEqual(morph.at(1))
+      morph = new SVG.PathArray(pathString2).morph(pathString1)
+      expect(path.array()).toEqual(morph.at(0))
+
+      jasmine.clock().tick(500) // Have the second animation be half way
+      fx.step()
+      expect(path.array()).toEqual(morph.at(0.5))
+
+      jasmine.clock().tick(500) // Have the second animation reach its end
+      fx.step()
+      expect(path.array()).toEqual(morph.at(1))
+    })
+
+    it('should allow plot to be called on a polyline', function() {
+      var startValue = [[0,0], [100,50], [50,100], [150,50], [200,50]]
+        , endValue = [[0,0], [100,50], [50,100], [150,50], [200,50], [250,100], [300,50], [350,50]]
+        , morph = new SVG.PointArray(startValue).morph(endValue)
+        , polyline = draw.polyline(startValue)
+
+      fx = polyline.animate(3000).plot(endValue)
+
+      fx.start()
+      expect(polyline.array()).toEqual(morph.at(0))
+
+      jasmine.clock().tick(1500) // Have the animation be half way
+      fx.step()
+      expect(polyline.array()).toEqual(morph.at(0.5))
+
+      jasmine.clock().tick(1500) // Have the animation reach its end
+      fx.step()
+      expect(polyline.array()).toEqual(morph.at(1))
+    })
+
+    it('should allow plot to be called on a polygon', function() {
+      var startValue = [[0,0], [100,50], [50,100], [150,50], [200,50]]
+        , endValue = [[0,0], [100,50], [50,100], [150,50], [200,50], [250,100], [300,50], [350,50]]
+        , morph = new SVG.PointArray(startValue).morph(endValue)
+        , polygon = draw.polygon(startValue)
+
+      fx = polygon.animate(3000).plot(endValue)
+
+      fx.start()
+      expect(polygon.array()).toEqual(morph.at(0))
+
+      jasmine.clock().tick(1500) // Have the animation be half way
+      fx.step()
+      expect(polygon.array()).toEqual(morph.at(0.5))
+
+      jasmine.clock().tick(1500) // Have the animation reach its end
+      fx.step()
+      expect(polygon.array()).toEqual(morph.at(1))
+    })
+
+    it('should allow plot to be called on a path', function() {
+      var startValue = new SVG.PathArray('M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80')
+        , endValue = new SVG.PathArray('M10 80 C 40 150, 65 150, 95 80 S 150 10, 180 80')
+        , morph = new SVG.PathArray(startValue).morph(endValue)
+        , path = draw.path(startValue)
+
+      fx = path.animate(2000).plot(endValue)
+
+      fx.start()
+      expect(path.array()).toEqual(morph.at(0))
+
+      jasmine.clock().tick(1000) // Have the animation be half way
+      fx.step()
+      expect(path.array()).toEqual(morph.at(0.5))
+
+      jasmine.clock().tick(1000) // Have the animation reach its end
+      fx.step()
+      expect(path.array()).toEqual(morph.at(1))
+    })
+
+    it('should allow plot to be called on a textpath', function() {
+      var startValue = new SVG.PathArray('M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80')
+        , endValue = new SVG.PathArray('M10 80 C 40 150, 65 150, 95 80 S 150 10, 180 80')
+        , morph = new SVG.PathArray(startValue).morph(endValue)
+
+      var text = draw.text(function(add) {
+        add.tspan("We go up and down, then we go down, then up again")
+      })
+
+      fx = text.path(startValue).animate(500).plot(endValue)
+
+      fx.start()
+      expect(text.array()).toEqual(morph.at(0))
+
+      jasmine.clock().tick(250) // Have the animation be half way
+      fx.step()
+      expect(text.array()).toEqual(morph.at(0.5))
+
+      jasmine.clock().tick(250) // Have the animation reach its end
+      fx.step()
+      expect(text.array()).toEqual(morph.at(1))
+    })
+
+    it('should allow plot to be called on a line', function() {
+      var startValue = '0,0 100,150'
+        , endValue = [[50,30], [120,250]]
+        , morph = new SVG.PointArray(startValue).morph(endValue)
+        , line = draw.line(startValue)
+
+      fx = line.animate(3000).plot(endValue)
+
+      fx.start()
+      expect(line.array()).toEqual(morph.at(0))
+
+      jasmine.clock().tick(1500) // Have the animation be half way
+      fx.step()
+      expect(line.array()).toEqual(morph.at(0.5))
+
+      jasmine.clock().tick(1500) // Have the animation reach its end
+      fx.step()
+      expect(line.array()).toEqual(morph.at(1))
+    })
+
+    it('should allow plot to be called with 4 parameters on a line', function () {
+      var startPointArray = new SVG.PointArray('0,0 100,150')
+        , endPointArray = new SVG.PointArray([[50,30], [120,250]])
+        , morph = new SVG.PointArray(startPointArray).morph(endPointArray)
+        , a
+
+      a = startPointArray.value
+      var line = draw.line(a[0][0], a[0][1], a[1][0], a[1][1])
+
+      a = endPointArray.value
+      fx = line.animate(3000).plot(a[0][0], a[0][1], a[1][0], a[1][1])
+
+      fx.start()
+      expect(line.array()).toEqual(morph.at(0))
+
+      jasmine.clock().tick(1500) // Have the animation be half way
+      fx.step()
+      expect(line.array()).toEqual(morph.at(0.5))
+
+      jasmine.clock().tick(1500) // Have the animation reach its end
+      fx.step()
+      expect(line.array()).toEqual(morph.at(1))
+    })
+  })
+
+
+  describe('when animating attributes', function() {
+    it('should be possible to animate numeric attributes', function () {
+      var startValue = 0
+        , endValue = 150
+        , morph = new SVG.Number(startValue).morph(endValue)
+
+      var text = draw.text(function(add) {
+        add.tspan('We go ')
+        add.tspan('up').fill('#f09').dy(-40)
+        add.tspan(', then we go down, then up again').dy(40)
+      })
+
+      var path = 'M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100'
+
+      text.path(path).font({ size: 42.5, family: 'Verdana' })
+
+      text.textPath().attr('startOffset', startValue)
+      fx = text.textPath().animate(1000).attr('startOffset', endValue)
+
+      fx.start()
+      expect(text.textPath().attr('startOffset')).toBe(morph.at(0).value)
+
+      jasmine.clock().tick(500) // Have the animation be half way
+      fx.step()
+      expect(text.textPath().attr('startOffset')).toBe(morph.at(0.5).value)
+
+      jasmine.clock().tick(500) // Have the animation reach its end
+      fx.step()
+      expect(text.textPath().attr('startOffset')).toBe(morph.at(1).value)
+    })
+
+    it('should be possible to animate non-numeric attributes', function () {
+      var startValue = 'butt'
+        , endValue = 'round'
+        , line = draw.line('0,0 100,150').attr('stroke-linecap', startValue)
+
+      fx = line.animate(3000).attr('stroke-linecap', endValue)
+
+      fx.start()
+      expect(line.attr('stroke-linecap')).toBe(startValue)
+
+      jasmine.clock().tick(1500) // Have the animation be half way
+      fx.step()
+      expect(line.attr('stroke-linecap')).toBe(startValue)
+
+      jasmine.clock().tick(1500) // Have the animation reach its end
+      fx.step()
+      expect(line.attr('stroke-linecap')).toBe(endValue)
+    })
+
+    it('should be possible to animate color attributes by using SVG.Color', function() {
+      var startValue = 'rgb(42,251,100)'
+        , endValue = 'rgb(10,80,175)'
+        , morph = new SVG.Color(startValue).morph(endValue)
+
+      rect.attr('fill', startValue)
+      fx.attr('fill', endValue)
+
+      fx.start()
+      expect(rect.attr('fill')).toBe(morph.at(0).toString())
+
+      jasmine.clock().tick(250) // Have the animation be half way
+      fx.step()
+      expect(rect.attr('fill')).toBe(morph.at(0.5).toString())
+
+      jasmine.clock().tick(250) // Have the animation reach its end
+      fx.step()
+      expect(rect.attr('fill')).toBe(morph.at(1).toString())
+    })
+
+    it('should be possible to pass percentage strings to numeric attributes', function () {
+      var startValue = '0%'
+        , endValue = '80%'
+        , morph = new SVG.Number(startValue).morph(endValue)
+
+      var text = draw.text(function(add) {
+        add.tspan('We go ')
+        add.tspan('up').fill('#f09').dy(-40)
+        add.tspan(', then we go down, then up again').dy(40)
+      })
+
+      var path = 'M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100'
+
+      text.path(path).font({ size: 42.5, family: 'Verdana' })
+
+      text.textPath().attr('startOffset', startValue)
+      fx = text.textPath().animate(1000).attr('startOffset', endValue)
+
+      fx.start()
+      expect(text.textPath().attr('startOffset')).toBe(morph.at(0).toString())
+
+      jasmine.clock().tick(500) // Have the animation be half way
+      fx.step()
+      expect(text.textPath().attr('startOffset')).toBe(morph.at(0.5).toString())
+
+      jasmine.clock().tick(500) // Have the animation reach its end
+      fx.step()
+      expect(text.textPath().attr('startOffset')).toBe(morph.at(1).toString())
+    })
+  })
+
+
+  describe('when animating styles', function() {
+    it('should be possible to animate numeric styles', function () {
+      var startValue = 0
+        , endValue = 5
+        , morph = new SVG.Number(startValue).morph(endValue)
+
+      rect.style('stroke-width', startValue)
+      fx.style('stroke-width', endValue)
+
+      fx.start()
+      expect(rect.style('stroke-width')).toBe(morph.at(0).toString())
+
+      jasmine.clock().tick(250) // Have the animation be half way
+      fx.step()
+      expect(rect.style('stroke-width')).toBe(morph.at(0.5).toString())
+
+      jasmine.clock().tick(250) // Have the animation reach its end
+      fx.step()
+      expect(rect.style('stroke-width')).toBe(morph.at(1).toString())
+    })
+
+    it('should be possible to animate non-numeric styles', function () {
+      var startValue = 'butt'
+        , endValue = 'round'
+        , line = draw.line('0,0 100,150').style('stroke-linecap', startValue)
+
+      fx = line.animate(3000).style('stroke-linecap', endValue)
+
+      fx.start()
+      expect(line.style('stroke-linecap')).toBe(startValue)
+
+      jasmine.clock().tick(1500) // Have the animation be half way
+      fx.step()
+      expect(line.style('stroke-linecap')).toBe(startValue)
+
+      jasmine.clock().tick(1500) // Have the animation reach its end
+      fx.step()
+      expect(line.style('stroke-linecap')).toBe(endValue)
+    })
+
+    it('should be possible to animate color styles by using SVG.Color', function() {
+      var startValue = '#81DE01'
+        , endValue = '#B1835D'
+        , morph = new SVG.Color(startValue).morph(endValue)
+
+      rect.style('fill', startValue)
+      fx.style('fill', endValue)
+
+
+      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
+      // 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())
+
+      jasmine.clock().tick(250) // Have the animation be half way
+      fx.step()
+      expect(rect.style('fill').replace(/ /g, '')).toBe(morph.at(0.5).toRgb())
+
+      jasmine.clock().tick(250) // Have the animation reach its end
+      fx.step()
+      expect(rect.style('fill').replace(/ /g, '')).toBe(morph.at(1).toRgb())
+    })
+
+    it('should be possible to pass percentage strings to numeric styles', function () {
+      var startValue = '0%'
+        , endValue = '5%'
+        , morph = new SVG.Number(startValue).morph(endValue)
+
+      rect.style('stroke-width', startValue)
+      fx.style('stroke-width', endValue)
+
+      fx.start()
+      expect(rect.style('stroke-width')).toBe(morph.at(0).toString())
+
+      jasmine.clock().tick(250) // Have the animation be half way
+      fx.step()
+      expect(rect.style('stroke-width')).toBe(morph.at(0.5).toString())
+
+      jasmine.clock().tick(250) // Have the animation reach its end
+      fx.step()
+      expect(rect.style('stroke-width')).toBe(morph.at(1).toString())
+    })
+  })
 })
diff --git a/spec/spec/line.js b/spec/spec/line.js
index 1ab0010..ce6318f 100644
--- a/spec/spec/line.js
+++ b/spec/spec/line.js
@@ -1,14 +1,14 @@
 describe('Line', function() {
   var line
-  
+
   beforeEach(function() {
     line = draw.line(0,100,100,0)
   })
-  
+
   afterEach(function() {
     draw.clear()
   })
-  
+
   // #487
   describe('()', function(){
     it('will take an array as input', function(){
@@ -19,8 +19,17 @@ describe('Line', function() {
       expect(attrs.x2).toBe(100)
       expect(attrs.y2).toBe(0)
     })
+
+    it('falls back to a line with its two points at [0,0] without an argument', function() {
+      line = draw.line()
+      var attrs = line.attr()
+      expect(attrs.x1).toBe(0)
+      expect(attrs.y1).toBe(0)
+      expect(attrs.x2).toBe(0)
+      expect(attrs.y2).toBe(0)
+    })
   })
-  
+
   describe('x()', function() {
     it('should return the value of x without an argument', function() {
       expect(line.x()).toBe(0)
@@ -31,7 +40,7 @@ describe('Line', function() {
       expect(box.x).toBe(123)
     })
   })
-  
+
   describe('y()', function() {
     it('should return the value of y without an argument', function() {
       expect(line.y()).toBe(0)
@@ -42,7 +51,7 @@ describe('Line', function() {
       expect(box.y).toBe(345)
     })
   })
-  
+
   describe('cx()', function() {
     it('should return the value of cx without an argument', function() {
       expect(line.cx()).toBe(50)
@@ -53,7 +62,7 @@ describe('Line', function() {
       expect(box.cx).toBe(123)
     })
   })
-  
+
   describe('cy()', function() {
     it('should return the value of cy without an argument', function() {
       expect(line.cy()).toBe(50)
@@ -64,7 +73,7 @@ describe('Line', function() {
       expect(box.cy).toBe(345)
     })
   })
-  
+
   describe('move()', function() {
     it('should set the x and y position', function() {
       line.move(123,456)
@@ -111,7 +120,7 @@ describe('Line', function() {
       expect(box.y).toBe(85)
     })
   })
-  
+
   describe('center()', function() {
     it('should set the cx and cy position', function() {
       line.center(321,567)
@@ -150,7 +159,7 @@ describe('Line', function() {
       expect(line.height()).toBe(box.height)
     })
   })
-  
+
   describe('size()', function() {
     it('should define the width and height of the element', function() {
       line.size(987,654)
@@ -173,19 +182,19 @@ describe('Line', function() {
       expect(line.width() / line.height()).toBe(box.width / box.height)
     })
   })
-  
+
   describe('scale()', function() {
     it('should scale the element universally with one argument', function() {
       var box1 = line.tbox()
         , box2 = line.scale(2).tbox()
-      
+
       expect(box2.width).toBe(box1.width * 2)
       expect(box2.height).toBe(box1.height * 2)
     })
     it('should scale the element over individual x and y axes with two arguments', function() {
       var box1 = line.tbox()
-        , box2 = line.scale(2,3.5).tbox() 
-      
+        , box2 = line.scale(2,3.5).tbox()
+
       expect(box2.width).toBe(box1.width * 2)
       expect(box2.height).toBe(box1.height * 3.5)
     })
@@ -197,7 +206,7 @@ describe('Line', function() {
       expect(line.node.getAttribute('transform')).toBe('matrix(1,0,0,1,12,12)')
     })
   })
-  
+
   describe('plot()', function() {
     it('should update the start and end points', function() {
       line.plot(100,200,300,400)
@@ -207,14 +216,29 @@ describe('Line', function() {
       expect(box.x + box.width).toBe(300)
       expect(box.y + box.height).toBe(400)
     })
-  })
-  
-})
-
-
-
-
-
+    it('with one argument, change the x1,y1,x2,y2 attributes of the underlying line node', function() {
+      expect(line.plot('100,50 200,10')).toBe(line)
 
+      var attrs  = line.attr()
+      expect(attrs.x1).toBe(100)
+      expect(attrs.y1).toBe(50)
+      expect(attrs.x2).toBe(200)
+      expect(attrs.y2).toBe(10)
+    })
+    it('with four arguments, change the x1,y1,x2,y2 attributes of the underlying line node', function() {
+      expect(line.plot(45, 24, 220, 300)).toBe(line)
 
+      var attrs  = line.attr()
+      expect(attrs.x1).toBe(45)
+      expect(attrs.y1).toBe(24)
+      expect(attrs.x2).toBe(220)
+      expect(attrs.y2).toBe(300)
+    })
+    it('without an argument, return the coordinates in a point array', function () {
+      var attrs = line.attr()
+        , pointArray = new SVG.PointArray([[attrs.x1, attrs.y1], [attrs.x2, attrs.y2]])
 
+      expect(line.plot()).toEqual(pointArray)
+    })
+  })
+})
diff --git a/spec/spec/number.js b/spec/spec/number.js
index de00481..890bb2c 100644
--- a/spec/spec/number.js
+++ b/spec/spec/number.js
@@ -57,17 +57,17 @@ describe('Number', function() {
     })
     it('appends the unit', function() {
       number.value = 1.21
-      number.unit = 'px' 
+      number.unit = 'px'
       expect(number.toString()).toBe('1.21px')
     })
     it('converts percent values properly', function() {
       number.value = 1.36
-      number.unit = '%' 
+      number.unit = '%'
       expect(number.toString()).toBe('136%')
     })
     it('converts second values properly', function() {
       number.value = 2500
-      number.unit = 's' 
+      number.unit = 's'
       expect(number.toString()).toBe('2.5s')
     })
   })
@@ -180,6 +180,14 @@ describe('Number', function() {
       number.morph(destination)
       expect(number.destination).toEqual(destination)
     })
+    it('if the passed object as a relative attribute set to true, destination is relative to the current value', function() {
+      var n1 = new SVG.Number(3)
+        , n2 = new SVG.Number(7)
+
+      n2.relative = true
+      n1.morph(n2)
+      expect(n1.destination.value).toBe(n1.value + n2.value)
+    })
   })
 
   describe('at()', function() {
@@ -202,15 +210,3 @@ describe('Number', function() {
   })
 
 })
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/spec/spec/path.js b/spec/spec/path.js
index b333002..d9d35b8 100644
--- a/spec/spec/path.js
+++ b/spec/spec/path.js
@@ -1,14 +1,22 @@
 describe('Path', function() {
   var path
-  
+
   beforeEach(function() {
     path = draw.path(svgPath)
   })
-  
+
   afterEach(function() {
     draw.clear()
   })
 
+  describe('()', function() {
+    it('falls back to a single point without an argument', function() {
+      path = draw.path()
+      expect(path.attr('d')).toBe('M0 0 ')
+    })
+  })
+
+
   describe('array()', function() {
     it('returns an instance of SVG.PathArray', function() {
       expect(path.array() instanceof SVG.PathArray).toBeTruthy()
@@ -17,7 +25,7 @@ describe('Path', function() {
       expect(path.array()).toBe(path._array)
     })
   })
-  
+
   describe('x()', function() {
     it('returns the value of x without an argument', function() {
       expect(path.x()).toBe(0)
@@ -28,7 +36,7 @@ describe('Path', function() {
       expect(box.x).toBe(123)
     })
   })
-  
+
   describe('y()', function() {
     it('returns the value of y without an argument', function() {
       expect(path.y()).toBe(0)
@@ -39,7 +47,7 @@ describe('Path', function() {
       expect(box.y).toBe(345)
     })
   })
-  
+
   describe('cx()', function() {
     it('returns the value of cx without an argument', function() {
       expect(path.cx()).toBe(50)
@@ -50,7 +58,7 @@ describe('Path', function() {
       expect(box.cx).toBe(123)
     })
   })
-  
+
   describe('cy()', function() {
     it('returns the value of cy without an argument', function() {
       expect(path.cy()).toBe(50)
@@ -61,7 +69,7 @@ describe('Path', function() {
       expect(box.cy).toBe(345)
     })
   })
-  
+
   describe('move()', function() {
     it('sets the x and y position', function() {
       path.move(123,456)
@@ -104,7 +112,7 @@ describe('Path', function() {
       expect(box.y).toBe(85)
     })
   })
-  
+
   describe('center()', function() {
     it('sets the cx and cy position', function() {
       path.center(321,567)
@@ -137,7 +145,7 @@ describe('Path', function() {
       expect(path.height()).toBeCloseTo(321)
     })
   })
-  
+
   describe('size()', function() {
     it('defines the width and height of the element', function() {
       path.size(987,654)
@@ -158,19 +166,19 @@ describe('Path', function() {
       expect(path.width() / path.height()).toBe(box.width / box.height)
     })
   })
-  
+
   describe('scale()', function() {
     it('should scale the element universally with one argument', function() {
       var box1 = path.tbox()
         , box2 = path.scale(2).tbox()
-      
+
       expect(box1.width * 2).toBe(box2.width)
       expect(box1.height * 2).toBe(box2.height)
     })
     it('should scale the element over individual x and y axes with two arguments', function() {
       var box1 = path.tbox()
         , box2 = path.scale(2, 3.5).tbox()
-      
+
       expect(box1.width * 2).toBe(box2.width)
       expect(box1.height * 3.5).toBe(box2.height)
     })
@@ -184,9 +192,16 @@ describe('Path', function() {
   })
 
   describe('plot()', function() {
-    it('falls back to a single point without an argument', function() {
-      path = draw.path()
-      expect(path.node.getAttribute('d')).toBe('M0 0 ')
+    it('with an argument, change the d attribute of the underlying path node', function() {
+      var pathString = 'm 3,2 c 0,0 -0,13 8,14 L 5,4'
+        , pathArray = new SVG.PathArray(pathString)
+
+      expect(path.plot(pathString)).toBe(path)
+      expect(path.attr('d')).toBe(pathArray.toString())
+    })
+
+    it('without an argument, return the path array', function () {
+      expect(path.plot()).toBe(path.array())
     })
   })
 
@@ -212,14 +227,4 @@ describe('Path', function() {
       expect(path.pointAt(100)).toEqual(path.node.getPointAtLength(100))
     })
   })
-
-  
 })
-
-
-
-
-
-
-
-
diff --git a/spec/spec/polygon.js b/spec/spec/polygon.js
index b6dc40d..8f84410 100644
--- a/spec/spec/polygon.js
+++ b/spec/spec/polygon.js
@@ -1,14 +1,22 @@
 describe('Polygon', function() {
   var polygon
-  
+
   beforeEach(function() {
     polygon = draw.polygon('0,0 100,0 100,100 0,100')
   })
-  
+
   afterEach(function() {
     draw.clear()
   })
 
+  describe('()', function(){
+    it('falls back to a single point without an argument', function() {
+      polygon = draw.polygon()
+      expect(polygon.attr('points')).toBe('0,0')
+    })
+  })
+
+
   describe('array()', function() {
     it('returns an instance of SVG.PointArray', function() {
       expect(polygon.array() instanceof SVG.PointArray).toBeTruthy()
@@ -17,7 +25,7 @@ describe('Polygon', function() {
       expect(polygon.array()).toBe(polygon._array)
     })
   })
-  
+
   describe('x()', function() {
     it('returns the value of x without an argument', function() {
       expect(polygon.x()).toBe(0)
@@ -28,7 +36,7 @@ describe('Polygon', function() {
       expect(box.x).toBe(123)
     })
   })
-  
+
   describe('y()', function() {
     it('returns the value of y without an argument', function() {
       expect(polygon.y()).toBe(0)
@@ -39,7 +47,7 @@ describe('Polygon', function() {
       expect(box.y).toBe(345)
     })
   })
-  
+
   describe('cx()', function() {
     it('returns the value of cx without an argument', function() {
       expect(polygon.cx()).toBe(50)
@@ -50,7 +58,7 @@ describe('Polygon', function() {
       expect(box.cx).toBe(123)
     })
   })
-  
+
   describe('cy()', function() {
     it('returns the value of cy without an argument', function() {
       expect(polygon.cy()).toBe(50)
@@ -61,7 +69,7 @@ describe('Polygon', function() {
       expect(box.cy).toBe(345)
     })
   })
-  
+
   describe('move()', function() {
     it('sets the x and y position', function() {
       polygon.move(123,456)
@@ -98,7 +106,7 @@ describe('Polygon', function() {
       expect(box.y).toBe(85)
     })
   })
-  
+
   describe('center()', function() {
     it('sets the cx and cy position', function() {
       polygon.center(321,567)
@@ -131,7 +139,7 @@ describe('Polygon', function() {
       expect(polygon.height()).toBeCloseTo(789)
     })
   })
-  
+
   describe('size()', function() {
     it('should define the width and height of the element', function() {
       polygon.size(987,654)
@@ -152,19 +160,19 @@ describe('Polygon', function() {
       expect(polygon.width() / polygon.height()).toBe(box.width / box.height)
     })
   })
-  
+
   describe('scale()', function() {
     it('should scale the element universally with one argument', function() {
       var box1 = polygon.tbox()
         , box2 = polygon.scale(2).tbox()
-      
+
       expect(box2.width).toBe(box1.width * 2)
       expect(box2.height).toBe(box1.height * 2)
     })
     it('should scale the element over individual x and y axes with two arguments', function() {
       var box1 = polygon.tbox()
         , box2 = polygon.scale(2, 3.5).tbox()
-      
+
       expect(box2.width).toBe(box1.width * 2)
       expect(box2.height).toBe(box1.height * 3.5)
     })
@@ -176,13 +184,19 @@ describe('Polygon', function() {
       expect(polygon.node.getAttribute('transform')).toBe('matrix(1,0,0,1,12,12)')
     })
   })
-  
-})
-
-
-
-
 
 
+  describe('plot()', function() {
+    it('with an argument, change the points attribute of the underlying polygon node', function() {
+      var pointString = '100,50 75,20 200,100'
+        , pointArray = new SVG.PointArray(pointString)
 
+      expect(polygon.plot(pointString)).toBe(polygon)
+      expect(polygon.attr('points')).toBe(pointArray.toString())
+    })
 
+    it('without an argument, return the point array', function () {
+      expect(polygon.plot()).toBe(polygon.array())
+    })
+  })
+})
diff --git a/spec/spec/polyline.js b/spec/spec/polyline.js
index eeb761f..099bfc9 100644
--- a/spec/spec/polyline.js
+++ b/spec/spec/polyline.js
@@ -1,14 +1,22 @@
 describe('Polyline', function() {
   var polyline
-  
+
   beforeEach(function() {
     polyline = draw.polyline('0,0 100,0 100,100 0,100')
   })
-  
+
   afterEach(function() {
     draw.clear()
   })
 
+  describe('()', function(){
+    it('falls back to a single point without an argument', function() {
+      polyline = draw.polyline()
+      expect(polyline.attr('points')).toBe('0,0')
+    })
+  })
+
+
   describe('array()', function() {
     it('returns an instance of SVG.PointArray', function() {
       expect(polyline.array() instanceof SVG.PointArray).toBeTruthy()
@@ -17,7 +25,7 @@ describe('Polyline', function() {
       expect(polyline.array()).toBe(polyline._array)
     })
   })
-  
+
   describe('x()', function() {
     it('returns the value of x without an argument', function() {
       expect(polyline.x()).toBe(0)
@@ -28,7 +36,7 @@ describe('Polyline', function() {
       expect(box.x).toBe(123)
     })
   })
-  
+
   describe('y()', function() {
     it('returns the value of y without an argument', function() {
       expect(polyline.y()).toBe(0)
@@ -39,7 +47,7 @@ describe('Polyline', function() {
       expect(box.y).toBe(345)
     })
   })
-  
+
   describe('cx()', function() {
     it('returns the value of cx without an argument', function() {
       expect(polyline.cx()).toBe(50)
@@ -50,7 +58,7 @@ describe('Polyline', function() {
       expect(box.cx).toBe(123)
     })
   })
-  
+
   describe('cy()', function() {
     it('returns the value of cy without an argument', function() {
       expect(polyline.cy()).toBe(50)
@@ -61,7 +69,7 @@ describe('Polyline', function() {
       expect(box.cy).toBe(345)
     })
   })
-  
+
   describe('move()', function() {
     it('sets the x and y position', function() {
       polyline.move(123,456)
@@ -98,7 +106,7 @@ describe('Polyline', function() {
       expect(box.y).toBe(85)
     })
   })
-  
+
   describe('center()', function() {
     it('sets the cx and cy position', function() {
       polyline.center(321,567)
@@ -131,7 +139,7 @@ describe('Polyline', function() {
       expect(polyline.height()).toBeCloseTo(789)
     })
   })
-  
+
   describe('size()', function() {
     it('should define the width and height of the element', function() {
       polyline.size(987,654)
@@ -152,19 +160,19 @@ describe('Polyline', function() {
       expect(polyline.width() / polyline.height()).toBe(box.width / box.height)
     })
   })
-  
+
   describe('scale()', function() {
     it('should scale the element universally with one argument', function() {
       var box1 = polyline.tbox()
         , box2 = polyline.scale(2).tbox()
-      
+
       expect(box2.width).toBe(box1.width * 2)
       expect(box2.height).toBe(box1.height * 2)
     })
     it('should scale the element over individual x and y axes with two arguments', function() {
       var box1 = polyline.tbox()
         , box2 = polyline.scale(2, 3.5).tbox()
-      
+
       expect(box2.width).toBe(box1.width * 2)
       expect(box2.height).toBe(box1.height * 3.5)
     })
@@ -176,13 +184,18 @@ describe('Polyline', function() {
       expect(polyline.node.getAttribute('transform')).toBe('matrix(1,0,0,1,12,12)')
     })
   })
-  
-})
-
-
-
-
-
 
+  describe('plot()', function() {
+    it('with an argument, change the points attribute of the underlying polyline node', function() {
+      var pointString = '100,50 75,20 200,100'
+        , pointArray = new SVG.PointArray(pointString)
 
+      expect(polyline.plot(pointString)).toBe(polyline)
+      expect(polyline.attr('points')).toBe(pointArray.toString())
+    })
 
+    it('without an argument, return the point array', function () {
+      expect(polyline.plot()).toBe(polyline.array())
+    })
+  })
+})
diff --git a/spec/spec/textpath.js b/spec/spec/textpath.js
index 362a854..b921cb2 100644
--- a/spec/spec/textpath.js
+++ b/spec/spec/textpath.js
@@ -7,7 +7,7 @@ describe('TextPath', function() {
   })
 
   afterEach(function() {
-    draw.clear() 
+    draw.clear()
   })
 
   describe('path()', function() {
@@ -32,4 +32,31 @@ describe('TextPath', function() {
     })
   })
 
-})
\ No newline at end of file
+  describe('array()', function() {
+    it('return the path array of the underlying path', function() {
+      expect(text.path(data).array()).toEqual(new SVG.PathArray(data))
+    })
+    it('return null if there is no underlying path', function () {
+      expect(text.array()).toBe(null)
+    })
+  })
+
+  describe('plot()', function() {
+    it('with an argument, change the array of the underlying path', function() {
+      expect(text.path().plot(data)).toBe(text)
+      expect(text.array()).toEqual(new SVG.PathArray(data))
+    })
+    it('with an argument, do nothing if there is no underlying path', function() {
+      expect(text.plot(data)).toBe(text)
+      expect(text.array()).toEqual(null)
+    })
+    it('without an argument, return the path array of the underlying path', function () {
+      text.path(data)
+      expect(text.plot()).toBe(text.array())
+      expect(text.plot()).not.toBe(null)
+    })
+    it('without an argument, return null if there is no underlying path', function () {
+      expect(text.plot()).toBe(null)
+    })
+  })
+})