]> git.proxmox.com Git - extjs.git/blame - extjs/packages/core/test/specs/scroll/TouchScroller.js
add extjs 6.0.1 sources
[extjs.git] / extjs / packages / core / test / specs / scroll / TouchScroller.js
CommitLineData
6527f429
DM
1(Ext.isIE9m ? xdescribe : describe)('Ext.scroll.TouchScroller', function() {\r
2 var el, scroller, innerElement;\r
3\r
4 function makeScroller(config) {\r
5 scroller = new Ext.scroll.TouchScroller(Ext.apply({\r
6 element: el,\r
7 autoRefresh: false\r
8 }, config));\r
9 }\r
10\r
11 beforeEach(function() {\r
12 el = Ext.getBody().createChild({\r
13 style: 'height:100px;width:100px;'\r
14 });\r
15 });\r
16\r
17 afterEach(function() {\r
18 if (scroller) {\r
19 scroller.destroy();\r
20 }\r
21 if (el) {\r
22 el.destroy();\r
23 }\r
24 });\r
25\r
26 describe("innerElement", function() {\r
27 it("should automatically wrap the content in a scroller element", function() {\r
28 el.appendChild({\r
29 id: 'foo'\r
30 }, true);\r
31\r
32 el.appendChild({\r
33 id: 'bar'\r
34 }, true);\r
35\r
36 makeScroller();\r
37\r
38 innerElement = scroller.getInnerElement();\r
39\r
40 expect(el.dom.childNodes.length).toBe(1);\r
41 expect(el.first()).toBe(innerElement);\r
42 expect(Ext.fly('foo').parent()).toBe(innerElement);\r
43 expect(Ext.fly('bar').parent()).toBe(innerElement);\r
44 });\r
45\r
46 it("should wrap the content in a scroller element when the first child is a text node", function() {\r
47 // https://sencha.jira.com/browse/EXTJS-16075\r
48 // When using a container with a layout that does not provide a innerElement\r
49 // for the scroller (such as fit layout) we need to wrap the content in an\r
50 // innerElement (even if that content is just a text node)\r
51 el.setHtml('foo');\r
52\r
53 makeScroller();\r
54\r
55 innerElement = scroller.getInnerElement();\r
56 expect(innerElement.dom.innerHTML).toBe('foo');\r
57 });\r
58\r
59 it("should use the first child of the element as the innerElement if it has the scrollerCls", function() {\r
60 innerElement = el.appendChild({\r
61 cls: 'x-scroll-scroller'\r
62 });\r
63\r
64 makeScroller();\r
65\r
66 expect(scroller.getInnerElement()).toBe(innerElement);\r
67\r
68 innerElement.destroy();\r
69 });\r
70\r
71 describe("configuring", function() {\r
72 afterEach(function() {\r
73 var innerElement = scroller.getInnerElement();\r
74\r
75 if (innerElement) {\r
76 scroller.getInnerElement().destroy();\r
77 }\r
78 });\r
79\r
80 it("should accept an HTMLElement", function() {\r
81 innerElement = document.createElement('div');\r
82 el.dom.appendChild(innerElement);\r
83\r
84 makeScroller({\r
85 innerElement: innerElement\r
86 });\r
87\r
88 expect(scroller.getInnerElement().isElement).toBe(true);\r
89 expect(scroller.getInnerElement().dom).toBe(innerElement);\r
90 });\r
91\r
92 it("should accept an Element ID", function() {\r
93 innerElement = document.createElement('div');\r
94 innerElement.id = 'theScrollerEl';\r
95 el.dom.appendChild(innerElement);\r
96\r
97 makeScroller({\r
98 innerElement: 'theScrollerEl'\r
99 });\r
100\r
101 expect(scroller.getInnerElement().isElement).toBe(true);\r
102 expect(scroller.getInnerElement().dom).toBe(innerElement);\r
103 });\r
104\r
105 it("should accept an Ext.dom.Element", function() {\r
106 innerElement = el.createChild();\r
107\r
108 makeScroller({\r
109 innerElement: innerElement\r
110 });\r
111\r
112 expect(scroller.getInnerElement()).toBe(innerElement);\r
113 });\r
114\r
115 it("should throw an error if element with given id not found", function() {\r
116 expect(function() {\r
117 makeScroller({\r
118 innerElement: 'foobarelement'\r
119 });\r
120 }).toThrow("Cannot create Ext.scroll.TouchScroller instance with null innerElement");\r
121 });\r
122 });\r
123 });\r
124\r
125 describe("css classes", function() {\r
126 it("should add the 'x-scroll-container' class to the element", function() {\r
127 makeScroller();\r
128 expect(el).toHaveCls('x-scroll-container');\r
129 });\r
130\r
131 it("should add the 'x-scroll-scroller' class to a generated innerElement", function() {\r
132 makeScroller();\r
133 expect(scroller.getInnerElement()).toHaveCls('x-scroll-scroller');\r
134 });\r
135\r
136 it("should add the 'x-scroll-scroller' class to a configured innerElement", function() {\r
137 innerElement = el.createChild();\r
138 makeScroller({\r
139 innerElement: innerElement\r
140 });\r
141\r
142 expect(scroller.getInnerElement()).toHaveCls('x-scroll-scroller');\r
143 innerElement.destroy();\r
144 });\r
145 });\r
146\r
147 describe("x", function() {\r
148 function makeOverflow(cfg) {\r
149 el.appendChild({\r
150 style: 'height:100px;width:200px;'\r
151 }, true);\r
152\r
153 makeScroller(cfg);\r
154 }\r
155\r
156 function makeNoOverflow(cfg) {\r
157 el.appendChild({\r
158 style: 'height:100px;width:100px;'\r
159 }, true);\r
160\r
161 makeScroller(cfg);\r
162 }\r
163\r
164 it("should enable the x axis by default if content overflows horizontally", function() {\r
165 makeOverflow();\r
166\r
167 expect(scroller.isAxisEnabled('x')).toBe(true);\r
168 });\r
169\r
170 it("should not enable the x axis by default if content does not overflow horizontally", function() {\r
171 makeNoOverflow();\r
172\r
173 expect(scroller.isAxisEnabled('x')).toBe(false);\r
174 });\r
175\r
176 it("should enable the x axis when x is true if content overflows horizontally", function() {\r
177 makeOverflow({\r
178 x: true\r
179 });\r
180\r
181 expect(scroller.isAxisEnabled('x')).toBe(true);\r
182 });\r
183\r
184 it("should not enable the x axis when x is true if content does not overflow horizontally", function() {\r
185 makeNoOverflow({\r
186 x: true\r
187 });\r
188\r
189 expect(scroller.isAxisEnabled('x')).toBe(false);\r
190 });\r
191\r
192 it("should enable the x axis when x is 'auto' if content overflows horizontally", function() {\r
193 makeOverflow({\r
194 x: 'auto'\r
195 });\r
196\r
197 expect(scroller.isAxisEnabled('x')).toBe(true);\r
198 });\r
199\r
200 it("should not enable the x axis when x is 'auto' if content does not overflow horizontally", function() {\r
201 makeNoOverflow({\r
202 x: 'auto'\r
203 });\r
204\r
205 expect(scroller.isAxisEnabled('x')).toBe(false);\r
206 });\r
207\r
208 it("should enable the x axis when x is 'scroll' if content overflows horizontally", function() {\r
209 makeOverflow({\r
210 x: 'scroll'\r
211 });\r
212\r
213 expect(scroller.isAxisEnabled('x')).toBe(true);\r
214 });\r
215\r
216 it("should enable the x axis when x is 'scroll' if content does not overflow horizontally", function() {\r
217 makeNoOverflow({\r
218 x: 'scroll'\r
219 });\r
220\r
221 expect(scroller.isAxisEnabled('x')).toBe(true);\r
222 });\r
223\r
224 it("should not enable the x axis when x is false if content overflows horizontally", function() {\r
225 makeOverflow({\r
226 x: false\r
227 });\r
228\r
229 expect(scroller.isAxisEnabled('x')).toBe(false);\r
230 });\r
231\r
232 it("should not enable the x axis when x is false if content does not overflow horizontally", function() {\r
233 makeNoOverflow({\r
234 x: false\r
235 });\r
236\r
237 expect(scroller.isAxisEnabled('x')).toBe(false);\r
238 });\r
239\r
240 it("should disable the x axis when moving from true to false", function() {\r
241 makeOverflow({\r
242 x: true\r
243 });\r
244\r
245 scroller.setX(false);\r
246\r
247 expect(scroller.isAxisEnabled('x')).toBe(false);\r
248 });\r
249\r
250 it("should enable the x axis when moving from false to true", function() {\r
251 makeOverflow({\r
252 x: false\r
253 });\r
254\r
255 scroller.setX(true);\r
256\r
257 expect(scroller.isAxisEnabled('x')).toBe(true);\r
258 });\r
259 });\r
260\r
261 describe("y", function() {\r
262 function makeOverflow(cfg) {\r
263 el.appendChild({\r
264 style: 'height:200px;width:100px;'\r
265 }, true);\r
266\r
267 makeScroller(cfg);\r
268 }\r
269\r
270 function makeNoOverflow(cfg) {\r
271 el.appendChild({\r
272 style: 'height:100px;width:100px;'\r
273 }, true);\r
274\r
275 makeScroller(cfg);\r
276 }\r
277\r
278 it("should enable the y axis by default if content overflows vertically", function() {\r
279 makeOverflow();\r
280\r
281 expect(scroller.isAxisEnabled('y')).toBe(true);\r
282 });\r
283\r
284 it("should not enable the y axis by default if content does not overflow vertically", function() {\r
285 makeNoOverflow();\r
286\r
287 expect(scroller.isAxisEnabled('y')).toBe(false);\r
288 });\r
289\r
290 it("should enable the y axis when y is true if content overflows vertically", function() {\r
291 makeOverflow({\r
292 y: true\r
293 });\r
294\r
295 expect(scroller.isAxisEnabled('y')).toBe(true);\r
296 });\r
297\r
298 it("should not enable the y axis when y is true if content does not overflow vertically", function() {\r
299 makeNoOverflow({\r
300 y: true\r
301 });\r
302\r
303 expect(scroller.isAxisEnabled('y')).toBe(false);\r
304 });\r
305\r
306 it("should enable the y axis when y is 'auto' if content overflows vertically", function() {\r
307 makeOverflow({\r
308 y: 'auto'\r
309 });\r
310\r
311 expect(scroller.isAxisEnabled('y')).toBe(true);\r
312 });\r
313\r
314 it("should not enable the y axis when y is 'auto' if content does not overflow vertically", function() {\r
315 makeNoOverflow({\r
316 y: 'auto'\r
317 });\r
318\r
319 expect(scroller.isAxisEnabled('y')).toBe(false);\r
320 });\r
321\r
322 it("should enable the y axis when y is 'scroll' if content overflows vertically", function() {\r
323 makeOverflow({\r
324 y: 'scroll'\r
325 });\r
326\r
327 expect(scroller.isAxisEnabled('y')).toBe(true);\r
328 });\r
329\r
330 it("should enable the y axis when y is 'scroll' if content does not overflow vertically", function() {\r
331 makeNoOverflow({\r
332 y: 'scroll'\r
333 });\r
334\r
335 expect(scroller.isAxisEnabled('y')).toBe(true);\r
336 });\r
337\r
338 it("should not enable the y axis when y is false if content overflows vertically", function() {\r
339 makeOverflow({\r
340 y: false\r
341 });\r
342\r
343 expect(scroller.isAxisEnabled('y')).toBe(false);\r
344 });\r
345\r
346 it("should not enable the y axis when y is false if content does not overflow vertically", function() {\r
347 makeNoOverflow({\r
348 y: false\r
349 });\r
350\r
351 expect(scroller.isAxisEnabled('y')).toBe(false);\r
352 });\r
353\r
354 it("should disable the y axis when moving from true to false", function() {\r
355 makeOverflow({\r
356 y: true\r
357 });\r
358\r
359 scroller.setY(false);\r
360\r
361 expect(scroller.isAxisEnabled('y')).toBe(false);\r
362 });\r
363\r
364 it("should enable the y axis when moving from false to true", function() {\r
365 makeOverflow({\r
366 y: false\r
367 });\r
368\r
369 scroller.setY(true);\r
370\r
371 expect(scroller.isAxisEnabled('y')).toBe(true);\r
372 });\r
373 });\r
374\r
375 describe("direction", function() {\r
376 it("should set x:true and y:true when direction is 'auto'", function() {\r
377 makeScroller({\r
378 direction: 'auto'\r
379 });\r
380\r
381 expect(scroller.getX()).toBe(true);\r
382 expect(scroller.getY()).toBe(true);\r
383 });\r
384\r
385 it("should set x:'scroll' and y:'scroll' direction is 'both'", function() {\r
386 makeScroller({\r
387 direction: 'both'\r
388 });\r
389\r
390 expect(scroller.getX()).toBe('scroll');\r
391 expect(scroller.getY()).toBe('scroll');\r
392 });\r
393\r
394 it("should set y:true when direction is 'vertical'", function() {\r
395 makeScroller({\r
396 direction: 'vertical'\r
397 });\r
398\r
399 expect(scroller.getX()).toBe(false);\r
400 expect(scroller.getY()).toBe(true);\r
401 });\r
402\r
403 it("should set x:true on the element when direction is 'horizontal'", function() {\r
404 makeScroller({\r
405 direction: 'horizontal'\r
406 });\r
407\r
408 expect(scroller.getX()).toBe(true);\r
409 expect(scroller.getY()).toBe(false);\r
410 });\r
411 });\r
412\r
413 describe("getSize", function() {\r
414 beforeEach(function() {\r
415 el.appendChild({\r
416 style: 'height:200px;width:300px;'\r
417 }, true);\r
418 });\r
419\r
420 it("should return the content size with x:auto and y:auto", function() {\r
421 makeScroller();\r
422 expect(scroller.getSize()).toEqual({\r
423 x: 300,\r
424 y: 200\r
425 });\r
426 });\r
427\r
428 it("should return the content size with x:scroll and y:scroll", function() {\r
429 makeScroller({\r
430 x: 'scroll',\r
431 y: 'scroll'\r
432 });\r
433 expect(scroller.getSize()).toEqual({\r
434 x: 300,\r
435 y: 200\r
436 });\r
437 });\r
438\r
439 it("should return the content size with x:false and y:false", function() {\r
440 makeScroller({\r
441 x: false,\r
442 y: false\r
443 });\r
444\r
445 expect(scroller.getSize()).toEqual({\r
446 x: 300,\r
447 y: 200\r
448 });\r
449 });\r
450\r
451 it("should return the content size with x:false and y:auto", function() {\r
452 makeScroller({\r
453 x: false,\r
454 y: true\r
455 });\r
456\r
457 expect(scroller.getSize()).toEqual({\r
458 x: 300,\r
459 y: 200\r
460 });\r
461 });\r
462\r
463 it("should return the content size with x:auto and y:false", function() {\r
464 makeScroller({\r
465 x: true,\r
466 y: false\r
467 });\r
468\r
469 expect(scroller.getSize()).toEqual({\r
470 x: 300,\r
471 y: 200\r
472 });\r
473 });\r
474\r
475 it("should return the content size with x:false and y:scroll", function() {\r
476 makeScroller({\r
477 x: false,\r
478 y: 'scroll'\r
479 });\r
480\r
481 expect(scroller.getSize()).toEqual({\r
482 x: 300,\r
483 y: 200\r
484 });\r
485 });\r
486\r
487 it("should return the content size with x:scroll and y:false", function() {\r
488 makeScroller({\r
489 x: 'scroll',\r
490 y: false\r
491 });\r
492\r
493 expect(scroller.getSize()).toEqual({\r
494 x: 300,\r
495 y: 200\r
496 });\r
497 });\r
498\r
499 it("should allow absolutely positioned elements to contribute to the size", function() {\r
500 el.appendChild({\r
501 style: 'position:absolute;height:50px;width:50px;left:400px;top:0px;'\r
502 });\r
503\r
504 el.appendChild({\r
505 style: 'position:absolute;height:50px;width:50px;top:500px;left:0px;'\r
506 });\r
507\r
508 makeScroller();\r
509\r
510 expect(scroller.getSize()).toEqual({\r
511 x: 450,\r
512 y: 550\r
513 });\r
514 });\r
515 });\r
516\r
517 describe("setSize", function() {\r
518 it("should set the size", function() {\r
519 makeScroller();\r
520 scroller.setSize({\r
521 x: 300,\r
522 y: 200\r
523 });\r
524\r
525 expect(scroller.getSize()).toEqual({\r
526 x: 300,\r
527 y: 200\r
528 });\r
529 });\r
530\r
531 it("should unset the size", function() {\r
532 makeScroller();\r
533 scroller.setSize({\r
534 x: 300,\r
535 y: 200\r
536 });\r
537\r
538 scroller.setSize(null);\r
539\r
540 expect(scroller.getSize()).toEqual({\r
541 x: 100,\r
542 y: 100\r
543 });\r
544 });\r
545\r
546 it("should set the size on both axes to a single number", function() {\r
547 makeScroller();\r
548 scroller.setSize(200);\r
549\r
550 expect(scroller.getSize()).toEqual({\r
551 x: 200,\r
552 y: 200\r
553 });\r
554 });\r
555\r
556 it("should set the x size", function() {\r
557 makeScroller();\r
558 scroller.setSize({\r
559 x: 200\r
560 });\r
561\r
562 expect(scroller.getSize()).toEqual({\r
563 x: 200,\r
564 y: 100\r
565 });\r
566 });\r
567\r
568 it("should set the y size", function() {\r
569 makeScroller();\r
570 scroller.setSize({\r
571 y: 200\r
572 });\r
573\r
574 expect(scroller.getSize()).toEqual({\r
575 x: 100,\r
576 y: 200\r
577 });\r
578 });\r
579 });\r
580\r
581 describe("getClientSize", function() {\r
582 var scrollbarWidth = 0,\r
583 scrollbarHeight = 0;\r
584\r
585 if (Ext.supports.touchScroll === 1) {\r
586 // Some touch scroll platforms use native DOM scrolling and show scrollbars\r
587 // We must account for these when calculating expected client sizes.\r
588 scrollbarWidth = Ext.getScrollbarSize().width;\r
589 scrollbarHeight = Ext.getScrollbarSize().height;\r
590 }\r
591\r
592 beforeEach(function() {\r
593 el.destroy();\r
594\r
595 el = Ext.getBody().createChild({\r
596 style: {\r
597 height: '200px',\r
598 width: '200px',\r
599 borderColor: 'red',\r
600 borderStyle: 'solid',\r
601 borderWidth: '10px 20px',\r
602 padding: '30px 40px'\r
603 }\r
604 });\r
605 });\r
606\r
607 function makeNumbers() {\r
608 var content = [],\r
609 i;\r
610\r
611 for (i = 0; i < 100; ++i) {\r
612 content.push(i);\r
613 }\r
614\r
615 return content;\r
616 }\r
617\r
618 it("should return the clientWidth of the element", function() {\r
619 el.setHtml(makeNumbers().join('<br />'));\r
620\r
621 makeScroller();\r
622\r
623 var size = scroller.getClientSize();\r
624 expect(size.x).toBe(200 - (20 * 2) - scrollbarWidth);\r
625 expect(size.y).toBe(200 - (10 * 2));\r
626 });\r
627\r
628 it("should return the clientHeight of the element", function() {\r
629 el.setHtml(makeNumbers().join(''));\r
630 \r
631 makeScroller();\r
632\r
633 var size = scroller.getClientSize();\r
634 expect(size.x).toBe(200 - (20 * 2));\r
635 expect(size.y).toBe(200 - (10 * 2) - scrollbarHeight);\r
636 });\r
637\r
638 it("should read by the clientWidth and clientHeight of the element", function() {\r
639 var content = makeNumbers();\r
640 content[0] = makeNumbers().join('');\r
641 el.setHtml(content.join('<br />'));\r
642 \r
643 makeScroller();\r
644\r
645 var size = scroller.getClientSize();\r
646 expect(size.x).toBe(200 - (20 * 2) - scrollbarWidth);\r
647 expect(size.y).toBe(200 - (10 * 2) - scrollbarHeight);\r
648 });\r
649 });\r
650\r
651 describe("scrollTo", function() {\r
652 function makeOverflow(cfg) {\r
653 el.appendChild({\r
654 style: 'height:200px;width:300px;'\r
655 }, true);\r
656\r
657 makeScroller(cfg);\r
658 }\r
659\r
660 function makeNoOverflow(cfg) {\r
661 el.appendChild({\r
662 style: 'height:100px;width:100px;'\r
663 }, true);\r
664\r
665 makeScroller(cfg);\r
666 }\r
667\r
668 it("should scroll on the x axis", function() {\r
669 makeOverflow();\r
670\r
671 scroller.scrollTo(50, 0);\r
672\r
673 expect(scroller.getPosition()).toEqual({\r
674 x: 50,\r
675 y: 0\r
676 });\r
677 });\r
678\r
679 it("should scroll on the x axis when the x axis is disabled", function() {\r
680 makeOverflow({\r
681 x: false\r
682 });\r
683\r
684 scroller.scrollTo(50, 0);\r
685\r
686 expect(scroller.getPosition()).toEqual({\r
687 x: 50,\r
688 y: 0\r
689 });\r
690 });\r
691\r
692 it("should not scroll on the x axis if the content does not overflow horizontally", function() {\r
693 makeNoOverflow();\r
694\r
695 scroller.scrollTo(50, 0);\r
696\r
697 expect(scroller.getPosition()).toEqual({\r
698 x: 0,\r
699 y: 0\r
700 });\r
701 });\r
702\r
703 it("should constrain to the max x position", function() {\r
704 makeOverflow();\r
705\r
706 scroller.scrollTo(250, 0);\r
707\r
708 expect(scroller.getPosition()).toEqual({\r
709 x: 200,\r
710 y: 0\r
711 });\r
712 });\r
713\r
714 it("should scroll on the y axis", function() {\r
715 makeOverflow();\r
716\r
717 scroller.scrollTo(0, 50);\r
718\r
719 expect(scroller.getPosition()).toEqual({\r
720 x: 0,\r
721 y: 50\r
722 });\r
723 });\r
724\r
725 it("should scroll on the y axis when the y axis is disabled", function() {\r
726 makeOverflow({\r
727 y: false\r
728 });\r
729\r
730 scroller.scrollTo(0, 50);\r
731\r
732 expect(scroller.getPosition()).toEqual({\r
733 x: 0,\r
734 y: 50\r
735 });\r
736 });\r
737\r
738 it("should not scroll on the y axis if the content does not overflow vertically", function() {\r
739 makeNoOverflow();\r
740\r
741 scroller.scrollTo(0, 50);\r
742\r
743 expect(scroller.getPosition()).toEqual({\r
744 x: 0,\r
745 y: 0\r
746 });\r
747 });\r
748\r
749 it("should constrain to the max y position", function() {\r
750 makeOverflow();\r
751\r
752 scroller.scrollTo(0, 250);\r
753\r
754 expect(scroller.getPosition()).toEqual({\r
755 x: 0,\r
756 y: 100\r
757 });\r
758 });\r
759\r
760 it("should scroll on both axes", function() {\r
761 makeOverflow();\r
762\r
763 scroller.scrollTo(50, 60);\r
764\r
765 expect(scroller.getPosition()).toEqual({\r
766 x: 50,\r
767 y: 60\r
768 });\r
769 });\r
770\r
771 it("should constrain to max x and y", function() {\r
772 makeOverflow();\r
773\r
774 scroller.scrollTo(300, 300);\r
775\r
776 expect(scroller.getPosition()).toEqual({\r
777 x: 200,\r
778 y: 100\r
779 });\r
780 });\r
781\r
782 it("should scroll to max x using Infinity", function() {\r
783 makeOverflow();\r
784\r
785 scroller.scrollTo(Infinity, 0);\r
786\r
787 expect(scroller.getPosition()).toEqual({\r
788 x: 200,\r
789 y: 0\r
790 });\r
791 });\r
792\r
793 it("should scroll to max y using Infinity", function() {\r
794 makeOverflow();\r
795\r
796 scroller.scrollTo(0, Infinity);\r
797\r
798 expect(scroller.getPosition()).toEqual({\r
799 x: 0,\r
800 y: 100\r
801 });\r
802 });\r
803\r
804 it("should scroll to max x and y using Infinity", function() {\r
805 makeOverflow();\r
806\r
807 scroller.scrollTo(Infinity, Infinity);\r
808\r
809 expect(scroller.getPosition()).toEqual({\r
810 x: 200,\r
811 y: 100\r
812 });\r
813 });\r
814\r
815 it("should ignore x if null is passed", function() {\r
816 makeOverflow();\r
817\r
818 scroller.scrollTo(10, 10);\r
819\r
820 scroller.scrollTo(null, 20);\r
821\r
822 expect(scroller.getPosition()).toEqual({\r
823 x: 10,\r
824 y: 20\r
825 });\r
826 });\r
827\r
828 it("should ignore y if null is passed", function() {\r
829 makeOverflow();\r
830\r
831 scroller.scrollTo(10, 10);\r
832\r
833 scroller.scrollTo(20, null);\r
834\r
835 expect(scroller.getPosition()).toEqual({\r
836 x: 20,\r
837 y: 10\r
838 });\r
839 });\r
840\r
841 it("should ignore x and y if both null", function() {\r
842 makeOverflow();\r
843\r
844 scroller.scrollTo(10, 10);\r
845\r
846 scroller.scrollTo(null, null);\r
847\r
848 expect(scroller.getPosition()).toEqual({\r
849 x: 10,\r
850 y: 10\r
851 });\r
852 });\r
853\r
854 it("should scroll to negative offset from max x", function() {\r
855 makeOverflow();\r
856\r
857 scroller.scrollTo(-20, 0);\r
858\r
859 expect(scroller.getPosition()).toEqual({\r
860 x: 180,\r
861 y: 0\r
862 });\r
863 });\r
864\r
865 it("should scroll to negative offset from max y", function() {\r
866 makeOverflow();\r
867\r
868 scroller.scrollTo(0, -20);\r
869\r
870 expect(scroller.getPosition()).toEqual({\r
871 x: 0,\r
872 y: 80\r
873 });\r
874 });\r
875\r
876 it("should scroll to negative offset from max x and y", function() {\r
877 makeOverflow();\r
878\r
879 scroller.scrollTo(-20, -20);\r
880\r
881 expect(scroller.getPosition()).toEqual({\r
882 x: 180,\r
883 y: 80\r
884 });\r
885 });\r
886 \r
887 it('should fire scrollstart and scrollend', function() {\r
888 var scrollStartFired = 0,\r
889 scrollEndFired = 0;\r
890\r
891 makeOverflow();\r
892 scroller.on({\r
893 scrollstart: function() {\r
894 scrollStartFired++;\r
895 },\r
896 scrollend: function() {\r
897 scrollEndFired++;\r
898 }\r
899 });\r
900 scroller.scrollTo(20, 20);\r
901\r
902 // Wait for scroll to finish. We must wait for any extraneous\r
903 // events to fire. Each should only fire once.\r
904 waits(50);\r
905 runs(function() {\r
906 expect(scrollStartFired).toBe(1);\r
907 expect(scrollEndFired).toBe(1);\r
908 });\r
909 });\r
910\r
911 it('should fire scrollstart and scrollend when animated', function() {\r
912 var scrollStartFired = 0,\r
913 scrollEndFired = 0;\r
914\r
915 makeOverflow();\r
916 scroller.on({\r
917 scrollstart: function() {\r
918 scrollStartFired++;\r
919 },\r
920 scrollend: function() {\r
921 scrollEndFired++;\r
922 }\r
923 });\r
924 scroller.scrollTo(20, 20, true);\r
925\r
926 // Wait for scroll animation to finish. We must wait for any extraneous\r
927 // events to fire. Each should only fire once.\r
928 waits(1000);\r
929 runs(function() {\r
930 expect(scrollStartFired).toBe(1);\r
931 expect(scrollEndFired).toBe(1);\r
932 });\r
933 });\r
934 });\r
935\r
936 describe("scrollBy", function() {\r
937 beforeEach(function() {\r
938 el.appendChild({\r
939 style: 'height:200px;width:300px;'\r
940 }, true);\r
941 });\r
942\r
943 it("should set the scroll position", function() {\r
944 makeScroller();\r
945\r
946 scroller.scrollTo(20, 10);\r
947\r
948 expect(scroller.getPosition()).toEqual({\r
949 x: 20,\r
950 y: 10\r
951 });\r
952\r
953 scroller.scrollBy(-10, -5);\r
954\r
955 expect(scroller.getPosition()).toEqual({\r
956 x: 10,\r
957 y: 5\r
958 });\r
959 });\r
960\r
961 it("should ignore x if null is passed", function() {\r
962 makeScroller();\r
963\r
964 scroller.scrollTo(10, 10);\r
965\r
966 scroller.scrollBy(null, 10);\r
967\r
968 expect(scroller.getPosition()).toEqual({\r
969 x: 10,\r
970 y: 20\r
971 });\r
972 });\r
973\r
974 it("should ignore y if null is passed", function() {\r
975 makeScroller();\r
976\r
977 scroller.scrollTo(10, 10);\r
978\r
979 scroller.scrollBy(10, null);\r
980\r
981 expect(scroller.getPosition()).toEqual({\r
982 x: 20,\r
983 y: 10\r
984 });\r
985 });\r
986\r
987 it("should ignore x and y if both null", function() {\r
988 makeScroller();\r
989\r
990 scroller.scrollTo(10, 10);\r
991\r
992 scroller.scrollBy(null, null);\r
993\r
994 expect(scroller.getPosition()).toEqual({\r
995 x: 10,\r
996 y: 10\r
997 });\r
998 });\r
999\r
1000 it("should constrain to the max x position", function() {\r
1001 makeScroller();\r
1002\r
1003 scroller.scrollBy(250, 0);\r
1004\r
1005 expect(scroller.getPosition()).toEqual({\r
1006 x: 200,\r
1007 y: 0\r
1008 });\r
1009 });\r
1010\r
1011 it("should constrain to the min x position", function() {\r
1012 makeScroller();\r
1013\r
1014 scroller.scrollBy(-10, 0);\r
1015\r
1016 expect(scroller.getPosition()).toEqual({\r
1017 x: 0,\r
1018 y: 0\r
1019 });\r
1020 });\r
1021\r
1022 it("should constrain to the max y position", function() {\r
1023 makeScroller();\r
1024\r
1025 scroller.scrollBy(0, 250);\r
1026\r
1027 expect(scroller.getPosition()).toEqual({\r
1028 x: 0,\r
1029 y: 100\r
1030 });\r
1031 });\r
1032\r
1033 it("should constrain to the min y position", function() {\r
1034 makeScroller();\r
1035\r
1036 scroller.scrollBy(0, -10);\r
1037\r
1038 expect(scroller.getPosition()).toEqual({\r
1039 x: 0,\r
1040 y: 0\r
1041 });\r
1042 });\r
1043\r
1044 it("should constrain to max x and y", function() {\r
1045 makeScroller();\r
1046\r
1047 scroller.scrollBy(300, 300);\r
1048\r
1049 expect(scroller.getPosition()).toEqual({\r
1050 x: 200,\r
1051 y: 100\r
1052 });\r
1053 });\r
1054\r
1055 it("should constrain to min x and y", function() {\r
1056 makeScroller();\r
1057\r
1058 scroller.scrollBy(-10, -10);\r
1059\r
1060 expect(scroller.getPosition()).toEqual({\r
1061 x: 0,\r
1062 y: 0\r
1063 });\r
1064 });\r
1065 });\r
1066\r
1067 describe("getMaxPosition and getMaxUserPosition", function() {\r
1068 beforeEach(function() {\r
1069 el.appendChild({\r
1070 style: 'height:200px;width:300px;'\r
1071 }, true);\r
1072 });\r
1073\r
1074 describe("with x:true and y:true", function() {\r
1075 beforeEach(function() {\r
1076 makeScroller();\r
1077 });\r
1078\r
1079 it("should return the maxPosition", function() {\r
1080 expect(scroller.getMaxPosition()).toEqual({\r
1081 x: 200,\r
1082 y: 100\r
1083 });\r
1084 });\r
1085\r
1086 it("should return the maxUserPosition", function() {\r
1087 expect(scroller.getMaxUserPosition()).toEqual({\r
1088 x: 200,\r
1089 y: 100\r
1090 });\r
1091 });\r
1092 });\r
1093\r
1094 describe("with x:true and y:false", function() {\r
1095 beforeEach(function() {\r
1096 makeScroller({\r
1097 x: true,\r
1098 y: false\r
1099 });\r
1100 });\r
1101\r
1102 it("should return the maxPosition", function() {\r
1103 expect(scroller.getMaxPosition()).toEqual({\r
1104 x: 200,\r
1105 y: 100\r
1106 });\r
1107 });\r
1108\r
1109 it("should return the maxUserPosition", function() {\r
1110 expect(scroller.getMaxUserPosition()).toEqual({\r
1111 x: 200,\r
1112 y: 0\r
1113 });\r
1114 });\r
1115 });\r
1116\r
1117 describe("with x:false and y:true", function() {\r
1118 beforeEach(function() {\r
1119 makeScroller({\r
1120 x: false,\r
1121 y: true\r
1122 })\r
1123 });\r
1124\r
1125 it("should return the maxPosition", function() {\r
1126 expect(scroller.getMaxPosition()).toEqual({\r
1127 x: 200,\r
1128 y: 100\r
1129 });\r
1130 });\r
1131\r
1132 it("should return the maxUserPosition", function() {\r
1133 expect(scroller.getMaxUserPosition()).toEqual({\r
1134 x: 0,\r
1135 y: 100\r
1136 });\r
1137 });\r
1138 });\r
1139\r
1140 describe("with x:false and y:false", function() {\r
1141 beforeEach(function() {\r
1142 makeScroller({\r
1143 x: false,\r
1144 y: false\r
1145 });\r
1146 });\r
1147\r
1148 it("should return the maxPosition", function() {\r
1149 expect(scroller.getMaxPosition()).toEqual({\r
1150 x: 200,\r
1151 y: 100\r
1152 });\r
1153 });\r
1154\r
1155 it("should return the maxUserPosition", function() {\r
1156 expect(scroller.getMaxUserPosition()).toEqual({\r
1157 x: 0,\r
1158 y: 0\r
1159 });\r
1160 });\r
1161 });\r
1162 });\r
1163\r
1164 describe("partnership", function() {\r
1165 var el2, el3, scroller2, scroller3;\r
1166\r
1167 function makeScroller2() {\r
1168 el2 = Ext.getBody().createChild({\r
1169 style: 'height:100px;width:100px;',\r
1170 cn: [{\r
1171 style: 'height:200px;width:300px;'\r
1172 }]\r
1173 });\r
1174\r
1175 scroller2 = new Ext.scroll.TouchScroller({\r
1176 element: el2,\r
1177 autoRefresh: false\r
1178 });\r
1179 }\r
1180\r
1181 function makeScroller3() {\r
1182 el3 = Ext.getBody().createChild({\r
1183 style: 'height:100px;width:100px;',\r
1184 cn: [{\r
1185 style: 'height:200px;width:300px;'\r
1186 }]\r
1187 });\r
1188\r
1189 scroller3 = new Ext.scroll.TouchScroller({\r
1190 element: el3,\r
1191 autoRefresh: false\r
1192 });\r
1193 }\r
1194\r
1195 beforeEach(function() {\r
1196 el.appendChild({\r
1197 style: 'height:200px;width:300px;'\r
1198 }, true);\r
1199\r
1200 makeScroller();\r
1201 });\r
1202\r
1203 afterEach(function() {\r
1204 if (scroller2) {\r
1205 scroller2.destroy();\r
1206 scroller2 = null;\r
1207 }\r
1208 if (scroller3) {\r
1209 scroller3.destroy();\r
1210 scroller3 = null;\r
1211 }\r
1212 if (el2) {\r
1213 el2.destroy();\r
1214 el2 = null;\r
1215 }\r
1216 if (el3) {\r
1217 el3.destroy();\r
1218 el3 = null;\r
1219 }\r
1220 });\r
1221\r
1222 describe("single partner", function() {\r
1223 beforeEach(function() {\r
1224 makeScroller2();\r
1225 });\r
1226\r
1227 describe("both axes enabled", function() {\r
1228 beforeEach(function() {\r
1229 scroller.addPartner(scroller2);\r
1230 });\r
1231\r
1232 it("should sync the partner's scroll position when the scroller is scrolled", function() {\r
1233 // The partner should take action upon scroll start and end\r
1234 spyOn(scroller2, 'fireScrollStart').andCallThrough();\r
1235 spyOn(scroller2, 'fireScrollEnd').andCallThrough();\r
1236\r
1237 scroller.scrollTo(10, 20);\r
1238\r
1239 expect(scroller2.getPosition()).toEqual({\r
1240 x: 10,\r
1241 y: 20\r
1242 });\r
1243\r
1244 // The passive side should also have fired its start and end scroll events\r
1245 expect(scroller2.fireScrollStart.callCount).toBe(1);\r
1246 expect(scroller2.fireScrollEnd.callCount).toBe(1);\r
1247 });\r
1248\r
1249 it("should sync the scroller's scroll position when the partner is scrolled", function() {\r
1250 // The scroller should take action upon scroll start and end\r
1251 spyOn(scroller, 'fireScrollStart').andCallThrough();\r
1252 spyOn(scroller, 'fireScrollEnd').andCallThrough();\r
1253\r
1254 scroller2.scrollTo(10, 20);\r
1255\r
1256 expect(scroller.getPosition()).toEqual({\r
1257 x: 10,\r
1258 y: 20\r
1259 });\r
1260\r
1261 // The passive side should also have fired its start and end scroll events\r
1262 expect(scroller.fireScrollStart.callCount).toBe(1);\r
1263 expect(scroller.fireScrollEnd.callCount).toBe(1);\r
1264 });\r
1265 });\r
1266\r
1267 describe("x-axis only", function() {\r
1268 beforeEach(function() {\r
1269 scroller.addPartner(scroller2, 'x');\r
1270 });\r
1271\r
1272 it("should sync the partner's scroll position when the scroller is scrolled", function() {\r
1273 scroller.scrollTo(10, 20);\r
1274\r
1275 expect(scroller2.getPosition()).toEqual({\r
1276 x: 10,\r
1277 y: 0\r
1278 });\r
1279 });\r
1280\r
1281 it("should sync the scroller's scroll position when the partner is scrolled", function() {\r
1282 scroller2.scrollTo(10, 20);\r
1283\r
1284 expect(scroller.getPosition()).toEqual({\r
1285 x: 10,\r
1286 y: 0\r
1287 });\r
1288 });\r
1289 });\r
1290\r
1291 describe("y-axis only", function() {\r
1292 beforeEach(function() {\r
1293 scroller.addPartner(scroller2, 'y');\r
1294 });\r
1295\r
1296 it("should sync the partner's scroll position when the scroller is scrolled", function() {\r
1297 scroller.scrollTo(10, 20);\r
1298\r
1299 expect(scroller2.getPosition()).toEqual({\r
1300 x: 0,\r
1301 y: 20\r
1302 });\r
1303 });\r
1304\r
1305 it("should sync the scroller's scroll position when the partner is scrolled", function() {\r
1306 scroller2.scrollTo(10, 20);\r
1307\r
1308 expect(scroller.getPosition()).toEqual({\r
1309 x: 0,\r
1310 y: 20\r
1311 });\r
1312 });\r
1313 });\r
1314\r
1315 it("should remove the partner", function() {\r
1316 scroller.addPartner(scroller2);\r
1317 scroller.removePartner(scroller2);\r
1318\r
1319 scroller.scrollTo(10, 20);\r
1320\r
1321 expect(scroller2.getPosition()).toEqual({\r
1322 x: 0,\r
1323 y: 0\r
1324 });\r
1325\r
1326 scroller2.scrollTo(40, 30);\r
1327\r
1328 expect(scroller.getPosition()).toEqual({\r
1329 x: 10,\r
1330 y: 20\r
1331 });\r
1332 });\r
1333 });\r
1334\r
1335 describe("multiple partners", function() {\r
1336 beforeEach(function() {\r
1337 makeScroller2();\r
1338 makeScroller3();\r
1339\r
1340 scroller.addPartner(scroller2);\r
1341 scroller.addPartner(scroller3);\r
1342 });\r
1343\r
1344 it("should sync multiple partners when the scroller is scrolled", function() {\r
1345 scroller.scrollTo(10, 15);\r
1346\r
1347 expect(scroller2.getPosition()).toEqual({\r
1348 x: 10,\r
1349 y: 15\r
1350 });\r
1351\r
1352 expect(scroller3.getPosition()).toEqual({\r
1353 x: 10,\r
1354 y: 15\r
1355 });\r
1356 });\r
1357\r
1358 it("should sync scroll position when a partner is scrolled", function() {\r
1359 scroller2.scrollTo(50, 60);\r
1360\r
1361 expect(scroller.getPosition()).toEqual({\r
1362 x: 50,\r
1363 y: 60\r
1364 });\r
1365 });\r
1366\r
1367 it("should remove a partner", function() {\r
1368 scroller.removePartner(scroller2);\r
1369\r
1370 scroller2.scrollTo(15, 20);\r
1371\r
1372 expect(scroller.getPosition()).toEqual({\r
1373 x: 0,\r
1374 y: 0\r
1375 });\r
1376\r
1377 // scroller3 still attached\r
1378 scroller3.scrollTo(30, 45);\r
1379\r
1380 expect(scroller.getPosition()).toEqual({\r
1381 x: 30,\r
1382 y: 45\r
1383 });\r
1384 });\r
1385 });\r
1386 });\r
1387\r
1388 describe("refresh", function() {\r
1389 // change content size\r
1390 // change container size\r
1391 //\r
1392\r
1393\r
1394 });\r
1395\r
1396 describe("interaction", function() {\r
1397 var helper = Ext.testHelper;\r
1398\r
1399 function start(cfg, element) {\r
1400 cfg.id = 1;\r
1401 helper.touchStart(element || el, cfg);\r
1402 }\r
1403\r
1404 function move(cfg, element) {\r
1405 cfg.id = 1;\r
1406 helper.touchMove(element || el, cfg);\r
1407 }\r
1408\r
1409 function end(cfg, element) {\r
1410 cfg.id = 1;\r
1411 helper.touchEnd(element || el, cfg);\r
1412 }\r
1413\r
1414 function expectScrollPosition(position, testScroller) {\r
1415 if (!testScroller) {\r
1416 testScroller = scroller;\r
1417 }\r
1418 var innerElXY = testScroller.getInnerElement().getOffsetsTo(testScroller.getElement());\r
1419\r
1420 expect(-innerElXY[0]).toBe(position.x);\r
1421 expect(-innerElXY[1]).toBe(position.y);\r
1422 }\r
1423\r
1424 function makeScroller(config, newElement) {\r
1425 var scrollerEl,\r
1426 newScroller;\r
1427\r
1428 if (newElement) {\r
1429 scrollerEl = Ext.getBody().createChild({\r
1430 style: 'height:100px;width:100px;'\r
1431 });\r
1432 } else {\r
1433 scrollerEl = el;\r
1434 }\r
1435\r
1436 scrollerEl.appendChild({\r
1437 style: 'height:200px;width:200px;'\r
1438 }, true);\r
1439\r
1440 newScroller = new Ext.scroll.TouchScroller(Ext.apply({\r
1441 element: scrollerEl,\r
1442 autoRefresh: false\r
1443 }, config));\r
1444\r
1445 if (!newElement) {\r
1446 scroller = newScroller;\r
1447 innerElement = scroller.getInnerElement();\r
1448 }\r
1449 return newScroller;\r
1450 }\r
1451\r
1452 describe('synchronizing partners', function() {\r
1453 var scroller1, scroller2;\r
1454\r
1455 afterEach(function() {\r
1456 Ext.destroy(scroller2._element, scroller1, scroller2);\r
1457 });\r
1458\r
1459 it("should sync the partner's scroll position when the scroller is scrolled", function() {\r
1460 scroller1 = makeScroller();\r
1461 scroller2 = makeScroller(null, true);\r
1462 scroller1.addPartner(scroller2);\r
1463\r
1464 // The partner should take action upon scroll start and end\r
1465 spyOn(scroller2, 'fireScrollStart').andCallThrough();\r
1466 spyOn(scroller2, 'fireScrollEnd').andCallThrough();\r
1467\r
1468 runs(function() {\r
1469 start({ x: 50, y: 50 }, scroller1.getElement());\r
1470 move({ x: 50, y: 40 }, scroller1.getElement());\r
1471 end({ x: 50, y: 40 }, scroller1.getElement());\r
1472\r
1473 // Both should have indicated that they are scrolling\r
1474 expect(scroller1.isScrolling).toBe(true);\r
1475 expect(scroller2.isScrolling).toBe(true);\r
1476 });\r
1477\r
1478 // Wait for the whole thing to settle down and declare itself finished\r
1479 waitsFor(function() {\r
1480 return !(scroller1.isScrolling || scroller2.isScrolling);\r
1481 }, 'both scrollers to finish scrolling');\r
1482\r
1483 // Then check synchronization conditions, and the the correct call sequences have been followed\r
1484 runs(function() {\r
1485 expectScrollPosition({ x: 0, y: scroller1.getPosition().y }, scroller2);\r
1486\r
1487 // The passive side should also have fired its start and end scroll events\r
1488 expect(scroller2.fireScrollStart.callCount).toBe(1);\r
1489 expect(scroller2.fireScrollEnd.callCount).toBe(1);\r
1490 });\r
1491 });\r
1492 });\r
1493\r
1494 describe("x:'auto' and y:'auto'", function() {\r
1495 it("should size to the content", function() {\r
1496 makeScroller();\r
1497\r
1498 expect(scroller.getSize()).toEqual({\r
1499 x: 200,\r
1500 y: 200\r
1501 });\r
1502 });\r
1503\r
1504 it("should allow scrolling in the vertical direction", function() {\r
1505 makeScroller();\r
1506\r
1507 runs(function() {\r
1508 start({ x: 50, y: 50 });\r
1509 move({ x: 50, y: 40 });\r
1510 });\r
1511\r
1512 waitsForAnimation();\r
1513\r
1514 runs(function() {\r
1515 expectScrollPosition({ x: 0, y: 10 });\r
1516 end({ x: 50, y: 40 });\r
1517 });\r
1518\r
1519 waitsForAnimation();\r
1520 });\r
1521\r
1522 it("should allow scrolling in the horizontal direction", function() {\r
1523 makeScroller();\r
1524\r
1525 runs(function() {\r
1526 start({ x: 50, y: 50 });\r
1527 move({ x: 40, y: 50 });\r
1528 });\r
1529\r
1530 waitsForAnimation();\r
1531\r
1532 runs(function() {\r
1533 expectScrollPosition({ x: 10, y: 0 });\r
1534 end({ x: 40, y: 50 });\r
1535 });\r
1536\r
1537 waitsForAnimation();\r
1538 });\r
1539\r
1540 it("should allow scrolling in both directions simultaneously", function() {\r
1541 makeScroller();\r
1542\r
1543 runs(function() {\r
1544 start({ x: 50, y: 50 });\r
1545 move({ x: 40, y: 40 });\r
1546 });\r
1547\r
1548 waitsForAnimation();\r
1549\r
1550 runs(function() {\r
1551 expectScrollPosition({ x: 10, y: 10 });\r
1552 end({ x: 40, y: 40 });\r
1553 });\r
1554\r
1555 waitsForAnimation();\r
1556 });\r
1557\r
1558 describe("stretch", function() {\r
1559 it("should allow stretching past the top scroll boundary", function() {\r
1560 makeScroller();\r
1561\r
1562 runs(function() {\r
1563 start({ x: 50, y: 50 });\r
1564 move({ x: 50, y: 60 });\r
1565 });\r
1566\r
1567 waitsForAnimation();\r
1568\r
1569 runs(function() {\r
1570 expectScrollPosition({ x: 0, y: -5 });\r
1571 end({ x: 50, y: 60 });\r
1572 });\r
1573\r
1574 waitsForAnimation();\r
1575 });\r
1576\r
1577 it("should allow stretching past the right scroll boundary", function() {\r
1578 makeScroller();\r
1579\r
1580 runs(function() {\r
1581 start({ x: 50, y: 50 });\r
1582 move({ x: -60, y: 50 });\r
1583 });\r
1584\r
1585 waitsForAnimation();\r
1586\r
1587 runs(function() {\r
1588 expectScrollPosition({ x: 105, y: 0 });\r
1589 end({ x: -60, y: 50 });\r
1590 });\r
1591\r
1592 waitsForAnimation();\r
1593 });\r
1594\r
1595 it("should allow stretching past the bottom scroll boundary", function() {\r
1596 makeScroller();\r
1597\r
1598 runs(function() {\r
1599 start({ x: 50, y: 50 });\r
1600 move({ x: 50, y: -60 });\r
1601 });\r
1602\r
1603 waitsForAnimation();\r
1604\r
1605 runs(function() {\r
1606 expectScrollPosition({ x: 0, y: 105 });\r
1607 end({ x: 50, y: -60 });\r
1608 });\r
1609\r
1610 waitsForAnimation();\r
1611 });\r
1612\r
1613 it("should allow stretching past the left scroll boundary", function() {\r
1614 makeScroller();\r
1615\r
1616 runs(function() {\r
1617 start({ x: 50, y: 50 });\r
1618 move({ x: 60, y: 50 });\r
1619 });\r
1620\r
1621 waitsForAnimation();\r
1622\r
1623 runs(function() {\r
1624 expectScrollPosition({ x: -5, y: 0 });\r
1625 end({ x: 60, y: 50 });\r
1626 });\r
1627\r
1628 waitsForAnimation();\r
1629 });\r
1630\r
1631 it("should allow stretching past the top-left scroll boundary", function() {\r
1632 makeScroller();\r
1633\r
1634 runs(function() {\r
1635 start({ x: 50, y: 50 });\r
1636 move({ x: 60, y: 60 });\r
1637 });\r
1638\r
1639 waitsForAnimation();\r
1640\r
1641 runs(function() {\r
1642 expectScrollPosition({ x: -5, y: -5 });\r
1643 end({ x: 60, y: 60 });\r
1644 });\r
1645\r
1646 waitsForAnimation();\r
1647 });\r
1648\r
1649 it("should allow stretching past the top-right scroll boundary", function() {\r
1650 makeScroller();\r
1651\r
1652 runs(function() {\r
1653 start({ x: 50, y: 50 });\r
1654 move({ x: -60, y: 60 });\r
1655 });\r
1656\r
1657 waitsForAnimation();\r
1658\r
1659 runs(function() {\r
1660 expectScrollPosition({ x: 105, y: -5 });\r
1661 end({ x: -60, y: 60 });\r
1662 });\r
1663\r
1664 waitsForAnimation();\r
1665 });\r
1666\r
1667 it("should allow stretching past the bottom-right scroll boundary", function() {\r
1668 makeScroller();\r
1669\r
1670 runs(function() {\r
1671 start({ x: 50, y: 50 });\r
1672 move({ x: -60, y: -60 });\r
1673 });\r
1674\r
1675 waitsForAnimation();\r
1676\r
1677 runs(function() {\r
1678 expectScrollPosition({ x: 105, y: 105 });\r
1679 end({ x: -60, y: -60 });\r
1680 });\r
1681\r
1682 waitsForAnimation();\r
1683 });\r
1684\r
1685 it("should allow stretching past the bottom-left scroll boundary", function() {\r
1686 makeScroller();\r
1687\r
1688 runs(function() {\r
1689 start({ x: 50, y: 50 });\r
1690 move({ x: 60, y: -60 });\r
1691 });\r
1692\r
1693 waitsForAnimation();\r
1694\r
1695 runs(function() {\r
1696 expectScrollPosition({ x: -5, y: 105 });\r
1697 end({ x: 60, y: -60 });\r
1698 });\r
1699\r
1700 waitsForAnimation();\r
1701 });\r
1702\r
1703 describe("with outOfBoundRestrictFactor:0", function() {\r
1704 it("should not allow stretching past the top scroll boundary", function() {\r
1705 makeScroller({\r
1706 outOfBoundRestrictFactor: 0\r
1707 });\r
1708\r
1709 runs(function() {\r
1710 start({ x: 50, y: 50 });\r
1711 move({ x: 50, y: 60 });\r
1712 });\r
1713\r
1714 waitsForAnimation();\r
1715\r
1716 runs(function() {\r
1717 expectScrollPosition({ x: 0, y: 0 });\r
1718 end({ x: 50, y: 60 });\r
1719 });\r
1720\r
1721 waitsForAnimation();\r
1722 });\r
1723\r
1724 it("should not allow stretching past the right scroll boundary", function() {\r
1725 makeScroller({\r
1726 outOfBoundRestrictFactor: 0\r
1727 });\r
1728\r
1729 runs(function() {\r
1730 start({ x: 50, y: 50 });\r
1731 move({ x: -60, y: 50 });\r
1732 });\r
1733\r
1734 waitsForAnimation();\r
1735\r
1736 runs(function() {\r
1737 expectScrollPosition({ x: 100, y: 0 });\r
1738 end({ x: -60, y: 50 });\r
1739 });\r
1740\r
1741 waitsForAnimation();\r
1742 });\r
1743\r
1744 it("should not allow stretching past the bottom scroll boundary", function() {\r
1745 makeScroller({\r
1746 outOfBoundRestrictFactor: 0\r
1747 });\r
1748\r
1749 runs(function() {\r
1750 start({ x: 50, y: 50 });\r
1751 move({ x: 50, y: -60 });\r
1752 });\r
1753\r
1754 waitsForAnimation();\r
1755\r
1756 runs(function() {\r
1757 expectScrollPosition({ x: 0, y: 100 });\r
1758 end({ x: 50, y: -60 });\r
1759 });\r
1760\r
1761 waitsForAnimation();\r
1762 });\r
1763\r
1764 it("should not allow stretching past the left scroll boundary", function() {\r
1765 makeScroller({\r
1766 outOfBoundRestrictFactor: 0\r
1767 });\r
1768\r
1769 runs(function() {\r
1770 start({ x: 50, y: 50 });\r
1771 move({ x: 60, y: 50 });\r
1772 });\r
1773\r
1774 waitsForAnimation();\r
1775\r
1776 runs(function() {\r
1777 expectScrollPosition({ x: 0, y: 0 });\r
1778 end({ x: 60, y: 50 });\r
1779 });\r
1780\r
1781 waitsForAnimation();\r
1782 });\r
1783\r
1784 it("should not allow stretching past the top-left scroll boundary", function() {\r
1785 makeScroller({\r
1786 outOfBoundRestrictFactor: 0\r
1787 });\r
1788\r
1789 runs(function() {\r
1790 start({ x: 50, y: 50 });\r
1791 move({ x: 60, y: 60 });\r
1792 });\r
1793\r
1794 waitsForAnimation();\r
1795\r
1796 runs(function() {\r
1797 expectScrollPosition({ x: 0, y: 0 });\r
1798 end({ x: 60, y: 60 });\r
1799 });\r
1800\r
1801 waitsForAnimation();\r
1802 });\r
1803\r
1804 it("should not allow stretching past the top-right scroll boundary", function() {\r
1805 makeScroller({\r
1806 outOfBoundRestrictFactor: 0\r
1807 });\r
1808\r
1809 runs(function() {\r
1810 start({ x: 50, y: 50 });\r
1811 move({ x: -60, y: 60 });\r
1812 });\r
1813\r
1814 waitsForAnimation();\r
1815\r
1816 runs(function() {\r
1817 expectScrollPosition({ x: 100, y: 0 });\r
1818 end({ x: -60, y: 60 });\r
1819 });\r
1820\r
1821 waitsForAnimation();\r
1822 });\r
1823\r
1824 it("should not allow stretching past the bottom-right scroll boundary", function() {\r
1825 makeScroller({\r
1826 outOfBoundRestrictFactor: 0\r
1827 });\r
1828\r
1829 runs(function() {\r
1830 start({ x: 50, y: 50 });\r
1831 move({ x: -60, y: -60 });\r
1832 });\r
1833\r
1834 waitsForAnimation();\r
1835\r
1836 runs(function() {\r
1837 expectScrollPosition({ x: 100, y: 100 });\r
1838 end({ x: -60, y: -60 });\r
1839 });\r
1840\r
1841 waitsForAnimation();\r
1842 });\r
1843\r
1844 it("should not allow stretching past the bottom-left scroll boundary", function() {\r
1845 makeScroller({\r
1846 outOfBoundRestrictFactor: 0\r
1847 });\r
1848\r
1849 runs(function() {\r
1850 start({ x: 50, y: 50 });\r
1851 move({ x: 60, y: -60 });\r
1852 });\r
1853\r
1854 waitsForAnimation();\r
1855\r
1856 runs(function() {\r
1857 expectScrollPosition({ x: 0, y: 100 });\r
1858 end({ x: 60, y: -60 });\r
1859 });\r
1860\r
1861 waitsForAnimation();\r
1862 });\r
1863 });\r
1864 });\r
1865\r
1866 describe("bounce", function() {\r
1867 beforeEach(function() {\r
1868 makeScroller();\r
1869 });\r
1870\r
1871 it("should bounce back when stretched past the top scroll boundary", function() {\r
1872 var scrollend = false;\r
1873\r
1874 runs(function() {\r
1875 start({ x: 50, y: 50 });\r
1876 move({ x: 50, y: 60 });\r
1877 });\r
1878\r
1879 waitsForAnimation();\r
1880\r
1881 runs(function() {\r
1882 expectScrollPosition({ x: 0, y: -5 });\r
1883 scroller.on('scrollend', function() {\r
1884 scrollend = true;\r
1885 });\r
1886 end({ x: 50, y: 60 });\r
1887 });\r
1888\r
1889 waitsFor(function() {\r
1890 return scrollend;\r
1891 });\r
1892\r
1893 runs(function() {\r
1894 expectScrollPosition({ x: 0, y: 0 });\r
1895 });\r
1896 });\r
1897\r
1898 it("should bounce back when stretched past the right scroll boundary", function() {\r
1899 var scrollend = false;\r
1900\r
1901 runs(function() {\r
1902 start({ x: 50, y: 50 });\r
1903 move({ x: -60, y: 50 });\r
1904 });\r
1905\r
1906 waitsForAnimation();\r
1907\r
1908 runs(function() {\r
1909 expectScrollPosition({ x: 105, y: 0 });\r
1910 scroller.on('scrollend', function() {\r
1911 scrollend = true;\r
1912 });\r
1913 end({ x: -60, y: 50 });\r
1914 });\r
1915\r
1916 waitsFor(function() {\r
1917 return scrollend;\r
1918 });\r
1919\r
1920 runs(function() {\r
1921 expectScrollPosition({ x: 100, y: 0 });\r
1922 });\r
1923 });\r
1924\r
1925 it("should bounce back when stretched past the bottom scroll boundary", function() {\r
1926 var scrollend = false;\r
1927\r
1928 runs(function() {\r
1929 start({ x: 50, y: 50 });\r
1930 move({ x: 50, y: -60 });\r
1931 });\r
1932\r
1933 waitsForAnimation();\r
1934\r
1935 runs(function() {\r
1936 expectScrollPosition({ x: 0, y: 105 });\r
1937 scroller.on('scrollend', function() {\r
1938 scrollend = true;\r
1939 });\r
1940 end({ x: 50, y: -60 });\r
1941 });\r
1942\r
1943 waitsFor(function() {\r
1944 return scrollend;\r
1945 });\r
1946\r
1947 runs(function() {\r
1948 expectScrollPosition({ x: 0, y: 100 });\r
1949 });\r
1950 });\r
1951\r
1952 it("should bounce back when stretched past the left scroll boundary", function() {\r
1953 var scrollend = false;\r
1954\r
1955 runs(function() {\r
1956 start({ x: 50, y: 50 });\r
1957 move({ x: 60, y: 50 });\r
1958 });\r
1959\r
1960 waitsForAnimation();\r
1961\r
1962 runs(function() {\r
1963 expectScrollPosition({ x: -5, y: 0 });\r
1964 scroller.on('scrollend', function() {\r
1965 scrollend = true;\r
1966 });\r
1967 end({ x: 60, y: 50 });\r
1968 });\r
1969\r
1970 waitsFor(function() {\r
1971 return scrollend;\r
1972 });\r
1973\r
1974 runs(function() {\r
1975 expectScrollPosition({ x: 0, y: 0 });\r
1976 });\r
1977 });\r
1978\r
1979 it("should bounce back when stretched past the top-left scroll boundary", function() {\r
1980 var scrollend = false;\r
1981\r
1982 runs(function() {\r
1983 start({ x: 50, y: 50 });\r
1984 move({ x: 60, y: 60 });\r
1985 });\r
1986\r
1987 waitsForAnimation();\r
1988\r
1989 runs(function() {\r
1990 expectScrollPosition({ x: -5, y: -5 });\r
1991 scroller.on('scrollend', function() {\r
1992 scrollend = true;\r
1993 });\r
1994 end({ x: 60, y: 60 });\r
1995 });\r
1996\r
1997 waitsFor(function() {\r
1998 return scrollend;\r
1999 });\r
2000\r
2001 runs(function() {\r
2002 expectScrollPosition({ x: 0, y: 0 });\r
2003 });\r
2004 });\r
2005\r
2006 it("should bounce back when stretched past the top-right scroll boundary", function() {\r
2007 var scrollend = false;\r
2008\r
2009 runs(function() {\r
2010 start({ x: 50, y: 50 });\r
2011 move({ x: -60, y: 60 });\r
2012 });\r
2013\r
2014 waitsForAnimation();\r
2015\r
2016 runs(function() {\r
2017 expectScrollPosition({ x: 105, y: -5 });\r
2018 scroller.on('scrollend', function() {\r
2019 scrollend = true;\r
2020 });\r
2021 end({ x: -60, y: 60 });\r
2022 });\r
2023\r
2024 waitsFor(function() {\r
2025 return scrollend;\r
2026 });\r
2027\r
2028 runs(function() {\r
2029 expectScrollPosition({ x: 100, y: 0 });\r
2030 });\r
2031 });\r
2032\r
2033 it("should bounce back when stretched past the bottom-right scroll boundary", function() {\r
2034 var scrollend = false;\r
2035\r
2036 runs(function() {\r
2037 start({ x: 50, y: 50 });\r
2038 move({ x: -60, y: -60 });\r
2039 });\r
2040\r
2041 waitsForAnimation();\r
2042\r
2043 runs(function() {\r
2044 expectScrollPosition({ x: 105, y: 105 });\r
2045 scroller.on('scrollend', function() {\r
2046 scrollend = true;\r
2047 });\r
2048 end({ x: -60, y: -60 });\r
2049 });\r
2050\r
2051 waitsFor(function() {\r
2052 return scrollend;\r
2053 });\r
2054\r
2055 runs(function() {\r
2056 expectScrollPosition({ x: 100, y: 100 });\r
2057 });\r
2058 });\r
2059\r
2060 it("should bounce back when stretched past the bottom-left scroll boundary", function() {\r
2061 var scrollend = false;\r
2062\r
2063 runs(function() {\r
2064 start({ x: 50, y: 50 });\r
2065 move({ x: 60, y: -60 });\r
2066 });\r
2067\r
2068 waitsForAnimation();\r
2069\r
2070 runs(function() {\r
2071 expectScrollPosition({ x: -5, y: 105 });\r
2072 scroller.on('scrollend', function() {\r
2073 scrollend = true;\r
2074 });\r
2075 end({ x: 60, y: -60 });\r
2076 });\r
2077\r
2078 waitsFor(function() {\r
2079 return scrollend;\r
2080 });\r
2081\r
2082 runs(function() {\r
2083 expectScrollPosition({ x: 0, y: 100 });\r
2084 });\r
2085 });\r
2086 });\r
2087 });\r
2088\r
2089 describe("direction:'both'", function() {\r
2090 beforeEach(function() {\r
2091 makeScroller({\r
2092 direction: 'both'\r
2093 });\r
2094 });\r
2095\r
2096 it("should size to the content", function() {\r
2097 expect(scroller.getSize()).toEqual({\r
2098 x: 200,\r
2099 y: 200\r
2100 });\r
2101 });\r
2102\r
2103 it("should allow scrolling in the vertical direction", function() {\r
2104 runs(function() {\r
2105 start({ x: 50, y: 50 });\r
2106 move({ x: 50, y: 40 });\r
2107 });\r
2108\r
2109 waitsForAnimation();\r
2110\r
2111 runs(function() {\r
2112 expectScrollPosition({ x: 0, y: 10 });\r
2113 end({ x: 50, y: 40 });\r
2114 });\r
2115\r
2116 waitsForAnimation();\r
2117 });\r
2118\r
2119 it("should allow scrolling in the horizontal direction", function() {\r
2120 runs(function() {\r
2121 start({ x: 50, y: 50 });\r
2122 move({ x: 40, y: 50 });\r
2123 });\r
2124\r
2125 waitsForAnimation();\r
2126\r
2127 runs(function() {\r
2128 expectScrollPosition({ x: 10, y: 0 });\r
2129 end({ x: 40, y: 50 });\r
2130 });\r
2131\r
2132 waitsForAnimation();\r
2133 });\r
2134\r
2135 it("should allow scrolling in both directions simultaneously", function() {\r
2136 runs(function() {\r
2137 start({ x: 50, y: 50 });\r
2138 move({ x: 40, y: 40 });\r
2139 });\r
2140\r
2141 waitsForAnimation();\r
2142\r
2143 runs(function() {\r
2144 expectScrollPosition({ x: 10, y: 10 });\r
2145 end({ x: 40, y: 40 });\r
2146 });\r
2147\r
2148 waitsForAnimation();\r
2149 });\r
2150 });\r
2151\r
2152 describe("direction:'vertical'", function() {\r
2153 beforeEach(function() {\r
2154 makeScroller({\r
2155 direction: 'vertical'\r
2156 });\r
2157 });\r
2158\r
2159 it("should size to the content", function() {\r
2160 expect(scroller.getSize()).toEqual({\r
2161 x: 200,\r
2162 y: 200\r
2163 });\r
2164 });\r
2165\r
2166 it("should allow scrolling in the vertical direction", function() {\r
2167 runs(function() {\r
2168 start({ x: 50, y: 50 });\r
2169 move({ x: 50, y: 40 });\r
2170 });\r
2171\r
2172 waitsForAnimation();\r
2173\r
2174 runs(function() {\r
2175 expectScrollPosition({ x: 0, y: 10 });\r
2176 end({ x: 50, y: 40 });\r
2177 });\r
2178\r
2179 waitsForAnimation();\r
2180 });\r
2181\r
2182 it("should not allow scrolling in the horizontal direction", function() {\r
2183 runs(function() {\r
2184 start({ x: 50, y: 50 });\r
2185 move({ x: 40, y: 50 });\r
2186 });\r
2187\r
2188 waitsForAnimation();\r
2189\r
2190 runs(function() {\r
2191 expectScrollPosition({ x: 0, y: 0 });\r
2192 end({ x: 40, y: 50 });\r
2193 });\r
2194\r
2195 waitsForAnimation();\r
2196 });\r
2197\r
2198 it("should not allow scrolling in both directions simultaneously", function() {\r
2199 runs(function() {\r
2200 start({ x: 50, y: 50 });\r
2201 move({ x: 40, y: 40 });\r
2202 });\r
2203\r
2204 waitsForAnimation();\r
2205\r
2206 runs(function() {\r
2207 expectScrollPosition({ x: 0, y: 10 });\r
2208 end({ x: 40, y: 40 });\r
2209 });\r
2210\r
2211 waitsForAnimation();\r
2212 });\r
2213 });\r
2214\r
2215 describe("direction:'horizontal'", function() {\r
2216 beforeEach(function() {\r
2217 makeScroller({\r
2218 direction: 'horizontal'\r
2219 });\r
2220 });\r
2221\r
2222 it("should size to the content", function() {\r
2223 expect(scroller.getSize()).toEqual({\r
2224 x: 200,\r
2225 y: 200\r
2226 });\r
2227 });\r
2228\r
2229 it("should not allow scrolling in the vertical direction", function() {\r
2230 runs(function() {\r
2231 start({ x: 50, y: 50 });\r
2232 move({ x: 50, y: 40 });\r
2233 });\r
2234\r
2235 waitsForAnimation();\r
2236\r
2237 runs(function() {\r
2238 expectScrollPosition({ x: 0, y: 0 });\r
2239 end({ x: 50, y: 40 });\r
2240 });\r
2241\r
2242 waitsForAnimation();\r
2243 });\r
2244\r
2245 it("should allow scrolling in the horizontal direction", function() {\r
2246 runs(function() {\r
2247 start({ x: 50, y: 50 });\r
2248 move({ x: 40, y: 50 });\r
2249 });\r
2250\r
2251 waitsForAnimation();\r
2252\r
2253 runs(function() {\r
2254 expectScrollPosition({ x: 10, y: 0 });\r
2255 end({ x: 40, y: 50 });\r
2256 });\r
2257\r
2258 waitsForAnimation();\r
2259 });\r
2260\r
2261 it("should not allow scrolling in both directions simultaneously", function() {\r
2262 runs(function() {\r
2263 start({ x: 50, y: 50 });\r
2264 move({ x: 40, y: 40 });\r
2265 });\r
2266\r
2267 waitsForAnimation();\r
2268\r
2269 runs(function() {\r
2270 expectScrollPosition({ x: 10, y: 0 });\r
2271 end({ x: 40, y: 40 });\r
2272 });\r
2273\r
2274 waitsForAnimation();\r
2275 });\r
2276 });\r
2277\r
2278 it("should end scrolling when the touchend occurs outside the scroller", function() {\r
2279 var scrollEnded = false;\r
2280\r
2281 makeScroller();\r
2282\r
2283 scroller.on('scrollend', function() {\r
2284 scrollEnded = true;\r
2285 });\r
2286\r
2287 runs(function() {\r
2288 start({x: 50, y: 50});\r
2289 move({x: 60, y: 40});\r
2290 move({ x: 150, y: 150 });\r
2291 end({ x: 150, y: 150 }, document.body);\r
2292 });\r
2293\r
2294 waitsFor(function() {\r
2295 return scrollEnded;\r
2296 });\r
2297\r
2298 runs(function() {\r
2299 expect(scrollEnded).toBe(true);\r
2300 });\r
2301 });\r
2302 });\r
2303});\r