6 files changed, 78 insertions, 2 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md
index d6afc53..bda4a6c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,15 @@ The document follows the conventions described in [“Keep a CHANGELOG”](http:
 
 ====
 
+## [3.0.12]
+
+### Fixed
+ - fixed package.json which points to correct file for webpack now (browser keyword)
+ - fixed typescript types
+
+### Added
+ - added `ForeignObject` to the core
+
 ## [3.0.11] - 2019-01-22
 
 ### Fixed
diff --git a/spec/spec/elements/ForeignObject.js b/spec/spec/elements/ForeignObject.js
new file mode 100644
index 0000000..56ab081
--- /dev/null
+++ b/spec/spec/elements/ForeignObject.js
@@ -0,0 +1,47 @@
+import { makeInstance, ForeignObject } from '../../../src/main.js';
+
+const { any, createSpy, objectContaining } = jasmine
+
+
+describe('ForeignObject.js', () => {
+
+  describe('()', () => {
+    it('creates a new object of type ForeignObject', () => {
+      expect(new ForeignObject()).toEqual(any(ForeignObject))
+    })
+
+    it('sets passed attributes on the element', () => {
+      expect(new ForeignObject({id:'foo'}).id()).toBe('foo')
+    })
+  })
+
+  describe('Container', () => {
+    describe('foreignObject()', () => {
+      it('creates a foreignObject in the container', () => {
+        const canvas = makeInstance().addTo('#canvas')
+        const foreignObject = canvas.foreignObject()
+        expect(foreignObject).toEqual(any(ForeignObject))
+        expect(foreignObject.parent()).toBe(canvas)
+      })
+
+      it('sets width and height correctly on construction', () => {
+        const canvas = makeInstance().addTo('#canvas')
+        const foreignObject = canvas.foreignObject(100, 200)
+        expect(foreignObject.width()).toBe(100)
+        expect(foreignObject.height()).toBe(200)
+      })
+    })
+  })
+
+  describe('Element methods', () => {
+    it('is usable with Elements methods such as height() and width()', () => {
+      const canvas = makeInstance().addTo('#canvas')
+      const foreignObject = canvas.foreignObject()
+      foreignObject.width(100).height(200).x(10).y(20)
+      expect(foreignObject.width()).toBe(100)
+      expect(foreignObject.height()).toBe(200)
+      expect(foreignObject.x()).toBe(10)
+      expect(foreignObject.y()).toBe(20)
+    })
+  })
+})
diff --git a/src/elements/Circle.js b/src/elements/Circle.js
index 3135ada..e3bfacc 100644
--- a/src/elements/Circle.js
+++ b/src/elements/Circle.js
@@ -36,7 +36,7 @@ export default class Circle extends Shape {
 extend(Circle, { x, y, cx, cy, width, height })
 
 registerMethods({
-  Element: {
+  Container: {
     // Create circle element
     circle: wrapWithAttrCheck(function (size) {
       return this.put(new Circle())
diff --git a/src/elements/ForeignObject.js b/src/elements/ForeignObject.js
new file mode 100644
index 0000000..e6f9e2b
--- /dev/null
+++ b/src/elements/ForeignObject.js
@@ -0,0 +1,19 @@
+import { nodeOrNew, register, wrapWithAttrCheck } from '../utils/adopter.js'
+import { registerMethods } from '../utils/methods.js'
+import Element from './Element.js'
+
+export default class ForeignObject extends Element {
+  constructor (node) {
+    super(nodeOrNew('foreignObject', node), node)
+  }
+}
+
+registerMethods({
+  Container: {
+    foreignObject: wrapWithAttrCheck(function (width, height) {
+      return this.put(new ForeignObject()).size(width, height)
+    })
+  }
+})
+
+register(ForeignObject)
diff --git a/src/elements/G.js b/src/elements/G.js
index a9e8b55..da4af77 100644
--- a/src/elements/G.js
+++ b/src/elements/G.js
@@ -78,7 +78,7 @@ export default class G extends Container {
 }
 
 registerMethods({
-  Element: {
+  Container: {
     // Create a group element
     group: wrapWithAttrCheck(function () {
       return this.put(new G())
diff --git a/src/main.js b/src/main.js
index 8ea3e5d..3162752 100644
--- a/src/main.js
+++ b/src/main.js
@@ -95,6 +95,7 @@ export { default as Defs } from './elements/Defs.js'
 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 Gradient } from './elements/Gradient.js'
 export { default as G } from './elements/G.js'
 export { default as A } from './elements/A.js'