test_namespace_rule.html (14742B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>Test for CSS Namespace rules</title> 5 <script src="/tests/SimpleTest/SimpleTest.js"></script> 6 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 7 </head> 8 <body onload="run()"> 9 <p id="display"><iframe id="iframe" src="data:application/xhtml+xml,<html%20xmlns='http://www.w3.org/1999/xhtml'><head/><body/></html>"></iframe></p> 10 <pre id="test"> 11 <script class="testbody" type="text/javascript"> 12 13 SimpleTest.waitForExplicitFinish(); 14 15 var HTML_NS = "http://www.w3.org/1999/xhtml"; 16 17 function run() { 18 var wrappedFrame = SpecialPowers.wrap($("iframe")); 19 var ifwin = wrappedFrame.contentWindow; 20 var ifdoc = wrappedFrame.contentDocument; 21 var ifbody = ifdoc.getElementsByTagName("body")[0]; 22 23 function setup_style_text() { 24 var style_elem = ifdoc.createElement("style"); 25 style_elem.setAttribute("type", "text/css"); 26 ifdoc.getElementsByTagName("head")[0].appendChild(style_elem); 27 let style_text = ifdoc.createCDATASection(""); 28 style_elem.appendChild(style_text); 29 return style_text; 30 } 31 32 let style_text = setup_style_text(); 33 var gCounter = 0; 34 35 /* 36 * namespaceRules: the @namespace rules to use 37 * selector: the selector to test 38 * body_contents: what to set the body's innerHTML to 39 * match_fn: a function that, given the document object into which 40 * body_contents has been inserted, produces an array of nodes that 41 * should match selector 42 * notmatch_fn: likewise, but for nodes that should not match 43 */ 44 function test_selector_in_html(namespaceRules, selector, body_contents, 45 match_fn, notmatch_fn) 46 { 47 var zi = ++gCounter; 48 if (typeof(body_contents) == "string") { 49 ifbody.innerHTML = body_contents; 50 } else { 51 // It's a function. 52 ifbody.innerHTML = ""; 53 body_contents(ifbody); 54 } 55 style_text.data = 56 namespaceRules + " " + selector + "{ z-index: " + zi + " }"; 57 var should_match = match_fn(ifdoc); 58 var should_not_match = notmatch_fn(ifdoc); 59 if (should_match.length + should_not_match.length == 0) { 60 ok(false, "nothing to check"); 61 } 62 63 for (var i = 0; i < should_match.length; ++i) { 64 var e = should_match[i]; 65 is(ifwin.getComputedStyle(e).zIndex, String(zi), 66 "element in " + body_contents + " matched " + selector); 67 } 68 for (var i = 0; i < should_not_match.length; ++i) { 69 var e = should_not_match[i]; 70 is(ifwin.getComputedStyle(e).zIndex, "auto", 71 "element in " + body_contents + " did not match " + selector); 72 } 73 74 // Now, since we're here, may as well make sure serialization 75 // works correctly. It need not produce the exact same text, 76 // but it should produce a selector that matches the same 77 // elements. 78 zi = ++gCounter; 79 var ruleList = style_text.parentNode.sheet.cssRules; 80 var ser1 = ruleList[ruleList.length-1].selectorText; 81 style_text.data = 82 namespaceRules + " " + ser1 + "{ z-index: " + zi + " }"; 83 for (var i = 0; i < should_match.length; ++i) { 84 var e = should_match[i]; 85 is(ifwin.getComputedStyle(e).zIndex, String(zi), 86 "element in " + body_contents + " matched " + ser1 + 87 " which is the reserialization of " + selector); 88 } 89 for (var i = 0; i < should_not_match.length; ++i) { 90 var e = should_not_match[i]; 91 is(ifwin.getComputedStyle(e).zIndex, "auto", 92 "element in " + body_contents + " did not match " + ser1 + 93 " which is the reserialization of " + selector); 94 } 95 96 // But when we serialize the serialized result, we should get 97 // the same text. 98 var ser2 = ruleList[ruleList.length-1].selectorText; 99 is(ser2, ser1, "parse+serialize of selector \"" + selector + 100 "\" is idempotent"); 101 102 ifbody.innerHTML = ""; 103 style_text.data = ""; 104 } 105 106 // 2 tests from http://tc.labs.opera.com/css/namespaces/prefix-001.xml 107 test_selector_in_html( 108 '@namespace foo "x"; @namespace Foo "y";', 109 'Foo|test', 110 '<test xmlns="y"/>', 111 function (doc) { return doc.getElementsByTagName("test"); }, 112 function (doc) { return []; } 113 ); 114 115 test_selector_in_html( 116 '@namespace foo "x"; @namespace Foo "y";', 117 'foo|test', 118 '<test xmlns="y"/>', 119 function (doc) { return []; }, 120 function (doc) { return doc.getElementsByTagName("test");} 121 ); 122 123 // 2 tests from http://tc.labs.opera.com/css/namespaces/prefix-002.xml 124 test_selector_in_html( 125 '@namespace foo "";', 126 'test', 127 '<test xmlns=""/>', 128 function (doc) { return doc.getElementsByTagName("test");}, 129 function (doc) { return []; } 130 ); 131 132 test_selector_in_html( 133 '@namespace foo "";', 134 'foo|test', 135 '<test xmlns=""/>', 136 function (doc) { return doc.getElementsByTagName("test");}, 137 function (doc) { return []; } 138 ); 139 140 // 2 tests from http://tc.labs.opera.com/css/namespaces/prefix-003.xml 141 test_selector_in_html( 142 '@namespace foo "";', 143 'test', 144 '<foo xmlns=""><test/></foo>', 145 function (doc) { return doc.getElementsByTagName("test");}, 146 function (doc) { return []; } 147 ); 148 149 test_selector_in_html( 150 '@namespace foo "";', 151 'foo|test', 152 '<foo xmlns=""><test/></foo>', 153 function (doc) { return doc.getElementsByTagName("test");}, 154 function (doc) { return []; } 155 ); 156 157 // 4 tests from http://tc.labs.opera.com/css/namespaces/prefix-004.xml 158 test_selector_in_html( 159 '@namespace ""; @namespace x "test";', 160 'test[x]', 161 '<foo xmlns=""><test x=""/></foo>', 162 function (doc) { return doc.getElementsByTagName("test");}, 163 function (doc) { return []; } 164 ); 165 166 test_selector_in_html( 167 '@namespace ""; @namespace x "test";', 168 '*|test', 169 '<foo xmlns=""><test x=""/></foo>', 170 function (doc) { return doc.getElementsByTagName("test");}, 171 function (doc) { return []; } 172 ); 173 174 test_selector_in_html( 175 '@namespace ""; @namespace x "test";', 176 '*|test', 177 '<test xmlns="test"/>', 178 function (doc) { return doc.getElementsByTagName("test");}, 179 function (doc) { return []; } 180 ); 181 182 test_selector_in_html( 183 '@namespace ""; @namespace x "test";', 184 'test', 185 '<test xmlns="test"/>', 186 function (doc) { return []; }, 187 function (doc) { return doc.getElementsByTagName("test");} 188 ); 189 190 // 2 tests from http://tc.labs.opera.com/css/namespaces/prefix-005.xml 191 test_selector_in_html( 192 '@namespace x "test";', 193 'test', 194 '<test/>', 195 function (doc) { return doc.getElementsByTagName("test");}, 196 function (doc) { return []; } 197 ); 198 199 test_selector_in_html( 200 '@namespace x "test";', 201 'test', 202 '<test xmlns="test"/>', 203 function (doc) { return doc.getElementsByTagName("test");}, 204 function (doc) { return []; } 205 ); 206 207 // Skipping the scope tests because they involve import, and we have no way 208 // to know when the import load completes. 209 210 // 1 test from http://tc.labs.opera.com/css/namespaces/syntax-001.xml 211 test_selector_in_html( 212 '@NAmespace x "http://www.w3.org/1999/xhtml";', 213 'x|test', 214 '<test/>', 215 function (doc) { return doc.getElementsByTagName("test");}, 216 function (doc) { return []; } 217 ); 218 219 // 1 test from http://tc.labs.opera.com/css/namespaces/syntax-002.xml 220 test_selector_in_html( 221 '@NAmespac\\65 x "http://www.w3.org/1999/xhtml";', 222 'x|test', 223 '<test/>', 224 function (doc) { return doc.getElementsByTagName("test");}, 225 function (doc) { return []; } 226 ); 227 228 // 3 tests from http://tc.labs.opera.com/css/namespaces/syntax-003.xml 229 test_selector_in_html( 230 '@namespace url("test");', 231 '*|test', 232 '<test xmlns="test"/>', 233 function (doc) { return doc.getElementsByTagName("test");}, 234 function (doc) { return []; } 235 ); 236 237 test_selector_in_html( 238 '@namespace url("test");', 239 'test', 240 '<test xmlns="test"/>', 241 function (doc) { return doc.getElementsByTagName("test");}, 242 function (doc) { return []; } 243 ); 244 245 test_selector_in_html( 246 '@namespace url("test");', 247 'test', 248 '<test/>', 249 function (doc) { return []; }, 250 function (doc) { return doc.getElementsByTagName("test");} 251 ); 252 253 // 3 tests from http://tc.labs.opera.com/css/namespaces/syntax-004.xml 254 test_selector_in_html( 255 '@namespace u\\00072l("test");', 256 '*|test', 257 '<test xmlns="test"/>', 258 function (doc) { return doc.getElementsByTagName("test");}, 259 function (doc) { return []; } 260 ); 261 262 test_selector_in_html( 263 '@namespace u\\00072l("test");', 264 'test', 265 '<test xmlns="test"/>', 266 function (doc) { return doc.getElementsByTagName("test");}, 267 function (doc) { return []; } 268 ); 269 270 test_selector_in_html( 271 '@namespace u\\00072l("test");', 272 'test', 273 '<test/>', 274 function (doc) { return []; }, 275 function (doc) { return doc.getElementsByTagName("test");} 276 ); 277 278 // Skipping http://tc.labs.opera.com/css/namespaces/syntax-005.xml because it 279 // involves import, and we have no way // to know when the import load completes. 280 281 // Skipping http://tc.labs.opera.com/css/namespaces/syntax-006.xml because it 282 // involves import, and we have no way // to know when the import load completes. 283 284 // 2 tests from http://tc.labs.opera.com/css/namespaces/syntax-007.xml 285 test_selector_in_html( 286 '@charset "x"; @namespace url("test"); @namespace url("test2");', 287 '*|test', 288 '<test xmlns="test"/>', 289 function (doc) { return doc.getElementsByTagName("test");}, 290 function (doc) { return []; } 291 ); 292 293 test_selector_in_html( 294 '@charset "x"; @namespace url("test"); @namespace url("test2");', 295 'test', 296 '<test xmlns="test"/>', 297 function (doc) { return []; }, 298 function (doc) { return doc.getElementsByTagName("test");} 299 ); 300 301 // 2 tests from http://tc.labs.opera.com/css/namespaces/syntax-008.xml 302 test_selector_in_html( 303 '@namespace \\72x url("test");', 304 'rx|test', 305 '<test xmlns="test"/>', 306 function (doc) { return doc.getElementsByTagName("test");}, 307 function (doc) { return []; } 308 ); 309 310 test_selector_in_html( 311 '@namespace \\72x url("test");', 312 'test', 313 '<test xmlns="test"/>', 314 function (doc) { return doc.getElementsByTagName("test");}, 315 function (doc) { return []; } 316 ); 317 318 // And now some :not() tests 319 test_selector_in_html( 320 '@namespace url("test");', 321 '*|*:not(test)', 322 '<test xmlns="test"/>', 323 function (doc) { return []; }, 324 function (doc) { return doc.getElementsByTagName("test");} 325 ); 326 327 test_selector_in_html( 328 '@namespace url("test");', 329 '*|*:not(test)', 330 '<test xmlns="testing"/>', 331 function (doc) { return doc.getElementsByTagName("test");}, 332 function (doc) { return []; } 333 ); 334 335 test_selector_in_html( 336 '@namespace x url("test");', 337 '*|*:not(x|test)', 338 '<test xmlns="test"/>', 339 function (doc) { return []; }, 340 function (doc) { return doc.getElementsByTagName("test");} 341 ); 342 343 test_selector_in_html( 344 '@namespace x url("test");', 345 '*|*:not(x|test)', 346 '<test xmlns="testing"/>', 347 function (doc) { return doc.getElementsByTagName("test");}, 348 function (doc) { return []; } 349 ); 350 351 test_selector_in_html( 352 '@namespace url("test");', 353 '*|*:not(*)', 354 '<test xmlns="testing"/>', 355 function (doc) { return doc.getElementsByTagName("test");}, 356 function (doc) { return []; } 357 ); 358 359 test_selector_in_html( 360 '@namespace url("test");', 361 '*|*:not(*)', 362 '<test xmlns="test"/>', 363 function (doc) { return []; }, 364 function (doc) { return doc.getElementsByTagName("test");} 365 ); 366 367 test_selector_in_html( 368 '@namespace x url("test");', 369 '*|*:not(x|*)', 370 '<test xmlns="testing"/>', 371 function (doc) { return doc.getElementsByTagName("test");}, 372 function (doc) { return []; } 373 ); 374 375 test_selector_in_html( 376 '@namespace x url("test");', 377 '*|*:not(x|*)', 378 '<test xmlns="test"/>', 379 function (doc) { return []; }, 380 function (doc) { return doc.getElementsByTagName("test");} 381 ); 382 383 test_selector_in_html( 384 '@namespace url("test");', 385 '*|*:not([foo])', 386 '<test xmlns="testing" foo="bar"/>', 387 function (doc) { return []; }, 388 function (doc) { return doc.getElementsByTagName("test");} 389 ); 390 391 test_selector_in_html( 392 '@namespace url("test");', 393 '*|*:not([foo])', 394 '<test xmlns="test" foo="bar"/>', 395 function (doc) { return []; }, 396 function (doc) { return doc.getElementsByTagName("test");} 397 ); 398 399 test_selector_in_html( 400 '@namespace url("test");', 401 '*|*[foo]', 402 '<test foo="bar"/>', 403 function (doc) { return doc.getElementsByTagName("test");}, 404 function (doc) { return []; } 405 ); 406 407 test_selector_in_html( 408 '@namespace url("test");', 409 '*|*[|foo]', 410 '<test foo="bar"/>', 411 function (doc) { return doc.getElementsByTagName("test");}, 412 function (doc) { return []; } 413 ); 414 415 test_selector_in_html( 416 '@namespace test url("test");', 417 '*|*[test|foo]', 418 '<test foo="bar"/>', 419 function (doc) { return []; }, 420 function (doc) { return doc.getElementsByTagName("test");} 421 ); 422 423 test_selector_in_html( 424 '@namespace test url("test");', 425 '*|*[test|foo]', 426 '<test xmlns:t="test" t:foo="bar"/>', 427 function (doc) { return doc.getElementsByTagName("test");}, 428 function (doc) { return []; } 429 ); 430 431 test_selector_in_html( 432 '@namespace url("test");', 433 '*|*[foo]', 434 '<test xmlns:t="test" t:foo="bar"/>', 435 function (doc) { return []; }, 436 function (doc) { return doc.getElementsByTagName("test");} 437 ); 438 439 test_selector_in_html( 440 '@namespace url("test");', 441 '*|*[*|foo]', 442 '<test xmlns:t="test" t:foo="bar"/>', 443 function (doc) { return doc.getElementsByTagName("test");}, 444 function (doc) { return []; } 445 ); 446 447 test_selector_in_html( 448 '', 449 '*|*[*|foo]', 450 '<test xmlns:t="test" t:foo="bar"/>', 451 function (doc) { return doc.getElementsByTagName("test");}, 452 function (doc) { return []; } 453 ); 454 455 SimpleTest.finish(); 456 } 457 458 </script> 459 </pre> 460 </body> 461 </html>