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