OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <title>Custom Elements: Create an element when definition is non-null and synchr
onous flag not set</title> | |
3 <script src="../../resources/testharness.js"></script> | |
4 <script src="../../resources/testharnessreport.js"></script> | |
5 <script src="resources/custom-elements-helpers.js"></script> | |
6 <body> | |
7 <script> | |
8 'use strict'; | |
9 | |
10 (() => { | |
11 // "Upgrade an element" | |
12 // https://html.spec.whatwg.org/multipage/scripting.html#upgrades | |
13 | |
14 // 1. For each attribute in element's attribute list, in order, enqueue a | |
15 // custom element callback reaction with element, callback name | |
16 // "attributeChangedCallback", and an argument list containing attribute's | |
17 // local name, null, attribute's value, and attribute's namespace. | |
18 | |
19 // 2. If element is currently in a shadow-including document, then enqueue a | |
20 // custom element callback reaction with element, callback name | |
21 // "connectedCallback", and an empty argument list. | |
22 | |
23 const constructor = 'constructor'; | |
24 const connected = 'connected'; | |
25 const disconnected = 'disconnected'; | |
26 const attributeChanged = 'attributeChanged'; | |
27 | |
28 function define_logger(w, observedAttributes) { | |
29 let logs = []; | |
30 w.customElements.define('a-a', class extends w.HTMLElement { | |
31 constructor() { super(); logs.push([constructor, this, arguments]); } | |
32 connectedCallback() { logs.push([connected, this, arguments]); } | |
33 disconnectedCallback() { logs.push([disconnected, this, arguments]); } | |
34 static get observedAttributes() { return observedAttributes; } | |
35 attributeChangedCallback() { logs.push([attributeChanged, this, arguments]
); } | |
36 }); | |
37 return logs; | |
38 } | |
39 | |
40 function assert_log_is_type(logs, i, type, element, argv) { | |
41 assert_equals(logs[i][0], type, `[${i}] should be ${type}`); | |
42 assert_equals(logs[i][1], element, `this in ${type} should be the element`); | |
43 if (argv) { | |
44 assert_array_equals(logs[i][2], argv, `${type} should have arguments ${arg
v}`); | |
45 } else { | |
46 assert_equals(logs[i][2].length, 0, `${type} should have no arguments`); | |
47 } | |
48 } | |
49 | |
50 test_with_window(w => { | |
51 let document = w.document; | |
52 let element = document.createElement('a-a'); | |
53 document.body.appendChild(element); | |
54 let logs = define_logger(w); | |
55 assert_log_is_type(logs, 0, constructor, element); | |
56 assert_log_is_type(logs, 1, connected, element); | |
57 assert_equals(logs.length, 2); | |
58 }, 'upgrade should enqueue connectedCallback'); | |
59 | |
60 test_with_window(w => { | |
61 let document = w.document; | |
62 let element = document.createElement('a-a'); | |
63 element.setAttribute('x', '1'); | |
64 element.setAttribute('y', '2'); | |
65 element.setAttribute('z', '3'); | |
66 document.body.appendChild(element); | |
67 let logs = define_logger(w, ['x', 'y']); | |
68 assert_log_is_type(logs, 0, constructor, element); | |
69 assert_log_is_type(logs, 1, attributeChanged, element, ['x', null, '1', ''])
; | |
70 assert_log_is_type(logs, 2, attributeChanged, element, ['y', null, '2', ''])
; | |
71 assert_log_is_type(logs, 3, connected, element); | |
72 assert_equals(logs.length, 4); | |
73 }, 'upgrade should enqueue attributeChangedCallback and connectedCallback'); | |
74 | |
75 test_with_window(w => { | |
76 let document = w.document; | |
77 let element = document.createElement('a-a'); | |
78 element.setAttribute('x', '1'); | |
79 document.body.appendChild(element); | |
80 let logs = define_logger(w, ['x', 'y']); | |
81 | |
82 logs.length = 0; | |
83 element.setAttribute('z', '0'); | |
84 element.setAttribute('y', '2'); | |
85 element.setAttribute('x', '9'); | |
86 assert_log_is_type(logs, 0, attributeChanged, element, ['y', null, '2', ''])
; | |
87 assert_log_is_type(logs, 1, attributeChanged, element, ['x', '1', '9', '']); | |
88 assert_equals(logs.length, 2); | |
89 }, 'setAttribute should enqueue attributeChangedCallback'); | |
90 | |
91 test_with_window(w => { | |
92 let document = w.document; | |
93 let element = document.createElement('a-a'); | |
94 element.setAttribute('x', '1'); | |
95 document.body.appendChild(element); | |
96 let logs = define_logger(w, ['x']); | |
97 | |
98 logs.length = 0; | |
99 element.removeAttribute('x'); | |
100 assert_log_is_type(logs, 0, attributeChanged, element, ['x', '1', null, ''])
; | |
101 assert_equals(logs.length, 1); | |
102 }, 'removeAttribute should enqueue attributeChangedCallback'); | |
103 | |
104 test_with_window(w => { | |
105 let document = w.document; | |
106 let element = document.createElement('a-a'); | |
107 document.body.appendChild(element); | |
108 let logs = define_logger(w); | |
109 | |
110 logs.length = 0; | |
111 element.remove(); | |
112 assert_log_is_type(logs, 0, disconnected, element); | |
113 assert_equals(logs.length, 1); | |
114 }, 'remove should enqueue disconnectedCallback'); | |
115 })(); | |
116 </script> | |
117 </body> | |
OLD | NEW |