Move document.defineElement to customElements.define
[WebKit-https.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     customElements.define('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 customElements.define must throw TypeError');
25 }, 'HTMLElement constructor must throw TypeError when custom element is not well defined');
26
27 test(function () {
28     class CustomElementWithInferredTagName extends HTMLElement {};
29     customElements.define('inferred-name', CustomElementWithInferredTagName);
30
31     var instance = new CustomElementWithInferredTagName;
32     assert_true(instance instanceof Element, 'A custom element must inherit from Element');
33     assert_true(instance instanceof Node, 'A custom element must inherit from Node');
34     assert_equals(instance.localName, 'inferred-name');
35     assert_equals(instance.nodeName, 'INFERRED-NAME');
36     assert_equals(instance.namespaceURI, 'http://www.w3.org/1999/xhtml', 'A custom HTML element must use HTML namespace');
37
38     document.body.appendChild(instance);
39     assert_equals(document.body.lastChild, instance,
40         'document.body.appendChild must be able to insert a custom element');
41     assert_equals(document.querySelector('inferred-name'), instance,
42         'document.querySelector must be able to find a custom element by its tag name');
43
44 }, 'HTMLElement constructor must infer the tag name from the element interface');
45
46 test(function () {
47     class ConcreteCustomElement extends HTMLElement { };
48     class SubCustomElement extends ConcreteCustomElement { };
49     customElements.define('concrete-custom-element', ConcreteCustomElement);
50     customElements.define('sub-custom-element', SubCustomElement);
51
52     var instance = new ConcreteCustomElement();
53     assert_true(instance instanceof ConcreteCustomElement);
54     assert_false(instance instanceof SubCustomElement);
55     assert_equals(instance.localName, 'concrete-custom-element');
56     assert_equals(instance.nodeName, 'CONCRETE-CUSTOM-ELEMENT');
57
58     var instance = new SubCustomElement();
59     assert_true(instance instanceof ConcreteCustomElement);
60     assert_true(instance instanceof SubCustomElement);
61     assert_equals(instance.localName, 'sub-custom-element');
62     assert_equals(instance.nodeName, 'SUB-CUSTOM-ELEMENT');
63
64 }, 'HTMLElement constructor must allow subclassing a custom element');
65
66 test(function () {
67     class AbstractCustomElement extends HTMLElement { };
68     class ConcreteSubCustomElement extends AbstractCustomElement { };
69     customElements.define('concrete-sub-custom-element', ConcreteSubCustomElement);
70
71     var instance = new ConcreteSubCustomElement();
72     assert_true(instance instanceof AbstractCustomElement);
73     assert_true(instance instanceof ConcreteSubCustomElement);
74     assert_equals(instance.localName, 'concrete-sub-custom-element');
75     assert_equals(instance.nodeName, 'CONCRETE-SUB-CUSTOM-ELEMENT');
76
77 }, 'HTMLElement constructor must allow subclassing an user-defined subclass of HTMLElement');
78
79 </script>
80 </body>
81 </html>