| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../../resources/js-test.js"></script> |
| </head> |
| <body> |
| <div id="container"></div> |
| <form id="testForm"></form> |
| <script> |
| description('Testing document.registerElement() type extension behaviours through createElement().'); |
| |
| function isFormControl(element) |
| { |
| testForm.appendChild(element); |
| return element.form == testForm; |
| } |
| |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| // |
| // Inheritance here is shaped like this: |
| // |
| // HTMLElement <- input <- x-bar <- x-qux |
| // <- x-foo <- x-baz |
| // |
| |
| fooConstructor = document.registerElement('x-foo', { prototype: Object.create(HTMLElement.prototype) }); |
| barConstructor = document.registerElement('x-bar', { extends: 'input', prototype: Object.create(HTMLInputElement.prototype) }); |
| bazConstructor = document.registerElement('x-baz', { prototype: Object.create(fooConstructor.prototype) }); |
| quxConstructor = document.registerElement('x-qux', { extends: 'input', prototype: Object.create(barConstructor.prototype) }); |
| |
| // Same name, different local name |
| shouldThrow('document.registerElement("x-foo", { prototype: Object.create(HTMLDivElement.prototype) })', '"NotSupportedError: Failed to execute \'registerElement\' on \'Document\': Registration failed for type \'x-foo\'. A type with that name is already registered."'); |
| |
| // |
| // Generated constructors |
| // |
| |
| fooNewed = new fooConstructor(); |
| fooOuterHTML = '<x-foo></x-foo>'; |
| shouldBeEqualToString('fooNewed.outerHTML', fooOuterHTML); |
| shouldBeTrue('fooNewed instanceof fooConstructor && fooNewed instanceof HTMLElement'); |
| shouldBeFalse('fooNewed instanceof HTMLUnknownElement'); |
| |
| barNewed = new barConstructor(); |
| barOuterHTML = '<input is="x-bar">'; |
| shouldBeEqualToString('barNewed.outerHTML', barOuterHTML); |
| shouldBeTrue('barNewed instanceof barConstructor && barNewed instanceof HTMLInputElement'); |
| shouldBeTrue('isFormControl(barNewed)'); |
| |
| bazNewed = new bazConstructor(); |
| bazOuterHTML = '<x-baz></x-baz>'; |
| shouldBeEqualToString('bazNewed.outerHTML', bazOuterHTML); |
| shouldBeTrue('bazNewed instanceof bazConstructor && bazNewed instanceof HTMLElement'); |
| shouldBeFalse('bazNewed instanceof HTMLUnknownElement'); |
| |
| quxNewed = new quxConstructor(); |
| quxOuterHTML = '<input is="x-qux">'; |
| shouldBeTrue('quxNewed instanceof quxConstructor && quxNewed instanceof barConstructor && quxNewed instanceof HTMLInputElement'); |
| shouldBeEqualToString('quxNewed.outerHTML', quxOuterHTML); |
| shouldBeTrue('isFormControl(quxNewed)'); |
| |
| // |
| // Single parameter createElement() |
| // |
| |
| fooCreated = document.createElement('x-foo'); |
| shouldBeEqualToString('fooCreated.outerHTML', fooOuterHTML); |
| shouldBeTrue('fooCreated instanceof fooConstructor'); |
| |
| barCreated = document.createElement('x-bar'); |
| shouldBeEqualToString('barCreated.outerHTML', '<x-bar></x-bar>'); |
| shouldBeFalse('barCreated instanceof barConstructor'); |
| shouldBeFalse('barCreated instanceof HTMLUnknownElement'); |
| shouldBeTrue('barCreated instanceof HTMLElement'); |
| |
| bazCreated = document.createElement('x-baz'); |
| shouldBeEqualToString('bazCreated.outerHTML', '<x-baz></x-baz>'); |
| shouldBeTrue('bazCreated instanceof bazConstructor'); |
| shouldBeFalse('bazCreated instanceof HTMLUnknownElement'); |
| |
| quxCreated = document.createElement('x-qux'); |
| shouldBeEqualToString('quxCreated.outerHTML', '<x-qux></x-qux>'); |
| shouldBeFalse('quxCreated instanceof quxConstructor'); |
| shouldBeFalse('quxCreated instanceof HTMLUnknownElement'); |
| shouldBeTrue('quxCreated instanceof HTMLElement'); |
| |
| // |
| // createElement() with type extensions |
| // |
| |
| divFooCreated = document.createElement('div', 'x-foo'); |
| shouldBeEqualToString('divFooCreated.outerHTML', '<div is="x-foo"></div>'); |
| shouldBeFalse('divFooCreated instanceof fooConstructor'); |
| shouldBeTrue('divFooCreated instanceof HTMLDivElement'); |
| |
| inputBarCreated = document.createElement('input', 'x-bar'); |
| shouldBeEqualToString('inputBarCreated.outerHTML', barOuterHTML); |
| shouldBeTrue('inputBarCreated instanceof barConstructor'); |
| shouldBeFalse('inputBarCreated instanceof HTMLUnknownElement'); |
| shouldBeTrue('isFormControl(inputBarCreated)'); |
| |
| divBarCreated = document.createElement('div', 'x-bar'); |
| shouldBeEqualToString('divBarCreated.outerHTML', '<div is="x-bar"></div>'); |
| shouldBeFalse('divBarCreated instanceof barConstructor'); |
| shouldBeTrue('divBarCreated instanceof HTMLDivElement'); |
| |
| fooBarCreated = document.createElement('x-foo', 'x-bar'); |
| shouldBeEqualToString('fooBarCreated.outerHTML', '<x-foo is="x-bar"></x-foo>'); |
| shouldBeTrue('fooBarCreated instanceof fooConstructor'); |
| |
| barFooCreated = document.createElement('x-bar', 'x-foo'); |
| shouldBeEqualToString('barFooCreated.outerHTML', '<x-bar is="x-foo"></x-bar>'); |
| shouldBeFalse('barFooCreated instanceof HTMLUnknownElement'); |
| shouldBeTrue('barFooCreated instanceof HTMLElement'); |
| |
| fooCreatedNull = document.createElement('x-foo', null); |
| shouldBeEqualToString('fooCreatedNull.outerHTML', fooOuterHTML); |
| shouldBeTrue('fooCreatedNull instanceof fooConstructor'); |
| |
| fooCreatedEmpty = document.createElement('x-foo', ''); |
| shouldBeEqualToString('fooCreatedEmpty.outerHTML', fooOuterHTML); |
| shouldBeTrue('fooCreatedEmpty instanceof fooConstructor'); |
| |
| shouldThrow('document.createElement("@invalid", "x-bar")', '"InvalidCharacterError: Failed to execute \'createElement\' on \'Document\': The tag name provided (\'@invalid\') is not a valid name."'); |
| |
| // |
| // createElementNS() with type extensions |
| // |
| |
| fooCreatedNS = document.createElementNS('http://www.w3.org/1999/xhtml', 'x-foo', null); |
| shouldBeEqualToString('fooCreatedNS.outerHTML', fooOuterHTML); |
| shouldBeTrue('fooCreatedNS instanceof fooConstructor'); |
| |
| barCreatedNS = document.createElementNS('http://www.w3.org/1999/xhtml', 'input', 'x-bar'); |
| shouldBeEqualToString('barCreatedNS.outerHTML', barOuterHTML); |
| shouldBeTrue('barCreatedNS instanceof barConstructor'); |
| shouldBeTrue('isFormControl(barCreatedNS)'); |
| |
| shouldThrow('document.createElementNS("http://example.com/2013/no-such-namespace", "xml:lang", "x-bar")', '"NamespaceError: Failed to execute \'createElementNS\' on \'Document\': The namespace URI provided (\'http://example.com/2013/no-such-namespace\') is not valid for the qualified name provided (\'xml:lang\')."'); |
| |
| // parser |
| function createElementFromHTML(html) { |
| var container = document.createElement('div'); |
| container.innerHTML = html; |
| return container.firstChild; |
| } |
| |
| fooParsed = createElementFromHTML('<x-foo>'); |
| shouldBeTrue('fooParsed instanceof fooConstructor'); |
| |
| barParsed = createElementFromHTML('<input is="x-bar">') |
| shouldBeTrue('barParsed instanceof barConstructor'); |
| shouldBeTrue('isFormControl(barParsed)'); |
| |
| divFooParsed = createElementFromHTML('<div is="x-foo">') |
| shouldBeFalse('divFooParsed instanceof fooConstructor'); |
| shouldBeTrue('divFooParsed instanceof HTMLDivElement'); |
| |
| namedBarParsed = createElementFromHTML('<x-bar>') |
| shouldBeFalse('namedBarParsed instanceof barConstructor'); |
| shouldBeFalse('namedBarParsed instanceof HTMLUnknownElement'); |
| shouldBeTrue('namedBarParsed instanceof HTMLElement'); |
| |
| divBarParsed = createElementFromHTML('<div is="x-bar">') |
| shouldBeFalse('divBarParsed instanceof barConstructor'); |
| shouldBeTrue('divBarParsed instanceof HTMLDivElement'); |
| |
| </script> |
| </body> |
| </html> |
