serializing.html (11863B)
1 <!DOCTYPE html> 2 <title>innerHTML in HTML</title> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <div id="log"></div> 6 7 <!-- test elments. Each has an expected innerHTML and outerHTML in an array in the <script>--> 8 <div id="test" style="display:none"> 9 <span></span> 10 <span><a></a></span> 11 <span><a b=c></a></span> 12 <span><a b='c'></a></span> 13 <span><a b='&'></a></span> 14 <span><a b=' '></a></span> 15 <span><a b='"'></a></span> 16 <span><a b="<"></a></span> 17 <span><a b=">"></a></span> 18 <span><a href="javascript:"<>""></a></span> 19 <span><svg xlink:href="a"></svg></span> 20 <span><svg xmlns:svg="test"></svg></span> 21 <span>a</span> 22 <span>&</span> 23 <span> </span> 24 <span><</span> 25 <span>></span> 26 <span>"</span> 27 <span><style><&></style></span> 28 <span><script type="test"><&></script></span> 29 <script type="test"><&></script> 30 <span><xmp><&></xmp></span> 31 <span><iframe><&></iframe></span> 32 <span><noembed><&></noembed></span> 33 <span><noframes><&></noframes></span> 34 <span><noscript><&></noscript></span> 35 <span><!--data--></span> 36 <span><a><b><c></c></b><d>e</d><f><g>h</g></f></a></span> 37 <span b=c></span> 38 </div> 39 <!-- TODO: template element --> 40 <script> 41 42 var test_data = document.getElementById("test").children; 43 var expected = [ 44 ["", "<span></span>"], 45 ["<a></a>", "<span><a></a></span>"], 46 ["<a b=\"c\"></a>", "<span><a b=\"c\"></a></span>"], 47 ["<a b=\"c\"></a>", "<span><a b=\"c\"></a></span>"], 48 ["<a b=\"&\"></a>", "<span><a b=\"&\"></a></span>"], 49 ["<a b=\" \"></a>", "<span><a b=\" \"></a></span>"], 50 ["<a b=\""\"></a>", "<span><a b=\""\"></a></span>"], 51 ["<a b=\"<\"></a>", "<span><a b=\"<\"></a></span>"], 52 ["<a b=\">\"></a>", "<span><a b=\">\"></a></span>"], 53 ["<a href=\"javascript:"<>"\"></a>", "<span><a href=\"javascript:"<>"\"></a></span>"], 54 ["<svg xlink:href=\"a\"></svg>", "<span><svg xlink:href=\"a\"></svg></span>"], 55 ["<svg xmlns:svg=\"test\"></svg>", "<span><svg xmlns:svg=\"test\"></svg></span>"], 56 ["a", "<span>a</span>"], 57 ["&", "<span>&</span>"], 58 [" ", "<span> </span>"], 59 ["<", "<span><</span>"], 60 [">", "<span>></span>"], 61 ["\"", "<span>\"</span>"], 62 ["<style><&></style>", "<span><style><&></style></span>"], 63 ["<script type=\"test\"><&><\/script>", "<span><script type=\"test\"><&><\/script></span>"], 64 ["<&>", "<script type=\"test\"><&><\/script>"], 65 ["<xmp><&></xmp>", "<span><xmp><&></xmp></span>"], 66 ["<iframe><&></iframe>", "<span><iframe><&></iframe></span>"], 67 ["<noembed><&></noembed>", "<span><noembed><&></noembed></span>"], 68 ["<noframes><&></noframes>", "<span><noframes><&></noframes></span>"], 69 ["<noscript><&></noscript>", "<span><noscript><&></noscript></span>"], 70 ["<!--data-->", "<span><!--data--></span>"], 71 ["<a><b><c></c></b><d>e</d><f><g>h</g></f></a>", "<span><a><b><c></c></b><d>e</d><f><g>h</g></f></a></span>"], 72 ["", "<span b=\"c\"></span>"] 73 ]; 74 75 var dom_tests = [ 76 ["Attribute in the XML namespace", 77 function() { 78 var span = document.createElement("span"); 79 var svg = document.createElement("svg"); 80 svg.setAttributeNS("http://www.w3.org/XML/1998/namespace", "xml:foo", "test"); 81 span.appendChild(svg); 82 return span; 83 }, 84 '<svg xml:foo="test"></svg>', 85 '<span><svg xml:foo="test"></svg></span>'], 86 87 ["Attribute in the XML namespace with the prefix not set to xml:", 88 function() { 89 var span = document.createElement("span"); 90 var svg = document.createElement("svg"); 91 svg.setAttributeNS("http://www.w3.org/XML/1998/namespace", "abc:foo", "test"); 92 span.appendChild(svg); 93 return span; 94 }, 95 '<svg xml:foo="test"></svg>', 96 '<span><svg xml:foo="test"></svg></span>'], 97 98 ["Non-'xmlns' attribute in the xmlns namespace", 99 function() { 100 var span = document.createElement("span"); 101 var svg = document.createElement("svg"); 102 svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:foo", "test") 103 span.appendChild(svg); 104 return span; 105 }, 106 '<svg xmlns:foo="test"></svg>', 107 '<span><svg xmlns:foo="test"></svg></span>'], 108 109 ["'xmlns' attribute in the xmlns namespace", 110 function() { 111 var span = document.createElement("span"); 112 var svg = document.createElement("svg"); 113 svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns", "test") 114 span.appendChild(svg); 115 return span; 116 }, 117 '<svg xmlns="test"></svg>', 118 '<span><svg xmlns="test"></svg></span>'], 119 120 ["Attribute in non-standard namespace", 121 function() { 122 var span = document.createElement("span"); 123 var svg = document.createElement("svg"); 124 svg.setAttributeNS("fake_ns", "abc:def", "test") 125 span.appendChild(svg); 126 return span; 127 }, 128 '<svg abc:def="test"></svg>', 129 '<span><svg abc:def="test"></svg></span>'], 130 131 ["<span> starting with U+000A", 132 function() { 133 var elem = document.createElement("span"); 134 elem.appendChild(document.createTextNode("\x0A")); 135 return elem; 136 }, 137 "\x0A", 138 "<span>\x0A</span>"], 139 140 //TODO: Processing instructions 141 ] 142 143 var text_elements = ["pre", "textarea", "listing"]; 144 145 var text_tests = [ 146 ["<%text> context starting with U+000A", 147 function(elem) { 148 elem.appendChild(document.createTextNode("\x0A")); 149 return elem; 150 }, 151 "\x0A", 152 "<%text>\x0A</%text>"], 153 154 ["<%text> context not starting with U+000A", 155 function(elem) { 156 elem.appendChild(document.createTextNode("a\x0A")); 157 return elem; 158 }, 159 "a\x0A", 160 "<%text>a\x0A</%text>"], 161 162 ["<%text> non-context starting with U+000A", 163 function(elem) { 164 var span = document.createElement("span"); 165 elem.appendChild(document.createTextNode("\x0A")); 166 span.appendChild(elem); 167 return span; 168 }, 169 "<%text>\x0A</%text>", 170 "<span><%text>\x0A</%text></span>"], 171 172 ["<%text> non-context not starting with U+000A", 173 function(elem) { 174 var span = document.createElement("span"); 175 elem.appendChild(document.createTextNode("a\x0A")); 176 span.appendChild(elem); 177 return span; 178 }, 179 "<%text>a\x0A</%text>", 180 "<span><%text>a\x0A</%text></span>"], 181 ] 182 183 var void_elements = [ 184 "area", "base", "basefont", "bgsound", "br", "col", "embed", 185 "frame", "hr", "img", "input", "keygen", "link", 186 "meta", "param", "source", "track", "wbr" 187 ]; 188 189 var void_tests = [ 190 ["Void context node", 191 function (void_elem) { 192 return void_elem; 193 }, 194 "", 195 "<%void>" 196 ], 197 ["void as first child with following siblings", 198 function (void_elem) { 199 var span = document.createElement("span"); 200 span.appendChild(void_elem); 201 span.appendChild(document.createElement("a")).appendChild(document.createTextNode("test")); 202 span.appendChild(document.createElement("b")) 203 return span 204 }, 205 "<%void><a>test</a><b></b>", 206 "<span><%void><a>test</a><b></b></span>" 207 ], 208 ["void as second child with following siblings", 209 function (void_elem) { 210 var span = document.createElement("span"); 211 span.appendChild(document.createElement("a")).appendChild(document.createTextNode("test")); 212 span.appendChild(void_elem); 213 span.appendChild(document.createElement("b")) 214 return span; 215 }, 216 "<a>test</a><%void><b></b>", 217 "<span><a>test</a><%void><b></b></span>" 218 ], 219 ["void as last child with preceding siblings", 220 function (void_elem) { 221 var span = document.createElement("span"); 222 span.appendChild(document.createElement("a")).appendChild(document.createTextNode("test")); 223 span.appendChild(document.createElement("b")) 224 span.appendChild(void_elem); 225 return span; 226 }, 227 "<a>test</a><b></b><%void>", 228 "<span><a>test</a><b></b><%void></span>" 229 ], 230 ] 231 232 function cross_map(a1, a2, f) { 233 var rv = []; 234 a1.forEach(function(a1_elem) { 235 a2.forEach(function(a2_elem) { 236 rv.push(f(a1_elem, a2_elem)); 237 }) 238 }); 239 return rv; 240 } 241 242 function innerHTML_test(func, elem, expected) { 243 assert_equals(func(elem).innerHTML, expected); 244 } 245 246 function outerHTML_test(func, elem, expected) { 247 assert_equals(func(elem).outerHTML, expected); 248 } 249 250 251 function make_void(name) { 252 var rv = document.createElement(name); 253 rv.appendChild(document.createElement("a")).appendChild(document.createComment("abc")) 254 rv.appendChild(document.createElement("b")). 255 appendChild(document.createElement("c")). 256 appendChild(document.createTextNode("abc")) 257 return rv; 258 } 259 260 function make_text(name) { 261 return document.createElement(name); 262 } 263 264 generate_tests(innerHTML_test, 265 expected.map(function(item, i) { 266 return ["innerHTML " + i + " " + expected[i][0], 267 function() {return test_data[i]}, 268 null, 269 item[0]]; 270 })) 271 272 generate_tests(outerHTML_test, 273 expected.map(function(item, i) { 274 return ["outerHTML " + i + " " + expected[i][1], 275 function() {return test_data[i]}, 276 null, 277 item[1]]; 278 })) 279 280 generate_tests(innerHTML_test, 281 dom_tests.map(function(item) { 282 return ["innerHTML " + item[0], 283 item[1], 284 null, 285 item[2]]; 286 })) 287 288 generate_tests(outerHTML_test, 289 dom_tests.map(function(item) { 290 return ["outerHTML " + item[0], 291 item[1], 292 null, 293 item[3]]; 294 })) 295 296 generate_tests(innerHTML_test, 297 cross_map(text_tests, text_elements, 298 function(test_data, elem_name) { 299 var rv = ["innerHTML " + test_data[0].replace(/%text/g, elem_name), 300 test_data[1], 301 document.createElement(elem_name), 302 test_data[2].replace(/%text/g, elem_name)]; 303 return rv; 304 })) 305 306 generate_tests(outerHTML_test, 307 cross_map(text_tests, text_elements, 308 function(test_data, elem_name) { 309 var rv = ["outerHTML " + test_data[0].replace(/%text/g, elem_name), 310 test_data[1], 311 document.createElement(elem_name), 312 test_data[3].replace(/%text/g, elem_name)]; 313 return rv; 314 })) 315 316 generate_tests(innerHTML_test, 317 cross_map(void_tests, void_elements, 318 function(test_data, elem_name) { 319 var rv = ["innerHTML " + test_data[0] + " " + elem_name, 320 test_data[1], 321 make_void(elem_name), 322 test_data[2].replace(/%void/g, elem_name)]; 323 return rv; 324 })) 325 326 generate_tests(outerHTML_test, 327 cross_map(void_tests, void_elements, 328 function(test_data, elem_name) { 329 var rv = ["outerHTML " + test_data[0] + " " + elem_name, 330 test_data[1], 331 make_void(elem_name), 332 test_data[3].replace(/%void/g, elem_name)]; 333 return rv; 334 })) 335 336 </script>