| 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> |