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