layout/style/test/test_namespace_rule.html

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