<!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>