<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/js-test.js"></script>
<script>
description("This test ensures that the lifecycle callbacks of API-originated elements are visible in following script block.")
window.callbacksCalled = [];
function markingReadyCallback() {
    window.callbacksCalled.push(this.tagName);
    this.callbacksCalled = true;
}

document.registerElement("x-foo", { prototype: Object.create(HTMLElement.prototype, { createdCallback: { value: markingReadyCallback } }) });
document.registerElement("x-bar", { extends: "div", prototype: Object.create(HTMLDivElement.prototype, { createdCallback: { value: markingReadyCallback } }) });
</script>
</head>
<body>
<div id="container"></div>
<div id="host"></div>

<script>

shouldBeTrue("document.createElement('x-foo').callbacksCalled");
shouldBeTrue("document.createElement('div', 'x-bar').callbacksCalled");

shouldBeTrue("document.createElementNS('http://www.w3.org/1999/xhtml', 'x-foo').callbacksCalled");
shouldBeTrue("document.createElementNS('http://www.w3.org/1999/xhtml', 'div', 'x-bar').callbacksCalled");

var foo = document.createElement('x-foo');
foo.appendChild(document.createElement('div', 'x-bar'));
shouldBeTrue("foo.cloneNode().callbacksCalled");
shouldBeTrue("foo.cloneNode(true).firstChild.callbacksCalled");

var bar = document.createElement('div', 'x-bar');
bar.appendChild(document.createElement('x-foo'));
shouldBeTrue("bar.cloneNode().callbacksCalled");
shouldBeTrue("bar.cloneNode(true).firstChild.callbacksCalled");

var foreignDoc = document.implementation.createDocument('http://www.w3.org/1999/xhtml', 'html', null);

var foreignFoo = foreignDoc.createElement('x-foo');
foreignFoo.appendChild(foreignDoc.createElement('div', 'x-bar'));
shouldBeTrue("foreignFoo.callbacksCalled");
shouldBeTrue("foreignFoo.firstChild.callbacksCalled");
importedFoo = document.importNode(foreignFoo, true)
shouldBeTrue("importedFoo.callbacksCalled");
shouldBeTrue("importedFoo.firstChild.callbacksCalled");

window.callbacksCalled = [];
var foreignBar = foreignDoc.createElement('div', 'x-bar');
foreignBar.appendChild(foreignDoc.createElement('x-foo'));
shouldBe("window.callbacksCalled", "['div', 'x-foo']");
window.callbacksCalled = [];
importedBar = document.importNode(foreignBar, true);
shouldBeTrue("importedBar.callbacksCalled");
shouldBeTrue("importedBar.firstChild.callbacksCalled");
shouldBe("window.callbacksCalled", "['DIV', 'X-FOO']");

window.callbacksCalled = [];
var toBeReplaced = document.createElement("div");
document.body.appendChild(toBeReplaced);
toBeReplaced.outerHTML = "<x-foo></x-foo>";
shouldBe("window.callbacksCalled", "['X-FOO']");

window.callbacksCalled = [];
var insertionPlaceHolder = document.createElement("div");
document.body.appendChild(insertionPlaceHolder);
insertionPlaceHolder.insertAdjacentHTML("beforebegin", "<x-foo></x-foo>");
shouldBe("window.callbacksCalled", "['X-FOO']");

</script>
</body>
</html>