source: main/trunk/greenstone3/web/interfaces/oran/js/jquery-ui-1.8rc1/tests/unit/draggable/draggable_options.js@ 24245

Last change on this file since 24245 was 24245, checked in by sjb48, 13 years ago

Oran code for supporting format changes to document.
  • Property svn:executable set to *
File size: 18.4 KB
Line 
1/*
2 * draggable_options.js
3 */
4(function($) {
5
6function testScroll(position) {
7 $("#main").css('position', position);
8 drag(el, 50, 50);
9 moved(50, 50, position+' parent');
10}
11
12function setScroll(what) {
13 if(what) {
14 $(document).scrollTop(100); $(document).scrollLeft(100);
15 } else {
16 $("#main")[0].scrollTop = 100; $("#main")[0].scrollLeft = 100;
17 }
18}
19
20var border = function(el, side) { return parseInt(el.css('border-' + side + '-width')); }
21
22var margin = function(el, side) { return parseInt(el.css('margin-' + side)); }
23
24module("draggable: options");
25
26test("{ addClasses: true }, default", function() {
27 equals(draggable_defaults.addClasses, true);
28
29 el = $("<div></div>").draggable({ addClasses: true });
30 ok(el.is(".ui-draggable"), "'ui-draggable' class added");
31
32 el.draggable("destroy");
33});
34
35test("{ addClasses: false }", function() {
36 el = $("<div></div>").draggable({ addClasses: false });
37 ok(!el.is(".ui-draggable"), "'ui-draggable' class not added");
38
39 el.draggable("destroy");
40});
41
42test("{ appendTo: 'parent' }, default", function() {
43 equals(draggable_defaults.appendTo, "parent");
44
45 ok(false, 'missing test - untested code is broken code');
46});
47
48test("{ appendTo: Element }", function() {
49 ok(false, 'missing test - untested code is broken code');
50});
51
52test("{ appendTo: Selector }", function() {
53 ok(false, 'missing test - untested code is broken code');
54});
55
56test("{ axis: false }, default", function() {
57 equals(draggable_defaults.axis, false);
58
59 el = $("#draggable2").draggable({ axis: false });
60 drag(el, 50, 50);
61 moved(50, 50);
62});
63
64test("{ axis: 'x' }", function() {
65 el = $("#draggable2").draggable({ axis: "x" });
66 drag(el, 50, 50);
67 moved(50, 0);
68});
69
70test("{ axis: 'y' }", function() {
71 el = $("#draggable2").draggable({ axis: "y" });
72 drag(el, 50, 50);
73 moved(0, 50);
74});
75
76test("{ axis: ? }, unexpected", function() {
77 var unexpected = {
78 "true": true,
79 "{}": {},
80 "[]": [],
81 "null": null,
82 "undefined": undefined,
83 "function() {}": function() {}
84 };
85 $.each(unexpected, function(key, val) {
86 el = $("#draggable2").draggable({ axis: val });
87 drag(el, 50, 50);
88 moved(50, 50, "axis: " + key);
89 el.draggable("destroy");
90 })
91});
92
93test("{ cancel: ':input,option' }, default", function() {
94 equals(draggable_defaults.cancel, ":input,option");
95
96 $('<div id="draggable-option-cancel-default"><input type="text"></div>').appendTo('#main');
97
98 el = $("#draggable-option-cancel-default").draggable({ cancel: ":input,option" });
99 drag("#draggable-option-cancel-default", 50, 50);
100 moved(50, 50);
101
102 el = $("#draggable-option-cancel-default").draggable({ cancel: ":input,option" });
103 drag("#draggable-option-cancel-default :input", 50, 50);
104 moved(0, 0);
105
106 el.draggable("destroy");
107});
108
109test("{ cancel: 'span' }", function() {
110 el = $("#draggable2").draggable();
111 drag("#draggable2 span", 50, 50);
112 moved(50, 50);
113
114 el.draggable("destroy");
115
116 el = $("#draggable2").draggable({ cancel: 'span' });
117 drag("#draggable2 span", 50, 50);
118 moved(0, 0);
119});
120
121test("{ cancel: ? }, unexpected", function() {
122 var unexpected = {
123 "true": true,
124 "false": false,
125 "{}": {},
126 "[]": [],
127 "null": null,
128 "undefined": undefined,
129 "function() {return '';}": function() {return '';},
130 "function() {return true;}": function() {return true;},
131 "function() {return false;}": function() {return false;}
132 };
133 $.each(unexpected, function(key, val) {
134 el = $("#draggable2").draggable({ cancel: val });
135 drag(el, 50, 50);
136 var expected = [50, 50];
137 moved(expected[0], expected[1], "cancel: " + key);
138 el.draggable("destroy");
139 })
140});
141
142test("{ containment: false }, default", function() {
143 equals(draggable_defaults.containment, false);
144
145 ok(false, 'missing test - untested code is broken code');
146});
147
148test("{ containment: Element }", function() {
149 ok(false, 'missing test - untested code is broken code');
150});
151
152test("{ containment: 'parent' }, relative", function() {
153 el = $("#draggable1").draggable({ containment: 'parent' });
154 var p = el.parent(), po = p.offset();
155 drag(el, -100, -100);
156 var expected = {
157 left: po.left + border(p, 'left') + margin(el, 'left'),
158 top: po.top + border(p, 'top') + margin(el, 'top')
159 }
160 same(offsetAfter, expected, 'compare offset to parent');
161});
162
163test("{ containment: 'parent' }, absolute", function() {
164 el = $("#draggable2").draggable({ containment: 'parent' });
165 var p = el.parent(), po = p.offset();
166 drag(el, -100, -100);
167 var expected = {
168 left: po.left + border(p, 'left') + margin(el, 'left'),
169 top: po.top + border(p, 'top') + margin(el, 'top')
170 }
171 same(offsetAfter, expected, 'compare offset to parent');
172});
173
174test("{ containment: 'document' }", function() {
175 ok(false, 'missing test - untested code is broken code');
176});
177
178test("{ containment: 'window' }", function() {
179 ok(false, 'missing test - untested code is broken code');
180});
181
182test("{ containment: Selector }", function() {
183 ok(false, 'missing test - untested code is broken code');
184});
185
186test("{ cursor: 'auto' }, default", function() {
187 equals(draggable_defaults.cursor, 'auto');
188
189 function getCursor() { return $("#draggable2").css("cursor"); }
190
191 expect(3);
192
193 var expected = "auto", actual, before, after;
194
195 el = $("#draggable2").draggable({
196 cursor: expected,
197 start: function(event, ui) {
198 actual = getCursor();
199 }
200 });
201
202 before = getCursor();
203 drag("#draggable2", -1, -1);
204 after = getCursor();
205
206 equals(actual, expected, "start callback: cursor '" + expected + "'");
207 equals(after, before, "after drag: cursor restored");
208
209});
210
211test("{ cursor: 'move' }", function() {
212
213 function getCursor() { return $("body").css("cursor"); }
214
215 expect(2);
216
217 var expected = "move", actual, before, after;
218
219 el = $("#draggable2").draggable({
220 cursor: expected,
221 start: function(event, ui) {
222 actual = getCursor();
223 }
224 });
225
226 before = getCursor();
227 drag("#draggable2", -1, -1);
228 after = getCursor();
229
230 equals(actual, expected, "start callback: cursor '" + expected + "'");
231 equals(after, before, "after drag: cursor restored");
232
233});
234
235test("{ cursorAt: false}, default", function() {
236 equals(draggable_defaults.cursorAt, false);
237
238 ok(false, 'missing test - untested code is broken code');
239});
240
241test("{ cursorAt: { left: -5, top: -5 } }", function() {
242 expect(4);
243
244 var deltaX = -3, deltaY = -3,
245 offsetX = 5, offsetY = 5,
246 cursorAtX = -5, cursorAtY = -5;
247
248 $.each(['relative', 'absolute'], function(i, position) {
249 var el = $('#draggable' + (i + 1)).draggable({
250 cursorAt: { left: cursorAtX, top: cursorAtY },
251 drag: function(event, ui) {
252 equals(ui.offset.left, expected.left, position + ' left');
253 equals(ui.offset.top, expected.top, position + ' top');
254 }
255 }),
256 before = el.offset(),
257 pos = {
258 clientX: before.left + offsetX,
259 clientY: before.top + offsetY
260 },
261 expected = {
262 left: before.left + offsetX - cursorAtX + deltaX,
263 top: before.top + offsetY - cursorAtY + deltaY
264 };
265
266 el.simulate("mousedown", pos);
267 pos.clientX += deltaX;
268 pos.clientY += deltaY;
269 $(document).simulate("mousemove", pos);
270 el.simulate("mouseup", pos);
271 });
272});
273
274test("{ cursorAt: { right: 10, bottom: 20 } }", function() {
275 expect(4);
276
277 var deltaX = -3, deltaY = -3,
278 offsetX = 5, offsetY = 5,
279 cursorAtX = 10, cursorAtY = 20;
280
281 $.each(['relative', 'absolute'], function(i, position) {
282 var el = $('#draggable' + (i + 1)).draggable({
283 cursorAt: { right: cursorAtX, bottom: cursorAtY },
284 drag: function(event, ui) {
285 equals(ui.offset.left, expected.left, position + ' left');
286 equals(ui.offset.top, expected.top, position + ' top');
287 }
288 }),
289 before = el.offset(),
290 pos = {
291 clientX: before.left + offsetX,
292 clientY: before.top + offsetY
293 },
294 expected = {
295 left: before.left + offsetX - el.width() + cursorAtX + deltaX,
296 top: before.top + offsetY - el.height() + cursorAtY + deltaY
297 };
298
299 el.simulate("mousedown", pos);
300 pos.clientX += deltaX;
301 pos.clientY += deltaY;
302 $(document).simulate("mousemove", pos);
303 el.simulate("mouseup", pos);
304 });
305});
306
307test("{ cursorAt: [10, 20] }", function() {
308 expect(4);
309
310 var deltaX = -3, deltaY = -3,
311 offsetX = 5, offsetY = 5,
312 cursorAtX = 10, cursorAtY = 20;
313
314 $.each(['relative', 'absolute'], function(i, position) {
315 var el = $('#draggable' + (i + 1)).draggable({
316 cursorAt: { left: cursorAtX, top: cursorAtY },
317 drag: function(event, ui) {
318 equals(ui.offset.left, expected.left, position + ' left');
319 equals(ui.offset.top, expected.top, position + ' top');
320 }
321 }),
322 before = el.offset(),
323 pos = {
324 clientX: before.left + offsetX,
325 clientY: before.top + offsetY
326 },
327 expected = {
328 left: before.left + offsetX - cursorAtX + deltaX,
329 top: before.top + offsetY - cursorAtY + deltaY
330 };
331
332 el.simulate("mousedown", pos);
333 pos.clientX += deltaX;
334 pos.clientY += deltaY;
335 $(document).simulate("mousemove", pos);
336 el.simulate("mouseup", pos);
337 });
338});
339
340test("{ cursorAt: '20, 40' }", function() {
341 expect(4);
342
343 var deltaX = -3, deltaY = -3,
344 offsetX = 5, offsetY = 5,
345 cursorAtX = 20, cursorAtY = 40;
346
347 $.each(['relative', 'absolute'], function(i, position) {
348 var el = $('#draggable' + (i + 1)).draggable({
349 cursorAt: { left: cursorAtX, top: cursorAtY },
350 drag: function(event, ui) {
351 equals(ui.offset.left, expected.left, position + ' left');
352 equals(ui.offset.top, expected.top, position + ' top');
353 }
354 }),
355 before = el.offset(),
356 pos = {
357 clientX: before.left + offsetX,
358 clientY: before.top + offsetY
359 },
360 expected = {
361 left: before.left + offsetX - cursorAtX + deltaX,
362 top: before.top + offsetY - cursorAtY + deltaY
363 };
364
365 el.simulate("mousedown", pos);
366 pos.clientX += deltaX;
367 pos.clientY += deltaY;
368 $(document).simulate("mousemove", pos);
369 el.simulate("mouseup", pos);
370 });
371});
372
373test("{ distance: 10 }", function() {
374
375 el = $("#draggable2").draggable({ distance: 10 });
376 drag(el, -9, -9);
377 moved(0, 0, 'distance not met');
378
379 drag(el, -10, -10);
380 moved(-10, -10, 'distance met');
381
382 drag(el, 9, 9);
383 moved(0, 0, 'distance not met');
384
385});
386
387test("{ grid: [50, 50] }, relative", function() {
388 el = $("#draggable1").draggable({ grid: [50, 50] });
389 drag(el, 24, 24);
390 moved(0, 0);
391 drag(el, 26, 25);
392 moved(50, 50);
393});
394
395test("{ grid: [50, 50] }, absolute", function() {
396 el = $("#draggable2").draggable({ grid: [50, 50] });
397 drag(el, 24, 24);
398 moved(0, 0);
399 drag(el, 26, 25);
400 moved(50, 50);
401});
402
403test("{ handle: 'span' }", function() {
404 el = $("#draggable2").draggable({ handle: 'span' });
405
406 drag("#draggable2 span", 50, 50);
407 moved(50, 50, "drag span");
408
409 drag("#draggable2", 50, 50);
410 moved(0, 0, "drag element");
411});
412
413test("{ helper: 'clone' }, relative", function() {
414 el = $("#draggable1").draggable({ helper: "clone" });
415 drag(el, 50, 50);
416 moved(0, 0);
417});
418
419test("{ helper: 'clone' }, absolute", function() {
420 el = $("#draggable2").draggable({ helper: "clone" });
421 drag(el, 50, 50);
422 moved(0, 0);
423});
424
425test("{ helper: 'original' }, relative, with scroll offset on parent", function() {
426
427 el = $("#draggable1").draggable({ helper: "original" });
428
429 setScroll();
430 testScroll('relative');
431
432 setScroll();
433 testScroll('static');
434
435 setScroll();
436 testScroll('absolute');
437
438 restoreScroll();
439
440});
441
442test("{ helper: 'original' }, relative, with scroll offset on root", function() {
443
444 el = $("#draggable1").draggable({ helper: "original" });
445
446 setScroll('root');
447 testScroll('relative');
448
449 setScroll('root');
450 testScroll('static');
451
452 setScroll('root');
453 testScroll('absolute');
454
455 restoreScroll('root');
456
457});
458
459test("{ helper: 'original' }, relative, with scroll offset on root and parent", function() {
460
461 el = $("#draggable1").draggable({ helper: "original" });
462
463 setScroll();
464 setScroll('root');
465 testScroll('relative');
466
467 setScroll();
468 setScroll('root');
469 testScroll('static');
470
471 setScroll();
472 setScroll('root');
473 testScroll('absolute');
474
475 restoreScroll();
476 restoreScroll('root');
477
478});
479
480test("{ helper: 'original' }, absolute, with scroll offset on parent", function() {
481
482 el = $("#draggable1").css({ position: 'absolute', top: 0, left: 0 }).draggable({ helper: "original" });
483
484 setScroll();
485 testScroll('relative');
486
487 setScroll();
488 testScroll('static');
489
490 setScroll();
491 testScroll('absolute');
492
493 restoreScroll();
494
495});
496
497test("{ helper: 'original' }, absolute, with scroll offset on root", function() {
498
499 el = $("#draggable1").css({ position: 'absolute', top: 0, left: 0 }).draggable({ helper: "original" });
500
501 setScroll('root');
502 testScroll('relative');
503
504 setScroll('root');
505 testScroll('static');
506
507 setScroll('root');
508 testScroll('absolute');
509
510 restoreScroll('root');
511
512});
513
514test("{ helper: 'original' }, absolute, with scroll offset on root and parent", function() {
515
516 el = $("#draggable1").css({ position: 'absolute', top: 0, left: 0 }).draggable({ helper: "original" });
517
518 setScroll();
519 setScroll('root');
520 testScroll('relative');
521
522 setScroll();
523 setScroll('root');
524 testScroll('static');
525
526 setScroll();
527 setScroll('root');
528 testScroll('absolute');
529
530 restoreScroll();
531 restoreScroll('root');
532
533});
534
535test("{ helper: 'original' }, fixed, with scroll offset on parent", function() {
536
537 el = $("#draggable1").css({ position: 'fixed', top: 0, left: 0 }).draggable({ helper: "original" });
538
539 setScroll();
540 testScroll('relative');
541
542 setScroll();
543 testScroll('static');
544
545 setScroll();
546 testScroll('absolute');
547
548 restoreScroll();
549
550});
551
552test("{ helper: 'original' }, fixed, with scroll offset on root", function() {
553
554 el = $("#draggable1").css({ position: 'fixed', top: 0, left: 0 }).draggable({ helper: "original" });
555
556 setScroll('root');
557 testScroll('relative');
558
559 setScroll('root');
560 testScroll('static');
561
562 setScroll('root');
563 testScroll('absolute');
564
565 restoreScroll('root');
566});
567
568test("{ helper: 'original' }, fixed, with scroll offset on root and parent", function() {
569
570 el = $("#draggable1").css({ position: 'fixed', top: 0, left: 0 }).draggable({ helper: "original" });
571
572 setScroll();
573 setScroll('root');
574 testScroll('relative');
575
576 setScroll();
577 setScroll('root');
578 testScroll('static');
579
580 setScroll();
581 setScroll('root');
582 testScroll('absolute');
583
584 restoreScroll();
585 restoreScroll('root');
586
587});
588
589test("{ helper: 'clone' }, absolute", function() {
590
591 var helperOffset = null;
592 var origOffset = $("#draggable1").offset();
593
594 el = $("#draggable1").draggable({ helper: "clone", drag: function(event, ui) {
595 helperOffset = ui.helper.offset();
596 } });
597
598 drag(el, 1, 1);
599 same({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] ');
600
601});
602
603test("{ helper: 'clone' }, absolute with scroll offset on parent", function() {
604
605 setScroll();
606 var helperOffset = null;
607 var origOffset = null;
608
609 el = $("#draggable1").draggable({ helper: "clone", drag: function(event, ui) {
610 helperOffset = ui.helper.offset();
611 } });
612
613 $("#main").css('position', 'relative');
614 origOffset = $("#draggable1").offset();
615 drag(el, 1, 1);
616 same({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] ');
617
618 $("#main").css('position', 'static');
619 origOffset = $("#draggable1").offset();
620 drag(el, 1, 1);
621 same({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] ');
622
623 $("#main").css('position', 'absolute');
624 origOffset = $("#draggable1").offset();
625 drag(el, 1, 1);
626 same({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] ');
627
628 restoreScroll();
629
630});
631
632test("{ helper: 'clone' }, absolute with scroll offset on root", function() {
633
634 setScroll('root');
635 var helperOffset = null;
636 var origOffset = null;
637
638 el = $("#draggable1").draggable({ helper: "clone", drag: function(event, ui) {
639 helperOffset = ui.helper.offset();
640 } });
641
642 $("#main").css('position', 'relative');
643 origOffset = $("#draggable1").offset();
644 drag(el, 1, 1);
645 same({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] ');
646
647 $("#main").css('position', 'static');
648 origOffset = $("#draggable1").offset();
649 drag(el, 1, 1);
650 same({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] ');
651
652 $("#main").css('position', 'absolute');
653 origOffset = $("#draggable1").offset();
654 drag(el, 1, 1);
655 same({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] ');
656
657 restoreScroll('root');
658
659});
660
661test("{ helper: 'clone' }, absolute with scroll offset on root and parent", function() {
662
663 setScroll('root');
664 setScroll();
665 var helperOffset = null;
666 var origOffset = null;
667
668 el = $("#draggable1").draggable({ helper: "clone", drag: function(event, ui) {
669 helperOffset = ui.helper.offset();
670 } });
671
672 $("#main").css('position', 'relative');
673 origOffset = $("#draggable1").offset()
674 drag(el, 1, 1);
675 same({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] ');
676
677 $("#main").css('position', 'static');
678 origOffset = $("#draggable1").offset()
679 drag(el, 1, 1);
680 same({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] ');
681
682 $("#main").css('position', 'absolute');
683 origOffset = $("#draggable1").offset()
684 drag(el, 1, 1);
685 same({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] ');
686
687 restoreScroll('root');
688 restoreScroll();
689
690});
691
692test("{ opacity: 0.5 }", function() {
693
694 expect(1);
695
696 var opacity = null;
697 el = $("#draggable2").draggable({
698 opacity: 0.5,
699 start: function(event, ui) {
700 opacity = $(this).css("opacity");
701 }
702 });
703
704 drag("#draggable2", -1, -1);
705
706 equals(opacity, 0.5, "start callback: opacity is");
707
708});
709
710test("{ zIndex: 10 }", function() {
711
712 expect(1);
713
714 var expected = 10, actual;
715
716 var zIndex = null;
717 el = $("#draggable2").draggable({
718 zIndex: expected,
719 start: function(event, ui) {
720 actual = $(this).css("zIndex");
721 }
722 });
723
724 drag("#draggable2", -1, -1);
725
726 equals(actual, expected, "start callback: zIndex is");
727
728});
729
730})(jQuery);
Note: See TracBrowser for help on using the repository browser.