OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <title>Custom Elements: document.createElement should create an element with syn
chronous custom elements flag set</title> |
| 5 <meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"> |
| 6 <meta name="assert" content="document.createElement should create an element wit
h synchronous custom elements flag set"> |
| 7 <link rel="help" content="https://dom.spec.whatwg.org/#dom-document-createelemen
t"> |
| 8 <link rel="help" content="https://dom.spec.whatwg.org/#concept-create-element"> |
| 9 <script src="/resources/testharness.js"></script> |
| 10 <script src="/resources/testharnessreport.js"></script> |
| 11 <script src="resources/custom-elements-helper.js"></script> |
| 12 </head> |
| 13 <body> |
| 14 <div id="log"></div> |
| 15 <script> |
| 16 setup({allow_uncaught_exception:true}); |
| 17 |
| 18 test(function () { |
| 19 class MyCustomElement extends HTMLElement {}; |
| 20 |
| 21 assert_true(document.createElement('my-custom-element') instanceof HTMLEleme
nt); |
| 22 assert_false(document.createElement('my-custom-element') instanceof MyCustom
Element); |
| 23 |
| 24 customElements.define('my-custom-element', MyCustomElement); |
| 25 var instance = document.createElement('my-custom-element'); |
| 26 assert_true(instance instanceof MyCustomElement); |
| 27 assert_equals(instance.localName, 'my-custom-element'); |
| 28 assert_equals(instance.namespaceURI, 'http://www.w3.org/1999/xhtml', 'A cust
om element HTML must use HTML namespace'); |
| 29 |
| 30 }, 'document.createElement must create an instance of custom elements'); |
| 31 |
| 32 function assert_reports(expected, testFunction, message) { |
| 33 var uncaughtError = null; |
| 34 window.onerror = function (message, url, lineNumber, columnNumber, error) {
uncaughtError = error; return true; } |
| 35 testFunction(); |
| 36 if (typeof(expected) == 'string') |
| 37 assert_equals(uncaughtError, expected, message); |
| 38 else if (expected && 'name' in expected) |
| 39 assert_equals(uncaughtError.name, expected.name, message); |
| 40 else |
| 41 assert_equals(uncaughtError, expected, message); |
| 42 window.onerror = null; |
| 43 } |
| 44 |
| 45 function assert_not_reports(testFunction, message) { |
| 46 assert_reports(null, testFunction, message); |
| 47 } |
| 48 |
| 49 test(function () { |
| 50 class ObjectCustomElement extends HTMLElement { |
| 51 constructor() |
| 52 { |
| 53 return {foo: 'bar'}; |
| 54 } |
| 55 }; |
| 56 customElements.define('object-custom-element', ObjectCustomElement); |
| 57 |
| 58 var instance = new ObjectCustomElement; |
| 59 assert_true(instance instanceof Object); |
| 60 assert_equals(instance.foo, 'bar'); |
| 61 |
| 62 var instance; |
| 63 assert_reports({name: 'TypeError'}, function () { instance = document.create
Element('object-custom-element'); }); |
| 64 assert_equals(instance.localName, 'object-custom-element'); |
| 65 assert_true(instance instanceof HTMLUnknownElement); |
| 66 }, 'document.createElement must report a TypeError when the result of Construct
is not a DOM node'); |
| 67 |
| 68 test(function () { |
| 69 class TextCustomElement extends HTMLElement { |
| 70 constructor() |
| 71 { |
| 72 return document.createTextNode('hello'); |
| 73 } |
| 74 }; |
| 75 customElements.define('text-custom-element', TextCustomElement); |
| 76 assert_true(new TextCustomElement instanceof Text); |
| 77 var instance; |
| 78 assert_reports({name: 'TypeError'}, function () { instance = document.create
Element('text-custom-element'); }); |
| 79 assert_equals(instance.localName, 'text-custom-element'); |
| 80 assert_true(instance instanceof HTMLUnknownElement); |
| 81 }, 'document.createElement must report a TypeError when the result of Construct
is a TextNode'); |
| 82 |
| 83 test(function () { |
| 84 class ElementWithAttribute extends HTMLElement { |
| 85 constructor() |
| 86 { |
| 87 super(); |
| 88 this.setAttribute('id', 'foo'); |
| 89 } |
| 90 }; |
| 91 customElements.define('element-with-attribute', ElementWithAttribute); |
| 92 assert_true(new ElementWithAttribute instanceof ElementWithAttribute); |
| 93 var instance; |
| 94 assert_reports({name: 'NotSupportedError'}, function () { instance = documen
t.createElement('element-with-attribute'); }); |
| 95 assert_equals(instance.localName, 'element-with-attribute'); |
| 96 assert_true(instance instanceof HTMLUnknownElement); |
| 97 }, 'document.createElement must report a NotSupportedError when attribute is add
ed by setAttribute during construction'); |
| 98 |
| 99 test(function () { |
| 100 class ElementWithAttrNode extends HTMLElement { |
| 101 constructor() |
| 102 { |
| 103 super(); |
| 104 this.attributes.setNamedItem(document.createAttribute('title')); |
| 105 } |
| 106 }; |
| 107 customElements.define('element-with-attr-node', ElementWithAttrNode); |
| 108 assert_true(new ElementWithAttrNode instanceof ElementWithAttrNode); |
| 109 var instance; |
| 110 assert_reports({name: 'NotSupportedError'}, function () { instance = documen
t.createElement('element-with-attr-node'); }); |
| 111 assert_equals(instance.localName, 'element-with-attr-node'); |
| 112 assert_true(instance instanceof HTMLUnknownElement); |
| 113 }, 'document.createElement must report a NotSupportedError when attribute is add
ed by attributes.setNamedItem during construction'); |
| 114 |
| 115 test(function () { |
| 116 class ElementWithNoAttributes extends HTMLElement { |
| 117 constructor() |
| 118 { |
| 119 super(); |
| 120 this.attributes.setNamedItem(document.createAttribute('title')); |
| 121 this.removeAttribute('title'); |
| 122 } |
| 123 }; |
| 124 customElements.define('element-with-no-attiributes', ElementWithNoAttributes
); |
| 125 assert_true(new ElementWithNoAttributes instanceof ElementWithNoAttributes); |
| 126 var instance; |
| 127 assert_not_reports(function () { instance = document.createElement('element-
with-no-attiributes'); }); |
| 128 assert_true(instance instanceof ElementWithNoAttributes); |
| 129 }, 'document.createElement must not report a NotSupportedError when attribute is
added and removed during construction'); |
| 130 |
| 131 test(function () { |
| 132 class ElementWithChildText extends HTMLElement { |
| 133 constructor() |
| 134 { |
| 135 super(); |
| 136 this.appendChild(document.createTextNode('hello')); |
| 137 } |
| 138 }; |
| 139 customElements.define('element-with-child-text', ElementWithChildText); |
| 140 assert_true(new ElementWithChildText instanceof ElementWithChildText); |
| 141 var instance; |
| 142 assert_reports({name: 'NotSupportedError'}, function () { instance = documen
t.createElement('element-with-child-text'); }); |
| 143 assert_equals(instance.localName, 'element-with-child-text'); |
| 144 assert_true(instance instanceof HTMLUnknownElement); |
| 145 }, 'document.createElement must report a NotSupportedError when a Text child is
added during construction'); |
| 146 |
| 147 test(function () { |
| 148 class ElementWithChildComment extends HTMLElement { |
| 149 constructor() |
| 150 { |
| 151 super(); |
| 152 this.appendChild(document.createComment('hello')); |
| 153 } |
| 154 }; |
| 155 customElements.define('element-with-child-comment', ElementWithChildComment)
; |
| 156 assert_true(new ElementWithChildComment instanceof ElementWithChildComment); |
| 157 var instance; |
| 158 assert_reports({name: 'NotSupportedError'}, function () { instance = documen
t.createElement('element-with-child-comment'); }); |
| 159 assert_equals(instance.localName, 'element-with-child-comment'); |
| 160 assert_true(instance instanceof HTMLUnknownElement); |
| 161 }, 'document.createElement must report a NotSupportedError when a Comment child
is added during construction'); |
| 162 |
| 163 test(function () { |
| 164 class ElementWithChildElement extends HTMLElement { |
| 165 constructor() |
| 166 { |
| 167 super(); |
| 168 this.appendChild(document.createElement('div')); |
| 169 } |
| 170 }; |
| 171 customElements.define('element-with-child-element', ElementWithChildElement)
; |
| 172 assert_true(new ElementWithChildElement instanceof ElementWithChildElement); |
| 173 var instance; |
| 174 assert_reports({name: 'NotSupportedError'}, function () { instance = documen
t.createElement('element-with-child-element'); }); |
| 175 assert_equals(instance.localName, 'element-with-child-element'); |
| 176 assert_true(instance instanceof HTMLUnknownElement); |
| 177 }, 'document.createElement must report a NotSupportedError when an element child
is added during construction'); |
| 178 |
| 179 test(function () { |
| 180 class ElementWithNoChildElements extends HTMLElement { |
| 181 constructor() |
| 182 { |
| 183 super(); |
| 184 this.appendChild(document.createElement('div')); |
| 185 this.removeChild(this.firstChild); |
| 186 } |
| 187 }; |
| 188 customElements.define('element-with-no-child-elements', ElementWithNoChildEl
ements); |
| 189 var instance; |
| 190 assert_not_reports(function () { instance = document.createElement('element-
with-no-child-elements'); }); |
| 191 assert_true(instance instanceof ElementWithNoChildElements); |
| 192 }, 'document.createElement must not report a NotSupportedError when an element c
hild is added and removed during construction'); |
| 193 |
| 194 test(function () { |
| 195 class ElementWithParent extends HTMLElement { |
| 196 constructor() |
| 197 { |
| 198 super(); |
| 199 document.createElement('div').appendChild(this); |
| 200 } |
| 201 }; |
| 202 customElements.define('element-with-parent', ElementWithParent); |
| 203 assert_true(new ElementWithParent instanceof ElementWithParent); |
| 204 var instance; |
| 205 assert_reports({name: 'NotSupportedError'}, function () { instance = documen
t.createElement('element-with-parent'); }); |
| 206 assert_equals(instance.localName, 'element-with-parent'); |
| 207 assert_true(instance instanceof HTMLUnknownElement); |
| 208 }, 'document.createElement must report a NotSupportedError when the element gets
inserted into another element during construction'); |
| 209 |
| 210 test(function () { |
| 211 class ElementWithNoParent extends HTMLElement { |
| 212 constructor() |
| 213 { |
| 214 super(); |
| 215 document.createElement('div').appendChild(this); |
| 216 this.parentNode.removeChild(this); |
| 217 } |
| 218 }; |
| 219 customElements.define('element-with-no-parent', ElementWithNoParent); |
| 220 var instance; |
| 221 assert_not_reports(function () { instance = document.createElement('element-
with-no-parent'); }); |
| 222 assert_true(instance instanceof ElementWithNoParent); |
| 223 }, 'document.createElement must not report a NotSupportedError when the element
is inserted and removed from another element during construction'); |
| 224 |
| 225 document_types().forEach(function (entry, testNumber) { |
| 226 if (entry.isOwner) |
| 227 return; |
| 228 |
| 229 var getDocument = entry.create; |
| 230 var docuemntName = entry.name; |
| 231 |
| 232 promise_test(function () { |
| 233 return getDocument().then(function (doc) { |
| 234 class ElementWithAdoptCall extends HTMLElement { |
| 235 constructor() |
| 236 { |
| 237 super(); |
| 238 doc.adoptNode(this); |
| 239 } |
| 240 }; |
| 241 var name = 'element-with-adopt-call-' + testNumber; |
| 242 customElements.define(name, ElementWithAdoptCall); |
| 243 assert_true(new ElementWithAdoptCall instanceof ElementWithAdoptCall
); |
| 244 var instance; |
| 245 assert_reports({name: 'NotSupportedError'}, function () { instance =
document.createElement(name); }); |
| 246 assert_equals(instance.localName, name); |
| 247 assert_true(instance instanceof HTMLUnknownElement); |
| 248 }); |
| 249 }, 'document.createElement must report a NotSupportedError when the element
is adopted into a ' + docuemntName + ' during construction'); |
| 250 |
| 251 promise_test(function () { |
| 252 return getDocument().then(function (doc) { |
| 253 class ElementInsertedIntoAnotherDocument extends HTMLElement { |
| 254 constructor() |
| 255 { |
| 256 super(); |
| 257 doc.documentElement.appendChild(this); |
| 258 } |
| 259 }; |
| 260 var name = 'element-inserted-into-another-document-' + testNumber; |
| 261 customElements.define(name, ElementInsertedIntoAnotherDocument); |
| 262 assert_true(new ElementInsertedIntoAnotherDocument instanceof Elemen
tInsertedIntoAnotherDocument); |
| 263 var instance; |
| 264 assert_reports({name: 'NotSupportedError'}, function () { instance =
document.createElement(name); }); |
| 265 assert_equals(instance.localName, name); |
| 266 assert_true(instance instanceof HTMLUnknownElement); |
| 267 }); |
| 268 }, 'document.createElement must report a NotSupportedError when the element
is inserted into a ' + docuemntName + ' during construction'); |
| 269 |
| 270 promise_test(function () { |
| 271 return getDocument().then(function (doc) { |
| 272 class ElementThatGetAdoptedBack extends HTMLElement { |
| 273 constructor() |
| 274 { |
| 275 super(); |
| 276 doc.adoptNode(this); |
| 277 document.adoptNode(this); |
| 278 } |
| 279 }; |
| 280 var name = 'element-that-get-adopted-back' + testNumber; |
| 281 customElements.define(name, ElementThatGetAdoptedBack); |
| 282 var instance; |
| 283 assert_not_reports(function () { instance = document.createElement(n
ame); }); |
| 284 assert_true(instance instanceof ElementThatGetAdoptedBack); |
| 285 }); |
| 286 }, 'document.createElement must not report a NotSupportedError when the elem
ent is adopted back from a ' + docuemntName + ' during construction'); |
| 287 }); |
| 288 |
| 289 test(function () { |
| 290 class DivCustomElement extends HTMLElement { |
| 291 constructor() |
| 292 { |
| 293 super(); |
| 294 return document.createElement('div'); |
| 295 } |
| 296 }; |
| 297 customElements.define('div-custom-element', DivCustomElement); |
| 298 assert_true(new DivCustomElement instanceof HTMLDivElement); |
| 299 var instance; |
| 300 assert_reports({name: 'NotSupportedError'}, function () { instance = documen
t.createElement('div-custom-element'); }); |
| 301 assert_equals(instance.localName, 'div-custom-element'); |
| 302 assert_true(instance instanceof HTMLUnknownElement); |
| 303 }, 'document.createElement must report a NotSupportedError when the local name o
f the element does not match that of the custom element'); |
| 304 |
| 305 test(function () { |
| 306 var exceptionToThrow = {name: 'exception thrown by a custom constructor'}; |
| 307 class ThrowCustomElement extends HTMLElement { |
| 308 constructor() |
| 309 { |
| 310 super(); |
| 311 if (exceptionToThrow) |
| 312 throw exceptionToThrow; |
| 313 } |
| 314 }; |
| 315 customElements.define('throw-custom-element', ThrowCustomElement); |
| 316 |
| 317 assert_throws(exceptionToThrow, function () { new ThrowCustomElement; }); |
| 318 var instance; |
| 319 assert_reports(exceptionToThrow, function () { instance = document.createEle
ment('throw-custom-element'); }); |
| 320 assert_equals(instance.localName, 'throw-custom-element'); |
| 321 assert_true(instance instanceof HTMLUnknownElement); |
| 322 |
| 323 exceptionToThrow = false; |
| 324 var instance = document.createElement('throw-custom-element'); |
| 325 assert_true(instance instanceof ThrowCustomElement); |
| 326 assert_equals(instance.localName, 'throw-custom-element'); |
| 327 |
| 328 }, 'document.createElement must report an exception thrown by a custom element c
onstructor'); |
| 329 |
| 330 </script> |
| 331 </body> |
| 332 </html> |
OLD | NEW |