added Fragment, completed Dom Tests, fixed `matches()` for document fragments

4 files changed, 56 insertions, 11 deletions

diff --git a/src/elements/Dom.js b/src/elements/Dom.js
index 0180c78..c9e6953 100644
--- a/src/elements/Dom.js
+++ b/src/elements/Dom.js
@@ -142,7 +142,8 @@ export default class Dom extends EventTarget {
   // matches the element vs a css selector
   matches (selector) {
     const el = this.node
-    return (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector).call(el, selector)
+    const matcher = el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector || null
+    return matcher && matcher.call(el, selector)
   }
 
   // Returns the parent element instance
@@ -151,7 +152,6 @@ export default class Dom extends EventTarget {
 
     // check for parent
     if (!parent.node.parentNode) return null
-    if (parent.node.parentNode.nodeName === '#document' || parent.node.parentNode.nodeName === '#document-fragment') return null
 
     // get parent element
     parent = adopt(parent.node.parentNode)
@@ -159,11 +159,11 @@ export default class Dom extends EventTarget {
     if (!type) return parent
 
     // loop trough ancestors if type is given
-    while (parent) {
+    do {
       if (typeof type === 'string' ? parent.matches(type) : parent instanceof type) return parent
-      if (!parent.node.parentNode || parent.node.parentNode.nodeName === '#document' || parent.node.parentNode.nodeName === '#document-fragment') return null // #759, #720
-      parent = adopt(parent.node.parentNode)
-    }
+    } while ((parent = adopt(parent.node.parentNode)))
+
+    return parent
   }
 
   // Basically does the same as `add()` but returns the added element instead
@@ -197,7 +197,11 @@ export default class Dom extends EventTarget {
   // Replace this with element
   replace (element) {
     element = makeInstance(element)
-    this.node.parentNode.replaceChild(element.node, this.node)
+
+    if (this.node.parentNode) {
+      this.node.parentNode.replaceChild(element.node, this.node)
+    }
+
     return element
   }
 
@@ -206,14 +210,16 @@ export default class Dom extends EventTarget {
     const attrs = this.attr(map)
 
     for (const i in attrs) {
-      attrs[i] = Math.round(attrs[i] * factor) / factor
+      if (typeof attrs[i] === 'number') {
+        attrs[i] = Math.round(attrs[i] * factor) / factor
+      }
     }
 
     this.attr(attrs)
     return this
   }
 
-  // Import raw svg
+  // Import / Export raw svg
   svg (svgOrFn, outerHTML) {
     var well, len, fragment
 
diff --git a/src/elements/Fragment.js b/src/elements/Fragment.js
new file mode 100644
index 0000000..228e93f
--- /dev/null
+++ b/src/elements/Fragment.js
@@ -0,0 +1,34 @@
+import Dom from './Dom.js'
+import { globals } from '../utils/window.js'
+import { register } from '../utils/adopter.js'
+import Svg from './Svg.js'
+
+class Fragment extends Dom {
+  constructor (node = globals.document.createDocumentFragment()) {
+    super(node)
+  }
+
+  // Import / Export raw svg
+  svg (svgOrFn, outerHTML) {
+    if (svgOrFn === false) {
+      outerHTML = false
+      svgOrFn = null
+    }
+
+    // act as getter if no svg string is given
+    if (svgOrFn == null || typeof svgOrFn === 'function') {
+      const wrapper = new Svg()
+      wrapper.add(this.node.cloneNode(true))
+
+      return wrapper.svg(svgOrFn, false)
+    }
+
+    // Act as setter if we got a string
+    return super.svg(svgOrFn, false)
+  }
+
+}
+
+register(Fragment, 'Fragment')
+
+export default Fragment
diff --git a/src/main.js b/src/main.js
index 3162752..12ebc7b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -18,6 +18,7 @@ import Dom from './elements/Dom.js'
 import Element from './elements/Element.js'
 import Ellipse from './elements/Ellipse.js'
 import EventTarget from './types/EventTarget.js'
+import Fragment from './elements/Fragment.js'
 import Gradient from './elements/Gradient.js'
 import Image from './elements/Image.js'
 import Line from './elements/Line.js'
@@ -96,6 +97,7 @@ export { default as Dom } from './elements/Dom.js'
 export { default as Element } from './elements/Element.js'
 export { default as Ellipse } from './elements/Ellipse.js'
 export { default as ForeignObject } from './elements/ForeignObject.js'
+export { default as Fragment } from './elements/Fragment.js'
 export { default as Gradient } from './elements/Gradient.js'
 export { default as G } from './elements/G.js'
 export { default as A } from './elements/A.js'
@@ -154,8 +156,7 @@ extend(EventTarget, getMethodsFor('EventTarget'))
 extend(Dom, getMethodsFor('Dom'))
 extend(Element, getMethodsFor('Element'))
 extend(Shape, getMethodsFor('Shape'))
-// extend(Element, getConstructor('Memory'))
-extend(Container, getMethodsFor('Container'))
+extend([ Container, Fragment ], getMethodsFor('Container'))
 
 extend(Runner, getMethodsFor('Runner'))
 
diff --git a/src/utils/adopter.js b/src/utils/adopter.js
index b016837..217aafb 100644
--- a/src/utils/adopter.js
+++ b/src/utils/adopter.js
@@ -53,6 +53,10 @@ export function adopt (node) {
   // make sure a node isn't already adopted
   if (node.instance instanceof Base) return node.instance
 
+  if (node.nodeName === '#document-fragment') {
+    return new elements.Fragment(node)
+  }
+
   // initialize variables
   var className = capitalize(node.nodeName || 'Dom')