5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <title>jQuery Mobile Listview Integration Test</title>
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();
20 $.testHelper.asyncLoad([
22 "jquery.mobile.navigation",
24 "widgets/listview.filter",
25 "widgets/listview.autodividers",
28 [ "jquery.mobile.init" ],
29 [ "listview_core.js" ]
33 <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css" />
34 <link rel="stylesheet" href="../../../external/qunit.css"/>
36 <script src="../swarminject.js"></script>
37 <script src="../../../../../../tests/jqm-tchelper/tizen.testHelper.js"></script>
41 <h1 id="qunit-header">jQuery Mobile Listview Integration Test</h1>
42 <h2 id="qunit-banner"></h2>
43 <h2 id="qunit-userAgent"></h2>
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>
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>
60 <a href="cache-tests/nested.html" id="cached-tests"></a>
63 <div data-nstest-role='page' id='basic-link-results'>
64 <div data-nstest-role="header" data-nstest-position="inline">
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>
74 <div data-nstest-role="content">
75 <ul data-nstest-role="listview">
78 <li>pod of whales</li>
79 <li>quiver of cobras</li>
80 <li>troop of baboons</li>
83 <li class="linebreaknode">
89 <li>Shoal of Bass</li>
90 <li>Rhumba of rattlesnakes</li>
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>
102 <div data-nstest-role="content">
103 <ul data-nstest-role="listview" data-nstest-inset="true">
107 <ul data-nstest-role="listview">
114 <ul data-nstest-role="listview" data-nstest-inset="true">
118 <ul data-nstest-role="listview">
120 <ul data-nstest-role="listview">
121 <li>Item B-3-0-0</li>
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>
129 <li>Item B-3-0-2</li>
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>
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>
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>
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>
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>
171 <div data-nstest-role="content">
172 <ul data-nstest-role="listview">
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>
186 <div data-nstest-role="content">
187 <ul data-nstest-role="listview">
189 <a href="#split-list-link1">link one</a>
190 <a href="#split-list-link2">link second</a>
193 <a href="#split-list-link1">link one</a>
194 <a href="#split-list-link2">link second</a>
197 <a href="#split-list-link1">link one</a>
198 <a href="#split-list-link2">link second</a>
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>
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>
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>
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>
234 <div data-nstest-role="page" id="autodividers-test">
235 <div data-nstest-role="header" data-nstest-position="inline">
236 <h1>Autodivider Test</h1>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
344 <div data-nstest-role="content">
345 <ul data-nstest-role="listview" data-nstest-inset="true">
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>
359 <div data-nstest-role="content">
360 <ul data-nstest-role="listview" data-nstest-inset="true">
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>
373 <div id="list-theme-inherit" data-nstest-theme="b">
374 <ul data-nstest-role="listview">
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 & 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>
395 <div id="list-inset-filter-prototype" data-nstest-theme="b">
396 <ul data-nstest-role="listview" data-nstest-filter="true">
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">
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>
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>
434 </div><!-- /content -->
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>
446 </div><!-- /content -->
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">
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>
459 <div data-nstest-role="collapsible" data-nstest-content-theme="c">
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>
467 </div><!-- /content -->