Move document.defineElement to customElements.define
[WebKit-https.git] / LayoutTests / fast / custom-elements / Document-createElement.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.createElement should instantiate 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     class MyCustomElement extends HTMLElement {};
17
18     assert_true(document.createElement('my-custom-element') instanceof HTMLElement);
19     assert_false(document.createElement('my-custom-element') instanceof MyCustomElement);
20
21     customElements.define('my-custom-element', MyCustomElement);
22     var instance = document.createElement('my-custom-element');
23     assert_true(instance instanceof MyCustomElement);
24     assert_equals(instance.localName, 'my-custom-element');
25     assert_equals(instance.namespaceURI, 'http://www.w3.org/1999/xhtml', 'A custom element HTML must use HTML namespace');
26
27 }, 'document.createElement must create an instance of custom elements');
28
29 test(function () {
30     class ObjectCustomElement extends HTMLElement {
31         constructor()
32         {
33             return {foo: 'bar'};
34         }
35     };
36     customElements.define('object-custom-element', ObjectCustomElement);
37
38     var instance = new ObjectCustomElement;
39     assert_true(instance instanceof Object);
40     assert_equals(instance.foo, 'bar');
41
42     assert_equals(document.createElement('object-custom-element'), null);
43 }, 'document.createElement must return null when a custom element constructor returns an object that is not an instance of Node');
44
45 test(function () {
46     class TextCustomElement extends HTMLElement {
47         constructor()
48         {
49             return document.createTextNode('hello');
50         }
51     };
52     customElements.define('text-custom-element', TextCustomElement);
53     assert_true(new TextCustomElement instanceof Text);
54     assert_equals(document.createElement('object-custom-element'), null);
55 }, 'document.createElement must return null when a custom element constructor returns a Text node');
56
57 test(function () {
58     var createdElement = null;
59     class DivCustomElement extends HTMLElement {
60         constructor()
61         {
62             super();
63             createdElement = document.createElement('div');
64             return createdElement;
65         }
66     };
67     customElements.define('div-custom-element', DivCustomElement);
68     assert_true(new DivCustomElement instanceof HTMLDivElement);
69
70     var instance = document.createElement('div-custom-element');
71     assert_true(instance instanceof HTMLDivElement);
72     assert_equals(instance, createdElement);
73 }, 'document.createElement must return an element returned by a custom element constructor');
74
75 test(function () {
76     var exceptionToThrow = {message: 'exception thrown by a custom constructor'};
77     class ThrowCustomElement extends HTMLElement {
78         constructor()
79         {
80             super();
81             if (exceptionToThrow)
82                 throw exceptionToThrow;
83         }
84     };
85     customElements.define('throw-custom-element', ThrowCustomElement);
86
87     assert_throws(null, function () { new ThrowCustomElement; });
88
89     try {
90         document.createElement('throw-custom-element');
91         assert(false, 'document.createElement must throw when a custom element constructor throws');
92     } catch (exception) {
93         assert_equals(exception, exceptionToThrow, 'document.createElement must throw the same exception custom element constructor throws');
94     }
95
96     exceptionToThrow = false;
97     var instance = document.createElement('throw-custom-element');
98     assert_true(instance instanceof ThrowCustomElement);
99     assert_equals(instance.localName, 'throw-custom-element');
100
101 }, 'document.createElement must re-throw an exception thrown by a custom element constructor');
102
103 </script>
104 </body>
105 </html>