Move document.defineElement to customElements.define
[WebKit-https.git] / LayoutTests / fast / custom-elements / Document-defineElement.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Custom Elements: Extensions to Document interface</title>
5 <meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org">
6 <meta name="assert" content="customElements.define should define a custom element">
7 <script src="../../resources/testharness.js"></script>
8 <script src="../../resources/testharnessreport.js"></script>
9 <link rel='stylesheet' href='../../resources/testharness.css'>
10 </head>
11 <body>
12 <div id="log"></div>
13 <script>
14
15 test(function () {
16     assert_true('define' in CustomElementsRegistry.prototype, '"define" exists on CustomElementsRegistry.prototype');
17     assert_true('define' in customElements, '"define" exists on window.customElements');
18 }, 'Check the existence of CustomElementsRegistry.prototype.define on CustomElementsRegistry interface');
19
20 test(function () {
21     class MyCustomElement extends HTMLElement {};
22
23     assert_throws({'name': 'SyntaxError'}, function () { customElements.define(null, MyCustomElement); },
24         'customElements.define must throw a SyntaxError if the tag name is null');
25     assert_throws({'name': 'SyntaxError'}, function () { customElements.define('', MyCustomElement); },
26         'customElements.define must throw a SyntaxError if the tag name is empty');
27     assert_throws({'name': 'SyntaxError'}, function () { customElements.define('abc', MyCustomElement); },
28         'customElements.define must throw a SyntaxError if the tag name does not contain "-"');
29     assert_throws({'name': 'SyntaxError'}, function () { customElements.define('a-Bc', MyCustomElement); },
30         'customElements.define must throw a SyntaxError if the tag name contains an upper case letter');
31
32     var builtinTagNames = [
33         'annotation-xml',
34         'color-profile',
35         'font-face',
36         'font-face-src',
37         'font-face-uri',
38         'font-face-format',
39         'font-face-name',
40         'missing-glyph'
41     ];
42
43     for (var tagName of builtinTagNames) {
44         assert_throws({'name': 'SyntaxError'}, function () { customElements.define(tagName, MyCustomElement); },
45             'customElements.define must throw a SyntaxError if the tag name is "' + tagName + '"');
46     }
47
48 }, 'customElements.define should throw with an invalid name');
49
50 test(function () {
51     class SomeCustomElement extends HTMLElement {};
52     class OtherCustomElement extends HTMLElement {};
53
54     customElements.define('some-custom-element', SomeCustomElement);
55     assert_throws({'name': 'NotSupportedError'}, function () { customElements.define('some-custom-element', OtherCustomElement); },
56         'customElements.define must throw a NotSupportedError if the specified tag name is already used');
57
58 }, 'customElements.define should throw when there is already a custom element of the same name');
59
60 test(function () {
61     class AnotherCustomElement extends HTMLElement {};
62
63     customElements.define('another-custom-element', AnotherCustomElement);
64     assert_throws({'name': 'NotSupportedError'}, function () { customElements.define('some-other-element', AnotherCustomElement); },
65         'customElements.define must throw a NotSupportedError if the specified class already defines an element');
66
67 }, 'customElements.define should throw when there is already a custom element with the same class');
68
69 test(function () {
70     assert_throws({'name': 'TypeError'}, function () { customElements.define('invalid-element', 1); },
71         'customElements.define must throw a TypeError when the element interface is a number');
72     assert_throws({'name': 'TypeError'}, function () { customElements.define('invalid-element', '123'); },
73         'customElements.define must throw a TypeError when the element interface is a string');
74     assert_throws({'name': 'TypeError'}, function () { customElements.define('invalid-element', {}); },
75         'customElements.define must throw a TypeError when the element interface is an object');
76     assert_throws({'name': 'TypeError'}, function () { customElements.define('invalid-element', []); },
77         'customElements.define must throw a TypeError when the element interface is an array');
78 }, 'customElements.define should throw when the element interface is not a constructor');
79
80 test(function () {
81     class MyCustomElement extends HTMLElement {};
82     customElements.define('my-custom-element', MyCustomElement);
83
84     var instance = new MyCustomElement;
85     assert_true(instance instanceof MyCustomElement,
86         'An instance of a custom HTML element be an instance of the associated interface');
87
88     assert_true(instance instanceof HTMLElement,
89         'An instance of a custom HTML element must inherit from HTMLElement');
90
91     assert_equals(instance.localName, 'my-custom-element',
92         'An instance of a custom element must use the associated tag name');
93
94     assert_equals(instance.namespaceURI, 'http://www.w3.org/1999/xhtml',
95         'A custom element HTML must use HTML namespace');
96
97 }, 'customElements.define should define an instantiatable custom element');
98
99 </script>
100 </body>
101 </html>