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
|
<!DOCTYPE html>
<html>
<head>
<title>Custom Elements: document.createElement should create a customized builtin element with synchronous custom elements flag set</title>
<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>
setup({allow_uncaught_exception:true});
function assert_reports(expected, testFunction, message) {
var uncaughtError = null;
window.onerror = function (message, url, lineNumber, columnNumber, error) { uncaughtError = error; return true; }
testFunction();
if (typeof(expected) == 'string')
assert_equals(uncaughtError, expected, message);
else if (expected && 'name' in expected)
assert_equals(uncaughtError.name, expected.name, message);
else
assert_equals(uncaughtError, expected, message);
window.onerror = null;
}
test(function () {
class AutonomousCustomElement extends HTMLElement {};
class IsCustomElement extends HTMLElement {};
customElements.define('autonomous-custom-element', AutonomousCustomElement);
customElements.define('is-custom-element', IsCustomElement);
var instance = document.createElement('autonomous-custom-element', { is: 'is-custom-element'});
assert_true(instance instanceof AutonomousCustomElement);
assert_equals(instance.localName, 'autonomous-custom-element');
assert_equals(instance.namespaceURI, 'http://www.w3.org/1999/xhtml', 'A custom element HTML must use HTML namespace');
var instance2 = document.createElement('undefined-element', { is: 'is-custom-element'});
assert_false(instance2.matches(':defined'));
class DefinedLater extends HTMLElement {}
customElements.define('undefined-element', DefinedLater);
document.body.appendChild(instance2);
assert_true(instance2 instanceof DefinedLater);
}, 'document.createElement must create an instance of autonomous custom elements when it has is attribute');
test(() => {
class SuperP extends HTMLParagraphElement {}
customElements.define("super-p", SuperP, { extends: "p" });
const superP = document.createElement("p", { is: "super-p" });
assert_true(superP instanceof HTMLParagraphElement);
assert_true(superP instanceof SuperP);
assert_equals(superP.localName, "p");
const notSuperP = document.createElement("p", "super-p");
assert_true(notSuperP instanceof HTMLParagraphElement);
assert_false(notSuperP instanceof SuperP);
assert_equals(notSuperP.localName, "p");
}, "document.createElement()'s second argument is to be ignored when it's a string");
test(function () {
var exceptionToThrow = {name: 'exception thrown by a custom constructor'};
class ThrowCustomBuiltinElement extends HTMLDivElement {
constructor()
{
super();
if (exceptionToThrow)
throw exceptionToThrow;
}
};
customElements.define('throw-custom-builtin-element', ThrowCustomBuiltinElement, { extends: 'div' });
assert_throws_exactly(exceptionToThrow, function () { new ThrowCustomBuiltinElement; });
var instance;
assert_reports(exceptionToThrow, function () { instance = document.createElement('div', { is: 'throw-custom-builtin-element' }); });
assert_equals(instance.localName, 'div');
assert_true(instance instanceof HTMLDivElement);
exceptionToThrow = false;
var instance = document.createElement('div', { is: 'throw-custom-builtin-element' });
assert_true(instance instanceof ThrowCustomBuiltinElement);
assert_equals(instance.localName, 'div');
}, 'document.createElement must report an exception thrown by a custom built-in element constructor');
test(() => {
class MyElement extends HTMLDivElement {}
// createElement with unknown 'is' should not throw.
// https://github.com/w3c/webcomponents/issues/608
let div = document.createElement('div', { is: 'my-div' });
assert_false(div instanceof MyElement);
assert_false(div.hasAttribute('is'));
customElements.define('my-div', MyElement, { extends: 'div' });
document.body.appendChild(div);
assert_true(div instanceof MyElement, 'Undefined element is upgraded on connecting to a document');
}, 'document.createElement with unknown "is" value should create "undefined" state element');
</script>
</body>
</html>
|
