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 |