libs/js/jquery-mobile-1.2.0/tests/unit/listview/index.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3 <head>
   4         <meta charset="utf-8">
   5         <meta name="viewport" content="width=device-width, initial-scale=1">
   6         <title>jQuery Mobile Listview Integration Test</title>
   7
   8         <script src="../../../external/requirejs/require.js"></script>
   9         <script src="../../../js/jquery.tag.inserter.js"></script>
  10         <script src="../jquery.setNameSpace.js"></script>
  11         <script src="../../jquery.testHelper.js"></script>
  12         <script src="../../../external/qunit.js"></script>
  13   <script type="text/javascript">
  14     // redirects from push-state-tests.html
  15     $( document ).bind( 'mobileinit', function(){
  16       $.testHelper.setPushState();
  17     });
  18   </script>
  19         <script>
  20                 $.testHelper.asyncLoad([
  21                         [
  22                                 "jquery.mobile.navigation",
  23                                 "widgets/listview",
  24                                 "widgets/listview.filter",
  25                                 "widgets/listview.autodividers",
  26                                 "widgets/collapsible"
  27                         ],
  28                         [ "jquery.mobile.init" ],
  29                         [ "listview_core.js" ]
  30                 ]);
  31         </script>
  32
  33         <link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile.css" />
  34         <link rel="stylesheet" href="../../../external/qunit.css"/>
  35
  36         <script src="../swarminject.js"></script>
  37         <script src="../../../../../../tests/jqm-tchelper/tizen.testHelper.js"></script>
  38 </head>
  39 <body>
  40
  41 <h1 id="qunit-header">jQuery Mobile Listview Integration Test</h1>
  42 <h2 id="qunit-banner"></h2>
  43 <h2 id="qunit-userAgent"></h2>
  44 <ol id="qunit-tests">
  45 </ol>
  46
  47 <!-- Basic Linked view test -->
  48 <div data-nstest-role="page" id='basic-linked-test'>
  49         <div data-nstest-role="header" data-nstest-position="inline">
  50                 <h1>Basic List View</h1>
  51         </div>
  52         <div data-nstest-role="content">
  53                 <ul data-nstest-role="listview">
  54                         <li><a href="#basic-link-results">Home</a></li>
  55                         <li><a href="#basic-link-results">Back</a></li>
  56                         <li><a href="#basic-link-results">Return</a></li>
  57                         <li><a href="#nested-list-test" id="nested-list-test-anchor">Nested List Test</a></li>
  58                 </ul>
  59         </div>
  60   <a href="cache-tests/nested.html" id="cached-tests"></a>
  61 </div>
  62
  63 <div data-nstest-role='page' id='basic-link-results'>
  64         <div data-nstest-role="header" data-nstest-position="inline">
  65                 <h1>Results</h1>
  66         </div>
  67 </div>
  68
  69 <!-- Nested List -->
  70 <div data-nstest-role="page" id='nested-list-test'>
  71         <div data-nstest-role="header" data-nstest-position="inline">
  72                 <h1>Basic List View</h1>
  73         </div>
  74         <div data-nstest-role="content">
  75                 <ul data-nstest-role="listview">
  76                         <li>Groups of animals
  77                                 <ul>
  78                                         <li>pod of whales</li>
  79                                         <li>quiver of cobras</li>
  80                                         <li>troop of baboons</li>
  81                                 </ul>
  82                         </li>
  83                         <li class="linebreaknode">
  84
  85                         More animals
  86
  87
  88                                 <ul>
  89                                         <li>Shoal of Bass</li>
  90                                         <li>Rhumba of rattlesnakes</li>
  91                                 </ul>
  92                         </li>
  93                 </ul>
  94         </div>
  95 </div>
  96
  97
  98 <div data-nstest-role="page" id='nested-lists-test'>
  99         <div data-nstest-role="header" data-nstest-position="inline">
 100                 <h1>Basic multiple lists view</h1>
 101         </div>
 102     <div data-nstest-role="content">
 103         <ul data-nstest-role="listview" data-nstest-inset="true">
 104             <li>Item 1</li>
 105             <li>Item 2</li>
 106             <li>Item 3
 107                 <ul data-nstest-role="listview">
 108                     <li>Item A-3-0</li>
 109                     <li>Item A-3-1</li>
 110                     <li>Item A-3-2</li>
 111                 </ul>
 112             </li>
 113         </ul>
 114         <ul data-nstest-role="listview" data-nstest-inset="true">
 115             <li>Item 1</li>
 116             <li>Item 2</li>
 117             <li>Item 3
 118                 <ul data-nstest-role="listview">
 119                     <li>Item B-3-0
 120                         <ul data-nstest-role="listview">
 121                                                         <li>Item B-3-0-0</li>
 122                                                         <li>Item B-3-0-1
 123                                                                 <ul data-nstest-role="listview">
 124                                                                         <li>Item B-3-0-1-0</li>
 125                                                                         <li>Item B-3-0-1-1</li>
 126                                                                         <li>Item B-3-0-1-2</li>
 127                                                                 </ul>
 128                                                         </li>
 129                                                         <li>Item B-3-0-2</li>
 130                                                 </ul>
 131                     </li>
 132                     <li>Item B-3-1
 133                                                 <ul data-nstest-role="listview">
 134                                                         <li>Item B-3-1-0</li>
 135                                                         <li>Item B-3-1-1</li>
 136                                                         <li>Item B-3-1-2</li>
 137                                                 </ul>
 138                     </li>
 139                     <li>Item B-3-2</li>
 140                 </ul>
 141             </li>
 142         </ul>
 143     </div>
 144 </div>
 145
 146 <!-- Numbered List -->
 147 <div data-nstest-role="page" id='numbered-list-test'>
 148         <div data-nstest-role="header" data-nstest-position="inline">
 149                 <h1>Basic List View</h1>
 150         </div>
 151         <div data-nstest-role="content">
 152                         <ol data-nstest-role="listview">
 153                                 <li><a href="#numbered-list-results">Number 1</a></li>
 154                                 <li><a href="#numbered-list-results">Number 2</a></li>
 155                                 <li><a href="#numbered-list-results">Number 3</a></li>
 156                         </ol>
 157         </div>
 158 </div>
 159
 160 <div data-nstest-role='page' id='numbered-list-results'>
 161         <div data-nstest-role="header" data-nstest-position="inline">
 162                 <h1>Numbered List</h1>
 163         </div>
 164 </div>
 165
 166 <!-- Read only List -->
 167 <div data-nstest-role="page" id='read-only-list-test'>
 168         <div data-nstest-role="header" data-nstest-position="inline">
 169                 <h1>Basic List View</h1>
 170         </div>
 171         <div data-nstest-role="content">
 172                 <ul data-nstest-role="listview">
 173                         <li>Read</li>
 174                         <li>Only</li>
 175                         <li>List</li>
 176                         <li>View</li>
 177                 </ul>
 178         </div>
 179 </div>
 180
 181 <!-- Split listview -->
 182 <div data-nstest-role="page" id='split-list-test'>
 183         <div data-nstest-role="header" data-nstest-position="inline">
 184                 <h1>Split List View</h1>
 185         </div>
 186         <div data-nstest-role="content">
 187                 <ul data-nstest-role="listview">
 188                         <li>
 189                                 <a href="#split-list-link1">link one</a>
 190                                 <a href="#split-list-link2">link second</a>
 191                         </li>
 192                         <li>
 193                                 <a href="#split-list-link1">link one</a>
 194                                 <a href="#split-list-link2">link second</a>
 195                         </li>
 196                         <li>
 197                                 <a href="#split-list-link1">link one</a>
 198                                 <a href="#split-list-link2">link second</a>
 199                         </li>
 200                 </ul>
 201         </div>
 202 </div>
 203
 204 <div data-nstest-role="page" id='split-list-link1'>
 205         <div data-nstest-role="header" data-nstest-position="inline">
 206                 <h1>Split List view 1</h1>
 207         </div>
 208 </div>
 209
 210 <div data-nstest-role="page" id='split-list-link2'>
 211         <div data-nstest-role="header" data-nstest-position="inline">
 212                 <h1>Split List view 2</h1>
 213         </div>
 214 </div>
 215
 216 <!-- List divider -->
 217 <div data-nstest-role="page" id='list-divider-test'>
 218         <div data-nstest-role="header" data-nstest-position="inline">
 219                 <h1>List Divider Test</h1>
 220         </div>
 221         <div data-nstest-role="content">
 222                 <ul data-nstest-role="listview">
 223                         <li>a is for aquaman</li>
 224                         <li>b is for batman</li>
 225                         <li data-nstest-role="list-divider">This is a list divider</li>
 226                         <li>c is for catwoman</li>
 227                         <li data-nstest-role="list-divider">This is another list divider</li>
 228                         <li>d is for darkwing</li>
 229                 </ul>
 230         </div>
 231 </div>
 232
 233 <!-- Autodivider -->
 234 <div data-nstest-role="page" id="autodividers-test">
 235         <div data-nstest-role="header" data-nstest-position="inline">
 236                 <h1>Autodivider Test</h1>
 237         </div>
 238         <div data-nstest-role="content">
 239                 <ul data-nstest-role="listview" data-nstest-autodividers="true">
 240                         <li data-nstest-role="list-divider">SHOULD REMOVE</li>
 241                         <li>a is for aquaman</li>
 242                         <li>b is for batman</li>
 243                         <li>c is for catwoman</li>
 244                         <li>d is for darkwing</li>
 245                 </ul>
 246         </div>
 247 </div>
 248
 249 <div data-nstest-role="page" id="autodividers-selector-test">
 250         <div data-nstest-role="header" data-nstest-position="inline">
 251                 <h1>Autodivider Selector Test</h1>
 252         </div>
 253         <div data-nstest-role="content">
 254                 <ul id="autodividers-selector-test-list1" data-nstest-role="listview" data-nstest-autodividers="true">
 255                         <li><a href="#">a is for aquaman</a></li>
 256                         <li>b is for batman</li>
 257                         <li><img><a href="">c is for catwoman</a><a href="">split</a></li>
 258                         <li><a href="#"><h2>d is for darkwing</h2><p>Some text</p></a></li>
 259                 </ul>
 260
 261                 <ul id="autodividers-selector-test-list2" data-nstest-role="listview" data-nstest-autodividers="true">
 262                         <li><div><span class="autodividers-selector-test-selectme">eddie</span> is for aquaman</div></li>
 263                         <li><div><span class="autodividers-selector-test-selectme">frankie</span> is for batman</div></li>
 264                         <li><div><span class="autodividers-selector-test-selectme">georgie</span> is for catwoman</div></li>
 265                         <li><div><span class="autodividers-selector-test-selectme">henry</span> is for darkwing</div></li>
 266                 </ul>
 267         </div>
 268 </div>
 269
 270 <!-- Search bar filter -->
 271 <div data-nstest-role="page" id='search-filter-test'>
 272         <div data-nstest-role="header" data-nstest-position="inline">
 273                 <h1>Split List View</h1>
 274         </div>
 275         <div data-nstest-role="content">
 276                 <ul data-nstest-role="listview" data-nstest-filter="true">
 277                         <li>a is for aquaman</li>
 278                         <li>b is for batman</li>
 279                         <li>c is for catwoman</li>
 280                         <li>d is for darkwing</li>
 281                 </ul>
 282         </div>
 283 </div>
 284
 285 <!-- Search bar filter -->
 286 <div data-nstest-role="page" id='search-customfilter-test'>
 287         <div data-nstest-role="header" data-nstest-position="inline">
 288                 <h1>Filtered List View</h1>
 289         </div>
 290         <div data-nstest-role="content">
 291                 <ul data-nstest-role="listview" data-nstest-filter="true">
 292                         <li>a is for aquaman</li>
 293                         <li>b is for batman</li>
 294                         <li>c is for catwoman</li>
 295                         <li>d is for darkwing</li>
 296                 </ul>
 297         </div>
 298 </div>
 299
 300 <!-- Search bar filter with list-dividers -->
 301 <div data-nstest-role="page" id='search-filter-with-dividers-test'>
 302         <div data-nstest-role="header" data-nstest-position="inline">
 303                 <h1>Split List View</h1>
 304         </div>
 305         <div data-nstest-role="content">
 306                 <ul data-nstest-role="listview" data-nstest-filter="true">
 307                         <li data-nstest-role="list-divider">a</li>
 308                         <li>a is for aquaman</li>
 309                         <li data-nstest-role="list-divider">b</li>
 310                         <li>b is for batman</li>
 311                         <li data-nstest-role="list-divider">c</li>
 312                         <li>c is for catwoman</li>
 313                         <li data-nstest-role="list-divider">d</li>
 314                         <li>d is for darkwing</li>
 315                 </ul>
 316         </div>
 317 </div>
 318
 319 <!-- Search bar filter inset -->
 320 <div data-nstest-role="page" id='search-filter-inset-test'>
 321         <div data-nstest-role="header" data-nstest-position="inline">
 322                 <h1>Inset Filter List View</h1>
 323         </div>
 324         <div data-nstest-role="content">
 325                 <ul data-nstest-role="listview" data-nstest-filter="true" data-nstest-inset="true">
 326                         <li>a is for aquaman</li>
 327                         <li>b is for batman</li>
 328                         <li>c is for catwoman</li>
 329                         <li>d is for darkwing</li>
 330                 </ul>
 331         </div>
 332 </div>
 333
 334 <!-- Programmatically generated list items !-->
 335 <div data-nstest-role="page" id="programmatically-generated-list">
 336         <ul data-nstest-role="listview" data-nstest-inset="true" id="programmatically-generated-list-items"></ul>
 337 </div>
 338
 339 <!-- Removing items from list -->
 340 <div data-nstest-role="page" id='removing-items-from-list-test'>
 341         <div data-nstest-role="header" data-nstest-position="inline">
 342                 <h1>Basic List View</h1>
 343         </div>
 344         <div data-nstest-role="content">
 345                 <ul data-nstest-role="listview" data-nstest-inset="true">
 346                         <li>Item 1</li>
 347                         <li>Item 2</li>
 348                         <li>Item 3</li>
 349                         <li>Item 4</li>
 350                 </ul>
 351         </div>
 352 </div>
 353
 354 <!-- Rounded corners inset list with variable items -->
 355 <div data-nstest-role="page" id='corner-rounded-test'>
 356         <div data-nstest-role="header" data-nstest-position="inline">
 357                 <h1>Basic List View</h1>
 358         </div>
 359         <div data-nstest-role="content">
 360                 <ul data-nstest-role="listview" data-nstest-inset="true">
 361                 </ul>
 362         </div>
 363 </div>
 364
 365 <div data-nstest-role="page" id="enhancetest">
 366         <ul data-nstest-role="listview">
 367                 <li><a href="#basic-link-results">Home</a></li>
 368                 <li><a href="#basic-link-results">Back</a></li>
 369                 <li><a href="#basic-link-results">Return</a></li>
 370         </ul>
 371 </div>
 372
 373 <div id="list-theme-inherit" data-nstest-theme="b">
 374   <ul data-nstest-role="listview">
 375     <li>foo</li>
 376   </ul>
 377 </div>
 378
 379 <div data-nstest-role="page" id="ui-li-has-test">
 380   <div data-nstest-role="content">
 381         <p>Right padding on item 1 is OK (75px).</p>
 382         <p>Right padding on items 2 &amp; 3 should probably be around 30 or 35 (not 25).</p>
 383         <p>Right padding on item 4 should be 15px to match the left side.</p>
 384         <ol data-nstest-role="listview" data-nstest-inset="true">
 385           <li><a href="#">Link LI with counter --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------<span class="ui-li-count">123</span></a></li>
 386           <li><a href="#">Link LI without counter -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</a></li>
 387           <li><a href="#page1">Page1 Link LI without counter -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</a><a href="#page2"></a></li>
 388           <li>Static LI with counter ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------<span class="ui-li-count">123</span></li>
 389           <li>Static LI without counter ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</li>
 390         </ol>
 391   </div>
 392 </div>
 393
 394
 395 <div id="list-inset-filter-prototype" data-nstest-theme="b">
 396         <ul data-nstest-role="listview" data-nstest-filter="true">
 397                 <li>foo</li>
 398                 <li>bar</li>
 399         </ul>
 400 </div>
 401
 402 <div id="list-inset-filter-data-attr" data-nstest-theme="b">
 403         <ul data-nstest-role="listview" data-nstest-filter="true" data-nstest-inset="true">
 404                 <li>foo</li>
 405                 <li>bar</li>
 406         </ul>
 407 </div>
 408
 409 <div data-nstest-role="page" id="split-list-icon">
 410         <div data-nstest-role="content">
 411                 <ul data-nstest-role="listview" data-nstest-split-icon="delete">
 412                         <li data-nstest-icon="star"><a href="#">Star</a><a href="#">Star</a></li>
 413                         <li data-nstest-icon="plug"><a href="#">Plus</a><a href="#">Plus</a></li>
 414                         <li><a href="#">Default</a><a href="#">Default</a></li>
 415       <!-- respect the child element icon -->
 416                         <li data-nstest-icon="star"><a href="#">Default</a><a data-nstest-icon="plug" href="#">Default</a></li>
 417                 </ul>
 418         </div>
 419 </div>
 420
 421 <div data-nstest-role="page" id="list-divider-ignore-link">
 422   <div data-nstest-role="content">
 423     <ul data-nstest-role="listview">
 424       <li data-nstest-role="list-divider">A</li>
 425       <li><a href="index.html">Adam Kinkaid</a></li>
 426       <li><a href="index.html">Alex Wickerham</a></li>
 427       <li><a href="index.html">Avery Johnson</a></li>
 428       <li data-nstest-role="list-divider" id="ignored-link">B has a <a href="#">link</a></li>
 429       <li><a href="index.html">Bob Cabot</a></li>
 430       <li data-nstest-role="list-divider">C</li>
 431       <li><a href="index.html">Caleb Booth</a></li>
 432       <li><a href="index.html">Christopher Adams</a></li>
 433     </ul>
 434   </div><!-- /content -->
 435 </div>
 436
 437 <div data-nstest-role="page" id="list-last-visible-item-border">
 438         <div data-nstest-role="content">
 439                 <ul data-nstest-role="listview">
 440                         <li class="listitem"><a href="index.html">Adam Kinkaid</a></li>
 441                         <li class="listitem"><a href="index.html">Alex Wickerham</a></li>
 442                         <li class="listitem ui-screen-hidden"><a href="index.html">Bob Cabot</a></li>
 443                         <li id="lastitem"><a href="index.html">Caleb Booth</a></li>
 444                         <li class="listitem ui-screen-hidden"><a href="index.html">Christopher Adams</a></li>
 445                 </ul>
 446         </div><!-- /content -->
 447 </div>
 448
 449 <div data-nstest-role="page" id="list-inside-collapsible-content">
 450         <div data-nstest-role="content">
 451                 <div data-nstest-role="collapsible" data-nstest-content-theme="c">
 452                         <h1>Heading</h1>
 453                         <ul data-nstest-role="listview">
 454                                 <li><a href="index.html">Adam Kinkaid</a></li>
 455                                 <li><a href="index.html">Alex Wickerham</a></li>
 456                                 <li id="noninsetlastli"><a href="index.html">Caleb Booth</a></li>
 457                         </ul>
 458                 </div>
 459                 <div data-nstest-role="collapsible" data-nstest-content-theme="c">
 460                         <h1>Heading</h1>
 461                         <ul data-nstest-role="listview" data-nstest-inset="true">
 462                                 <li><a href="index.html">Adam Kinkaid</a></li>
 463                                 <li><a href="index.html">Alex Wickerham</a></li>
 464                                 <li id="insetlastli"><a href="index.html">Caleb Booth</a></li>
 465                         </ul>
 466                 </div>
 467   </div><!-- /content -->
 468 </div>
 469
 470 </body>
 471 </html>