<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/js-test-pre.js"></script>
</head>
<body>
<div id="container"></div>
<script>
description("Testing document.register() basic behaviors.");

if (window.testRunner)
    testRunner.dumpAsText();
document.register = document.register || document.webkitRegister;

function createRegisterParamters()
{
    return {
        prototype: Object.create(HTMLElement.prototype, { thisIsPrototype: { value: true } })
    };
}

// Invalid names
shouldThrow("document.register('foo', createRegisterParamters())", "'Error: InvalidCharacterError: DOM Exception 5'");
shouldThrow("document.register('xfoo', createRegisterParamters())", "'Error: InvalidCharacterError: DOM Exception 5'");
shouldThrow("document.register('missing-glyph', createRegisterParamters())", "'Error: InvalidCharacterError: DOM Exception 5'");

var fooConstructor = document.register("x-foo", createRegisterParamters());
shouldBe("typeof fooConstructor", "'function'");
shouldBe("fooConstructor.prototype.__proto__", "HTMLElement.prototype");
shouldBeTrue("fooConstructor.prototype.thisIsPrototype");

// Name conflicts
shouldThrow("document.register('x-foo', createRegisterParamters())", "'Error: InvalidStateError: DOM Exception 11'");
shouldThrow("document.register('X-FOO', createRegisterParamters())", "'Error: InvalidStateError: DOM Exception 11'");

// Bad prototype: constructor property exists
shouldThrow("document.register('x-bad-a', { prototype: HTMLElement.prototype })", "'Error: InvalidStateError: DOM Exception 11'");
// Bad prototype: missing __proto__
shouldThrow("document.register('x-bad-b', { prototype: {} })", "'Error: InvalidStateError: DOM Exception 11'");
// Bad prototype: wrong __proto__
shouldThrow("document.register('x-bad-c', { prototype: Object.create(Document.prototype) })", "'Error: InvalidStateError: DOM Exception 11'");
// Call as function
shouldThrow("fooConstructor()", "'TypeError: DOM object constructor cannot be called as a function.'")

// Constructor initiated instantiation
var createdFoo = new fooConstructor();

// JS built-in properties
shouldBe("createdFoo.__proto__", "fooConstructor.prototype");
shouldBe("createdFoo.constructor", "fooConstructor");

// Native getter
shouldBe("createdFoo.tagName", "'X-FOO'");

// Native setter
createdFoo.innerHTML = "Hello";
shouldBe("createdFoo.textContent", "'Hello'");

// Native method
var childDiv = document.createElement("div");
createdFoo.appendChild(childDiv);
shouldBe("createdFoo.lastChild", "childDiv");

// Parser initiated instantiation
var container = document.getElementById("container");
container.innerHTML = "<x-foo></x-foo>";
parsedFoo = container.firstChild;

shouldBe("parsedFoo.__proto__", "fooConstructor.prototype");
shouldBe("parsedFoo.tagName", "'X-FOO'");

// Ensuring the wrapper is retained
parsedFoo.someProperty = "hello";
shouldBe("parsedFoo.someProperty", "container.firstChild.someProperty");

// Having another constructor
var barConstructor = document.register("x-bar", createRegisterParamters());
shouldBeTrue("barConstructor !== fooConstructor");
var createdBar = new barConstructor();
shouldBe("createdBar.tagName", "'X-BAR'");

// Having a subclass
var bazConstructor = document.register("x-baz", { prototype: Object.create(fooConstructor.prototype, { thisIsAlsoPrototype: { value: true } }) });
var createdBaz = new bazConstructor();
shouldBe("createdBaz.tagName", "'X-BAZ'");
shouldBeTrue("createdBaz.thisIsPrototype");
shouldBeTrue("createdBaz.thisIsAlsoPrototype");

// With irregular cases
var createdUpperBar = document.createElement("X-BAR");
var createdMixedBar = document.createElement("X-Bar");
shouldBe("createdUpperBar.constructor", "barConstructor");
shouldBe("createdUpperBar.tagName", "'X-BAR'");
shouldBe("createdMixedBar.constructor", "barConstructor");
shouldBe("createdMixedBar.tagName", "'X-BAR'");

container.innerHTML = "<X-BAR></X-BAR><X-Bar></X-Bar>";
shouldBe("container.firstChild.constructor", "barConstructor");
shouldBe("container.firstChild.tagName", "'X-BAR'");
shouldBe("container.lastChild.constructor", "barConstructor");
shouldBe("container.lastChild.tagName", "'X-BAR'");

// Strange but valid names
shouldBe("(new (document.register('y-bar', createRegisterParamters()))()).tagName", "'Y-BAR'");
shouldBe("(new (document.register('yz-bar', createRegisterParamters()))()).tagName", "'YZ-BAR'");
shouldBe("(new (document.register('y-z-bar', createRegisterParamters()))()).tagName", "'Y-Z-BAR'");
shouldBe("(new (document.register('y--bar', createRegisterParamters()))()).tagName", "'Y--BAR'");

// Constructor shouldn't interfere each otehr
shouldBe("(new fooConstructor).tagName", "'X-FOO'");
shouldBe("(new barConstructor).tagName", "'X-BAR'");
shouldBe("(new bazConstructor).tagName", "'X-BAZ'");

</script>
<script src="../../../resources/js-test-post.js"></script>
</body>
</html>