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