third_party/WebKit/LayoutTests/fast/dom/custom/lifecycle-created-creation-api.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../../../resources/js-test.js"></script>
   5 <script>
   6 description("This test ensures that the lifecycle callbacks of API-originated elements are visible in following script block.")
   7 window.callbacksCalled = [];
   8 function markingReadyCallback() {
   9     window.callbacksCalled.push(this.tagName);
  10     this.callbacksCalled = true;
  11 }
  12
  13 document.registerElement("x-foo", { prototype: Object.create(HTMLElement.prototype, { createdCallback: { value: markingReadyCallback } }) });
  14 document.registerElement("x-bar", { extends: "div", prototype: Object.create(HTMLDivElement.prototype, { createdCallback: { value: markingReadyCallback } }) });
  15 </script>
  16 </head>
  17 <body>
  18 <div id="container"></div>
  19 <div id="host"></div>
  20
  21 <script>
  22
  23 shouldBeTrue("document.createElement('x-foo').callbacksCalled");
  24 shouldBeTrue("document.createElement('div', 'x-bar').callbacksCalled");
  25
  26 shouldBeTrue("document.createElementNS('http://www.w3.org/1999/xhtml', 'x-foo').callbacksCalled");
  27 shouldBeTrue("document.createElementNS('http://www.w3.org/1999/xhtml', 'div', 'x-bar').callbacksCalled");
  28
  29 var foo = document.createElement('x-foo');
  30 foo.appendChild(document.createElement('div', 'x-bar'));
  31 shouldBeTrue("foo.cloneNode().callbacksCalled");
  32 shouldBeTrue("foo.cloneNode(true).firstChild.callbacksCalled");
  33
  34 var bar = document.createElement('div', 'x-bar');
  35 bar.appendChild(document.createElement('x-foo'));
  36 shouldBeTrue("bar.cloneNode().callbacksCalled");
  37 shouldBeTrue("bar.cloneNode(true).firstChild.callbacksCalled");
  38
  39 var foreignDoc = document.implementation.createDocument('http://www.w3.org/1999/xhtml', 'html', null);
  40
  41 var foreignFoo = foreignDoc.createElement('x-foo');
  42 foreignFoo.appendChild(foreignDoc.createElement('div', 'x-bar'));
  43 shouldBeTrue("foreignFoo.callbacksCalled");
  44 shouldBeTrue("foreignFoo.firstChild.callbacksCalled");
  45 importedFoo = document.importNode(foreignFoo, true)
  46 shouldBeTrue("importedFoo.callbacksCalled");
  47 shouldBeTrue("importedFoo.firstChild.callbacksCalled");
  48
  49 window.callbacksCalled = [];
  50 var foreignBar = foreignDoc.createElement('div', 'x-bar');
  51 foreignBar.appendChild(foreignDoc.createElement('x-foo'));
  52 shouldBe("window.callbacksCalled", "['div', 'x-foo']");
  53 window.callbacksCalled = [];
  54 importedBar = document.importNode(foreignBar, true);
  55 shouldBeTrue("importedBar.callbacksCalled");
  56 shouldBeTrue("importedBar.firstChild.callbacksCalled");
  57 shouldBe("window.callbacksCalled", "['DIV', 'X-FOO']");
  58
  59 window.callbacksCalled = [];
  60 var toBeReplaced = document.createElement("div");
  61 document.body.appendChild(toBeReplaced);
  62 toBeReplaced.outerHTML = "<x-foo></x-foo>";
  63 shouldBe("window.callbacksCalled", "['X-FOO']");
  64
  65 window.callbacksCalled = [];
  66 var insertionPlaceHolder = document.createElement("div");
  67 document.body.appendChild(insertionPlaceHolder);
  68 insertionPlaceHolder.insertAdjacentHTML("beforebegin", "<x-foo></x-foo>");
  69 shouldBe("window.callbacksCalled", "['X-FOO']");
  70
  71 </script>
  72 </body>
  73 </html>