Support createElementNS for HTML namespace

Fixes #102
googlearchive · Feb 22, 2014 · 9538b4f · 9538b4f
1 parent 3bf48ce
commit 9538b4f
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 0 deletions.
diff --git a/src/CustomElements.js b/src/CustomElements.js
@@ -328,6 +328,17 @@ if (useNative) {
     };
   }
 
+  var HTML_NAMESPACE = 'http://www.w3.org/1999/xhtml';
+  function createElementNS(namespace, tag, typeExtension) {
+    // NOTE: we do not support non-HTML elements,
+    // just call createElementNS for non HTML Elements
+    if (namespace === HTML_NAMESPACE) {
+      return createElement(tag, typeExtension);
+    } else {
+      return domCreateElementNS(namespace, tag);
+    }
+  }
+
   function createElement(tag, typeExtension) {
     // TODO(sjmiles): ignore 'tag' when using 'typeExtension', we could
     // error check it, or perhaps there should only ever be one argument
@@ -380,6 +391,7 @@ if (useNative) {
   // capture native createElement before we override it
 
   var domCreateElement = document.createElement.bind(document);
+  var domCreateElementNS = document.createElementNS.bind(document);
 
   // capture native cloneNode before we override it
 
@@ -389,6 +401,7 @@ if (useNative) {
 
   document.registerElement = register;
   document.createElement = createElement; // override
+  document.createElementNS = createElementNS; // override
   Node.prototype.cloneNode = cloneNode; // override
 
   scope.registry = registry;

diff --git a/test/js/customElements.js b/test/js/customElements.js
@@ -7,6 +7,7 @@
  suite('customElements', function() {
   var work;
   var assert = chai.assert;
+  var HTMLNS = 'http://www.w3.org/1999/xhtml';
 
   setup(function() {
     work = document.createElement('div');
@@ -74,6 +75,17 @@
     assert.equal(xfoo.textContent, '[x-foo2]');
   });
 
+  test('document.registerElement create via createElementNS', function() {
+    // create an instance via createElementNS
+    var xfoo = document.createElementNS(HTMLNS, 'x-foo2');
+    // test localName
+    assert.equal(xfoo.localName, 'x-foo2');
+    // attach content
+    xfoo.textContent = '[x-foo2]';
+    // test textContent
+    assert.equal(xfoo.textContent, '[x-foo2]');
+  });
+
   test('document.registerElement treats names as case insensitive', function() {
     var proto = {prototype: Object.create(HTMLElement.prototype)};
     proto.prototype.isXCase = true;
@@ -83,6 +95,11 @@
     assert.equal(x.isXCase, true);
     x = document.createElement('x-case');
     assert.equal(x.isXCase, true);
+    // createElementNS
+    x = document.createElementNS(HTMLNS, 'X-CASE');
+    assert.equal(x.isXCase, true);
+    x = document.createElementNS(HTMLNS, 'x-case');
+    assert.equal(x.isXCase, true);
     // upgrade
     work.innerHTML = '<X-CASE></X-CASE><x-CaSe></x-CaSe>';
     CustomElements.takeRecords();
@@ -419,12 +436,17 @@
     var PCtor = document.registerElement('x-instance', {prototype: p});
     var x = document.createElement('x-instance');
     assert.isTrue(CustomElements.instanceof(x, PCtor), 'instanceof failed for x-instance');
+    x = document.createElementNS(HTMLNS, 'x-instance');
+    assert.isTrue(CustomElements.instanceof(x, PCtor), 'instanceof failed for x-instance');
 
     var p2 = Object.create(PCtor.prototype);
     var P2Ctor = document.registerElement('x-instance2', {prototype: p2});
     var x2 = document.createElement('x-instance2');
     assert.isTrue(CustomElements.instanceof(x2, P2Ctor), 'instanceof failed for x-instance2');
     assert.isTrue(CustomElements.instanceof(x2, PCtor), 'instanceof failed for x-instance2');
+    x2 = document.createElementNS(HTMLNS, 'x-instance2');
+    assert.isTrue(CustomElements.instanceof(x2, P2Ctor), 'instanceof failed for x-instance2');
+    assert.isTrue(CustomElements.instanceof(x2, PCtor), 'instanceof failed for x-instance2');
   });
 
 
@@ -434,13 +456,20 @@
     var x = document.createElement('button', 'x-button-instance');
     assert.isTrue(CustomElements.instanceof(x, PCtor), 'instanceof failed for x-button-instance');
     assert.isTrue(CustomElements.instanceof(x, HTMLButtonElement), 'instanceof failed for x-button-instance');
+    x = document.createElementNS(HTMLNS, 'button', 'x-button-instance');
+    assert.isTrue(CustomElements.instanceof(x, PCtor), 'instanceof failed for x-button-instance');
+    assert.isTrue(CustomElements.instanceof(x, HTMLButtonElement), 'instanceof failed for x-button-instance');
 
     var p2 = Object.create(PCtor.prototype);
     var P2Ctor = document.registerElement('x-button-instance2', {prototype: p2, extends: 'button'});
     var x2 = document.createElement('button','x-button-instance2');
     assert.isTrue(CustomElements.instanceof(x2, P2Ctor), 'instanceof failed for x-button-instance2');
     assert.isTrue(CustomElements.instanceof(x2, PCtor), 'instanceof failed for x-button-instance2');
     assert.isTrue(CustomElements.instanceof(x2, HTMLButtonElement), 'instanceof failed for x-button-instance2');
+    x2 = document.createElementNS(HTMLNS, 'button','x-button-instance2');
+    assert.isTrue(CustomElements.instanceof(x2, P2Ctor), 'instanceof failed for x-button-instance2');
+    assert.isTrue(CustomElements.instanceof(x2, PCtor), 'instanceof failed for x-button-instance2');
+    assert.isTrue(CustomElements.instanceof(x2, HTMLButtonElement), 'instanceof failed for x-button-instance2');
   });
 
 });