third_party/WebKit/LayoutTests/fast/dom/custom/element-upgrade.html

   1 <!DOCTYPE html>
   2 <script src="../../../resources/js-test.js"></script>
   3 <div id="container"></div>
   4 <script>
   5 description('Tests the element upgrade algorithm.');
   6
   7 // "Element Upgrade" is the processing of custom elements which were
   8 // created before their definition was available, when the definition
   9 // becomes available. The following scenarios cover a lot but are not
  10 // exhaustive.
  11
  12 // Scenario A: Custom tag; upgrade candidate is not in the document;
  13 // upgrade candidate did not have a JavaScript wrapper at upgrade
  14 // time; custom element does not have a created callback.
  15 var host = document.createElement('div');
  16 host.innerHTML = '<x-a></x-a>';  // Using innerHTML avoids wrapping x-a
  17 var A = document.registerElement('x-a', {prototype: Object.create(HTMLElement.prototype)});
  18 shouldBeTrue('host.firstChild instanceof A');
  19
  20 // Scenario B: Type extension; upgrade candidate is in the document;
  21 // upgrade candidate did have a JavaScript wrapper at upgrade time;
  22 // custom element has a created callback.
  23 var element = document.createElement('span', 'x-b');
  24 var proto = Object.create(HTMLSpanElement.prototype);
  25 var callCount = 0;
  26 proto.createdCallback = function () {
  27   callCount++;
  28 };
  29 var B = document.registerElement('x-b', {extends: 'span', prototype: proto});
  30 shouldBeTrue('element instanceof B');
  31 shouldBe('callCount', '1');
  32
  33 // Scenario C: The candidate is a custom tag but the definition is a
  34 // type extension. Upgrade should not happen.
  35 element = document.createElement('x-c');
  36 var C = document.registerElement('x-c', {extends: 'span', prototype: Object.create(HTMLSpanElement.prototype)});
  37 shouldBeFalse('element instanceof C');
  38 shouldBe('Object.getPrototypeOf(element)', 'HTMLElement.prototype');
  39
  40 // Scenario D: The candidate is a type extension, but the definition
  41 // extends a different tag. Upgrade should not happen.
  42 document.body.appendChild(host);
  43 host.innerHTML = '<span is="x-d"></span>';
  44 var D = document.registerElement('x-d', {extends: 'div', prototype: Object.create(HTMLDivElement.prototype)});
  45 shouldBeFalse('host.firstChild instanceof D');
  46 shouldBe('document.querySelector(":unresolved")', 'host.firstChild');
  47
  48 // Scenario E: The order of upgrades should be the order of completing parsing.
  49 // Use a good number of elements to avoid false positives from random correct ordering.
  50 host.innerHTML = '<x-e id="e1"><x-e id="e2"></x-e></x-e><x-e id="e3"></x-e><x-e id="e4"></x-e><x-e id="e5"></x-e>';
  51 var upgradedOrder = [];
  52 var protoE = Object.create(HTMLElement.prototype);
  53 protoE.createdCallback = function() { upgradedOrder.push(this.id); };
  54 document.registerElement('x-e', {prototype: protoE});
  55 shouldBe('upgradedOrder', '["e1","e2","e3","e4","e5"]');
  56
  57 successfullyParsed = true;
  58 </script>