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
|
<!DOCTYPE html>
<html>
<head>
<title>Changing IS attribute of the custom element must not affect this element's custom element type, after element is instantiated</title>
<meta name="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru">
<meta name="author" title="Aleksei Yu. Semenov" href="mailto:a.semenov@unipro.ru">
<meta name="assert" content="After a custom element is instantiated, changing the value of the IS attribute must not affect this element's custom element type">
<link rel="help" href="http://www.w3.org/TR/custom-elements/#instantiating-custom-elements">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../testcommon.js"></script>
</head>
<body>
<div id="log"></div>
<script>
test(function() {
var doc = newHTMLDocument();
var GeneratedConstructor = doc.registerElement('x-a');
var customElement = new GeneratedConstructor();
doc.registerElement('x-b');
customElement.setAttribute('is', 'x-b');
assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.prototype,
'Custom element type should be x-a');
}, 'Test custom element type, after assigning IS attribute value. ' +
'Element is created by constructor');
test(function() {
var doc = newHTMLDocument();
var GeneratedConstructor = doc.registerElement('x-c');
doc.registerElement('x-d');
doc.body.innerHTML = '<x-c id="x-c"></x-c>';
var customElement = doc.querySelector('#x-c');
customElement.setAttribute('is', 'x-d');
assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.prototype,
'Custom element type should be x-c');
}, 'Test custom element type, after assigning IS attribute value. ' +
'Element is created via innerHTML property');
test(function() {
var doc = newHTMLDocument();
doc.body.innerHTML = '<x-e id="x-e"></x-e>';
var customElement = doc.querySelector('#x-e');
customElement.setAttribute('is', 'x-f');
var GeneratedConstructor = doc.registerElement('x-e');
doc.registerElement('x-f');
assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.prototype,
'Custom element type should be x-e');
}, 'Test custom element type, after assigning IS attribute value to unresolved element. ' +
'Element is created via innerHTML property');
testInIFrame('../resources/x-element.html', function(doc) {
var GeneratedConstructor = doc.registerElement('x-element');
doc.registerElement('y-element');
var customElement = doc.querySelector('#x-element');
customElement.setAttribute('is', 'y-element');
assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.prototype,
'Custom element type should be x-element');
}, 'Test custom element type, after assigning IS attribute value. ' +
'Element is defined in loaded HTML document');
testInIFrame('../resources/x-element.html', function(doc) {
var customElement = doc.querySelector('#x-element');
customElement.setAttribute('is', 'y-element');
var GeneratedConstructor = doc.registerElement('x-element');
doc.registerElement('y-element');
assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.prototype,
'Custom element type should be x-element');
}, 'Test custom element type, after assigning IS attribute value to unresolved element. ' +
'Element is defined in loaded HTML document');
test(function() {
var doc = newHTMLDocument();
HTML5_ELEMENTS.forEach(function(tagName) {
if (HTML5_DOCUMENT_ELEMENTS.indexOf(tagName) !== -1) {
return;
}
var name = 'y-' + tagName;
var obj = doc.createElement(tagName);
var proto = Object.create(obj.constructor.prototype);
var GeneratedConstructor = doc.registerElement(name, {prototype: proto, extends: tagName});
if (HTML5_TABLE_ELEMENTS.indexOf(tagName) !== -1) {
doc.body.innerHTML =
'<table>' +
'<' + tagName + ' id="custom-element" is="' + name + '"></' + tagName + '>' +
'</table>';
} else {
doc.body.innerHTML =
'<' + tagName + ' id="custom-element" is="' + name + '"></' + tagName + '>';
}
var customElement = doc.querySelector('#custom-element');
assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.prototype,
'Custom element type should be '+ name);
var name2 = 'y-a-' + tagName;
doc.registerElement(name2);
customElement.setAttribute('is', name2);
assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.prototype,
'Custom element type should be ' + name);
});
}, 'Test custom element type after changing IS attribute value. ' +
'Element is HTML5 element with IS attribute referring to custom element type');
test(function() {
var doc = newHTMLDocument();
var localName = 'z-a';
var obj = doc.createElement('a');
var proto = Object.create(obj.constructor.prototype);
var GeneratedConstructor = doc.registerElement(localName, {prototype: proto, extends: 'a'});
doc.body.innerHTML = '<a id="custom-element" is="' + localName + '"></a>';
var customElement = doc.querySelector('#custom-element');
HTML5_ELEMENTS.forEach(function(tagName) {
var name = 'z-a-' + tagName;
var htmlElement = doc.createElement(tagName);
var htmlElementProto = Object.create(htmlElement.constructor.prototype);
doc.registerElement(name, {prototype: htmlElementProto, extends: tagName});
customElement.setAttribute('is', name);
assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.prototype,
'Custom element type should be ' + localName);
});
}, 'Test custom element type after changing IS attribute value several times. ' +
'Element is HTML5 element with IS attribute referring to custom element type');
test(function() {
var doc = newHTMLDocument();
var GeneratedConstructor = doc.registerElement('x-g');
doc.registerElement('x-h');
doc.body.innerHTML = '<x-g id="x-g" is="x-h"></x-g>';
var customElement = doc.querySelector('#x-g');
customElement.removeAttribute('is');
assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.prototype,
'Custom element type should be x-g');
}, 'Test custom element type, after removing IS attribute value. ' +
'Element is created via innerHTML property');
test(function() {
var doc = newHTMLDocument();
var obj = doc.createElement('a');
var proto = Object.create(obj.constructor.prototype);
var GeneratedConstructor = doc.registerElement('x-i', {prototype: proto, extends: 'a'});
doc.body.innerHTML = '<a id="x-i" is="x-i"></a>';
var customElement = doc.querySelector('#x-i');
customElement.removeAttribute('is');
assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.prototype,
'Custom element type should be x-i');
}, 'Test custom element type, after removing IS attribute value. ' +
'Element is HTML5 element with IS attribute referring to custom element type');
</script>
</body>
</html>
|
