Added SVG.Number, reworked gradient system

4 files changed, 244 insertions, 6 deletions

diff --git a/spec/index.html b/spec/index.html
index 38150a9..d4cf605 100644
--- a/spec/index.html
+++ b/spec/index.html
@@ -43,6 +43,7 @@
 <script type="text/javascript" src="spec/doc.js"></script>
 <script type="text/javascript" src="spec/gradient.js"></script>
 <script type="text/javascript" src="spec/color.js"></script>
+<script type="text/javascript" src="spec/number.js"></script>
 
 <script type="text/javascript">
   (function() {
diff --git a/spec/spec/ellipse.js b/spec/spec/ellipse.js
index b19aa57..cd3e0e5 100644
--- a/spec/spec/ellipse.js
+++ b/spec/spec/ellipse.js
@@ -63,7 +63,7 @@ describe('Ellipse', function() {
   })
   
   describe('center()', function() {
-    it('should set the cx and cy position', function() {
+    it('sets the cx and cy position', function() {
       ellipse.center(321,567)
       var box = ellipse.bbox()
       expect(box.cx).toBe(321)
@@ -72,7 +72,7 @@ describe('Ellipse', function() {
   })
   
   describe('size()', function() {
-    it('should define the rx and ry of the element', function() {
+    it('defines the rx and ry of the element', function() {
       ellipse.size(987,654)
       expect(ellipse.node.getAttribute('rx')).toBe((987 / 2).toString())
       expect(ellipse.node.getAttribute('ry')).toBe((654 / 2).toString())
diff --git a/spec/spec/gradient.js b/spec/spec/gradient.js
index f07a7e8..8aef33e 100644
--- a/spec/spec/gradient.js
+++ b/spec/spec/gradient.js
@@ -2,21 +2,81 @@ describe('Gradient', function() {
   var rect = draw.rect(100,100)
     , gradient = draw.gradient('linear', function(stop) {
       stop.at({ offset: 0, color: '#333', opacity: 1 })
-      stop.at({ offset: 100, color: '#fff', opacity: 1 })
+      stop.at({ offset: 1, color: '#fff', opacity: 1 })
     })
   
-  it('should be an instance of SVG.Gradient', function() {
+  it('is an instance of SVG.Gradient', function() {
     expect(gradient instanceof SVG.Gradient).toBe(true)
   })
   
   describe('fill()', function() {
-    it('should return the id of the gradient wrapped in url()', function() {
+    it('returns the id of the gradient wrapped in url()', function() {
       expect(gradient.fill()).toBe('url(#' + gradient.attr('id') + ')')
     })
-    it('should be called when instance is passed as an attribute value', function() {
+    it('is called when instance is passed as an attribute value', function() {
       rect.attr('fill', gradient)
       expect(rect.attr('fill')).toBe('url(#' + gradient.attr('id') + ')')
     })
   })
+
+  describe('input values', function() {
+    var s1, s2
+
+    it('accepts floats', function() {
+      gradient = draw.gradient('linear', function(stop) {
+        s1 = stop.at({ offset: 0.12, color: '#333', opacity: 1 })
+        s2 = stop.at({ offset: 0.93, color: '#fff', opacity: 1 })
+      })
+      expect(s1.attr('offset')).toBe(0.12)
+      expect(s2.attr('offset')).toBe(0.93)
+    })
+    it('accepts string floats', function() {
+      gradient = draw.gradient('linear', function(stop) {
+        s1 = stop.at({ offset: '0.13', color: '#333', opacity: 1 })
+        s2 = stop.at({ offset: '0.92', color: '#fff', opacity: 1 })
+      })
+      expect(s1.attr('offset')).toBe(0.13)
+      expect(s2.attr('offset')).toBe(0.92)
+    })
+    it('accept percentages', function() {
+      gradient = draw.gradient('linear', function(stop) {
+        s1 = stop.at({ offset: '14%', color: '#333', opacity: 1 })
+        s2 = stop.at({ offset: '91%', color: '#fff', opacity: 1 })
+      })
+      expect(s1.attr('offset')).toBe('14%')
+      expect(s2.attr('offset')).toBe('91%')
+    })
+  })
+
+  describe('update()', function() {
+
+    it('removes all existing children first', function() {
+      gradient = draw.gradient('linear', function(stop) {
+        s1 = stop.at({ offset: 0.12, color: '#333', opacity: 1 })
+        s2 = stop.at({ offset: 0.93, color: '#fff', opacity: 1 })
+      })
+      expect(gradient.children().length).toBe(2)
+      gradient.update(function(stop) {
+        s1 = stop.at({ offset: 0.33, color: '#666', opacity: 1 })
+        s2 = stop.at({ offset: 1, color: '#000', opacity: 1 })
+      })
+      expect(gradient.children().length).toBe(2)
+    })
+
+  })
+
+  describe('get()', function() {
+
+    it('returns the stop at a given index', function() {
+      gradient = draw.gradient('linear', function(stop) {
+        s1 = stop.at({ offset: 0.12, color: '#333', opacity: 1 })
+        s2 = stop.at({ offset: 0.93, color: '#fff', opacity: 1 })
+      })
+      expect(gradient.get(0)).toBe(s1)
+      expect(gradient.get(1)).toBe(s2)
+      expect(gradient.get(2)).toBe(undefined)
+    })
+
+  })
   
 })
\ No newline at end of file
diff --git a/spec/spec/number.js b/spec/spec/number.js
new file mode 100644
index 0000000..62e51a2
--- /dev/null
+++ b/spec/spec/number.js
@@ -0,0 +1,177 @@
+describe('Number', function() {
+  var number
+
+  beforeEach(function() {
+    number = new SVG.Number
+  })
+
+  describe('new', function() {
+    
+    it('is zero', function() {
+      expect(number.value).toBe(0)
+    })
+    it('has a blank unit', function() {
+      expect(number.unit).toBe('')
+    })
+    it('parses a pixel value', function() {
+      number = new SVG.Number('20px')
+      expect(number.value).toBe(20)
+      expect(number.unit).toBe('px')
+    })
+    it('parses a percent value', function() {
+      number = new SVG.Number('99%')
+      expect(number.value).toBe(0.99)
+      expect(number.unit).toBe('%')
+    })
+
+  })
+
+  describe('toString()', function() {
+
+    it('converts the number to a string', function() {
+      expect(number.toString()).toBe('0')
+    })
+    it('appends the unit', function() {
+      number.value = 1.21
+      number.unit = 'px' 
+      expect(number.toString()).toBe('1.21px')
+    })
+    it('converts percent values properly', function() {
+      number.value = 1.36
+      number.unit = '%' 
+      expect(number.toString()).toBe('136%')
+    })
+
+  })
+
+  describe('valueOf()', function() {
+
+    it('returns a numeric value for default units', function() {
+      expect(typeof number.valueOf()).toBe('number')
+      number = new SVG.Number('12')
+      expect(typeof number.valueOf()).toBe('number')
+      number = new SVG.Number(13)
+      expect(typeof number.valueOf()).toBe('number')
+    })
+    it('returns a numeric value for pixel units', function() {
+      number = new SVG.Number('10px')
+      expect(typeof number.valueOf()).toBe('number')
+    })
+    it('returns a numeric value for percent units', function() {
+      number = new SVG.Number('20%')
+      expect(typeof number.valueOf()).toBe('number')
+    })
+    it('converts to a primitive when multiplying', function() {
+      number.value = 80
+      expect(number * 4).toBe(320)
+    })
+
+  })
+
+  describe('to()', function() {
+
+    beforeEach(function() {
+      number.plus(4)
+    })
+
+    it('changes the unit value', function() {
+      number.to('%')
+      expect(number.unit).toBe('%')
+    })
+    it('changes the output value', function() {
+      var oldNumber = number.valueOf()
+      number.to('%')
+      expect(number.toString()).toBe('400%')
+    })
+
+  })
+
+  describe('plus()', function() {
+
+    it('adds a given number', function() {
+      number.plus(3.5)
+      expect(number.valueOf()).toBe(3.5)
+    })
+    it('adds a given percentage value', function() {
+      number.plus('225%')
+      expect(number.valueOf()).toBe(2.25)
+    })
+    it('adds a given pixel value', function() {
+      number.plus('83px')
+      expect(number.valueOf()).toBe(83)
+    })
+
+  })
+
+  describe('minus()', function() {
+
+    it('subtracts a given number', function() {
+      number.minus(3.7)
+      expect(number.valueOf()).toBe(-3.7)
+    })
+    it('subtracts a given percentage value', function() {
+      number.minus('223%')
+      expect(number.valueOf()).toBe(-2.23)
+    })
+    it('subtracts a given pixel value', function() {
+      number.minus('85px')
+      expect(number.valueOf()).toBe(-85)
+    })
+
+  })
+
+  describe('times()', function() {
+
+    beforeEach(function() {
+      number.plus(4)
+    })
+
+    it('multiplies with a given number', function() {
+      number.times(3)
+      expect(number.valueOf()).toBe(12)
+    })
+    it('multiplies with a given percentage value', function() {
+      number.times('110%')
+      expect(number.valueOf()).toBe(4.4)
+    })
+    it('multiplies with a given pixel value', function() {
+      number.times('85px')
+      expect(number.valueOf()).toBe(340)
+    })
+
+  })
+
+  describe('divide()', function() {
+
+    beforeEach(function() {
+      number.plus(90)
+    })
+
+    it('divides by a given number', function() {
+      number.divide(3)
+      expect(number.valueOf()).toBe(30)
+    })
+    it('divides by a given percentage value', function() {
+      number.divide('3000%')
+      expect(number.valueOf()).toBe(3)
+    })
+    it('divides by a given pixel value', function() {
+      number.divide('45px')
+      expect(number.valueOf()).toBe(2)
+    })
+
+  })
+
+})
+
+
+
+
+
+
+
+
+
+
+
+