OLD | NEW |
---|---|
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <title>Custom Elements: upgrade element</title> | 2 <title>Custom Elements: upgrade element</title> |
3 <link rel="help" href="https://html.spec.whatwg.org/multipage/scripting.html#con cept-upgrade-an-element"> | 3 <link rel="help" href="https://html.spec.whatwg.org/multipage/scripting.html#con cept-upgrade-an-element"> |
4 <script src="../../resources/testharness.js"></script> | 4 <script src="../../resources/testharness.js"></script> |
5 <script src="../../resources/testharnessreport.js"></script> | 5 <script src="../../resources/testharnessreport.js"></script> |
6 <script src="resources/custom-elements-helpers.js"></script> | 6 <script src="resources/custom-elements-helpers.js"></script> |
7 <body> | 7 <body> |
8 <script> | 8 <script> |
9 | 9 |
10 'use strict' | 10 'use strict' |
11 // 6. "attributeChangedCallback" and "connectedCallback" should execute after C and | 11 |
12 // the rest of the upgrade process finishes. | 12 // 6. If C non-conformantly uses an API decorated with the [CEReactions] extende d attribute, |
13 // then the reactions enqueued at the beginning of upgrade will execute during t his step, | |
14 // before C finishes and control returns to this algorithm. | |
13 test_with_window((w) => { | 15 test_with_window((w) => { |
14 let invocations = []; | 16 let invocations = []; |
15 let changedCallbackArgs; | 17 let changedCallbackArgs = []; |
16 let a = w.document.createElement('a-a'); | 18 let a = w.document.createElement('a-a'); |
17 w.document.body.appendChild(a); | 19 w.document.body.appendChild(a); |
18 a.setAttribute('x', '1'); | 20 a.setAttribute('x', '1'); |
19 class X extends w.HTMLElement { | 21 class X extends w.HTMLElement { |
20 constructor() { | 22 constructor() { |
21 super(); | 23 super(); |
24 this.setAttribute('y', '2'); | |
22 invocations.push(['constructor', this]); | 25 invocations.push(['constructor', this]); |
23 } | 26 } |
24 connectedCallback() { invocations.push(['connected', this]); } | 27 connectedCallback() { invocations.push(['connected', this]); } |
25 static get observedAttributes() { return ['x']; } | 28 static get observedAttributes() { return ['x', 'y']; } |
26 attributeChangedCallback() { | 29 attributeChangedCallback() { |
27 invocations.push(['attributeChanged', this]); | 30 invocations.push(['attributeChanged', this]); |
28 changedCallbackArgs = arguments; | 31 changedCallbackArgs.push(arguments); |
29 } | 32 } |
30 } | 33 } |
31 w.customElements.define('a-a', X); | 34 w.customElements.define('a-a', X); |
35 // Unlike calling new, upgrading element with createElement does not set eleme nt's state | |
dominicc (has gone to gerrit)
2016/07/22 07:34:08
Great comment.
| |
36 // to "custom" during HTMLConstructor. Thus, appending attribute after super() | |
37 // does not enqueue a callback reaction. | |
32 assert_equals(invocations.length, 3); | 38 assert_equals(invocations.length, 3); |
33 assert_array_equals(invocations[0], ['constructor', a], 'constructor should ex ecute first'); | 39 assert_equals(changedCallbackArgs.length, 1, 'attributeChangedCallback should invoke only once'); |
dominicc (has gone to gerrit)
2016/07/22 07:34:08
invoke only once -> only be invoked once
| |
34 assert_array_equals(invocations[1], ['attributeChanged', a], 'attributeChanged Callback should execute after the constructor'); | 40 assert_array_equals(invocations[0], ['constructor', a], 'consturctor should ex ecute first'); |
dominicc (has gone to gerrit)
2016/07/22 07:34:08
Spelling: constructor
| |
35 assert_array_equals(changedCallbackArgs, ['x', null, '1', '']); | 41 assert_array_equals(invocations[1], ['attributeChanged', a], 'attributeChanged Callback should execute after constructor'); |
36 assert_array_equals(invocations[2], ['connected', a], 'connectedCallback shoul d execute after the constructor'); | 42 assert_array_equals(changedCallbackArgs[0], ['x', null, '1', ''], 'attributeCh angedCallback should execute for setAttribute outside of the constructor'); |
37 }, '"connectedCallback", "attributeChangedCallback" reactions should execute aft er the constructor'); | 43 assert_array_equals(invocations[2], ['connected', a], 'connectedCallback shoul d execute after the constrcutor'); |
44 }, 'The constructor non-conformatly uses API decorated with the [CEReactions] wh en constuctor is invoked during upgrade'); | |
38 | 45 |
39 // 6. If C non-conformantly uses an API decorated with the [CEReactions] extende d attribute, | 46 // Case when constructor is invoked with new |
dominicc (has gone to gerrit)
2016/07/22 07:34:08
Maybe mention "Step 6 case when ..." If someone co
| |
40 // then the reactions enqueued at the beginning of upgrade will execute during t his step, | |
41 // before C finishes and control returns to this algorithm. | |
42 test_with_window((w) => { | 47 test_with_window((w) => { |
43 let invocations = []; | 48 let invocations = []; |
44 let changedCallbackArgs; | 49 let changedCallbackArgs = []; |
45 let a = w.document.createElement('a-a'); | |
46 w.document.body.appendChild(a); | |
47 class X extends w.HTMLElement { | 50 class X extends w.HTMLElement { |
48 constructor() { | 51 constructor() { |
49 super(); | 52 super(); |
50 this.setAttribute('x', '1'); | 53 this.setAttribute('y', '2'); |
51 invocations.push(['constructor', this]); | 54 invocations.push(['constructor', this]); |
52 } | 55 } |
53 connectedCallback() { invocations.push(['connected', this]); } | 56 connectedCallback() { invocations.push(['connected', this]); } |
54 static get observedAttributes() { return ['x']; } | 57 static get observedAttributes() { return ['x', 'y']; } |
55 attributeChangedCallback() { | 58 attributeChangedCallback() { |
56 invocations.push(['attributeChanged', this]); | 59 invocations.push(['attributeChanged', this]); |
57 changedCallbackArgs = arguments; | 60 changedCallbackArgs.push(arguments); |
58 } | 61 } |
59 } | 62 } |
60 w.customElements.define('a-a', X); | 63 w.customElements.define('a-a', X); |
64 let a = new X(); | |
65 a.setAttribute('x','1'); | |
61 assert_equals(invocations.length, 3); | 66 assert_equals(invocations.length, 3); |
62 assert_array_equals(invocations[0], ['connected', a], 'connectedCallback execu tes before the constructor'); | 67 assert_equals(changedCallbackArgs.length, 2, 'attributeChangedCallback should be invoked twice'); |
63 assert_array_equals(invocations[1], ['attributeChanged', a], 'attributeChanged Callback executes before the constructor'); | 68 assert_array_equals(invocations[0], ['attributeChanged', a], 'attributeChanged Callback non-conformantly executes before the constructor is finished'); |
dominicc (has gone to gerrit)
2016/07/22 07:34:08
I wouldn't say "non-conformantly" here. It's the *
| |
64 assert_array_equals(changedCallbackArgs, ['x', null, '1', '']); | 69 assert_array_equals(invocations[1], ['constructor', a], 'constructor executes second'); |
65 assert_array_equals(invocations[2], ['constructor', a], 'constructor executes last'); | 70 assert_array_equals(invocations[2], ['attributeChanged', a], 'invoked by setAt tribute outside of the constructor'); |
dominicc (has gone to gerrit)
2016/07/22 07:34:08
Use 'should' in these descriptions to describe wha
| |
66 }, 'The constructor non-conformatly uses API decorated with the [CEReactions]'); | 71 assert_array_equals(changedCallbackArgs[0], ['y', null, '2', '']); |
72 assert_array_equals(changedCallbackArgs[1], ['x', null, '1', '']); | |
73 }, 'The constructor non-conformatly uses API decorated with the [CEReactions] wh en consturctor is invoked with new'); | |
dominicc (has gone to gerrit)
2016/07/22 07:34:08
This, and the test above, have great names. It is
| |
74 | |
67 | 75 |
68 // 8. If constructResult is an abrupt completion, then return constructResult | 76 // 8. If constructResult is an abrupt completion, then return constructResult |
69 // (i.e., rethrow the exception). | 77 // (i.e., rethrow the exception). |
70 test_with_window((w) => { | 78 test_with_window((w) => { |
71 let error_log = []; | 79 let error_log = []; |
72 let doc = w.document; | 80 let doc = w.document; |
73 doc.body.appendChild(doc.createElement('a-a')); | 81 doc.body.appendChild(doc.createElement('a-a')); |
74 w.onerror = function (msg, url, lineNo, columnNo, error) { | 82 w.onerror = function (msg, url, lineNo, columnNo, error) { |
75 error_log.push(error); | 83 error_log.push(error.name); |
76 return true; | 84 return true; |
77 }; | 85 }; |
78 class X extends w.HTMLElement { | 86 class X extends w.HTMLElement { |
79 constructor() { | 87 constructor() { |
80 super(); | 88 super(); |
81 assert_false(this.matches(':defined'), 'calling super() with non-empty con struction stack should not define the element'); | 89 assert_false(this.matches(':defined'), 'calling super() with non-empty con struction stack should not define the element'); |
82 throw 'constructor throws'; | 90 throw { name: 'constructor throws' }; |
83 } | 91 } |
84 } | 92 } |
85 w.customElements.define('a-a', X); | 93 w.customElements.define('a-a', X); |
94 console.log(error_log.join(',')); | |
86 assert_array_equals(error_log, ['constructor throws'], 'rethrow any exception thrown from constructor'); | 95 assert_array_equals(error_log, ['constructor throws'], 'rethrow any exception thrown from constructor'); |
87 }, 'Upgrading an element with a throwing constructor should rethrow that excepti on'); | 96 }, 'Upgrading an element with a throwing constructor should rethrow that excepti on'); |
88 | 97 |
89 // 9. If SameValue(constructResult.[[value]], element) is false, then throw an | 98 // 9. If SameValue(constructResult.[[value]], element) is false, then throw an |
90 // "InvalidStateError" DOMException and terminate these steps. | 99 // "InvalidStateError" DOMException and terminate these steps. |
91 test_with_window((w) => { | 100 test_with_window((w) => { |
92 let error_log = []; | 101 let error_log = []; |
93 w.onerror = function (msg, url, lineNo, columnNo, error) { | 102 w.onerror = function (msg, url, lineNo, columnNo, error) { |
94 error_log.push(error); | 103 error_log.push(error.name); |
95 return true; | 104 return true; |
96 }; | 105 }; |
97 let a = w.document.createElement('a-a'); | 106 let a = w.document.createElement('a-a'); |
98 w.document.body.appendChild(a); | 107 w.document.body.appendChild(a); |
99 class X extends w.HTMLElement { | 108 class X extends w.HTMLElement { |
100 constructor() { | 109 constructor() { |
101 super(); | 110 super(); |
102 return ['aaaa']; | 111 return ['aaaa']; |
103 } | 112 } |
104 } | 113 } |
105 w.customElements.define('a-a', X); | 114 w.customElements.define('a-a', X); |
106 assert_array_equals(error_log, ['InvalidStateError'], 'returning object that i s different from element should throw "InvalidStateError"'); | 115 assert_array_equals(error_log, ['InvalidStateError'], 'returning object that i s different from element should throw "InvalidStateError"'); |
107 }, 'Upgrading an element with invalid constructor'); | 116 }, 'Upgrading an element with invalid constructor'); |
108 </script> | 117 </script> |
109 </body> | 118 </body> |
OLD | NEW |