| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../../resources/js-test.js"></script> |
| </head> |
| <body> |
| <script> |
| description('Using document.registerElement() for extending HTML and non-HTML elements.'); |
| |
| function createElementFromHTML(html) |
| { |
| var container = document.createElement('div'); |
| container.innerHTML = html; |
| return container.firstChild; |
| } |
| |
| function createElementFromSVG(svg) |
| { |
| var container = document.createElement('div'); |
| container.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg">' + svg + '</svg>'; |
| return container.firstChild.firstChild; |
| } |
| |
| CustomHTMLElement = document.registerElement('html-foo', { prototype: Object.create(HTMLElement.prototype) }); |
| CustomSVGElement = document.registerElement('svg-foo', { prototype: Object.create(SVGGElement.prototype), extends: 'g' }); |
| |
| var html1 = new CustomHTMLElement(); |
| shouldBe('html1.namespaceURI', '"http://www.w3.org/1999/xhtml"'); |
| var html2 = document.createElement('html-foo'); |
| shouldBe('html2.namespaceURI', '"http://www.w3.org/1999/xhtml"'); |
| var html3 = document.createElementNS('http://www.w3.org/1999/xhtml', 'html-foo'); |
| shouldBe('html3.namespaceURI', '"http://www.w3.org/1999/xhtml"'); |
| var html4 = createElementFromHTML('<html-foo></html-foo>'); |
| shouldBe('html4.namespaceURI', '"http://www.w3.org/1999/xhtml"'); |
| |
| var notHTML = document.createElementNS('http://www.example.com/', 'html-foo'); |
| shouldBe('notHTML.namespaceURI', '"http://www.example.com/"'); |
| shouldBeFalse('notHTML instanceof CustomHTMLElement'); |
| shouldBeFalse('notHTML instanceof HTMLElement'); |
| |
| var svg1 = new CustomSVGElement(); |
| shouldBe('svg1.tagName', '"g"'); |
| shouldBeTrue('svg1 instanceof SVGGElement'); |
| shouldBeTrue('svg1 instanceof CustomSVGElement'); |
| shouldBe('svg1.namespaceURI', '"http://www.w3.org/2000/svg"'); |
| var svg2 = document.createElementNS('http://www.w3.org/2000/svg', 'svg-foo'); |
| shouldBe('svg2.tagName', '"svg-foo"'); |
| shouldBe('svg2.namespaceURI', '"http://www.w3.org/2000/svg"'); |
| var svg3 = createElementFromSVG('<svg-foo></svg-foo>'); |
| shouldBe('svg3.tagName', '"svg-foo"'); |
| shouldBe('svg3.namespaceURI', '"http://www.w3.org/2000/svg"'); |
| |
| var notSVG1 = document.createElement('svg-foo'); |
| shouldBe('notSVG1.namespaceURI', '"http://www.w3.org/1999/xhtml"'); |
| shouldBeFalse('notSVG1 instanceof CustomSVGElement'); |
| shouldBeFalse('notSVG1 instanceof HTMLUnknownElement'); |
| shouldBeTrue('notSVG1 instanceof HTMLElement'); |
| shouldBe('Object.getPrototypeOf(notSVG1)', 'HTMLElement.prototype'); |
| var notSVG2 = createElementFromHTML('<svg-foo></svg-foo>'); |
| shouldBe('notSVG2.namespaceURI', '"http://www.w3.org/1999/xhtml"'); |
| shouldBeFalse('notSVG2 instanceof CustomSVGElement'); |
| shouldBeFalse('notSVG2 instanceof HTMLUnknownElement'); |
| shouldBeTrue('notSVG2 instanceof HTMLElement'); |
| shouldBe('Object.getPrototypeOf(notSVG2)', 'HTMLElement.prototype'); |
| </script> |
| </body> |
| </html> |
