OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <title>Changing IS attribute of the custom element must not affect this element'
s custom element type, after element is instantiated</title> |
| 5 <meta name="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> |
| 6 <meta name="author" title="Aleksei Yu. Semenov" href="mailto:a.semenov@unipro.ru
"> |
| 7 <meta name="assert" content="After a custom element is instantiated, changing th
e value of the IS attribute must not affect this element's custom element type"> |
| 8 <link rel="help" href="http://www.w3.org/TR/custom-elements/#instantiating-custo
m-elements"> |
| 9 <script src="../../../../resources/testharness.js"></script> |
| 10 <script src="../../../../resources/testharnessreport.js"></script> |
| 11 <script src="../testcommon.js"></script> |
| 12 <link rel="stylesheet" href="../../../../resources/testharness.css"> |
| 13 </head> |
| 14 <body> |
| 15 <div id="log"></div> |
| 16 <script> |
| 17 test(function() { |
| 18 var doc = newHTMLDocument(); |
| 19 var GeneratedConstructor = doc.registerElement('x-a'); |
| 20 var customElement = new GeneratedConstructor(); |
| 21 doc.registerElement('x-b'); |
| 22 customElement.setAttribute('is', 'x-b'); |
| 23 assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.pro
totype, |
| 24 'Custom element type should be x-a'); |
| 25 }, 'Test custom element type, after assigning IS attribute value. ' + |
| 26 'Element is created by constructor'); |
| 27 |
| 28 |
| 29 test(function() { |
| 30 var doc = newHTMLDocument(); |
| 31 var GeneratedConstructor = doc.registerElement('x-c'); |
| 32 doc.registerElement('x-d'); |
| 33 doc.body.innerHTML = '<x-c id="x-c"></x-c>'; |
| 34 var customElement = doc.querySelector('#x-c'); |
| 35 customElement.setAttribute('is', 'x-d'); |
| 36 assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.pro
totype, |
| 37 'Custom element type should be x-c'); |
| 38 }, 'Test custom element type, after assigning IS attribute value. ' + |
| 39 'Element is created via innerHTML property'); |
| 40 |
| 41 |
| 42 test(function() { |
| 43 var doc = newHTMLDocument(); |
| 44 doc.body.innerHTML = '<x-e id="x-e"></x-e>'; |
| 45 var customElement = doc.querySelector('#x-e'); |
| 46 customElement.setAttribute('is', 'x-f'); |
| 47 var GeneratedConstructor = doc.registerElement('x-e'); |
| 48 doc.registerElement('x-f'); |
| 49 assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.pro
totype, |
| 50 'Custom element type should be x-e'); |
| 51 }, 'Test custom element type, after assigning IS attribute value to unresolved e
lement. ' + |
| 52 'Element is created via innerHTML property'); |
| 53 |
| 54 |
| 55 testInIFrame('../resources/x-element.html', function(doc) { |
| 56 var GeneratedConstructor = doc.registerElement('x-element'); |
| 57 doc.registerElement('y-element'); |
| 58 var customElement = doc.querySelector('#x-element'); |
| 59 customElement.setAttribute('is', 'y-element'); |
| 60 assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.pro
totype, |
| 61 'Custom element type should be x-element'); |
| 62 }, 'Test custom element type, after assigning IS attribute value. ' + |
| 63 'Element is defined in loaded HTML document'); |
| 64 |
| 65 |
| 66 testInIFrame('../resources/x-element.html', function(doc) { |
| 67 var customElement = doc.querySelector('#x-element'); |
| 68 customElement.setAttribute('is', 'y-element'); |
| 69 var GeneratedConstructor = doc.registerElement('x-element'); |
| 70 doc.registerElement('y-element'); |
| 71 assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.pro
totype, |
| 72 'Custom element type should be x-element'); |
| 73 }, 'Test custom element type, after assigning IS attribute value to unresolved e
lement. ' + |
| 74 'Element is defined in loaded HTML document'); |
| 75 |
| 76 |
| 77 test(function() { |
| 78 var doc = newHTMLDocument(); |
| 79 HTML5_ELEMENTS.forEach(function(tagName) { |
| 80 if (HTML5_DOCUMENT_ELEMENTS.indexOf(tagName) !== -1) { |
| 81 return; |
| 82 } |
| 83 var name = 'y-' + tagName; |
| 84 var obj = doc.createElement(tagName); |
| 85 var proto = Object.create(obj.constructor.prototype); |
| 86 var GeneratedConstructor = doc.registerElement(name, {prototype: proto,
extends: tagName}); |
| 87 if (HTML5_TABLE_ELEMENTS.indexOf(tagName) !== -1) { |
| 88 doc.body.innerHTML = |
| 89 '<table>' + |
| 90 '<' + tagName + ' id="custom-element" is="' + name + '"></' + ta
gName + '>' + |
| 91 '</table>'; |
| 92 } else { |
| 93 doc.body.innerHTML = |
| 94 '<' + tagName + ' id="custom-element" is="' + name + '"></' + ta
gName + '>'; |
| 95 } |
| 96 var customElement = doc.querySelector('#custom-element'); |
| 97 assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor
.prototype, |
| 98 'Custom element type should be '+ name); |
| 99 |
| 100 var name2 = 'y-a-' + tagName; |
| 101 doc.registerElement(name2); |
| 102 customElement.setAttribute('is', name2); |
| 103 assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor
.prototype, |
| 104 'Custom element type should be ' + name); |
| 105 }); |
| 106 }, 'Test custom element type after changing IS attribute value. ' + |
| 107 'Element is HTML5 element with IS attribute referring to custom element type
'); |
| 108 |
| 109 |
| 110 test(function() { |
| 111 var doc = newHTMLDocument(); |
| 112 var localName = 'z-a'; |
| 113 var obj = doc.createElement('a'); |
| 114 var proto = Object.create(obj.constructor.prototype); |
| 115 var GeneratedConstructor = doc.registerElement(localName, {prototype: proto,
extends: 'a'}); |
| 116 doc.body.innerHTML = '<a id="custom-element" is="' + localName + '"></a>'; |
| 117 var customElement = doc.querySelector('#custom-element'); |
| 118 |
| 119 HTML5_ELEMENTS.forEach(function(tagName) { |
| 120 var name = 'z-a-' + tagName; |
| 121 var htmlElement = doc.createElement(tagName); |
| 122 var htmlElementProto = Object.create(htmlElement.constructor.prototype); |
| 123 doc.registerElement(name, {prototype: htmlElementProto, extends: tagName
}); |
| 124 customElement.setAttribute('is', name); |
| 125 assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor
.prototype, |
| 126 'Custom element type should be ' + localName); |
| 127 }); |
| 128 }, 'Test custom element type after changing IS attribute value several times. '
+ |
| 129 'Element is HTML5 element with IS attribute referring to custom element type
'); |
| 130 |
| 131 |
| 132 test(function() { |
| 133 var doc = newHTMLDocument(); |
| 134 var GeneratedConstructor = doc.registerElement('x-g'); |
| 135 doc.registerElement('x-h'); |
| 136 doc.body.innerHTML = '<x-g id="x-g" is="x-h"></x-g>'; |
| 137 var customElement = doc.querySelector('#x-g'); |
| 138 customElement.removeAttribute('is'); |
| 139 assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.pro
totype, |
| 140 'Custom element type should be x-g'); |
| 141 }, 'Test custom element type, after removing IS attribute value. ' + |
| 142 'Element is created via innerHTML property'); |
| 143 |
| 144 |
| 145 test(function() { |
| 146 var doc = newHTMLDocument(); |
| 147 var obj = doc.createElement('a'); |
| 148 var proto = Object.create(obj.constructor.prototype); |
| 149 var GeneratedConstructor = doc.registerElement('x-i', {prototype: proto, ext
ends: 'a'}); |
| 150 doc.body.innerHTML = '<a id="x-i" is="x-i"></a>'; |
| 151 var customElement = doc.querySelector('#x-i'); |
| 152 customElement.removeAttribute('is'); |
| 153 assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.pro
totype, |
| 154 'Custom element type should be x-i'); |
| 155 }, 'Test custom element type, after removing IS attribute value. ' + |
| 156 'Element is HTML5 element with IS attribute referring to custom element type
'); |
| 157 </script> |
| 158 </body> |
| 159 </html> |
OLD | NEW |