minor bugfix in bbox and performance changes3.0.7

6 files changed, 118 insertions, 107 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4033f98..8207f4f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,12 @@ The document follows the conventions described in [“Keep a CHANGELOG”](http:
 
 ====
 
+## [3.0.7] - 2018-01-12
+ - fixed a bug in `isNulledBox()` and `domContains()`
+ - performance changes:
+   - replace `getElementsByTagName` with `querySelector`
+   - make Color check in `attr` more restrictive to prevent expensive `toString`
+
 ## [3.0.6] - 2018-01-12
 
 ### Fixed
@@ -773,6 +779,7 @@ The document follows the conventions described in [“Keep a CHANGELOG”](http:
 
 
 <!-- Headings above link to the releases listed here -->
+[3.0.7]: https://github.com/svgdotjs/svg.js/releases/tag/3.0.7
 [3.0.6]: https://github.com/svgdotjs/svg.js/releases/tag/3.0.6
 [3.0.5]: https://github.com/svgdotjs/svg.js/releases/tag/3.0.5
 [3.0.4]: https://github.com/svgdotjs/svg.js/releases/tag/3.0.4
diff --git a/bench/tests/10000-rects.js b/bench/tests/10000-rects.js
index d6ef518..e01eb95 100644
--- a/bench/tests/10000-rects.js
+++ b/bench/tests/10000-rects.js
@@ -1,5 +1,5 @@
 SVG.bench.describe('Generate 10000 rects', function(bench) {
-  bench.test('using SVG.js v2.5.3', function() {
+  bench.test('using SVG.js v3.0.6', function() {
     for (var i = 0; i < 10000; i++)
       bench.draw.rect(100,100)
   })
@@ -17,95 +17,94 @@ SVG.bench.describe('Generate 10000 rects', function(bench) {
   })
 })
 
-//
-// SVG.bench.describe('Generate 10000 rects with fill', function(bench) {
-//   bench.test('using SVG.js v2.5.3', function() {
-//     for (var i = 0; i < 10000; i++)
-//       bench.draw.rect(100,100).fill('#f06')
-//   })
-//   bench.test('using vanilla js', function() {
-//     for (var i = 0; i < 10000; i++) {
-//       var rect = document.createElementNS(SVG.ns, 'rect')
-//       rect.setAttributeNS(null, 'height', 100)
-//       rect.setAttributeNS(null, 'width', 100)
-//       rect.setAttributeNS(null, 'fill', '#f06')
-//       bench.raw.appendChild(rect)
-//     }
-//   })
-//   bench.test('using Snap.svg v0.5.1', function() {
-//     for (var i = 0; i < 10000; i++)
-//       bench.snap.rect(50, 50, 100, 100).attr('fill', '#f06')
-//   })
-// })
-//
-//
-// SVG.bench.describe('Generate 10000 rects with position and fill', function(bench) {
-//   bench.test('using SVG.js v2.5.3', function() {
-//     for (var i = 0; i < 10000; i++)
-//       bench.draw.rect(100,100).move(50,50).fill('#f06')
-//   })
-//   bench.test('using vanilla js', function() {
-//     for (var i = 0; i < 10000; i++) {
-//       var rect = document.createElementNS(SVG.ns, 'rect')
-//       rect.setAttributeNS(null, 'height', 100)
-//       rect.setAttributeNS(null, 'width', 100)
-//       rect.setAttributeNS(null, 'fill', '#f06')
-//       rect.setAttributeNS(null, 'x', 50)
-//       rect.setAttributeNS(null, 'y', 50)
-//       bench.raw.appendChild(rect)
-//     }
-//   })
-//   bench.test('using Snap.svg v0.5.1', function() {
-//     for (var i = 0; i < 10000; i++)
-//       bench.snap.rect(50, 50, 100, 100).attr('fill', '#f06')
-//   })
-// })
-//
-//
-// SVG.bench.describe('Generate 10000 rects with gradient fill', function(bench) {
-//   bench.test('using SVG.js v2.5.3', function() {
-//     for (var i = 0; i < 10000; i++) {
-//       var g = bench.draw.gradient('linear', function(add) {
-//         add.stop(0, '#000')
-//         add.stop(0.25, '#f00')
-//         add.stop(1, '#fff')
-//       })
-//
-//       bench.draw.rect(100,100).fill(g)
-//     }
-//   })
-//   bench.test('using vanilla js', function() {
-//     for (var i = 0; i < 10000; i++) {
-//       var g = document.createElementNS(SVG.ns, 'linearGradient')
-//       var stop = document.createElementNS(SVG.ns, 'stop')
-//       stop.setAttributeNS(null, 'offset', '0%')
-//       stop.setAttributeNS(null, 'color', '#000')
-//       g.appendChild(stop)
-//       stop = document.createElementNS(SVG.ns, 'stop')
-//       stop.setAttributeNS(null, 'offset', '25%')
-//       stop.setAttributeNS(null, 'color', '#f00')
-//       g.appendChild(stop)
-//       stop = document.createElementNS(SVG.ns, 'stop')
-//       stop.setAttributeNS(null, 'offset', '100%')
-//       stop.setAttributeNS(null, 'color', '#fff')
-//       g.appendChild(stop)
-//       bench.raw.appendChild(g)
-//
-//       var rect = document.createElementNS(SVG.ns, 'rect')
-//       rect.setAttributeNS(null, 'height', 100)
-//       rect.setAttributeNS(null, 'width', 100)
-//       rect.setAttributeNS(null, 'fill', '#f06')
-//       bench.raw.appendChild(rect)
-//     }
-//   })
-//   bench.test('using Snap.svg v0.5.1', function() {
-//     for (var i = 0; i < 10000; i++) {
-//       var g = bench.snap.gradient("L(0, 0, 100, 100)#000-#f00:25%-#fff")
-//
-//       bench.snap.rect(50, 50, 100, 100).attr({
-//         fill: g
-//       })
-//     }
-//   })
-// })
-//
+
+SVG.bench.describe('Generate 10000 rects with fill', function(bench) {
+  bench.test('using SVG.js v3.0.6', function() {
+    for (var i = 0; i < 10000; i++)
+      bench.draw.rect(100,100).fill('#f06')
+  })
+  bench.test('using vanilla js', function() {
+    for (var i = 0; i < 10000; i++) {
+      var rect = document.createElementNS(SVG.ns, 'rect')
+      rect.setAttributeNS(null, 'height', 100)
+      rect.setAttributeNS(null, 'width', 100)
+      rect.setAttributeNS(null, 'fill', '#f06')
+      bench.raw.appendChild(rect)
+    }
+  })
+  bench.test('using Snap.svg v0.5.1', function() {
+    for (var i = 0; i < 10000; i++)
+      bench.snap.rect(50, 50, 100, 100).attr('fill', '#f06')
+  })
+})
+
+
+SVG.bench.describe('Generate 10000 rects with position and fill', function(bench) {
+  bench.test('using SVG.js v3.0.6', function() {
+    for (var i = 0; i < 10000; i++)
+      bench.draw.rect(100,100).move(50,50).fill('#f06')
+  })
+  bench.test('using vanilla js', function() {
+    for (var i = 0; i < 10000; i++) {
+      var rect = document.createElementNS(SVG.ns, 'rect')
+      rect.setAttributeNS(null, 'height', 100)
+      rect.setAttributeNS(null, 'width', 100)
+      rect.setAttributeNS(null, 'fill', '#f06')
+      rect.setAttributeNS(null, 'x', 50)
+      rect.setAttributeNS(null, 'y', 50)
+      bench.raw.appendChild(rect)
+    }
+  })
+  bench.test('using Snap.svg v0.5.1', function() {
+    for (var i = 0; i < 10000; i++)
+      bench.snap.rect(50, 50, 100, 100).attr('fill', '#f06')
+  })
+})
+
+
+SVG.bench.describe('Generate 10000 rects with gradient fill', function(bench) {
+  bench.test('using SVG.js v3.0.6', function() {
+    for (var i = 0; i < 10000; i++) {
+      var g = bench.draw.gradient('linear', function(add) {
+        add.stop(0, '#000')
+        add.stop(0.25, '#f00')
+        add.stop(1, '#fff')
+      })
+
+      bench.draw.rect(100,100).fill(g)
+    }
+  })
+  bench.test('using vanilla js', function() {
+    for (var i = 0; i < 10000; i++) {
+      var g = document.createElementNS(SVG.ns, 'linearGradient')
+      var stop = document.createElementNS(SVG.ns, 'stop')
+      stop.setAttributeNS(null, 'offset', '0%')
+      stop.setAttributeNS(null, 'color', '#000')
+      g.appendChild(stop)
+      stop = document.createElementNS(SVG.ns, 'stop')
+      stop.setAttributeNS(null, 'offset', '25%')
+      stop.setAttributeNS(null, 'color', '#f00')
+      g.appendChild(stop)
+      stop = document.createElementNS(SVG.ns, 'stop')
+      stop.setAttributeNS(null, 'offset', '100%')
+      stop.setAttributeNS(null, 'color', '#fff')
+      g.appendChild(stop)
+      bench.raw.appendChild(g)
+
+      var rect = document.createElementNS(SVG.ns, 'rect')
+      rect.setAttributeNS(null, 'height', 100)
+      rect.setAttributeNS(null, 'width', 100)
+      rect.setAttributeNS(null, 'fill', '#f06')
+      bench.raw.appendChild(rect)
+    }
+  })
+  bench.test('using Snap.svg v0.5.1', function() {
+    for (var i = 0; i < 10000; i++) {
+      var g = bench.snap.gradient("L(0, 0, 100, 100)#000-#f00:25%-#fff")
+
+      bench.snap.rect(50, 50, 100, 100).attr({
+        fill: g
+      })
+    }
+  })
+})
diff --git a/package.json b/package.json
index 841133d..65966ef 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@svgdotjs/svg.js",
-  "version": "3.0.6",
+  "version": "3.0.7",
   "description": "A lightweight library for manipulating and animating SVG.",
   "url": "https://svgdotjs.github.io/",
   "homepage": "https://svgdotjs.github.io/",
diff --git a/src/elements/Svg.js b/src/elements/Svg.js
index 53b488c..f96a5f8 100644
--- a/src/elements/Svg.js
+++ b/src/elements/Svg.js
@@ -42,7 +42,7 @@ export default class Svg extends Container {
   defs () {
     if (!this.isRoot()) return this.root().defs()
 
-    return adopt(this.node.getElementsByTagName('defs')[0])
+    return adopt(this.node.querySelector('defs'))
       || this.put(new Defs())
   }
 
diff --git a/src/types/Box.js b/src/types/Box.js
index 8cbda30..90979d2 100644
--- a/src/types/Box.js
+++ b/src/types/Box.js
@@ -7,17 +7,18 @@ import Point from './Point.js'
 import parser from '../modules/core/parser.js'
 
 function isNulledBox (box) {
-  return !box.w && !box.h && !box.x && !box.y
+  return !box.width && !box.height && !box.x && !box.y
 }
 
 function domContains (node) {
-  return (globals.document.documentElement.contains || function (node) {
-    // This is IE - it does not support contains() for top-level SVGs
-    while (node.parentNode) {
-      node = node.parentNode
-    }
-    return node === document
-  }).call(globals.document.documentElement, node)
+  return node === globals.document
+    || (globals.document.documentElement.contains || function (node) {
+      // This is IE - it does not support contains() for top-level SVGs
+      while (node.parentNode) {
+        node = node.parentNode
+      }
+      return node === globals.document
+    }).call(globals.document.documentElement, node)
 }
 
 export default class Box {
diff --git a/src/types/Color.js b/src/types/Color.js
index 93ca570..74f20df 100644
--- a/src/types/Color.js
+++ b/src/types/Color.js
@@ -423,11 +423,11 @@ export default class Color {
 
   // Test if given value is a color string
   static test (color) {
-    color += ''
-    return isHex.test(color) || isRgb.test(color)
+    return (typeof color === 'string')
+      && (isHex.test(color) || isRgb.test(color))
   }
 
-  // Test if given value is a rgb object
+  // Test if given value is an rgb object
   static isRgb (color) {
     return color && typeof color.r === 'number'
       && typeof color.g === 'number'
@@ -436,6 +436,10 @@ export default class Color {
 
   // Test if given value is a color
   static isColor (color) {
-    return this.isRgb(color) || this.test(color)
+    return color && (
+      color instanceof Color
+      || this.isRgb(color)
+      || this.test(color)
+    )
   }
 }