make more tests pass in IE

4 files changed, 53 insertions, 34 deletions

diff --git a/spec/spec/boxes.js b/spec/spec/boxes.js
index 9e9fc73..e152079 100644
--- a/spec/spec/boxes.js
+++ b/spec/spec/boxes.js
@@ -103,11 +103,11 @@ describe('TBox', function() {
   })
 
   it('should map to RBox and be removed in 3.x', function() {
-    var rect = draw.rect(100, 100).move(100, 25)
+    var rect = draw.rect(100, 100).move(100, 25).stroke({width:0})
     var tbox = rect.tbox()
 
     expect(tbox.x).toBe(100)
-    expect(tbox.y).toBe(25)
+    expect(tbox.y).toBeCloseTo(25)
 
     rect.transform({ scale: 1.5 })
     tbox = rect.tbox()
@@ -129,9 +129,9 @@ describe('RBox', function() {
   })
 
   it('creates a new instance from an element', function() {
-    var rect = draw.rect(100, 100).move(100, 25)
+    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(box).toEqual(jasmine.objectContaining({
+    expect(roundBox(box)).toEqual(jasmine.objectContaining({
       x: 100, y: 25, cx: 150, cy: 75, width: 100, height: 100
     }))
   })
@@ -154,7 +154,7 @@ describe('Boxes', function() {
     offset = draw.screenCTM()
     draw.viewbox(100,100, 200, 200)
     nested = draw.nested().size(200, 200).move(100,100).viewbox(0, 0, 100, 100)
-    rect = nested.rect(50, 180).move(25, 90).scale(2, 0, 0).transform({x:10, y:10}, true)
+    rect = nested.rect(50, 180).stroke({width:0}).move(25, 90).scale(2, 0, 0).transform({x:10, y:10}, true)
   })
   afterEach(function() {
     draw.clear().attr('viewBox', null)
@@ -201,16 +201,16 @@ describe('Boxes', function() {
     it('returns the elements box in absolute screen coordinates by default', function() {
       var box = rect.rbox()
 
-      expect(box).toEqual(jasmine.objectContaining({
+      expect(roundBox(box)).toEqual(jasmine.objectContaining(roundBox({
         x: 70 + offset.e, y: 200 + offset.f, width: 100, height: 360
-      }))
+      })))
 
     })
 
     it('returns the elements box in coordinates of given element (doc)', function() {
       var box = rect.rbox(draw)
 
-      expect(box).toEqual(jasmine.objectContaining({
+      expect(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(box).toEqual(jasmine.objectContaining({
+      expect(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 16e93e0..41cf2b0 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(circle.node.getAttribute('transform')).toBe('matrix(1,0,0,1,12,12)')
+      expect(matrixStringToArray(circle.node.getAttribute('transform'))).toEqual([1,0,0,1,12,12])
     })
   })
   
diff --git a/spec/spec/element.js b/spec/spec/element.js
index f4858c7..618bbe5 100644
--- a/spec/spec/element.js
+++ b/spec/spec/element.js
@@ -190,44 +190,44 @@ describe('Element', function() {
     })
     it('sets the translation of and element', function() {
       rect.transform({ x: 10, y: 11 })
-      expect(rect.node.getAttribute('transform')).toBe('matrix(1,0,0,1,10,11)')
+      expect(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(rect.node.getAttribute('transform')).toBe('matrix(1,0,0,1,20,21)')
+      expect(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(rect.node.getAttribute('transform')).toBe('matrix(1,0,0,1,30,32)')
+      expect(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(rect.node.getAttribute('transform')).toBe('matrix(1,0,0,1,30,32)')
+      expect(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(rect.node.getAttribute('transform')).toBe('matrix(0.5,0,0,2,25,-50)')
+      expect(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(rect.node.getAttribute('transform')).toBe('matrix(3,0,0,3,-100,-100)')
+      expect(matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([3,0,0,3,-100,-100])
     })
     it('also works with only skaleX', function() {
       rect.transform({ scaleX: 3 })
-      expect(rect.node.getAttribute('transform')).toBe('matrix(3,0,0,1,-100,0)')
+      expect(matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([3,0,0,1,-100,0])
     })
     it('also works with only skaleY', function() {
       rect.transform({ scaleY: 3 })
-      expect(rect.node.getAttribute('transform')).toBe('matrix(1,0,0,3,0,-100)')
+      expect(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(rect.node.getAttribute('transform')).toBe('matrix(0.5,0,0,0.5,25,25)')
+      expect(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(rect.node.getAttribute('transform')).toBe('matrix(1.5,0,0,8,-25,-350)')
+      expect(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 +295,31 @@ describe('Element', function() {
     })
     it('transforms element using a matrix', function() {
       rect.transform({ a: 0.5, c: 0.5 })
-      expect(rect.node.getAttribute('transform')).toBe('matrix(0.5,0,0.5,1,0,0)')
+      expect(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(rect.node.getAttribute('transform')).toBe('matrix(0.5,0,0.5,1,20,20)')
+      expect(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(rect.node.getAttribute('transform')).toBe('matrix(-1,0,0,1,100,0)')
+      expect(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(rect.node.getAttribute('transform')).toBe('matrix(-1,0,0,1,40,0)')
+      expect(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(rect.node.getAttribute('transform')).toBe('matrix(1,0,0,-1,0,40)')
+      expect(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(rect.node.getAttribute('transform')).toBe('matrix(-1,0,0,-1,40,40)')
+      expect(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(rect.node.getAttribute('transform')).toBe('matrix(-1,0,0,-1,0,0)')
+      expect(matrixStringToArray(rect.node.getAttribute('transform'))).toEqual([-1,0,0,-1,0,0])
     })
   })
 
@@ -331,7 +331,7 @@ describe('Element', function() {
     })
 
     it('removes the transform attribute', function() {
-      expect(circle.node.getAttribute('transform')).toBe('matrix(1,0,0,1,50,100)')
+      expect(matrixStringToArray(circle.node.getAttribute('transform'))).toEqual([1,0,0,1,50,100])
       circle.untransform()
       expect(circle.node.getAttribute('transform')).toBeNull()
     })
@@ -590,14 +590,15 @@ describe('Element', function() {
       expect(rect.rbox() instanceof SVG.RBox).toBe(true)
     })
     it('returns the correct rectangular box', function() {
-      var rect = draw.size(200, 150).viewbox(0, 0, 200, 150).rect(105, 210).move(2, 12)
+      // stroke has to be set in order to get the correct result when calling getBoundingClientRect in IE11
+      var rect = draw.size(200, 150).viewbox(0, 0, 200, 150).rect(105, 210).move(2, 12).stroke({width:0})
       var box = rect.rbox(draw)
-      expect(box.x).toBeCloseTo(2, 0)
-      expect(box.y).toBeCloseTo(12, 0)
+      expect(box.x).toBeCloseTo(2)
+      expect(box.y).toBeCloseTo(12)
       expect(box.cx).toBeCloseTo(54.5)
-      expect(box.cy).toBeCloseTo(117, 0)
-      expect(box.width).toBe(105)
-      expect(box.height).toBe(210)
+      expect(box.cy).toBeCloseTo(117)
+      expect(box.width).toBeCloseTo(105)
+      expect(box.height).toBeCloseTo(210)
     })
   })
 
diff --git a/spec/spec/helper.js b/spec/spec/helper.js
index 24b4991..5c4e35d 100644
--- a/spec/spec/helper.js
+++ b/spec/spec/helper.js
@@ -40,3 +40,21 @@ function dispatchEvent(element, name) {
   else
     element.node.fireEvent('on' + name, e)
 }
+
+// This is needed because of IE11 which uses space as a delimiter in matrix
+function matrixStringToArray(source){
+  return source
+    .replace(/matrix\(|\)/, '')
+    .split(SVG.regex.delimiter)
+    .map(parseFloat)
+}
+
+// This is needed because of IE11 creating values like 2.99999 when calculating a transformed box
+function roundBox(box) {
+  return new SVG.Box(
+    Math.round(box.x),
+    Math.round(box.y),
+    Math.round(box.width),
+    Math.round(box.height)
+  )
+}