third_party/WebKit/LayoutTests/fast/dom/custom/document-register-namespace.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../../../resources/js-test.js"></script>
   5 </head>
   6 <body>
   7 <script>
   8 description('Using document.registerElement() for extending HTML and non-HTML elements.');
   9
  10 function createElementFromHTML(html)
  11 {
  12     var container = document.createElement('div');
  13     container.innerHTML = html;
  14     return container.firstChild;
  15 }
  16
  17 function createElementFromSVG(svg)
  18 {
  19     var container = document.createElement('div');
  20     container.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg">' + svg + '</svg>';
  21     return container.firstChild.firstChild;
  22 }
  23
  24 CustomHTMLElement = document.registerElement('html-foo', { prototype: Object.create(HTMLElement.prototype) });
  25 CustomSVGElement = document.registerElement('svg-foo', { prototype: Object.create(SVGGElement.prototype), extends: 'g' });
  26
  27 var html1 = new CustomHTMLElement();
  28 shouldBe('html1.namespaceURI', '"http://www.w3.org/1999/xhtml"');
  29 var html2 = document.createElement('html-foo');
  30 shouldBe('html2.namespaceURI', '"http://www.w3.org/1999/xhtml"');
  31 var html3 = document.createElementNS('http://www.w3.org/1999/xhtml', 'html-foo');
  32 shouldBe('html3.namespaceURI', '"http://www.w3.org/1999/xhtml"');
  33 var html4 = createElementFromHTML('<html-foo></html-foo>');
  34 shouldBe('html4.namespaceURI', '"http://www.w3.org/1999/xhtml"');
  35
  36 var notHTML = document.createElementNS('http://www.example.com/', 'html-foo');
  37 shouldBe('notHTML.namespaceURI', '"http://www.example.com/"');
  38 shouldBeFalse('notHTML instanceof CustomHTMLElement');
  39 shouldBeFalse('notHTML instanceof HTMLElement');
  40
  41 var svg1 = new CustomSVGElement();
  42 shouldBe('svg1.tagName', '"g"');
  43 shouldBeTrue('svg1 instanceof SVGGElement');
  44 shouldBeTrue('svg1 instanceof CustomSVGElement');
  45 shouldBe('svg1.namespaceURI', '"http://www.w3.org/2000/svg"');
  46 var svg2 = document.createElementNS('http://www.w3.org/2000/svg', 'svg-foo');
  47 shouldBe('svg2.tagName', '"svg-foo"');
  48 shouldBe('svg2.namespaceURI', '"http://www.w3.org/2000/svg"');
  49 var svg3 = createElementFromSVG('<svg-foo></svg-foo>');
  50 shouldBe('svg3.tagName', '"svg-foo"');
  51 shouldBe('svg3.namespaceURI', '"http://www.w3.org/2000/svg"');
  52
  53 var notSVG1 = document.createElement('svg-foo');
  54 shouldBe('notSVG1.namespaceURI', '"http://www.w3.org/1999/xhtml"');
  55 shouldBeFalse('notSVG1 instanceof CustomSVGElement');
  56 shouldBeFalse('notSVG1 instanceof HTMLUnknownElement');
  57 shouldBeTrue('notSVG1 instanceof HTMLElement');
  58 shouldBe('Object.getPrototypeOf(notSVG1)', 'HTMLElement.prototype');
  59 var notSVG2 = createElementFromHTML('<svg-foo></svg-foo>');
  60 shouldBe('notSVG2.namespaceURI', '"http://www.w3.org/1999/xhtml"');
  61 shouldBeFalse('notSVG2 instanceof CustomSVGElement');
  62 shouldBeFalse('notSVG2 instanceof HTMLUnknownElement');
  63 shouldBeTrue('notSVG2 instanceof HTMLElement');
  64 shouldBe('Object.getPrototypeOf(notSVG2)', 'HTMLElement.prototype');
  65 </script>
  66 </body>
  67 </html>