diff --git a/spec/lib/area/area_spec.coffee b/spec/lib/area/area_spec.coffee
new file mode 100644
index 0000000..5d3f38a
--- /dev/null
+++ b/spec/lib/area/area_spec.coffee
@@ -0,0 +1,47 @@
+describe 'Morris.Area', ->
+
+  describe 'svg structure', ->
+    defaults =
+      element: 'graph'
+      data: [{x: '2012 Q1', y: 1}, {x: '2012 Q2', y: 1}]
+      lineColors: [ '#0b62a4', '#7a92a3']
+      gridLineColor: '#aaa'
+      xkey: 'x'
+      ykeys: ['y']
+      labels: ['Y']
+
+    it 'should contain a line path for each line', ->
+      chart = Morris.Area $.extend {}, defaults
+      $('#graph').find("path[stroke='#0b62a4']").size().should.equal 1
+
+    it 'should contain a path with stroke-width 0 for each line', ->
+      chart = Morris.Area $.extend {}, defaults
+      $('#graph').find("path[stroke='#0b62a4']").size().should.equal 1
+
+    it 'should contain 5 grid lines', ->
+      chart = Morris.Area $.extend {}, defaults
+      $('#graph').find("path[stroke='#aaaaaa']").size().should.equal 5
+
+    it 'should contain 9 text elements', ->
+      chart = Morris.Area $.extend {}, defaults
+      $('#graph').find("text").size().should.equal 9
+
+  describe 'svg attributes', ->
+    defaults =
+      element: 'graph'
+      data: [{x: '2012 Q1', y: 1}, {x: '2012 Q2', y: 1}]
+      xkey: 'x'
+      ykeys: ['y']
+      labels: ['Y']
+      lineColors: [ '#0b62a4', '#7a92a3']
+      lineWidth: 3
+      pointWidths: [5]
+      pointStrokeColors: ['#ffffff']
+      gridLineColor: '#aaa'
+      gridStrokeWidth: 0.5
+      gridTextColor: '#888'
+      gridTextSize: 12
+
+    it 'should have a line with the fill of a modified line color', ->
+      chart = Morris.Area $.extend {}, defaults
+      $('#graph').find("path[fill='#2577b5']").size().should.equal 1
diff --git a/spec/lib/bar/bar_spec.coffee b/spec/lib/bar/bar_spec.coffee
new file mode 100644
index 0000000..cfa2936
--- /dev/null
+++ b/spec/lib/bar/bar_spec.coffee
@@ -0,0 +1,50 @@
+describe 'Morris.Bar', ->
+
+  describe 'svg structure', ->
+    defaults =
+      element: 'graph'
+      data: [{x: 'foo', y: 2, z: 3}, {x: 'bar', y: 4, z: 6}]
+      xkey: 'x'
+      ykeys: ['y', 'z']
+      labels: ['Y', 'Z']
+
+    it 'should contain a rect for each bar', ->
+      chart = Morris.Bar $.extend {}, defaults
+      $('#graph').find("rect").size().should.equal 4
+
+    it 'should contain 5 grid lines', ->
+      chart = Morris.Bar $.extend {}, defaults
+      $('#graph').find("path").size().should.equal 5
+
+    it 'should contain 7 text elements', ->
+      chart = Morris.Bar $.extend {}, defaults
+      $('#graph').find("text").size().should.equal 7
+
+  describe 'svg attributes', ->
+    defaults =
+      element: 'graph'
+      data: [{x: 'foo', y: 2, z: 3}, {x: 'bar', y: 4, z: 6}]
+      xkey: 'x'
+      ykeys: ['y', 'z']
+      labels: ['Y', 'Z']
+      barColors: [ '#0b62a4', '#7a92a3']
+      gridLineColor: '#aaa'
+      gridStrokeWidth: 0.5
+      gridTextColor: '#888'
+      gridTextSize: 12
+
+    it 'should have a bar with the first default color', ->
+      chart = Morris.Bar $.extend {}, defaults
+      $('#graph').find("rect[fill='#0b62a4']").size().should.equal 2
+
+    it 'should have a bar with stroke width 0', ->
+      chart = Morris.Bar $.extend {}, defaults
+      $('#graph').find("rect[stroke-width='0']").size().should.equal 4
+
+    it 'should have text with configured fill color', ->
+      chart = Morris.Bar $.extend {}, defaults
+      $('#graph').find("text[fill='#888888']").size().should.equal 7
+
+    it 'should have text with configured font size', ->
+      chart = Morris.Bar $.extend {}, defaults
+      $('#graph').find("text[font-size='12px']").size().should.equal 7
diff --git a/spec/lib/bar/colours.coffee b/spec/lib/bar/colours.coffee
index a061ef6..ebe5469 100644
--- a/spec/lib/bar/colours.coffee
+++ b/spec/lib/bar/colours.coffee
@@ -33,4 +33,4 @@ describe 'Morris.Bar#colorFor', ->
     stub.should.have.been.calledWith(
       {x:0, y:3, label:'foo'},
       {index:1, key:'z', label:'Z'},
-      'hover')
\ No newline at end of file
+      'hover')
diff --git a/spec/lib/donut/donut_spec.coffee b/spec/lib/donut/donut_spec.coffee
new file mode 100644
index 0000000..92f0c2e
--- /dev/null
+++ b/spec/lib/donut/donut_spec.coffee
@@ -0,0 +1,61 @@
+describe 'Morris.Donut', ->
+
+  describe 'svg structure', ->
+    defaults =
+      element: 'graph'
+      data: [ {label: 'Jam', value: 25 },
+        {label: 'Frosted', value: 40 },
+        {label: 'Custard', value: 25 },
+        {label: 'Sugar', value: 10 } ]
+      formatter: (y) -> "#{y}%"
+
+    it 'should contain 2 paths for each segment', ->
+      chart = Morris.Donut $.extend {}, defaults
+      $('#graph').find("path").size().should.equal 8
+
+    it 'should contain 2 text elements for the label', ->
+      chart = Morris.Donut $.extend {}, defaults
+      $('#graph').find("text").size().should.equal 2
+
+  describe 'svg attributes', ->
+    defaults =
+    defaults =
+      element: 'graph'
+      data: [ {label: 'Jam', value: 25 },
+        {label: 'Frosted', value: 40 },
+        {label: 'Custard', value: 25 },
+        {label: 'Sugar', value: 10 } ]
+      formatter: (y) -> "#{y}%"
+      colors: [ '#0B62A4', '#3980B5', '#679DC6', '#95BBD7']
+
+    it 'should have a label with font size 15', ->
+      chart = Morris.Donut $.extend {}, defaults
+      $('#graph').find("text[font-size='15px']").size().should.equal 1
+
+    it 'should have a label with font size 14', ->
+      chart = Morris.Donut $.extend {}, defaults
+      $('#graph').find("text[font-size='14px']").size().should.equal 1
+
+    it 'should have a label with font-weight 800', ->
+      chart = Morris.Donut $.extend {}, defaults
+      $('#graph').find("text[font-weight='800']").size().should.equal 1
+
+    it 'should have 1 paths with fill of first color', ->
+      chart = Morris.Donut $.extend {}, defaults
+      $('#graph').find("path[fill='#0b62a4']").size().should.equal 1
+
+    it 'should have 1 paths with stroke of first color', ->
+      chart = Morris.Donut $.extend {}, defaults
+      $('#graph').find("path[stroke='#0b62a4']").size().should.equal 1
+
+    it 'should have a path with white stroke', ->
+      chart = Morris.Donut $.extend {}, defaults
+      $('#graph').find("path[stroke='#ffffff']").size().should.equal 4
+
+    it 'should have a path with stroke-width 3', ->
+      chart = Morris.Donut $.extend {}, defaults
+      $('#graph').find("path[stroke-width='3']").size().should.equal 4
+
+    it 'should have a path with stroke-width 2', ->
+      chart = Morris.Donut $.extend {}, defaults
+      $('#graph').find("path[stroke-width='2']").size().should.equal 4
diff --git a/spec/lib/line/line_spec.coffee b/spec/lib/line/line_spec.coffee
index b1c4b72..f0accfe 100644
--- a/spec/lib/line/line_spec.coffee
+++ b/spec/lib/line/line_spec.coffee
@@ -140,3 +140,68 @@ describe 'Morris.Line', ->
       testData = [{x: 0, y: null}, {x: 10, y: 10}, {x: 20, y: 0}, {x: 30, y: 10}, {x: 40, y: null}]
       path = Morris.Line.createPath(testData, true, 20)
       path.should.equal 'M10,10C12.5,7.5,17.5,0,20,0C22.5,0,27.5,7.5,30,10'
+
+  describe 'svg structure', ->
+    defaults =
+      element: 'graph'
+      data: [{x: '2012 Q1', y: 1}, {x: '2012 Q2', y: 1}]
+      lineColors: [ '#0b62a4', '#7a92a3']
+      xkey: 'x'
+      ykeys: ['y']
+      labels: ['dontcare']
+
+    it 'should contain a path that represents the line', ->
+      chart = Morris.Line $.extend {}, defaults
+      $('#graph').find("path[stroke='#0b62a4']").size().should.equal 1
+
+    it 'should contain a circle for each data point', ->
+      chart = Morris.Line $.extend {}, defaults
+      $('#graph').find("circle").size().should.equal 2
+
+    it 'should contain 5 grid lines', ->
+      chart = Morris.Line $.extend {}, defaults
+      $('#graph').find("path[stroke='#aaaaaa']").size().should.equal 5
+
+    it 'should contain 9 text elements', ->
+      chart = Morris.Line $.extend {}, defaults
+      $('#graph').find("text").size().should.equal 9
+
+  describe 'svg attributes', ->
+    defaults =
+      element: 'graph'
+      data: [{x: '2012 Q1', y: 1}, {x: '2012 Q2', y: 1}]
+      xkey: 'x'
+      ykeys: ['y', 'z']
+      labels: ['Y', 'Z']
+      lineColors: [ '#0b62a4', '#7a92a3']
+      lineWidth: 3
+      pointWidths: [5]
+      pointStrokeColors: ['#ffffff']
+      gridLineColor: '#aaa'
+      gridStrokeWidth: 0.5
+      gridTextColor: '#888'
+      gridTextSize: 12
+
+    it 'should have circles with configured fill color', ->
+      chart = Morris.Line $.extend {}, defaults
+      $('#graph').find("circle[fill='#0b62a4']").size().should.equal 2
+
+    it 'should have circles with configured stroke width', ->
+      chart = Morris.Line $.extend {}, defaults
+      $('#graph').find("circle[stroke-width='5']").size().should.equal 2
+
+    it 'should have circles with configured stroke color', ->
+      chart = Morris.Line $.extend {}, defaults
+      $('#graph').find("circle[stroke='#ffffff']").size().should.equal 2
+
+    it 'should have line with configured line width', ->
+      chart = Morris.Line $.extend {}, defaults
+      $('#graph').find("path[stroke-width='3']").size().should.equal 1
+
+    it 'should have text with configured font size', ->
+      chart = Morris.Line $.extend {}, defaults
+      $('#graph').find("text[font-size='12px']").size().should.equal 9
+
+    it 'should have text with configured font size', ->
+      chart = Morris.Line $.extend {}, defaults
+      $('#graph').find("text[fill='#888888']").size().should.equal 9