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
114
115
116
117
118
119
120
121
122
123
|
<!DOCTYPE html>
<title>Custom elements: performing a microtask checkpoint after construction</title>
<meta name="author" title="Domenic Denicola" href="mailto:d@domenic.me">
<link rel="help" href="https://html.spec.whatwg.org/multipage/scripting.html#concept-upgrade-an-element">
<link rel="help" href="https://dom.spec.whatwg.org/#concept-create-element">
<link rel="help" href="https://github.com/whatwg/html/issues/2381">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="log"></div>
<x-upgrade></x-upgrade>
<script>
"use strict";
setup({ allow_uncaught_exception: true });
window.doMicrotasks = (callback1, callback2 = callback1) => {
Promise.resolve().then(callback1);
const mo = new MutationObserver(callback2);
const node = document.createTextNode("");
mo.observe(node, { characterData: true });
node.data = "x";
};
window.logMicrotasks = events => {
window.doMicrotasks(() => events.push("promise microtask"),
() => events.push("MutationObserver microtask"));
};
window.flushAsyncEvents = () => {
return new Promise(resolve => step_timeout(resolve, 0));
};
window.x0Events = [];
customElements.define("x-0", class extends HTMLElement {
constructor() {
super();
logMicrotasks(window.x0Events);
}
});
</script>
<x-0></x-0>
<script>
"use strict";
test(() => {
assert_array_equals(window.x0Events, ["promise microtask", "MutationObserver microtask"]);
}, "Microtasks evaluate immediately when the stack is empty inside the parser");
customElements.define("x-bad", class extends HTMLElement {
constructor() {
super();
doMicrotasks(() => this.setAttribute("attribute", "value"));
}
});
</script>
<x-bad></x-bad>
<script>
"use strict";
test(() => {
const xBad = document.querySelector("x-bad");
assert_false(xBad.hasAttribute("attribute"), "The attribute must not be present");
assert_true(xBad instanceof HTMLUnknownElement, "The element must be a HTMLUnknownElement");
}, "Microtasks evaluate immediately when the stack is empty inside the parser, causing the " +
"checks on no attributes to fail")
promise_test(() => {
const events = [];
customElements.define("x-1", class extends HTMLElement {
constructor() {
super();
logMicrotasks(events);
}
});
document.createElement("x-1");
events.push("after");
return flushAsyncEvents().then(() => {
assert_array_equals(events, ["after", "promise microtask", "MutationObserver microtask"]);
});
}, "Microtasks evaluate afterward when the stack is not empty using createElement()");
promise_test(() => {
const events = [];
class X2 extends HTMLElement {
constructor() {
super();
logMicrotasks(events);
}
}
customElements.define("x-2", X2);
new X2();
events.push("after");
return flushAsyncEvents().then(() => {
assert_array_equals(events, ["after", "promise microtask", "MutationObserver microtask"]);
});
}, "Microtasks evaluate afterward when the stack is not empty using the constructor");
promise_test(() => {
const events = [];
customElements.define("x-upgrade", class extends HTMLElement {
constructor() {
super();
logMicrotasks(events);
}
});
events.push("after");
return flushAsyncEvents().then(() => {
assert_array_equals(events, ["after", "promise microtask", "MutationObserver microtask"]);
});
}, "Microtasks evaluate afterward when the stack is not empty due to upgrades");
</script>
|
