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
|
<!DOCTYPE html>
<html>
<head>
<title>Custom Elements: HTML parser must use the owner document's custom element registry</title>
<meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org">
<meta name="assert" content="HTML parser must use the owner document's custom element registry">
<link rel="help" href="https://html.spec.whatwg.org/#create-an-element-for-the-token">
<link rel="help" href="https://dom.spec.whatwg.org/#concept-create-element">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../resources/custom-elements-helpers.js"></script>
</head>
<body>
<div id="log"></div>
<script>
class MyCustomElement extends HTMLElement { };
customElements.define('my-custom-element', MyCustomElement);
document.write('<template><my-custom-element></my-custom-element></template>');
test(function () {
var template = document.querySelector('template');
var instance = template.content.firstChild;
assert_true(instance instanceof HTMLElement,
'A custom element inside a template element must be an instance of HTMLElement');
assert_false(instance instanceof MyCustomElement,
'A custom element must not be instantiated inside a template element using the registry of the template element\'s owner document');
assert_equals(instance.ownerDocument, template.content.ownerDocument,
'Custom elements inside a template must use the appropriate template contents owner document as the owner document');
}, 'HTML parser must not instantiate custom elements inside template elements');
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
iframe.contentDocument.body.innerHTML = '<my-custom-element></my-custom-element>';
test(function () {
var instance = iframe.contentDocument.querySelector('my-custom-element');
assert_true(instance instanceof iframe.contentWindow.HTMLElement);
assert_false(instance instanceof MyCustomElement);
}, 'HTML parser must not use the registry of the owner element\'s document inside an iframe');
class ElementInIFrame extends iframe.contentWindow.HTMLElement { };
iframe.contentWindow.customElements.define('element-in-iframe', ElementInIFrame);
iframe.contentDocument.body.innerHTML = '<element-in-iframe></element-in-iframe>';
test(function () {
var instance = iframe.contentDocument.querySelector('element-in-iframe');
assert_true(instance instanceof iframe.contentWindow.HTMLElement, 'A custom element inside an iframe must be an instance of HTMLElement');
assert_true(instance instanceof ElementInIFrame,
'A custom element must be instantiated inside an iframe using the registry of the content document');
assert_equals(instance.ownerDocument, iframe.contentDocument,
'The owner document of custom elements inside an iframe must be the content document of the iframe');
}, 'HTML parser must use the registry of the content document inside an iframe');
document.write('<element-in-iframe></element-in-iframe>');
test(function () {
var instance = document.querySelector('element-in-iframe');
assert_true(instance instanceof HTMLElement);
assert_false(instance instanceof ElementInIFrame);
}, 'HTML parser must not instantiate a custom element defined inside an frame in frame element\'s owner document');
document.body.removeChild(iframe);
test(function () {
var windowlessDocument = (new DOMParser()).parseFromString('<my-custom-element></my-custom-element>', "text/html");
var instance = windowlessDocument.querySelector('my-custom-element');
assert_true(instance instanceof HTMLElement);
assert_false(instance instanceof MyCustomElement);
}, 'HTML parser must use the registry of window.document in a document created by DOMParser');
test(function () {
var windowlessDocument = document.implementation.createDocument ('http://www.w3.org/1999/xhtml', 'html', null);
windowlessDocument.documentElement.innerHTML = '<my-custom-element></my-custom-element>';
var instance = windowlessDocument.querySelector('my-custom-element');
assert_true(instance instanceof HTMLElement);
assert_false(instance instanceof MyCustomElement);
}, 'HTML parser must use the registry of window.document in a document created by document.implementation.createXHTMLDocument()');
test(function () {
var windowlessDocument = new Document;
windowlessDocument.appendChild(windowlessDocument.createElement('html'));
windowlessDocument.documentElement.innerHTML = '<my-custom-element></my-custom-element>';
var instance = windowlessDocument.querySelector('my-custom-element');
assert_true(instance instanceof Element);
assert_false(instance instanceof MyCustomElement);
}, 'HTML parser must use the registry of window.document in a document created by new Document');
promise_test(function () {
return new Promise(function (resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open('GET', '../resources/my-custom-element-html-document.html');
xhr.overrideMimeType('text/xml');
xhr.onload = function () { resolve(xhr.responseXML); }
xhr.onerror = function () { reject('Failed to fetch the document'); }
xhr.send();
}).then(function (doc) {
var instance = doc.querySelector('my-custom-element');
assert_true(instance instanceof Element);
assert_false(instance instanceof MyCustomElement);
doc.documentElement.innerHTML = '<my-custom-element></my-custom-element>';
var instance2 = doc.querySelector('my-custom-element');
assert_true(instance2 instanceof Element);
assert_false(instance2 instanceof MyCustomElement);
});
}, 'HTML parser must use the registry of window.document in a document created by XMLHttpRequest');
test_with_window(function (contentWindow, contentDocument) {
const element = define_custom_element_in_window(contentWindow, 'my-custom-element', []);
// document-open-steps spec doesn't do anything with the custom element
// registry, so it should just stick around.
contentDocument.write('<my-custom-element></my-custom-element>');
var instance = contentDocument.querySelector('my-custom-element');
assert_true(instance instanceof contentWindow.HTMLElement);
assert_true(instance instanceof element.class);
}, 'document.write() must not instantiate a custom element without a defined insertion point');
test_with_window(function (contentWindow, contentDocument) {
const element = define_custom_element_in_window(contentWindow, 'my-custom-element', []);
// document-open-steps spec doesn't do anything with the custom element
// registry, so it should just stick around.
contentDocument.writeln('<my-custom-element></my-custom-element>');
var instance = contentDocument.querySelector('my-custom-element');
assert_true(instance instanceof contentWindow.HTMLElement);
assert_true(instance instanceof element.class);
}, 'document.writeln() must not instantiate a custom element without a defined insertion point');
</script>
</body>
</html>
|
