OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <title>Custom Elements: defineElement</title> | 2 <title>Custom Elements: defineElement</title> |
3 <link rel="help" href="https://html.spec.whatwg.org/multipage/scripting.html#cus
tomelementsregistry"> | 3 <link rel="help" href="https://html.spec.whatwg.org/multipage/scripting.html#cus
tomelementsregistry"> |
4 <meta name="author" title="Dominic Cooney" href="mailto:dominicc@chromium.org"> | 4 <meta name="author" title="Dominic Cooney" href="mailto:dominicc@chromium.org"> |
5 <script src="../../resources/testharness.js"></script> | 5 <script src="../../resources/testharness.js"></script> |
6 <script src="../../resources/testharness-helpers.js"></script> | 6 <script src="../../resources/testharness-helpers.js"></script> |
7 <script src="../../resources/testharnessreport.js"></script> | 7 <script src="../../resources/testharnessreport.js"></script> |
8 <script src="resources/custom-elements-helpers.js"></script> | 8 <script src="resources/custom-elements-helpers.js"></script> |
9 <body> | 9 <body> |
10 <script> | 10 <script> |
(...skipping 69 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
80 w.customElements.define('a-a', F); | 80 w.customElements.define('a-a', F); |
81 }, 'defining an element with a constructor with a prototype that is not an ' + | 81 }, 'defining an element with a constructor with a prototype that is not an ' + |
82 'object should throw a TypeError'); | 82 'object should throw a TypeError'); |
83 }, 'Retrieved prototype is a non-object'); | 83 }, 'Retrieved prototype is a non-object'); |
84 | 84 |
85 test_with_window((w) => { | 85 test_with_window((w) => { |
86 assert_throws(TypeError.prototype, () => { | 86 assert_throws(TypeError.prototype, () => { |
87 let not_a_constructor = () => {}; | 87 let not_a_constructor = () => {}; |
88 let invalid_name = 'annotation-xml'; | 88 let invalid_name = 'annotation-xml'; |
89 w.customElements.define(invalid_name, not_a_constructor); | 89 w.customElements.define(invalid_name, not_a_constructor); |
90 }, 'Defining an element with an invalid name and invalid constructor ' + | 90 }, 'defining an element with an invalid name and invalid constructor ' + |
91 'should throw a TypeError for the constructor and not a SyntaxError'); | 91 'should throw a TypeError for the constructor and not a SyntaxError'); |
92 | 92 |
93 class C extends w.HTMLElement {} | 93 class C extends w.HTMLElement {} |
94 w.customElements.define('a-a', C); | 94 w.customElements.define('a-a', C); |
95 assert_throws('SYNTAX_ERR', () => { | 95 assert_throws('SYNTAX_ERR', () => { |
96 let invalid_name = 'annotation-xml'; | 96 let invalid_name = 'annotation-xml'; |
97 let reused_constructor = C; | 97 let reused_constructor = C; |
98 w.customElements.define(invalid_name, reused_constructor); | 98 w.customElements.define(invalid_name, reused_constructor); |
99 }, 'Defining an element with an invalid name and a reused constructor ' + | 99 }, 'defining an element with an invalid name and a reused constructor ' + |
100 'should throw a SyntaxError for the name and not a NotSupportedError'); | 100 'should throw a SyntaxError for the name and not a NotSupportedError'); |
101 }, 'Order of checks'); | 101 }, 'Order of checks'); |
| 102 |
| 103 test_with_window((w) => { |
| 104 let doc = w.document; |
| 105 doc.body.innerHTML = ` |
| 106 <a-a id="a"> |
| 107 <p> |
| 108 <a-a id="b"></a-a> |
| 109 <a-a id="c"></a-a> |
| 110 </p> |
| 111 <a-a id="d"></a-a> |
| 112 </a-a>`; |
| 113 let invocations = []; |
| 114 class C extends w.HTMLElement { |
| 115 constructor() { |
| 116 super(); |
| 117 console.log(this.getAttribute('id')); |
| 118 invocations.push(this); |
| 119 } |
| 120 } |
| 121 w.customElements.define('a-a', C); |
| 122 assert_array_equals(['a', 'b', 'c', 'd'], invocations.map((e) => e.id), |
| 123 'four elements should have been upgraded in doc order'); |
| 124 }, 'Upgrade: existing elements'); |
| 125 |
| 126 test_with_window((w) => { |
| 127 let doc = w.document; |
| 128 let a = doc.createElement('a-a'); |
| 129 doc.body.appendChild(a); |
| 130 assert_equals(w.HTMLElement.prototype, Object.getPrototypeOf(a), |
| 131 'the undefined autonomous element should be a HTMLElement'); |
| 132 let invocations = []; |
| 133 class C extends w.HTMLElement { |
| 134 constructor() { |
| 135 super(); |
| 136 assert_equals(C.prototype, Object.getPrototypeOf(a), |
| 137 'the HTMLElement constructor should set the prototype ' + |
| 138 'to the defined prototype'); |
| 139 invocations.push(this); |
| 140 } |
| 141 } |
| 142 w.customElements.define('a-a', C); |
| 143 assert_array_equals([a], invocations, |
| 144 'the constructor should have been invoked for the in-' + |
| 145 'document element'); |
| 146 }, 'Upgrade: sets prototype of existing elements'); |
| 147 |
| 148 test_with_window((w) => { |
| 149 let doc = w.document; |
| 150 var shadow = doc.body.attachShadow({mode: 'open'}); |
| 151 let a = doc.createElement('a-a'); |
| 152 shadow.appendChild(a); |
| 153 let invocations = []; |
| 154 class C extends w.HTMLElement { |
| 155 constructor() { |
| 156 super(); |
| 157 invocations.push(this); |
| 158 } |
| 159 } |
| 160 w.customElements.define('a-a', C); |
| 161 assert_array_equals([a], invocations, |
| 162 'the constructor should have been invoked once for the ' + |
| 163 'elements in the shadow tree'); |
| 164 }, 'Upgrade: shadow tree'); |
102 </script> | 165 </script> |
OLD | NEW |