fixed string parsing in viewbox (#483), specs `SVG.ViewBox`

4 files changed, 184 insertions, 61 deletions

diff --git a/spec/SpecRunner.html b/spec/SpecRunner.html
index 81b64af..4f204a6 100644
--- a/spec/SpecRunner.html
+++ b/spec/SpecRunner.html
@@ -19,7 +19,7 @@
       z-index: -1;
     }
   </style>
-  
+
   <!-- include source files here... -->
   <script src="../dist/svg.js" charset="utf-8"></script>
 
@@ -45,7 +45,7 @@
     <polygon points="200,10 250,190 160,210" />
     <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" />
   </svg>
-  
+
   <!-- include spec files here... -->
   <script src="spec/svg.js"></script>
   <script src="spec/selector.js"></script>
@@ -83,6 +83,7 @@
   <script src="spec/number.js"></script>
   <script src="spec/array.js"></script>
   <script src="spec/hyperlink.js"></script>
+  <script src="spec/viewbox.js"></script>
   <script src="spec/fx.js"></script>
 
   <script type="text/javascript" src="spec/helper.js"></script>
diff --git a/spec/spec/container.js b/spec/spec/container.js
index d300fcd..00fcb41 100644
--- a/spec/spec/container.js
+++ b/spec/spec/container.js
@@ -3,7 +3,7 @@ describe('Container', function() {
   beforeEach(function() {
     draw.clear()
   })
-  
+
   describe('rect()', function() {
     it('should increase children by 1', function() {
       var initial = draw.children().length
@@ -23,7 +23,7 @@ describe('Container', function() {
       expect(draw.rect(100,100) instanceof SVG.Element).toBe(true)
     })
   })
-  
+
   describe('ellipse()', function() {
     it('should increase children by 1', function() {
       var initial = draw.children().length
@@ -43,7 +43,7 @@ describe('Container', function() {
       expect(draw.ellipse(100,100) instanceof SVG.Element).toBe(true)
     })
   })
-  
+
   describe('circle()', function() {
     it('should increase children by 1', function() {
       var initial = draw.children().length
@@ -63,7 +63,7 @@ describe('Container', function() {
       expect(draw.circle(100) instanceof SVG.Element).toBe(true)
     })
   })
-  
+
   describe('line()', function() {
     it('should increase children by 1', function() {
       var initial = draw.children().length
@@ -83,7 +83,7 @@ describe('Container', function() {
       expect(draw.line(0,100,100,0) instanceof SVG.Element).toBe(true)
     })
   })
-  
+
   describe('polyline()', function() {
     it('should increase children by 1', function() {
       var initial = draw.children().length
@@ -103,7 +103,7 @@ describe('Container', function() {
       expect(draw.polyline('0,0 100,0 100,100 0,100') instanceof SVG.Element).toBe(true)
     })
   })
-  
+
   describe('polygon()', function() {
     it('should increase children by 1', function() {
       var initial = draw.children().length
@@ -123,7 +123,7 @@ describe('Container', function() {
       expect(draw.polygon('0,0 100,0 100,100 0,100') instanceof SVG.Element).toBe(true)
     })
   })
-  
+
   describe('path()', function() {
     it('should increase children by 1', function() {
       var initial = draw.children().length
@@ -143,7 +143,7 @@ describe('Container', function() {
       expect(draw.path(svgPath) instanceof SVG.Element).toBe(true)
     })
   })
-  
+
   describe('image()', function() {
     it('should increase children by 1', function() {
       var initial = draw.children().length
@@ -163,7 +163,7 @@ describe('Container', function() {
       expect(draw.image(imageUrl, 100, 100) instanceof SVG.Element).toBe(true)
     })
   })
-  
+
   describe('text()', function() {
     it('increases children by 1', function() {
       var initial = draw.children().length
@@ -203,7 +203,7 @@ describe('Container', function() {
       expect(draw.plain(loremIpsum) instanceof SVG.Element).toBe(true)
     })
   })
-  
+
   describe('clear()', function() {
     it('removes all children', function() {
       draw.rect(100,100)
@@ -222,15 +222,15 @@ describe('Container', function() {
       expect(draw.defs().children().length).toBe(0)
     })
   })
-  
+
   describe('each()', function() {
     it('should iterate over all children', function() {
       var children = []
-      
+
       draw.rect(100,100)
       draw.ellipse(100, 100)
       draw.polygon()
-      
+
       draw.each(function() {
         children.push(this.type)
       })
@@ -239,64 +239,36 @@ describe('Container', function() {
     it('should only include the its own children', function() {
       var children = []
         , group = draw.group()
-      
+
       draw.rect(100,200)
       draw.circle(300)
-      
+
       group.rect(100,100)
       group.ellipse(100, 100)
       group.polygon()
-      
+
       group.each(function() {
         children.push(this)
       })
-      
+
       expect(children).toEqual(group.children())
     })
     it('should traverse recursively when set to deep', function() {
       var children = []
         , group = draw.group()
-      
+
       draw.rect(100,200)
       draw.circle(300)
-      
+
       group.rect(100,100)
       group.ellipse(100, 100)
       group.polygon()
-      
+
       draw.each(function() {
         children.push(this)
       }, true)
-      
-      expect(children.length).toEqual(draw.children().length + group.children().length)
-    })
-  })
-  
-  describe('viewbox()', function() {
-
-    beforeEach(function() {
-      draw.attr('viewBox', null)
-    })
 
-    it('should set the viewbox when four arguments are provided', function() {
-      draw.viewbox(0,0,100,100)
-      expect(draw.node.getAttribute('viewBox')).toBe('0 0 100 100')
-    })
-    it('should set the viewbox when an object is provided as first argument', function() {
-      draw.viewbox({ x: 0, y: 0, width: 50, height: 50 })
-      expect(draw.node.getAttribute('viewBox')).toBe('0 0 50 50')
-    })
-    it('should accept negative values', function() {
-      draw.size(100,100).viewbox(-100, -100, 50, 50)
-      expect(draw.node.getAttribute('viewBox')).toEqual('-100 -100 50 50')
-    })
-    it('should get the viewbox if no arguments are given', function() {
-      draw.viewbox(0, 0, 100, 100)
-      expect(draw.viewbox()).toEqual(new SVG.ViewBox(draw))
-    })
-    it('should define the zoom of the viewbox in relation to the canvas size', function() {
-      draw.size(100,100).viewbox(0,0,50,50)
-      expect(draw.viewbox().zoom).toEqual(100 / 50)
+      expect(children.length).toEqual(draw.children().length + group.children().length)
     })
   })
 
@@ -326,7 +298,7 @@ describe('Container', function() {
       expect(group.has(line)).toBe(true)
     })
   })
-  
+
   describe('index()', function() {
     it('determines the index of given element', function() {
       var rect = draw.rect(100,100)
@@ -340,14 +312,14 @@ describe('Container', function() {
       expect(group.index(line)).toBe(0)
     })
   })
-  
+
   describe('parent()', function() {
     it('returns the parent element instance', function() {
       var rect = draw.rect(100,100)
       expect(rect.parent()).toBe(rect.node.parentNode.instance)
     })
   })
-  
+
 })
 
 
diff --git a/spec/spec/matrix.js b/spec/spec/matrix.js
index 5c4776b..50e5c85 100644
--- a/spec/spec/matrix.js
+++ b/spec/spec/matrix.js
@@ -2,9 +2,9 @@ describe('Matrix', function() {
   var matrix
 
   describe('initialization', function() {
-    
+
     describe('without a source', function() {
-      
+
       beforeEach(function() {
         matrix = new SVG.Matrix
       })
@@ -57,7 +57,7 @@ describe('Matrix', function() {
           .transform({ rotation: -10 }, true)
           .transform({ x: 40, y: 50 }, true)
           .transform({ scale: 2 }, true)
-          
+
         matrix = new SVG.Matrix(rect)
       })
 
@@ -96,7 +96,7 @@ describe('Matrix', function() {
         })
 
       })
-      
+
     })
 
     describe('with a string given', function() {
@@ -144,7 +144,7 @@ describe('Matrix', function() {
       expect(matrix3.toString()).toBe('matrix(1.5,0,0,3,2,1.5)')
     })
   })
-  
+
   describe('multiply()', function() {
     it('multiplies two matices', function() {
       var matrix1 = new SVG.Matrix(2, 0, 0, 5, 0, 0)
@@ -259,7 +259,7 @@ describe('Matrix', function() {
     describe('with y given', function() {
       it('performs a flip over the vertical axis with one argument', function() {
         var matrix = new SVG.Matrix(1, 0, 0, 1, 4, 3).flip('y')
-        
+
         expect(matrix.a).toBe(1)
         expect(matrix.d).toBe(-1)
         expect(matrix.e).toBe(4)
@@ -267,7 +267,7 @@ describe('Matrix', function() {
       })
       it('performs a flip over the vertical axis over a given point with two arguments', function() {
         var matrix = new SVG.Matrix(1, 0, 0, 1, 4, 3).flip('y', 100)
-  
+
         expect(matrix.a).toBe(1)
         expect(matrix.d).toBe(-1)
         expect(matrix.e).toBe(4)
diff --git a/spec/spec/viewbox.js b/spec/spec/viewbox.js
new file mode 100644
index 0000000..8ee8fd8
--- /dev/null
+++ b/spec/spec/viewbox.js
@@ -0,0 +1,150 @@
+describe('Viewbox', function() {
+  var viewbox
+
+  beforeEach(function() {
+    draw.clear()
+  })
+
+  describe('initialization', function() {
+
+
+    it('creates a new viewbox with default values', function() {
+      viewbox = new SVG.ViewBox()
+
+      expect(viewbox.x).toBe(0)
+      expect(viewbox.y).toBe(0)
+      expect(viewbox.width).toBe(0)
+      expect(viewbox.height).toBe(0)
+    })
+
+
+
+    it('creates a new viewbox from parsed string', function() {
+      viewbox = new SVG.ViewBox('10. 100 200 300')
+
+      expect(viewbox.x).toBe(10)
+      expect(viewbox.y).toBe(100)
+      expect(viewbox.width).toBe(200)
+      expect(viewbox.height).toBe(300)
+    })
+
+
+
+    it('creates a new viewbox from array', function() {
+      viewbox = new SVG.ViewBox([10, 100, 200, 300])
+
+      expect(viewbox.x).toBe(10)
+      expect(viewbox.y).toBe(100)
+      expect(viewbox.width).toBe(200)
+      expect(viewbox.height).toBe(300)
+    })
+
+
+
+    it('creates a new viewbox from object', function() {
+      viewbox = new SVG.ViewBox({x:10, y:100, width:200, height:300})
+
+      expect(viewbox.x).toBe(10)
+      expect(viewbox.y).toBe(100)
+      expect(viewbox.width).toBe(200)
+      expect(viewbox.height).toBe(300)
+    })
+
+
+
+    it('creates a new viewbox from 4 arguments given', function() {
+      viewbox = new SVG.ViewBox(10, 100, 200, 300)
+
+      expect(viewbox.x).toBe(10)
+      expect(viewbox.y).toBe(100)
+      expect(viewbox.width).toBe(200)
+      expect(viewbox.height).toBe(300)
+    })
+
+
+    it('creates a new viewbox from parsed string with exponential values', function() {
+      viewbox = new SVG.ViewBox('-1.12e1 1e-2 +2e2 +.3e+4')
+
+      expect(viewbox.x).toBe(-11.2)
+      expect(viewbox.y).toBe(0.01)
+      expect(viewbox.width).toBe(200)
+      expect(viewbox.height).toBe(3000)
+    })
+
+    it('creates a new viewbox with element given', function() {
+      draw.attr('viewBox', '-1.12e1 1e-2 +2e2 +.3e+4')
+      viewbox = new SVG.ViewBox(draw)
+
+      expect(viewbox.x).toBe(-11.2)
+      expect(viewbox.y).toBe(0.01)
+      expect(viewbox.width).toBe(200)
+      expect(viewbox.height).toBe(3000)
+    })
+
+  })
+
+
+  describe('viewbox()', function() {
+
+    beforeEach(function() {
+      draw.attr('viewBox', null)
+    })
+    afterEach(function() {
+      draw.attr('viewBox', null)
+    })
+
+    it('should set the viewbox when four arguments are provided', function() {
+      draw.viewbox(0,0,100,100)
+      expect(draw.node.getAttribute('viewBox')).toBe('0 0 100 100')
+    })
+    it('should set the viewbox when an object is provided as first argument', function() {
+      draw.viewbox({ x: 0, y: 0, width: 50, height: 50 })
+      expect(draw.node.getAttribute('viewBox')).toBe('0 0 50 50')
+    })
+    it('should accept negative values', function() {
+      draw.size(100,100).viewbox(-100, -100, 50, 50)
+      expect(draw.node.getAttribute('viewBox')).toEqual('-100 -100 50 50')
+    })
+    it('should get the viewbox if no arguments are given', function() {
+      draw.viewbox(0, 0, 100, 100)
+      expect(draw.viewbox()).toEqual(new SVG.ViewBox(draw))
+    })
+    it('should define the zoom of the viewbox in relation to the canvas size', function() {
+      draw.size(100,100).viewbox(0,0,50,50)
+      expect(draw.viewbox().zoom).toEqual(100 / 50)
+    })
+
+  })
+
+  describe('morph()', function() {
+    it('stores a given viewbox for morphing', function() {
+      var viewbox1 = new SVG.ViewBox(10, 100, 200, 300)
+        , viewbox2 = new SVG.ViewBox(50, -100, 300, 300)
+
+      viewbox1.morph(viewbox2)
+
+      expect(viewbox1.destination).toEqual(viewbox2)
+    })
+    it('stores a clone, not the given matrix itself', function() {
+      var viewbox1 = new SVG.ViewBox(10, 100, 200, 300)
+        , viewbox2 = new SVG.ViewBox(50, -100, 300, 300)
+
+      viewbox1.morph(viewbox2)
+
+      expect(viewbox1.destination).not.toBe(viewbox2)
+    })
+  })
+
+  describe('at()', function() {
+    it('returns a morphed viewbox at a given position', function() {
+      var viewbox1 = new SVG.ViewBox(10, 100, 200, 300)
+        , viewbox2 = new SVG.ViewBox(50, -100, 300, 300)
+        , viewbox3 = viewbox1.morph(viewbox2).at(0.5)
+
+      expect(viewbox1.toString()).toBe('10 100 200 300')
+      expect(viewbox2.toString()).toBe('50 -100 300 300')
+      expect(viewbox3.toString()).toBe('30 0 250 300')
+    })
+  })
+
+})
\ No newline at end of file