1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
<!DOCTYPE html>
<html>
<head>
<title>Custom Elements: Custom element reactions must be invoked before returning to author scripts</title>
<meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org">
<meta name="assert" content="Custom element reactions must be invoked before returning to author scripts">
<link rel="help" href="https://html.spec.whatwg.org/multipage/scripting.html#invoke-custom-element-reactions">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<div id="log"></div>
<script>
class MyCustomElement extends HTMLElement {
attributeChangedCallback(...args) {
this.handler(...args);
}
handler() { }
}
MyCustomElement.observedAttributes = ['data-title', 'title'];
customElements.define('my-custom-element', MyCustomElement);
test(function () {
var instance = document.createElement('my-custom-element');
var anotherInstance = document.createElement('my-custom-element');
var callbackOrder = [];
instance.handler = function () {
callbackOrder.push([this, 'begin']);
anotherInstance.setAttribute('data-title', 'baz');
callbackOrder.push([this, 'end']);
}
anotherInstance.handler = function () {
callbackOrder.push([this, 'begin']);
callbackOrder.push([this, 'end']);
}
instance.setAttribute('title', 'foo');
assert_equals(callbackOrder.length, 4);
assert_array_equals(callbackOrder[0], [instance, 'begin']);
assert_array_equals(callbackOrder[1], [anotherInstance, 'begin']);
assert_array_equals(callbackOrder[2], [anotherInstance, 'end']);
assert_array_equals(callbackOrder[3], [instance, 'end']);
}, 'setAttribute and removeAttribute must enqueue and invoke attributeChangedCallback');
test(function () {
var instance = document.createElement('my-custom-element');
var anotherInstance = document.createElement('my-custom-element');
var callbackOrder = [];
instance.handler = function () {
callbackOrder.push([this, 'begin']);
anotherInstance.toggleAttribute('data-title');
callbackOrder.push([this, 'end']);
}
anotherInstance.handler = function () {
callbackOrder.push([this, 'begin']);
callbackOrder.push([this, 'end']);
}
instance.toggleAttribute('title');
assert_equals(callbackOrder.length, 4);
assert_array_equals(callbackOrder[0], [instance, 'begin']);
assert_array_equals(callbackOrder[1], [anotherInstance, 'begin']);
assert_array_equals(callbackOrder[2], [anotherInstance, 'end']);
assert_array_equals(callbackOrder[3], [instance, 'end']);
}, 'toggleAttribute must enqueue and invoke attributeChangedCallback');
test(function () {
var shouldCloneAnotherInstance = false;
var anotherInstanceClone;
var log = [];
class SelfCloningElement extends HTMLElement {
constructor() {
super();
log.push([this, 'begin']);
if (shouldCloneAnotherInstance) {
shouldCloneAnotherInstance = false;
anotherInstanceClone = anotherInstance.cloneNode(false);
}
log.push([this, 'end']);
}
}
customElements.define('self-cloning-element', SelfCloningElement);
var instance = document.createElement('self-cloning-element');
var anotherInstance = document.createElement('self-cloning-element');
shouldCloneAnotherInstance = true;
assert_equals(log.length, 4);
var instanceClone = instance.cloneNode(false);
assert_equals(log.length, 8);
assert_array_equals(log[0], [instance, 'begin']);
assert_array_equals(log[1], [instance, 'end']);
assert_array_equals(log[2], [anotherInstance, 'begin']);
assert_array_equals(log[3], [anotherInstance, 'end']);
assert_array_equals(log[4], [instanceClone, 'begin']);
assert_array_equals(log[5], [anotherInstanceClone, 'begin']);
assert_array_equals(log[6], [anotherInstanceClone, 'end']);
assert_array_equals(log[7], [instanceClone, 'end']);
}, 'Calling Node.prototype.cloneNode(false) must push a new element queue to the processing stack');
</script>
</body>
</html>
|
