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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
|
<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=1460815
-->
<head>
<title>Test for customElements.setElementCreationCallback</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1460815">Bug 1460815</a>
<div>
</div>
<script>
let registry = SpecialPowers.wrap(customElements);
function simpleTest() {
let callbackCalled = false;
class XObjElement extends HTMLElement {};
registry.setElementCreationCallback("x-html-obj-elem", (type) => {
if (callbackCalled) {
ok(false, "Callback should not be invoked more than once.");
}
callbackCalled = true;
is(type, "x-html-obj-elem", "Type is passed to the callback.");
customElements.define("x-html-obj-elem", XObjElement);
});
ok(!callbackCalled, "Callback should not be called.");
let el = document.createElement("x-html-obj-elem");
ok(callbackCalled, "Callback should be called.");
is(Object.getPrototypeOf(el), XObjElement.prototype, "Created element should have the prototype of the custom type.");
}
function multipleDefinitionTest() {
let callbackCalled = false;
class XObjElement1 extends HTMLElement {};
class XObjElement2 extends HTMLElement {};
let callback = (type) => {
if (callbackCalled) {
ok(false, "Callback should not be invoked more than once.");
}
callbackCalled = true;
is(type, "x-html-obj-elem1", "Type is passed to the callback.");
customElements.define("x-html-obj-elem1", XObjElement1);
customElements.define("x-html-obj-elem2", XObjElement2);
};
registry.setElementCreationCallback("x-html-obj-elem1", callback);
registry.setElementCreationCallback("x-html-obj-elem2", callback);
ok(!callbackCalled, "Callback should not be called.");
let el1 = document.createElement("x-html-obj-elem1");
ok(callbackCalled, "Callback should be called.");
is(Object.getPrototypeOf(el1), XObjElement1.prototype, "Created element should have the prototype of the custom type.");
let el2 = document.createElement("x-html-obj-elem2");
is(Object.getPrototypeOf(el2), XObjElement2.prototype, "Created element should have the prototype of the custom type.");
}
function throwIfDefined() {
let callbackCalled = false;
class XObjElement3 extends HTMLElement {};
customElements.define("x-html-obj-elem3", XObjElement3);
try {
registry.setElementCreationCallback(
"x-html-obj-elem3", () => callbackCalled = true);
} catch (e) {
ok(true, "Set a callback on defined type should throw.");
}
ok(!callbackCalled, "Callback should not be called.");
}
function throwIfSetTwice() {
let callbackCalled = false;
registry.setElementCreationCallback(
"x-html-obj-elem4", () => callbackCalled = true);
try {
registry.setElementCreationCallback(
"x-html-obj-elem4", () => callbackCalled = true);
} catch (e) {
ok(true, "Callack shouldn't be set twice on the same type.");
}
ok(!callbackCalled, "Callback should not be called.");
}
function simpleExtendedTest() {
let callbackCalled = false;
class ExtendButton extends HTMLButtonElement {};
registry.setElementCreationCallback("x-extended-button", (type) => {
if (callbackCalled) {
ok(false, "Callback should not be invoked more than once.");
}
callbackCalled = true;
customElements.define("x-extended-button", ExtendButton, { extends: "button" });
is(type, "x-extended-button", "Type is passed to the callback.");
});
ok(!callbackCalled, "Callback should not be called.");
let el = document.createElement("button", { is: "x-extended-button"});
ok(callbackCalled, "Callback should be called.");
is(Object.getPrototypeOf(el), ExtendButton.prototype, "Created element should have the prototype of the extended type.");
is(el.getAttribute("is"), null, "The |is| attribute of the created element should not be the extended type.");
}
function simpleInnerHTMLTest() {
let callbackCalled = false;
class XObjElement4 extends HTMLElement {};
registry.setElementCreationCallback("x-html-obj-elem5", (type) => {
if (callbackCalled) {
ok(false, "Callback should not be invoked more than once.");
}
callbackCalled = true;
is(type, "x-html-obj-elem5", "Type is passed to the callback.");
customElements.define("x-html-obj-elem5", XObjElement4);
});
ok(!callbackCalled, "Callback should not be called.");
let p = document.createElement("p");
p.innerHTML = "<x-html-obj-elem5></x-html-obj-elem5>";
let el = p.firstChild;
ok(callbackCalled, "Callback should be called.");
is(Object.getPrototypeOf(el), XObjElement4.prototype, "Created element should have the prototype of the custom type.");
}
function twoElementInnerHTMLTest() {
let callbackCalled = false;
class XObjElement5 extends HTMLElement {};
registry.setElementCreationCallback("x-html-obj-elem6", (type) => {
if (callbackCalled) {
ok(false, "Callback should not be invoked more than once.");
}
callbackCalled = true;
is(type, "x-html-obj-elem6", "Type is passed to the callback.");
customElements.define("x-html-obj-elem6", XObjElement5);
});
ok(!callbackCalled, "Callback should not be called.");
let p = document.createElement("p");
p.innerHTML =
"<x-html-obj-elem6></x-html-obj-elem6><x-html-obj-elem6></x-html-obj-elem6>";
let el1 = p.firstChild;
let el2 = p.lastChild;
ok(callbackCalled, "Callback should be called.");
is(Object.getPrototypeOf(el1), XObjElement5.prototype, "Created element should have the prototype of the custom type.");
is(Object.getPrototypeOf(el2), XObjElement5.prototype, "Created element should have the prototype of the custom type.");
}
function startTest() {
simpleTest();
multipleDefinitionTest();
throwIfDefined();
throwIfSetTwice();
simpleExtendedTest();
simpleInnerHTMLTest();
twoElementInnerHTMLTest();
}
startTest();
</script>
</body>
</html>
|
