Add document.defineCustomElement
[WebKit.git] / LayoutTests / fast / custom-elements / Document-defineCustomElement.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="document.defineCustomElement 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('defineCustomElement' in Document.prototype, '"defineCustomElement" exists on Document.prototype');
17     assert_true('defineCustomElement' in document, '"defineCustomElement" exists on document');
18 }, 'Check the existence of defineCustomElement on Document interface');
19
20 test(function () {
21     class MyCustomElement extends HTMLElement {};
22
23     assert_throws({'name': 'SyntaxError'}, function () { document.defineCustomElement(null, MyCustomElement); },
24         'document.defineCustomElement must throw a SyntaxError if the tag name is null');
25     assert_throws({'name': 'SyntaxError'}, function () { document.defineCustomElement('', MyCustomElement); },
26         'document.defineCustomElement must throw a SyntaxError if the tag name is empty');
27     assert_throws({'name': 'SyntaxError'}, function () { document.defineCustomElement('abc', MyCustomElement); },
28         'document.defineCustomElement must throw a SyntaxError if the tag name does not contain "-"');
29     assert_throws({'name': 'SyntaxError'}, function () { document.defineCustomElement('a-Bc', MyCustomElement); },
30         'document.defineCustomElement 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 () { document.defineCustomElement(tagName, MyCustomElement); },
45             'document.defineCustomElement must throw a SyntaxError if the tag name is "' + tagName + '"');
46     }
47
48 }, 'document.defineCustomElement should throw with an invalid name');
49
50 test(function () {
51     class SomeCustomElement extends HTMLElement {};
52     class OtherCustomElement extends HTMLElement {};
53
54     document.defineCustomElement('some-custom-element', SomeCustomElement);
55     assert_throws({'name': 'NotSupportedError'}, function () { document.defineCustomElement('some-custom-element', OtherCustomElement); },
56         'document.defineCustomElement must throw a NotSupportedError if the specified tag name is already used');
57
58 }, 'document.defineCustomElement should throw with a duplicate name');
59
60 test(function () {
61     assert_throws({'name': 'TypeError'}, function () { document.defineCustomElement('invalid-element', 1); },
62         'document.defineCustomElement must throw a TypeError when the element interface is a number');
63     assert_throws({'name': 'TypeError'}, function () { document.defineCustomElement('invalid-element', '123'); },
64         'document.defineCustomElement must throw a TypeError when the element interface is a string');
65     assert_throws({'name': 'TypeError'}, function () { document.defineCustomElement('invalid-element', {}); },
66         'document.defineCustomElement must throw a TypeError when the element interface is an object');
67     assert_throws({'name': 'TypeError'}, function () { document.defineCustomElement('invalid-element', []); },
68         'document.defineCustomElement must throw a TypeError when the element interface is an array');
69 }, 'document.defineCustomElement should throw when the element interface is not a constructor');
70
71 test(function () {
72     class MyCustomElement extends HTMLElement {};
73     document.defineCustomElement('my-custom-element', MyCustomElement);
74
75     var instance = new MyCustomElement;
76     assert_true(instance instanceof MyCustomElement,
77         'An instance of a custom HTML element be an instance of the associated interface');
78
79     assert_true(instance instanceof HTMLElement,
80         'An instance of a custom HTML element must inherit from HTMLElement');
81
82     assert_equals(instance.localName, 'my-custom-element',
83         'An instance of a custom element must use the associated tag name');
84
85     assert_equals(instance.namespaceURI, 'http://www.w3.org/1999/xhtml',
86         'A custom element HTML must use HTML namespace');
87
88 }, 'document.defineCustomElement should define an instantiatable custom element');
89
90 </script>
91 </body>
92 </html>