mochikit_v14/tests/test_MochiKit-Selector.html

   1 <html>
   2 <head>
   3     <script type="text/javascript" src="../MochiKit/MockDOM.js"></script>
   4     <script type="text/javascript" src="../MochiKit/Base.js"></script>
   5     <script type="text/javascript" src="../MochiKit/Iter.js"></script>
   6     <script type="text/javascript" src="../MochiKit/DOM.js"></script>
   7     <script type="text/javascript" src="../MochiKit/Style.js"></script>
   8     <script type="text/javascript" src="../MochiKit/Selector.js"></script>
   9     <script type="text/javascript" src="SimpleTest/SimpleTest.js"></script>
  10     <link rel="stylesheet" type="text/css" href="SimpleTest/test.css">
  11     <style type="text/css">
  12         p, #sequence {
  13             display: none;
  14         }
  15     </style>
  16 </head>
  17 <body>
  18     <p>Test originally from <a href="http://simon.incutio.com/archive/2003/03/25/#getElementsBySelector" rel="bookmark">this blog entry</a>.</p>
  19
  20     <p>Here are some links in a normal paragraph: <a href="http://www.google.com/" title="Google!">Google</a>, <a href="http://groups.google.com/">Google Groups</a>. This link has <code>class="blog"</code>: <a href="http://diveintomark.org/" class="blog" fakeattribute="bla">diveintomark</a></p>
  21     <div id="foo">
  22     <p>Everything inside the red border is inside a div with <code>id="foo"</code>.</p>
  23     <p>This is a normal link: <a href="http://www.yahoo.com/">Yahoo</a></p>
  24
  25     <a style="display: none" href="http://www.example.com/outsidep">This a is not inside a p</a>
  26
  27     <p>This link has <code>class="blog"</code>: <a href="http://simon.incutio.com/" class="blog">Simon Willison's Weblog</a></p>
  28     <p>This <span><a href="http://www.example.com/insidespan">link</a></span> is inside a span, not directly child of p</p>
  29     <p lang="en-us">Nonninn</p>
  30     <p lang="is-IS">Sniðugt</p>
  31     <p>
  32         <input type="button" name="enabled" value="enabled" id="enabled">
  33         <input type="button" name="disabled" value="disabled" id="disabled" disabled="1" />
  34         <input type="checkbox" name="checked" value="checked" id="checked" checked="1" />
  35     </p>
  36     </div>
  37
  38     <div id="sequence">
  39         <a href="http://www.example.com/link1">Link 1</a>
  40         <a href="http://www.example.com/link2">Link 2</a>
  41         <a href="http://www.example.com/link3">Link 3</a>
  42         <a href="http://www.example.com/link4">Link 4</a>
  43         <p>Something else</p>
  44         <a href="http://www.example.com/link5">Link 5</a>
  45         <a href="http://www.example.com/link6">Link 6</a>
  46         <a href="http://www.example.com/link7">Link 7</a>
  47         <a href="http://www.example.com/link8">Link 8</a>
  48     </div>
  49
  50     <div id="multiclass" class="multiple classnames here"></div>
  51 <pre id="test">
  52 <script type="text/javascript">
  53 try {
  54
  55     var testExpected = function (res, exp, lbl) {
  56         for (var i=0; i < res.length; i ++) {
  57             is( res[i].href, exp[i], lbl + ' (' + i + ')');
  58         }
  59     };
  60
  61     var expected = ['http://simon.incutio.com/archive/2003/03/25/#getElementsBySelector',
  62                     'http://www.google.com/',
  63                     'http://groups.google.com/',
  64                     'http://diveintomark.org/',
  65                     'http://www.yahoo.com/',
  66                     'http://www.example.com/outsidep',
  67                     'http://simon.incutio.com/',
  68                     'http://www.example.com/insidespan',
  69                     'http://www.example.com/link1',
  70                     'http://www.example.com/link2',
  71                     'http://www.example.com/link3',
  72                     'http://www.example.com/link4',
  73                     'http://www.example.com/link5',
  74                     'http://www.example.com/link6',
  75                     'http://www.example.com/link7',
  76                     'http://www.example.com/link8'];
  77     var results = $$('a');
  78     testExpected(results, expected, "'a' selector");
  79
  80     expected = ['http://diveintomark.org/', 'http://simon.incutio.com/'];
  81     results = $$('p a.blog');
  82     testExpected(results, expected, "'p a.blog' selector");
  83
  84     expected = ['http://www.yahoo.com/',
  85                 'http://www.example.com/outsidep',
  86                 'http://simon.incutio.com/',
  87                 'http://www.example.com/insidespan',
  88                 'http://www.example.com/link1',
  89                 'http://www.example.com/link2',
  90                 'http://www.example.com/link3',
  91                 'http://www.example.com/link4',
  92                 'http://www.example.com/link5',
  93                 'http://www.example.com/link6',
  94                 'http://www.example.com/link7',
  95                 'http://www.example.com/link8'];
  96     results = $$('div a');
  97     testExpected(results, expected, "'div a' selector");
  98
  99     expected = ['http://www.yahoo.com/',
 100                 'http://www.example.com/outsidep',
 101                 'http://simon.incutio.com/',
 102                 'http://www.example.com/insidespan'];
 103     results = $$('div#foo a');
 104     testExpected(results, expected, "'div#foo a' selector");
 105
 106     expected = ['http://simon.incutio.com/',
 107                 'http://www.example.com/insidespan'];
 108     results = $$('#foo a.blog');
 109     testExpected(results, expected, "'#foo a.blog' selector");
 110
 111     expected = ['http://diveintomark.org/',
 112                 'http://simon.incutio.com/',
 113                 'http://www.example.com/insidespan'];
 114     results = $$('.blog');
 115     testExpected(results, expected, "'.blog' selector");
 116
 117     expected = ['http://www.google.com/',
 118                 'http://www.yahoo.com/',
 119                 'http://www.example.com/outsidep',
 120                 'http://www.example.com/insidespan',
 121                 'http://www.example.com/link1',
 122                 'http://www.example.com/link2',
 123                 'http://www.example.com/link3',
 124                 'http://www.example.com/link4',
 125                 'http://www.example.com/link5',
 126                 'http://www.example.com/link6',
 127                 'http://www.example.com/link7',
 128                 'http://www.example.com/link8'];
 129     results = $$('a[href^="http://www"]');
 130     testExpected(results, expected, "'a[href^=http://www]' selector");
 131
 132     expected = ['http://diveintomark.org/'];
 133     results = $$('a[href$="org/"]');
 134     testExpected(results, expected, "'a[href$=org/]' selector");
 135
 136     expected = ['http://www.google.com/',
 137                 'http://groups.google.com/'];
 138     results = $$('a[href*="google"]');
 139     testExpected(results, expected, "'a[href*=google]' selector");
 140
 141     expected = ['http://simon.incutio.com/archive/2003/03/25/#getElementsBySelector'];
 142     results = $$('a[rel="bookmark"]');
 143     testExpected(results, expected, "'a[rel=bookmark]' selector");
 144
 145     expected = ['http://diveintomark.org/'];
 146     results = $$('a[fakeattribute]');
 147     testExpected(results, expected, "'a[fakeattribute]' selector");
 148
 149     /* This doesn't work in IE due to silly DOM implementation
 150     expected = ['http://www.google.com/'];
 151     results = $$('a[title]');
 152     testExpected(results, expected, "'a[title]' selector");
 153     */
 154
 155     results = $$('p[lang|="en"]');
 156     is( results[0].firstChild.nodeValue, 'Nonninn', "'p[lang|=en]' selector");
 157
 158     expected = ['http://simon.incutio.com/archive/2003/03/25/#getElementsBySelector',
 159                 'http://www.google.com/',
 160                 'http://groups.google.com/',
 161                 'http://diveintomark.org/',
 162                 'http://www.yahoo.com/',
 163                 'http://simon.incutio.com/',
 164                 'http://www.example.com/insidespan'];
 165     results = $$('p > a');
 166     testExpected(results, expected, "'p > a' selector");
 167
 168     expected = ['http://www.example.com/insidespan'];
 169     results = $$('span > a');
 170     testExpected(results, expected, "'span > a' selector");
 171
 172     expected = ['http://groups.google.com/',
 173                 'http://www.example.com/link2',
 174                 'http://www.example.com/link3',
 175                 'http://www.example.com/link4',
 176                 'http://www.example.com/link6',
 177                 'http://www.example.com/link7',
 178                 'http://www.example.com/link8'];
 179     results = $$('a + a');
 180     testExpected(results, expected, "'a + a' selector");
 181
 182     expected = ['http://www.example.com/link1',
 183                 'http://www.example.com/link3',
 184                 'http://www.example.com/link6',
 185                 'http://www.example.com/link8'];
 186     results = $$('#sequence a:nth-child(odd)');
 187     testExpected(results, expected, "'#sequence a:nth-child(odd)' selector");
 188
 189     expected = ['http://www.example.com/link1',
 190                 'http://www.example.com/link3',
 191                 'http://www.example.com/link5',
 192                 'http://www.example.com/link7'];
 193     results = $$('#sequence a:nth-of-type(odd)');
 194     testExpected(results, expected, "'#sequence a:nth-of-type(odd)' selector");
 195
 196     expected = ['http://www.example.com/link1',
 197                 'http://www.example.com/link4',
 198                 'http://www.example.com/link7'];
 199     results = $$('#sequence a:nth-of-type(3n+1)');
 200     testExpected(results, expected, "'#sequence a:nth-of-type(3n+1)' selector");
 201
 202     expected = ['http://www.example.com/link5'];
 203     results = $$('#sequence a:nth-child(6)');
 204     testExpected(results, expected, "'#sequence a:nth-child(6)' selector");
 205
 206     expected = ['http://www.example.com/link5'];
 207     results = $$('#sequence a:nth-of-type(5)');
 208     testExpected(results, expected, "'#sequence a:nth-of-type(5)' selector");
 209
 210     expected =  [$('enabled'), $('checked')];
 211     results = $$('body :enabled');
 212     for (var i=0; i < results.length; i ++) {
 213         is( results[i], expected[i], "'body :enabled" + ' (' + i + ')');
 214     }
 215
 216     expected =  [$('disabled')];
 217     results = $$('body :disabled');
 218     for (var i=0; i < results.length; i ++) {
 219         is( results[i], expected[i], "'body :disabled" + ' (' + i + ')');
 220     }
 221
 222     expected =  [$('checked')];
 223     results = $$('body :checked');
 224     for (var i=0; i < results.length; i ++) {
 225         is( results[i], expected[i], "'body :checked" + ' (' + i + ')');
 226     }
 227
 228     expected = document.getElementsByTagName('p');
 229     results = $$('a[href$=outsidep] ~ *');
 230     for (var i=0; i < results.length; i ++) {
 231         is( results[i], expected[i+4], "'a[href$=outsidep] ~ *' selector" + ' (' + i + ')');
 232     }
 233
 234     expected = [document.documentElement];
 235     results = $$(':root');
 236     for (var i=0; i < results.length; i ++) {
 237         is( results[i], expected[i], "':root' selector" + ' (' + i + ')');
 238     }
 239
 240     expected = [$('multiclass')];
 241     results = $$('[class~=classnames]');
 242     for (var i=0; i < results.length; i ++) {
 243         is( results[i], expected[i], "'~=' attribute test" + ' (' + i + ')');
 244     }
 245
 246     var doc = MochiKit.MockDOM.createDocument();
 247     appendChildNodes(doc.body, A({"href": "http://www.example.com/insideAnotherDocument"}, "Inside a document"));
 248     withDocument(doc, function(){
 249         is( $$(":root")[0], doc, ":root on a different document" );
 250         is( $$("a")[0], doc.body.firstChild, "a inside a different document" );
 251     });
 252
 253     ok( true, "test suite finished!");
 254
 255
 256 } catch (err) {
 257
 258     var s = "test suite failure!\n";
 259     var o = {};
 260     var k = null;
 261     for (k in err) {
 262         // ensure unique keys?!
 263         if (!o[k]) {
 264             s +=  k + ": " + err[k] + "\n";
 265             o[k] = err[k];
 266         }
 267     }
 268     ok ( false, s );
 269
 270 }
 271 </script>
 272 </pre>
 273 </body>
 274 </html>