Move document.defineElement to customElements.define
[WebKit-https.git] / LayoutTests / fast / custom-elements / upgrading / upgrading-parser-created-element.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Custom Elements: Upgrading unresolved elements</title>
5 <meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org">
6 <meta name="assert" content="HTML parser must add an unresolved custom element to the upgrade candidates map">
7 <link rel="help" href="https://w3c.github.io/webcomponents/spec/custom/#upgrading">
8 <script src="../../../resources/testharness.js"></script>
9 <script src="../../../resources/testharnessreport.js"></script>
10 <link rel='stylesheet' href='../../../resources/testharness.css'>
11 </head>
12 <body>
13 <div id="log"></div>
14 <my-custom-element></my-custom-element>
15 <instantiates-itself-after-super></instantiates-itself-after-super>
16 <instantiates-itself-before-super></instantiates-itself-before-super>
17 <my-other-element id="instance"></my-other-element>
18 <my-other-element id="otherInstance"></my-other-element>
19 <script>
20
21 test(function () {
22     class MyCustomElement extends HTMLElement { }
23
24     var instance = document.querySelector('my-custom-element');
25     assert_true(instance instanceof HTMLElement);
26     assert_false(instance instanceof HTMLUnknownElement,
27         'an unresolved custom element should not be an instance of HTMLUnknownElement');
28     assert_false(instance instanceof MyCustomElement);
29
30     customElements.define('my-custom-element', MyCustomElement);
31
32     assert_true(instance instanceof HTMLElement);
33     assert_true(instance instanceof MyCustomElement,
34         'Calling customElements.define must upgrade existing custom elements');
35
36 }, 'Element.prototype.createElement must add an unresolved custom element to the upgrade candidates map');
37
38
39 test(function () {
40     class InstantiatesItselfAfterSuper extends HTMLElement {
41         constructor(doNotCreateItself) {
42             super();
43             if (!doNotCreateItself)
44                 new InstantiatesItselfAfterSuper(true);
45         }
46     }
47
48     assert_throws({'name': 'InvalidStateError'}, function () {
49         customElements.define('instantiates-itself-after-super', InstantiatesItselfAfterSuper);
50     });
51 }, 'HTMLElement constructor must throw an InvalidStateError when the top of the construction stack is marked AlreadyConstructed'
52     + ' due to a custom element constructor constructing itself after super() call');
53
54 test(function () {
55     class InstantiatesItselfBeforeSuper extends HTMLElement {
56         constructor(doNotCreateItself) {
57             if (!doNotCreateItself)
58                 new InstantiatesItselfBeforeSuper(true);
59             super();
60         }
61     }
62
63     assert_throws({'name': 'InvalidStateError'}, function () {
64         customElements.define('instantiates-itself-before-super', InstantiatesItselfBeforeSuper);
65     });
66 }, 'HTMLElement constructor must throw an InvalidStateError when the top of the construction stack is marked AlreadyConstructed'
67     + ' due to a custom element constructor constructing itself before super() call');
68
69 test(function () {
70     class MyOtherElement extends HTMLElement {
71         constructor() {
72             super();
73             if (this == instance)
74                 return otherInstance;
75         }
76     }
77     var instance = document.getElementById('instance');
78     var otherInstance = document.getElementById('otherInstance');
79
80     assert_false(instance instanceof MyOtherElement);
81     assert_false(otherInstance instanceof MyOtherElement);
82
83     assert_throws({'name': 'InvalidStateError'}, function () {
84         customElements.define('my-other-element', MyOtherElement);
85     });
86
87     assert_true(document.createElement('my-other-element') instanceof MyOtherElement,
88         'Upgrading of custom elements must happen after the definition was added to the registry.');
89 }, 'Upgrading a custom element must throw an InvalidStateError when the returned element is not SameValue as the upgraded element');
90
91 </script>
92 </body>
93 </html>