test_custom_element_define.html (6229B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=783129 5 --> 6 <head> 7 <title>Test for customElements.define</title> 8 <script src="/tests/SimpleTest/SimpleTest.js"></script> 9 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 10 </head> 11 <body> 12 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=783129">Bug 783129</a> 13 <div> 14 <x-unresolved id="unresolved"></x-unresolved> 15 </div> 16 17 <script> 18 19 function testDefineExtend(tag, extend, definition, expectException) { 20 try { 21 customElements.define(tag, definition, { extends: extend }); 22 ok(!expectException, "Defined " + tag + " extending " + extend + "."); 23 } catch (ex) { 24 ok(expectException, "Did not define " + tag + " extending " + extend + "."); 25 } 26 } 27 28 function testDefineSimple(tag, definition, expectException) { 29 try { 30 customElements.define(tag, definition); 31 ok(!expectException, "Defined " + tag + " extending HTMLElement."); 32 } catch (ex) { 33 ok(expectException, "Did not define " + tag + " extending HTMLElement."); 34 } 35 } 36 37 function startTest() { 38 // Test defining some simple definition. 39 testDefineSimple("x-html-obj-elem", class extends HTMLElement {}, false); 40 testDefineSimple("x-html-obj-p", class extends HTMLParagraphElement {}, false); 41 42 // Make sure the prototype on unresolved elements is HTMLElement not HTMLUnknownElement. 43 var unresolved = document.getElementById("unresolved"); 44 is(unresolved.__proto__, HTMLElement.prototype, "Unresolved custom elements should have HTMLElement as prototype."); 45 46 var anotherUnresolved = document.createElement("maybe-custom-element"); 47 is(anotherUnresolved.__proto__, HTMLElement.prototype, "Unresolved custom elements should have HTMLElement as prototype."); 48 49 // Test defining some invalid definition. 50 testDefineSimple("x-invalid-number", 42, true); 51 testDefineSimple("x-invalid-boolean", false, true); 52 testDefineSimple("x-invalid-float", 1.0, true); 53 54 // Test invalid custom element names. 55 testDefineSimple("invalid", class extends HTMLElement {}, true); 56 testDefineSimple("annotation-xml", class extends HTMLElement {}, true); 57 testDefineSimple("color-profile", class extends HTMLElement {}, true); 58 testDefineSimple("font-face", class extends HTMLElement {}, true); 59 testDefineSimple("font-face-src", class extends HTMLElement {}, true); 60 testDefineSimple("font-face-uri", class extends HTMLElement {}, true); 61 testDefineSimple("font-face-format", class extends HTMLElement {}, true); 62 testDefineSimple("font-face-name", class extends HTMLElement {}, true); 63 testDefineSimple("missing-glyph", class extends HTMLElement {}, true); 64 65 // Test defining elements that extend from an existing element. 66 testDefineExtend("x-extend-span", "span", class extends HTMLElement {}, false); 67 testDefineExtend("x-extend-span-caps", "SPAN", class extends HTMLElement {}, true); 68 69 // Test defining elements that extend from a non-existing element. 70 testDefineExtend("x-extend-span-nonexist", "nonexisting", class extends HTMLElement {}, true); 71 72 // Test registration with duplicate type. 73 testDefineSimple("x-dupe-me", class extends HTMLElement {}, false); 74 testDefineSimple("x-dupe-me", class extends HTMLElement {}, true); 75 testDefineSimple("X-DUPE-ME", class extends HTMLElement {}, true); 76 testDefineExtend("x-dupe-me", "span", class extends HTMLElement {}, true); 77 78 // customElements.define with extended type. 79 class ExtendButton extends HTMLButtonElement {}; 80 customElements.define("x-extended-button", ExtendButton, { extends: "button" }); 81 var extendedButton = document.createElement("button", {is: "x-extended-button"}); 82 is(extendedButton.tagName, "BUTTON", "Created element should have local name of BUTTON"); 83 is(extendedButton.__proto__, ExtendButton.prototype, "Created element should have the prototype of the extended type."); 84 is(extendedButton.getAttribute("is"), null, "The |is| attribute of the created element should not be the extended type."); 85 is(extendedButton.type, "submit", "Created element should be a button with type of \"submit\""); 86 87 // Custom element constructor. 88 var constructedButton = new ExtendButton(); 89 is(constructedButton.tagName, "BUTTON", "Created element should have local name of BUTTON"); 90 is(constructedButton.__proto__, ExtendButton.prototype, "Created element should have the prototype of the extended type."); 91 92 // Try creating an element with a custom element name, but not in the html namespace. 93 class XInHTMLNamespace extends HTMLElement {}; 94 customElements.define("x-in-html-namespace", XInHTMLNamespace); 95 var wrongNamespaceElem = document.createElementNS("http://www.w3.org/2000/svg", "x-in-html-namespace"); 96 isnot(wrongNamespaceElem.__proto__, XInHTMLNamespace.prototype, "Definition for element in html namespace should not apply to SVG elements."); 97 98 var div = document.createElement("div"); 99 div.appendChild(extendedButton); 100 is(div.innerHTML, '<button is="x-extended-button"></button>', "'is value' should be serialized."); 101 102 const de = SpecialPowers.Ci.nsIDocumentEncoder; 103 var htmlencoder = SpecialPowers.Cu.createDocumentEncoder("text/html"); 104 htmlencoder.init(document, "text/html", de.OutputLFLineBreak); 105 htmlencoder.setCharset("UTF-8"); 106 htmlencoder.setContainerNode(div); 107 is(htmlencoder.encodeToString(), '<button is="x-extended-button"></button>', 108 "'is value' should be serialized (html)."); 109 110 var xhtmlencoder = SpecialPowers.Cu.createDocumentEncoder("application/xhtml+xml"); 111 xhtmlencoder.init(document, "application/xhtml+xml", de.OutputLFLineBreak); 112 xhtmlencoder.setCharset("UTF-8"); 113 xhtmlencoder.setContainerNode(div); 114 is(xhtmlencoder.encodeToString(), '<button is="x-extended-button" xmlns="http://www.w3.org/1999/xhtml"></button>', 115 "'is value' should be serialized (xhtml)."); 116 117 var xmlencoder = SpecialPowers.Cu.createDocumentEncoder("text/xml"); 118 xmlencoder.init(document, "text/xml", de.OutputLFLineBreak); 119 xmlencoder.setCharset("UTF-8"); 120 xmlencoder.setContainerNode(div); 121 is(xmlencoder.encodeToString(), '<button is="x-extended-button" xmlns="http://www.w3.org/1999/xhtml"></button>', 122 "'is value' should be serialized (xml)."); 123 } 124 125 startTest(); 126 127 </script> 128 </body> 129 </html>