Add document.defineCustomElement
[WebKit.git] / LayoutTests / fast / custom-elements / HTMLElement-constructor.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Custom Elements: HTMLElement must allow subclassing</title>
5 <meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org">
6 <meta name="assert" content="HTMLElement must allow subclassing">
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     class SomeDefinedElement extends HTMLElement {};
17     document.defineCustomElement('defined-element', SomeDefinedElement);
18     assert_throws({'name': 'TypeError'}, function () { new HTMLElement('defined-element'); });
19 }, 'HTMLElement constructor must throw a TypeError when there is no derived class');
20
21 test(function () {
22     class SomeCustomElement extends HTMLElement {};
23     assert_throws({'name': 'TypeError'}, function () { new SomeCustomElement; },
24         'Instantiating a custom element without calling defineCustomElement must throw TypeError');
25
26     class AnotherCustomElement extends HTMLElement {
27         constructor() { super('some-element'); }
28     };
29     document.defineCustomElement('another-element', AnotherCustomElement);
30     assert_throws({'name': 'TypeError'}, function () { new AnotherCustomElement; },
31         'Calling HTMLElement constructor with a mismatching tag name throw TypeError');
32
33     class YetAnotherCustomElement extends HTMLElement {
34         constructor() { super(1); }
35     };
36     document.defineCustomElement('yet-another-element', YetAnotherCustomElement);
37     assert_throws({'name': 'TypeError'}, function () { new YetAnotherCustomElement; },
38         'Calling HTMLElement constructor with a bad tag name throw TypeError');
39
40 }, 'HTMLElement constructor must throw TypeError when custom element is not well defined');
41
42 test(function () {
43     class CustomElementWithInferredTagName extends HTMLElement {};
44     document.defineCustomElement('inferred-name', CustomElementWithInferredTagName);
45
46     var instance = new CustomElementWithInferredTagName;
47     assert_true(instance instanceof Element, 'A custom element must inherit from Element');
48     assert_true(instance instanceof Node, 'A custom element must inherit from Node');
49     assert_equals(instance.localName, 'inferred-name');
50     assert_equals(instance.nodeName, 'INFERRED-NAME');
51     assert_equals(instance.namespaceURI, 'http://www.w3.org/1999/xhtml', 'A custom HTML element must use HTML namespace');
52
53     document.body.appendChild(instance);
54     assert_equals(document.body.lastChild, instance,
55         'document.body.appendChild must be able to insert a custom element');
56     assert_equals(document.querySelector('inferred-name'), instance,
57         'document.querySelector must be able to find a custom element by its tag name');
58
59 }, 'HTMLElement constructor must infer the tag name from the element interface');
60
61 test(function () {
62     class ElementWithMultipleTagNames extends HTMLElement { };
63     document.defineCustomElement('custom-element-1', ElementWithMultipleTagNames);
64     document.defineCustomElement('custom-element-2', ElementWithMultipleTagNames);
65
66     var instance1 = new ElementWithMultipleTagNames('custom-element-1');
67     assert_true(instance1 instanceof ElementWithMultipleTagNames);
68     assert_equals(instance1.localName, 'custom-element-1');
69     assert_equals(instance1.nodeName, 'CUSTOM-ELEMENT-1');
70
71     var instance2 = new ElementWithMultipleTagNames('custom-element-2');
72     assert_true(instance2 instanceof ElementWithMultipleTagNames);
73     assert_equals(instance2.localName, 'custom-element-2');
74     assert_equals(instance2.nodeName, 'CUSTOM-ELEMENT-2');
75
76     assert_throws({'name': 'TypeError'}, function () { new ElementWithMultipleTagNames; },
77         'Instantiating an element interface associated with multiple tag names without specifying the tag name must throw TypeError');
78
79 }, 'HTMLElement constructor must allow associating an element interface with multiple tag names');
80
81 test(function () {
82     class ConcreteCustomElement extends HTMLElement { };
83     class SubCustomElement extends ConcreteCustomElement { };
84     document.defineCustomElement('concrete-custom-element', ConcreteCustomElement);
85     document.defineCustomElement('sub-custom-element', SubCustomElement);
86
87     var instance = new SubCustomElement();
88     assert_true(instance instanceof SubCustomElement);
89     assert_equals(instance.localName, 'sub-custom-element');
90     assert_equals(instance.nodeName, 'SUB-CUSTOM-ELEMENT');
91
92 }, 'HTMLElement constructor must allow subclassing a custom element');
93
94 test(function () {
95     class AbstractCustomElement extends HTMLElement { };
96     class ConcreteSubCustomElement extends AbstractCustomElement { };
97     document.defineCustomElement('concrete-sub-custom-element', ConcreteSubCustomElement);
98
99     var instance = new ConcreteSubCustomElement();
100     assert_true(instance instanceof ConcreteSubCustomElement);
101     assert_equals(instance.localName, 'concrete-sub-custom-element');
102     assert_equals(instance.nodeName, 'CONCRETE-SUB-CUSTOM-ELEMENT');
103
104 }, 'HTMLElement constructor must allow subclassing an user-defined subclass of HTMLElement');
105
106 </script>
107 </body>
108 </html>