Skip to content

Commit c7fbe2d

Browse files
rniwaTakayoshi Kochi
rniwa
authored and
Takayoshi Kochi
committed
Share more code between tests imported from WebKit. (web-platform-tests#3853)
Also move defineNewCustomElement (renamed to define_new_custom_element) and assert_attribute_log_entry from reactions.js to custom-elements-helpers.js so that we can reuse them in the newly added tests. Finally, rename log() function on returned by define_new_custom_element to takeLog() and renamed log() on the object returned by takeLog() to last() to make their semantics clear.
1 parent 90b63d7 commit c7fbe2d

16 files changed

+422
-364
lines changed

‎custom-elements/adopted-callback.html

+10-10
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<link rel="help" href="https://w3c.github.io/webcomponents/spec/custom/#dfn-connected-callback">
88
<script src="/resources/testharness.js"></script>
99
<script src="/resources/testharnessreport.js"></script>
10-
<script src="./resources/document-types.js"></script>
10+
<script src="./resources/custom-elements-helpers.js"></script>
1111
</head>
1212
<body>
1313
<div id="log"></div>
@@ -28,7 +28,7 @@
2828
assert_array_equals(calls, ['connected']);
2929
}, 'Inserting a custom element into the owner document must not enqueue and invoke adoptedCallback');
3030

31-
DocumentTypes.forEach(function (entry) {
31+
document_types().forEach(function (entry) {
3232
if (entry.isOwner)
3333
return;
3434

@@ -42,7 +42,7 @@
4242
doc.documentElement.appendChild(instance);
4343
assert_array_equals(calls, ['adopted', document, doc, 'connected']);
4444
});
45-
}, 'Inserting a custom element into a ' + documentName + ' must enqueue and invoke adoptedCallback');
45+
}, 'Inserting a custom element into ' + documentName + ' must enqueue and invoke adoptedCallback');
4646

4747
promise_test(function () {
4848
return getDocument().then(function (doc) {
@@ -52,7 +52,7 @@
5252
doc.documentElement.appendChild(instance);
5353
assert_array_equals(calls, ['disconnected', 'adopted', document, doc, 'connected']);
5454
});
55-
}, 'Moving a custom element from the owner document into a ' + documentName + ' must enqueue and invoke adoptedCallback');
55+
}, 'Moving a custom element from the owner document into ' + documentName + ' must enqueue and invoke adoptedCallback');
5656

5757
promise_test(function () {
5858
return getDocument().then(function (doc) {
@@ -63,7 +63,7 @@
6363
doc.documentElement.appendChild(parent);
6464
assert_array_equals(calls, ['adopted', document, doc, 'connected']);
6565
});
66-
}, 'Inserting an ancestor of custom element into a ' + documentName + ' must enqueue and invoke adoptedCallback');
66+
}, 'Inserting an ancestor of custom element into ' + documentName + ' must enqueue and invoke adoptedCallback');
6767

6868
promise_test(function () {
6969
return getDocument().then(function (doc) {
@@ -75,7 +75,7 @@
7575
doc.documentElement.appendChild(parent);
7676
assert_array_equals(calls, ['disconnected', 'adopted', document, doc, 'connected']);
7777
});
78-
}, 'Moving an ancestor of custom element from the owner document into a ' + documentName + ' must enqueue and invoke adoptedCallback');
78+
}, 'Moving an ancestor of custom element from the owner document into ' + documentName + ' must enqueue and invoke adoptedCallback');
7979

8080
promise_test(function () {
8181
return getDocument().then(function (doc) {
@@ -88,7 +88,7 @@
8888
shadowRoot.appendChild(instance);
8989
assert_array_equals(calls, ['adopted', document, doc, 'connected']);
9090
});
91-
}, 'Inserting a custom element into a shadow tree in a ' + documentName + ' must enqueue and invoke adoptedCallback');
91+
}, 'Inserting a custom element into a shadow tree in ' + documentName + ' must enqueue and invoke adoptedCallback');
9292

9393
promise_test(function () {
9494
return getDocument().then(function (doc) {
@@ -101,7 +101,7 @@
101101
doc.documentElement.appendChild(host);
102102
assert_array_equals(calls, ['adopted', document, doc, 'connected']);
103103
});
104-
}, 'Inserting the shadow host of a custom element into a ' + documentName + ' must enqueue and invoke adoptedCallback');
104+
}, 'Inserting the shadow host of a custom element into ' + documentName + ' must enqueue and invoke adoptedCallback');
105105

106106
promise_test(function () {
107107
return getDocument().then(function (doc) {
@@ -115,7 +115,7 @@
115115
doc.documentElement.appendChild(host);
116116
assert_array_equals(calls, ['disconnected', 'adopted', document, doc, 'connected']);
117117
});
118-
}, 'Moving the shadow host of a custom element from the owner document into a ' + documentName + ' must enqueue and invoke adoptedCallback');
118+
}, 'Moving the shadow host of a custom element from the owner document into ' + documentName + ' must enqueue and invoke adoptedCallback');
119119

120120
promise_test(function () {
121121
return getDocument().then(function (doc) {
@@ -127,7 +127,7 @@
127127
shadowRoot.appendChild(instance);
128128
assert_array_equals(calls, ['adopted', document, doc]);
129129
});
130-
}, 'Inserting a custom element into a detached shadow tree that belongs to a ' + documentName + ' must enqueue and invoke adoptedCallback');
130+
}, 'Inserting a custom element into a detached shadow tree that belongs to ' + documentName + ' must enqueue and invoke adoptedCallback');
131131
});
132132

133133
</script>

‎custom-elements/attribute-changed-callback.html

+103-72
Original file line numberDiff line numberDiff line change
@@ -7,186 +7,217 @@
77
<link rel="help" href="https://w3c.github.io/webcomponents/spec/custom/#dfn-attribute-changed-callback">
88
<script src="/resources/testharness.js"></script>
99
<script src="/resources/testharnessreport.js"></script>
10+
<script src="resources/custom-elements-helpers.js"></script>
1011
</head>
1112
<body>
1213
<div id="log"></div>
1314
<script>
1415

15-
var argumentList = [];
16-
class MyCustomElement extends HTMLElement {
17-
attributeChangedCallback(name, oldValue, newValue, namespace) {
18-
argumentList.push({arguments: arguments, value: this.getAttributeNS(namespace, name)});
19-
}
20-
}
21-
MyCustomElement.observedAttributes = ['title', 'id', 'r'];
22-
customElements.define('my-custom-element', MyCustomElement);
16+
var customElement = define_new_custom_element(['title', 'id', 'r']);
2317

2418
test(function () {
25-
var instance = document.createElement('my-custom-element');
26-
argumentList = [];
19+
const instance = document.createElement(customElement.name);
20+
assert_array_equals(customElement.takeLog().types(), ['constructed']);
2721

2822
instance.setAttribute('title', 'foo');
2923
assert_equals(instance.getAttribute('title'), 'foo');
30-
assert_equals(argumentList.length, 1);
31-
assert_equals(argumentList[0].value, 'foo');
32-
assert_array_equals(argumentList[0].arguments, ['title', null, 'foo', null]);
24+
var logEntries = customElement.takeLog();
25+
assert_array_equals(logEntries.types(), ['attributeChanged']);
26+
assert_attribute_log_entry(logEntries.last(), {name: 'title', oldValue: null, newValue: 'foo', namespace: null});
3327

3428
instance.removeAttribute('title');
3529
assert_equals(instance.getAttribute('title'), null);
36-
assert_equals(argumentList.length, 2);
37-
assert_equals(argumentList[1].value, null);
38-
assert_array_equals(argumentList[1].arguments, ['title', 'foo', null, null]);
39-
30+
var logEntries = customElement.takeLog();
31+
assert_array_equals(logEntries.types(), ['attributeChanged']);
32+
assert_attribute_log_entry(logEntries.last(), {name: 'title', oldValue: 'foo', newValue: null, namespace: null});
4033
}, 'setAttribute and removeAttribute must enqueue and invoke attributeChangedCallback');
4134

4235
test(function () {
43-
var instance = document.createElement('my-custom-element');
44-
argumentList = [];
36+
var instance = document.createElement(customElement.name);
37+
assert_array_equals(customElement.takeLog().types(), ['constructed']);
4538

4639
instance.setAttributeNS('http://www.w3.org/2000/svg', 'title', 'hello');
4740
assert_equals(instance.getAttribute('title'), 'hello');
48-
assert_equals(argumentList.length, 1);
49-
assert_equals(argumentList[0].value, 'hello');
50-
assert_array_equals(argumentList[0].arguments, ['title', null, 'hello', 'http://www.w3.org/2000/svg']);
41+
var logEntries = customElement.takeLog();
42+
assert_array_equals(logEntries.types(), ['attributeChanged']);
43+
assert_attribute_log_entry(logEntries.last(), {name: 'title', oldValue: null, newValue: 'hello', namespace: 'http://www.w3.org/2000/svg'});
5144

5245
instance.removeAttributeNS('http://www.w3.org/2000/svg', 'title');
5346
assert_equals(instance.getAttribute('title'), null);
54-
assert_equals(argumentList.length, 2);
55-
assert_equals(argumentList[1].value, null);
56-
assert_array_equals(argumentList[1].arguments, ['title', 'hello', null, 'http://www.w3.org/2000/svg']);
57-
47+
var logEntries = customElement.takeLog();
48+
assert_array_equals(logEntries.types(), ['attributeChanged']);
49+
assert_attribute_log_entry(logEntries.last(), {name: 'title', oldValue: 'hello', newValue: null, namespace: 'http://www.w3.org/2000/svg'});
5850
}, 'setAttributeNS and removeAttributeNS must enqueue and invoke attributeChangedCallback');
5951

6052
test(function () {
61-
var instance = document.createElement('my-custom-element');
62-
argumentList = [];
53+
var instance = document.createElement(customElement.name);
54+
assert_array_equals(customElement.takeLog().types(), ['constructed']);
6355

6456
var attr = document.createAttribute('id');
6557
attr.value = 'bar';
6658
instance.setAttributeNode(attr);
6759

6860
assert_equals(instance.getAttribute('id'), 'bar');
69-
assert_equals(argumentList.length, 1);
70-
assert_equals(argumentList[0].value, 'bar');
71-
assert_array_equals(argumentList[0].arguments, ['id', null, 'bar', null]);
61+
var logEntries = customElement.takeLog();
62+
assert_array_equals(logEntries.types(), ['attributeChanged']);
63+
assert_attribute_log_entry(logEntries.last(), {name: 'id', oldValue: null, newValue: 'bar', namespace: null});
7264

7365
instance.removeAttributeNode(attr);
7466
assert_equals(instance.getAttribute('id'), null);
75-
assert_equals(argumentList.length, 2);
76-
assert_equals(argumentList[1].value, null);
77-
assert_array_equals(argumentList[1].arguments, ['id', 'bar', null, null]);
78-
79-
}, 'setAttributeNode and removeAttributeNS must enqueue and invoke attributeChangedCallback');
67+
var logEntries = customElement.takeLog();
68+
assert_array_equals(logEntries.types(), ['attributeChanged']);
69+
assert_attribute_log_entry(logEntries.last(), {name: 'id', oldValue: 'bar', newValue: null, namespace: null});
70+
}, 'setAttributeNode and removeAttributeNode must enqueue and invoke attributeChangedCallback for an HTML attribute');
8071

8172
test(function () {
82-
var instance = document.createElement('my-custom-element');
83-
argumentList = [];
73+
const instance = document.createElement(customElement.name);
74+
assert_array_equals(customElement.takeLog().types(), ['constructed']);
8475

85-
var attr = document.createAttributeNS('http://www.w3.org/2000/svg', 'r');
76+
const attr = document.createAttributeNS('http://www.w3.org/2000/svg', 'r');
8677
attr.value = '100';
8778
instance.setAttributeNode(attr);
8879

8980
assert_equals(instance.getAttribute('r'), '100');
90-
assert_equals(argumentList.length, 1);
91-
assert_equals(argumentList[0].value, '100');
92-
assert_array_equals(argumentList[0].arguments, ['r', null, '100', 'http://www.w3.org/2000/svg']);
81+
var logEntries = customElement.takeLog();
82+
assert_array_equals(logEntries.types(), ['attributeChanged']);
83+
assert_attribute_log_entry(logEntries.last(), {name: 'r', oldValue: null, newValue: '100', namespace: 'http://www.w3.org/2000/svg'});
9384

9485
instance.removeAttributeNode(attr);
9586
assert_equals(instance.getAttribute('r'), null);
96-
assert_equals(argumentList.length, 2);
97-
assert_equals(argumentList[1].value, null);
98-
assert_array_equals(argumentList[1].arguments, ['r', '100', null, 'http://www.w3.org/2000/svg']);
99-
}, 'setAttributeNode and removeAttributeNS must enqueue and invoke attributeChangedCallback');
87+
var logEntries = customElement.takeLog();
88+
assert_array_equals(logEntries.types(), ['attributeChanged']);
89+
assert_attribute_log_entry(logEntries.last(), {name: 'r', oldValue: '100', newValue: null, namespace: 'http://www.w3.org/2000/svg'});
90+
}, 'setAttributeNode and removeAttributeNS must enqueue and invoke attributeChangedCallback for an SVG attribute');
10091

10192
test(function () {
102-
var callsToOld = [];
103-
var callsToNew = [];
93+
const callsToOld = [];
94+
const callsToNew = [];
10495
class CustomElement extends HTMLElement { }
105-
CustomElement.prototype.attributeChangedCallback = function () {
106-
callsToOld.push(Array.from(arguments));
96+
CustomElement.prototype.attributeChangedCallback = function (...args) {
97+
callsToOld.push(create_attribute_changed_callback_log(this, ...args));
10798
}
10899
CustomElement.observedAttributes = ['title'];
109100
customElements.define('element-with-mutated-attribute-changed-callback', CustomElement);
110-
CustomElement.prototype.attributeChangedCallback = function () {
111-
callsToNew.push(Array.from(arguments));
101+
CustomElement.prototype.attributeChangedCallback = function (...args) {
102+
callsToNew.push(create_attribute_changed_callback_log(this, ...args));
112103
}
113104

114-
var instance = document.createElement('element-with-mutated-attribute-changed-callback');
105+
const instance = document.createElement('element-with-mutated-attribute-changed-callback');
115106
instance.setAttribute('title', 'hi');
116107
assert_equals(instance.getAttribute('title'), 'hi');
117108
assert_array_equals(callsToNew, []);
118109
assert_equals(callsToOld.length, 1);
119-
assert_array_equals(callsToOld[0], ['title', null, 'hi', null]);
110+
assert_attribute_log_entry(callsToOld[0], {name: 'title', oldValue: null, newValue: 'hi', namespace: null});
120111
}, 'Mutating attributeChangedCallback after calling customElements.define must not affect the callback being invoked');
121112

122113
test(function () {
123-
var calls = [];
114+
const calls = [];
124115
class CustomElement extends HTMLElement {
125-
attributeChangedCallback() {
126-
calls.push(Array.from(arguments));
116+
attributeChangedCallback(...args) {
117+
calls.push(create_attribute_changed_callback_log(this, ...args));
127118
}
128119
}
129120
CustomElement.observedAttributes = ['title'];
130121
customElements.define('element-not-observing-id-attribute', CustomElement);
131122

132-
var instance = document.createElement('element-not-observing-id-attribute');
123+
const instance = document.createElement('element-not-observing-id-attribute');
124+
assert_equals(calls.length, 0);
133125
instance.setAttribute('title', 'hi');
134126
assert_equals(calls.length, 1);
135-
assert_array_equals(calls[0], ['title', null, 'hi', null]);
127+
assert_attribute_log_entry(calls[0], {name: 'title', oldValue: null, newValue: 'hi', namespace: null});
136128
instance.setAttribute('id', 'some');
137129
assert_equals(calls.length, 1);
138-
}, 'attributedChangedCallback must not be invoked when the observed attributes does not contain the attribute.');
130+
assert_attribute_log_entry(calls[0], {name: 'title', oldValue: null, newValue: 'hi', namespace: null});
131+
}, 'attributedChangedCallback must not be invoked when the observed attributes does not contain the attribute');
139132

140133
test(function () {
141-
var calls = [];
134+
const calls = [];
142135
class CustomElement extends HTMLElement { }
143-
CustomElement.prototype.attributeChangedCallback = function () {
144-
calls.push(Array.from(arguments));
136+
CustomElement.prototype.attributeChangedCallback = function (...args) {
137+
calls.push(create_attribute_changed_callback_log(this, ...args));
145138
}
146139
CustomElement.observedAttributes = ['title', 'lang'];
147140
customElements.define('element-with-mutated-observed-attributes', CustomElement);
148141
CustomElement.observedAttributes = ['title', 'id'];
149142

150-
var instance = document.createElement('element-with-mutated-observed-attributes');
143+
const instance = document.createElement('element-with-mutated-observed-attributes');
151144
instance.setAttribute('title', 'hi');
152145
assert_equals(calls.length, 1);
153-
assert_array_equals(calls[0], ['title', null, 'hi', null]);
146+
assert_attribute_log_entry(calls[0], {name: 'title', oldValue: null, newValue: 'hi', namespace: null});
154147

155148
instance.setAttribute('id', 'some');
156149
assert_equals(calls.length, 1);
157150

158151
instance.setAttribute('lang', 'en');
159152
assert_equals(calls.length, 2);
160-
assert_array_equals(calls[0], ['title', null, 'hi', null]);
161-
assert_array_equals(calls[1], ['lang', null, 'en', null]);
153+
assert_attribute_log_entry(calls[1], {name: 'lang', oldValue: null, newValue: 'en', namespace: null});
162154
}, 'Mutating observedAttributes after calling customElements.define must not affect the set of attributes for which attributedChangedCallback is invoked');
163155

164156
test(function () {
165157
var calls = [];
166158
class CustomElement extends HTMLElement { }
167-
CustomElement.prototype.attributeChangedCallback = function () {
168-
calls.push(Array.from(arguments));
159+
CustomElement.prototype.attributeChangedCallback = function (...args) {
160+
calls.push(create_attribute_changed_callback_log(this, ...args));
169161
}
170162
CustomElement.observedAttributes = { [Symbol.iterator]: function *() { yield 'lang'; yield 'style'; } };
171163
customElements.define('element-with-generator-observed-attributes', CustomElement);
172164

173165
var instance = document.createElement('element-with-generator-observed-attributes');
174166
instance.setAttribute('lang', 'en');
175167
assert_equals(calls.length, 1);
176-
assert_array_equals(calls[0], ['lang', null, 'en', null]);
168+
assert_attribute_log_entry(calls[0], {name: 'lang', oldValue: null, newValue: 'en', namespace: null});
177169

178170
instance.setAttribute('lang', 'ja');
179171
assert_equals(calls.length, 2);
180-
assert_array_equals(calls[1], ['lang', 'en', 'ja', null]);
172+
assert_attribute_log_entry(calls[1], {name: 'lang', oldValue: 'en', newValue: 'ja', namespace: null});
181173

182174
instance.setAttribute('title', 'hello');
183175
assert_equals(calls.length, 2);
184176

185177
instance.setAttribute('style', 'font-size: 2rem');
186178
assert_equals(calls.length, 3);
187-
assert_array_equals(calls[2], ['style', null, 'font-size: 2rem', null]);
179+
assert_attribute_log_entry(calls[2], {name: 'style', oldValue: null, newValue: 'font-size: 2rem', namespace: null});
188180
}, 'attributedChangedCallback must be enqueued for attributes specified in a non-Array iterable observedAttributes');
189181

182+
test(function () {
183+
var calls = [];
184+
class CustomElement extends HTMLElement { }
185+
CustomElement.prototype.attributeChangedCallback = function (...args) {
186+
calls.push(create_attribute_changed_callback_log(this, ...args));
187+
}
188+
CustomElement.observedAttributes = ['style'];
189+
customElements.define('element-with-style-attribute-observation', CustomElement);
190+
191+
var instance = document.createElement('element-with-style-attribute-observation');
192+
assert_equals(calls.length, 0);
193+
194+
instance.style.fontSize = '10px';
195+
assert_equals(calls.length, 1);
196+
assert_attribute_log_entry(calls[0], {name: 'style', oldValue: null, newValue: 'font-size: 10px;', namespace: null});
197+
198+
instance.style.fontSize = '20px';
199+
assert_equals(calls.length, 2);
200+
assert_attribute_log_entry(calls[1], {name: 'style', oldValue: 'font-size: 10px;', newValue: 'font-size: 20px;', namespace: null});
201+
202+
}, 'attributedChangedCallback must be enqueued for style attribute change by mutating inline style declaration');
203+
204+
test(function () {
205+
var calls = [];
206+
class CustomElement extends HTMLElement { }
207+
CustomElement.prototype.attributeChangedCallback = function (...args) {
208+
calls.push(create_attribute_changed_callback_log(this, ...args));
209+
}
210+
CustomElement.observedAttributes = ['title'];
211+
customElements.define('element-with-no-style-attribute-observation', CustomElement);
212+
213+
var instance = document.createElement('element-with-no-style-attribute-observation');
214+
assert_equals(calls.length, 0);
215+
instance.style.fontSize = '10px';
216+
assert_equals(calls.length, 0);
217+
instance.title = 'hello';
218+
assert_attribute_log_entry(calls[0], {name: 'title', oldValue: null, newValue: 'hello', namespace: null});
219+
}, 'attributedChangedCallback must not be enqueued when mutating inline style declaration if the style attribute is not observed');
220+
190221
</script>
191222
</body>
192223
</html>

0 commit comments

Comments
 (0)