third-party/jquery-ui-1.10.2/tests/unit/position/position_core.js

   1 (function( $ ) {
   2
   3 var win = $( window ),
   4         scrollTopSupport = function() {
   5                 var support = win.scrollTop( 1 ).scrollTop() === 1;
   6                 win.scrollTop( 0 );
   7                 scrollTopSupport = function() {
   8                         return support;
   9                 };
  10                 return support;
  11         };
  12
  13 module( "position", {
  14         setup: function() {
  15                 win.scrollTop( 0 ).scrollLeft( 0 );
  16         }
  17 });
  18
  19 TestHelpers.testJshint( "position" );
  20
  21 test( "my, at, of", function() {
  22         expect( 4 );
  23
  24         $( "#elx" ).position({
  25                 my: "left top",
  26                 at: "left top",
  27                 of: "#parentx",
  28                 collision: "none"
  29         });
  30         deepEqual( $( "#elx" ).offset(), { top: 40, left: 40 }, "left top, left top" );
  31
  32         $( "#elx" ).position({
  33                 my: "left top",
  34                 at: "left bottom",
  35                 of: "#parentx",
  36                 collision: "none"
  37         });
  38         deepEqual( $( "#elx" ).offset(), { top: 60, left: 40 }, "left top, left bottom" );
  39
  40         $( "#elx" ).position({
  41                 my: "left",
  42                 at: "bottom",
  43                 of: "#parentx",
  44                 collision: "none"
  45         });
  46         deepEqual( $( "#elx" ).offset(), { top: 55, left: 50 }, "left, bottom" );
  47
  48         $( "#elx" ).position({
  49                 my: "left foo",
  50                 at: "bar baz",
  51                 of: "#parentx",
  52                 collision: "none"
  53         });
  54         deepEqual( $( "#elx" ).offset(), { top: 45, left: 50 }, "left foo, bar baz" );
  55 });
  56
  57 test( "multiple elements", function() {
  58         expect( 3 );
  59
  60         var elements = $( "#el1, #el2" ),
  61                 result = elements.position({
  62                         my: "left top",
  63                         at: "left bottom",
  64                         of: "#parent",
  65                         collision: "none"
  66                 }),
  67                 expected = { top: 10, left: 4 };
  68
  69         deepEqual( result, elements );
  70         elements.each(function() {
  71                 deepEqual( $( this ).offset(), expected );
  72         });
  73 });
  74
  75 test( "positions", function() {
  76         expect( 18 );
  77
  78         var offsets = {
  79                         left: 0,
  80                         center: 3,
  81                         right: 6,
  82                         top: 0,
  83                         bottom: 6
  84                 },
  85                 start = { left: 4, top: 4 },
  86                 el = $( "#el1" );
  87
  88         $.each( [ 0, 1 ], function( my ) {
  89                 $.each( [ "top", "center", "bottom" ], function( vindex, vertical ) {
  90                         $.each( [ "left", "center", "right" ], function( hindex, horizontal ) {
  91                                 var _my = my ? horizontal + " " + vertical : "left top",
  92                                         _at = !my ? horizontal + " " + vertical : "left top";
  93                                 el.position({
  94                                         my: _my,
  95                                         at: _at,
  96                                         of: "#parent",
  97                                         collision: "none"
  98                                 });
  99                                 deepEqual( el.offset(), {
 100                                         top: start.top + offsets[ vertical ] * (my ? -1 : 1),
 101                                         left: start.left + offsets[ horizontal ] * (my ? -1 : 1)
 102                                 }, "Position via " + QUnit.jsDump.parse({ my: _my, at: _at }) );
 103                         });
 104                 });
 105         });
 106 });
 107
 108 test( "of", function() {
 109         expect( 9 + (scrollTopSupport() ? 1 : 0) );
 110
 111         var event;
 112
 113         $( "#elx" ).position({
 114                 my: "left top",
 115                 at: "left top",
 116                 of: "#parentx",
 117                 collision: "none"
 118         });
 119         deepEqual( $( "#elx" ).offset(), { top: 40, left: 40 }, "selector" );
 120
 121         $( "#elx" ).position({
 122                 my: "left top",
 123                 at: "left bottom",
 124                 of: $( "#parentx"),
 125                 collision: "none"
 126         });
 127         deepEqual( $( "#elx" ).offset(), { top: 60, left: 40 }, "jQuery object" );
 128
 129         $( "#elx" ).position({
 130                 my: "left top",
 131                 at: "left top",
 132                 of: $( "#parentx" )[ 0 ],
 133                 collision: "none"
 134         });
 135         deepEqual( $( "#elx" ).offset(), { top: 40, left: 40 }, "DOM element" );
 136
 137         $( "#elx" ).position({
 138                 my: "right bottom",
 139                 at: "right bottom",
 140                 of: document,
 141                 collision: "none"
 142         });
 143         deepEqual( $( "#elx" ).offset(), {
 144                 top: $( document ).height() - 10,
 145                 left: $( document ).width() - 10
 146         }, "document" );
 147
 148         $( "#elx" ).position({
 149                 my: "right bottom",
 150                 at: "right bottom",
 151                 of: $( document ),
 152                 collision: "none"
 153         });
 154         deepEqual( $( "#elx" ).offset(), {
 155                 top: $( document ).height() - 10,
 156                 left: $( document ).width() - 10
 157         }, "document as jQuery object" );
 158
 159         win.scrollTop( 0 );
 160
 161         $( "#elx" ).position({
 162                 my: "right bottom",
 163                 at: "right bottom",
 164                 of: window,
 165                 collision: "none"
 166         });
 167         deepEqual( $( "#elx" ).offset(), {
 168                 top: win.height() - 10,
 169                 left: win.width() - 10
 170         }, "window" );
 171
 172         $( "#elx" ).position({
 173                 my: "right bottom",
 174                 at: "right bottom",
 175                 of: win,
 176                 collision: "none"
 177         });
 178         deepEqual( $( "#elx" ).offset(), {
 179                 top: win.height() - 10,
 180                 left: win.width() - 10
 181         }, "window as jQuery object" );
 182
 183         if ( scrollTopSupport() ) {
 184                 win.scrollTop( 500 ).scrollLeft( 200 );
 185                 $( "#elx" ).position({
 186                         my: "right bottom",
 187                         at: "right bottom",
 188                         of: window,
 189                         collision: "none"
 190                 });
 191                 deepEqual( $( "#elx" ).offset(), {
 192                         top: win.height() + 500 - 10,
 193                         left: win.width() + 200 - 10
 194                 }, "window, scrolled" );
 195                 win.scrollTop( 0 ).scrollLeft( 0 );
 196         }
 197
 198         event = $.extend( $.Event( "someEvent" ), { pageX: 200, pageY: 300 } );
 199         $( "#elx" ).position({
 200                 my: "left top",
 201                 at: "left top",
 202                 of: event,
 203                 collision: "none"
 204         });
 205         deepEqual( $( "#elx" ).offset(), {
 206                 top: 300,
 207                 left: 200
 208         }, "event - left top, left top" );
 209
 210         event = $.extend( $.Event( "someEvent" ), { pageX: 400, pageY: 600 } );
 211         $( "#elx" ).position({
 212                 my: "left top",
 213                 at: "right bottom",
 214                 of: event,
 215                 collision: "none"
 216         });
 217         deepEqual( $( "#elx" ).offset(), {
 218                 top: 600,
 219                 left: 400
 220         }, "event - left top, right bottom" );
 221 });
 222
 223 test( "offsets", function() {
 224         expect( 7 );
 225
 226         $( "#elx" ).position({
 227                 my: "left top",
 228                 at: "left+10 bottom+10",
 229                 of: "#parentx",
 230                 collision: "none"
 231         });
 232         deepEqual( $( "#elx" ).offset(), { top: 70, left: 50 }, "offsets in at" );
 233
 234         $( "#elx" ).position({
 235                 my: "left+10 top-10",
 236                 at: "left bottom",
 237                 of: "#parentx",
 238                 collision: "none"
 239         });
 240         deepEqual( $( "#elx" ).offset(), { top: 50, left: 50 }, "offsets in my" );
 241
 242         $( "#elx" ).position({
 243                 my: "left top",
 244                 at: "left+50% bottom-10%",
 245                 of: "#parentx",
 246                 collision: "none"
 247         });
 248         deepEqual( $( "#elx" ).offset(), { top: 58, left: 50 }, "percentage offsets in at" );
 249
 250         $( "#elx" ).position({
 251                 my: "left-30% top+50%",
 252                 at: "left bottom",
 253                 of: "#parentx",
 254                 collision: "none"
 255         });
 256         deepEqual( $( "#elx" ).offset(), { top: 65, left: 37 }, "percentage offsets in my" );
 257
 258         $( "#elx" ).position({
 259                 my: "left-30.001% top+50.0%",
 260                 at: "left bottom",
 261                 of: "#parentx",
 262                 collision: "none"
 263         });
 264         deepEqual( $( "#elx" ).offset(), { top: 65, left: 37 }, "decimal percentage offsets in my" );
 265
 266         $( "#elx" ).position({
 267                 my: "left+10.4 top-10.6",
 268                 at: "left bottom",
 269                 of: "#parentx",
 270                 collision: "none"
 271         });
 272         deepEqual( $( "#elx" ).offset(), { top: 49, left: 50 }, "decimal offsets in my" );
 273
 274         $( "#elx" ).position({
 275                 my: "left+right top-left",
 276                 at: "left-top bottom-bottom",
 277                 of: "#parentx",
 278                 collision: "none"
 279         });
 280         deepEqual( $( "#elx" ).offset(), { top: 60, left: 40 }, "invalid offsets" );
 281 });
 282
 283 test( "using", function() {
 284         expect( 10 );
 285
 286         var count = 0,
 287                 elems = $( "#el1, #el2" ),
 288                 of = $( "#parentx" ),
 289                 expectedPosition = { top: 60, left: 60 },
 290                 expectedFeedback = {
 291                         target: {
 292                                 element: of,
 293                                 width: 20,
 294                                 height: 20,
 295                                 left: 40,
 296                                 top: 40
 297                         },
 298                         element: {
 299                                 width: 6,
 300                                 height: 6,
 301                                 left: 60,
 302                                 top: 60
 303                         },
 304                         horizontal: "left",
 305                         vertical: "top",
 306                         important: "vertical"
 307                 },
 308                 originalPosition = elems.position({
 309                         my: "right bottom",
 310                         at: "rigt bottom",
 311                         of: "#parentx",
 312                         collision: "none"
 313                 }).offset();
 314
 315         elems.position({
 316                 my: "left top",
 317                 at: "center+10 bottom",
 318                 of: "#parentx",
 319                 using: function( position, feedback ) {
 320                         deepEqual( this, elems[ count ], "correct context for call #" + count );
 321                         deepEqual( position, expectedPosition, "correct position for call #" + count );
 322                         deepEqual( feedback.element.element[ 0 ], elems[ count ] );
 323                         delete feedback.element.element;
 324                         deepEqual( feedback, expectedFeedback );
 325                         count++;
 326                 }
 327         });
 328
 329         elems.each(function() {
 330                 deepEqual( $( this ).offset(), originalPosition, "elements not moved" );
 331         });
 332 });
 333
 334 function collisionTest( config, result, msg ) {
 335         var elem = $( "#elx" ).position( $.extend({
 336                 my: "left top",
 337                 at: "right bottom",
 338                 of: "#parent"
 339         }, config ) );
 340         deepEqual( elem.offset(), result, msg );
 341 }
 342
 343 function collisionTest2( config, result, msg ) {
 344         collisionTest( $.extend({
 345                 my: "right bottom",
 346                 at: "left top"
 347         }, config ), result, msg );
 348 }
 349
 350 test( "collision: fit, no collision", function() {
 351         expect( 2 );
 352
 353         collisionTest({
 354                 collision: "fit"
 355         }, {
 356                 top: 10,
 357                 left: 10
 358         }, "no offset" );
 359
 360         collisionTest({
 361                 collision: "fit",
 362                 at: "right+2 bottom+3"
 363         }, {
 364                 top: 13,
 365                 left: 12
 366         }, "with offset" );
 367 });
 368
 369 // Currently failing in IE8 due to the iframe used by TestSwarm
 370 if ( !/msie [\w.]+/.exec( navigator.userAgent.toLowerCase() ) ) {
 371 test( "collision: fit, collision", function() {
 372         expect( 2 + (scrollTopSupport() ? 1 : 0) );
 373
 374         collisionTest2({
 375                 collision: "fit"
 376         }, {
 377                 top: 0,
 378                 left: 0
 379         }, "no offset" );
 380
 381         collisionTest2({
 382                 collision: "fit",
 383                 at: "left+2 top+3"
 384         }, {
 385                 top: 0,
 386                 left: 0
 387         }, "with offset" );
 388
 389         if ( scrollTopSupport() ) {
 390                 win.scrollTop( 300 ).scrollLeft( 200 );
 391                 collisionTest({
 392                         collision: "fit"
 393                 }, {
 394                         top: 300,
 395                         left: 200
 396                 }, "window scrolled" );
 397
 398                 win.scrollTop( 0 ).scrollLeft( 0 );
 399         }
 400 });
 401 }
 402
 403 test( "collision: flip, no collision", function() {
 404         expect( 2 );
 405
 406         collisionTest({
 407                 collision: "flip"
 408         }, {
 409                 top: 10,
 410                 left: 10
 411         }, "no offset" );
 412
 413         collisionTest({
 414                 collision: "flip",
 415                 at: "right+2 bottom+3"
 416         }, {
 417                 top: 13,
 418                 left: 12
 419         }, "with offset" );
 420 });
 421
 422 test( "collision: flip, collision", function() {
 423         expect( 2 );
 424
 425         collisionTest2({
 426                 collision: "flip"
 427         }, {
 428                 top: 10,
 429                 left: 10
 430         }, "no offset" );
 431
 432         collisionTest2({
 433                 collision: "flip",
 434                 at: "left+2 top+3"
 435         }, {
 436                 top: 7,
 437                 left: 8
 438         }, "with offset" );
 439 });
 440
 441 test( "collision: flipfit, no collision", function() {
 442         expect( 2 );
 443
 444         collisionTest({
 445                 collision: "flipfit"
 446         }, {
 447                 top: 10,
 448                 left: 10
 449         }, "no offset" );
 450
 451         collisionTest({
 452                 collision: "flipfit",
 453                 at: "right+2 bottom+3"
 454         }, {
 455                 top: 13,
 456                 left: 12
 457         }, "with offset" );
 458 });
 459
 460 test( "collision: flipfit, collision", function() {
 461         expect( 2 );
 462
 463         collisionTest2({
 464                 collision: "flipfit"
 465         }, {
 466                 top: 10,
 467                 left: 10
 468         }, "no offset" );
 469
 470         collisionTest2({
 471                 collision: "flipfit",
 472                 at: "left+2 top+3"
 473         }, {
 474                 top: 7,
 475                 left: 8
 476         }, "with offset" );
 477 });
 478
 479 test( "collision: none, no collision", function() {
 480         expect( 2 );
 481
 482         collisionTest({
 483                 collision: "none"
 484         }, {
 485                 top: 10,
 486                 left: 10
 487         }, "no offset" );
 488
 489         collisionTest({
 490                 collision: "none",
 491                 at: "right+2 bottom+3"
 492         }, {
 493                 top: 13,
 494                 left: 12
 495         }, "with offset" );
 496 });
 497
 498 test( "collision: none, collision", function() {
 499         expect( 2 );
 500
 501         collisionTest2({
 502                 collision: "none"
 503         }, {
 504                 top: -6,
 505                 left: -6
 506         }, "no offset" );
 507
 508         collisionTest2({
 509                 collision: "none",
 510                 at: "left+2 top+3"
 511         }, {
 512                 top: -3,
 513                 left: -4
 514         }, "with offset" );
 515 });
 516
 517 test( "collision: fit, with margin", function() {
 518         expect( 2 );
 519
 520         $( "#elx" ).css({
 521                 marginTop: 6,
 522                 marginLeft: 4
 523         });
 524
 525         collisionTest({
 526                 collision: "fit"
 527         }, {
 528                 top: 10,
 529                 left: 10
 530         }, "right bottom" );
 531
 532         collisionTest2({
 533                 collision: "fit"
 534         }, {
 535                 top: 6,
 536                 left: 4
 537         }, "left top" );
 538 });
 539
 540 test( "collision: flip, with margin", function() {
 541         expect( 3 );
 542
 543         $( "#elx" ).css({
 544                 marginTop: 6,
 545                 marginLeft: 4
 546         });
 547
 548         collisionTest({
 549                 collision: "flip"
 550         }, {
 551                 top: 10,
 552                 left: 10
 553         }, "left top" );
 554
 555         collisionTest2({
 556                 collision: "flip"
 557         }, {
 558                 top: 10,
 559                 left: 10
 560         }, "right bottom" );
 561
 562         collisionTest2({
 563                 collision: "flip",
 564                 my: "left top"
 565         }, {
 566                 top: 0,
 567                 left: 4
 568         }, "right bottom" );
 569 });
 570
 571 test( "within", function() {
 572         expect( 6 );
 573
 574         collisionTest({
 575                 within: "#within",
 576                 collision: "fit"
 577         }, {
 578                 top: 4,
 579                 left: 2
 580         }, "fit - right bottom" );
 581
 582         collisionTest2({
 583                 within: "#within",
 584                 collision: "fit"
 585         }, {
 586                 top: 2,
 587                 left: 0
 588         }, "fit - left top" );
 589
 590         collisionTest({
 591                 within: "#within",
 592                 collision: "flip"
 593         }, {
 594                 top: 10,
 595                 left: -6
 596         }, "flip - right bottom" );
 597
 598         collisionTest2({
 599                 within: "#within",
 600                 collision: "flip"
 601         }, {
 602                 top: 10,
 603                 left: -6
 604         }, "flip - left top" );
 605
 606         collisionTest({
 607                 within: "#within",
 608                 collision: "flipfit"
 609         }, {
 610                 top: 4,
 611                 left: 0
 612         }, "flipfit - right bottom" );
 613
 614         collisionTest2({
 615                 within: "#within",
 616                 collision: "flipfit"
 617         }, {
 618                 top: 4,
 619                 left: 0
 620         }, "flipfit - left top" );
 621 });
 622
 623 test( "with scrollbars", function() {
 624         expect( 4 );
 625
 626         $( "#scrollx" ).css({
 627                 width: 100,
 628                 height: 100,
 629                 left: 0,
 630                 top: 0
 631         });
 632
 633         collisionTest({
 634                 of: "#scrollx",
 635                 collision: "fit",
 636                 within: "#scrollx"
 637         }, {
 638                 top: 90,
 639                 left: 90
 640         }, "visible" );
 641
 642         $( "#scrollx" ).css({
 643                 overflow: "scroll"
 644         });
 645
 646         var scrollbarInfo = $.position.getScrollInfo( $.position.getWithinInfo( $( "#scrollx" ) ) );
 647
 648         collisionTest({
 649                 of: "#scrollx",
 650                 collision: "fit",
 651                 within: "#scrollx"
 652         }, {
 653                 top: 90 - scrollbarInfo.height,
 654                 left: 90 - scrollbarInfo.width
 655         }, "scroll" );
 656
 657         $( "#scrollx" ).css({
 658                 overflow: "auto"
 659         });
 660
 661         collisionTest({
 662                 of: "#scrollx",
 663                 collision: "fit",
 664                 within: "#scrollx"
 665         }, {
 666                 top: 90,
 667                 left: 90
 668         }, "auto, no scroll" );
 669
 670         $( "#scrollx" ).css({
 671                 overflow: "auto"
 672         }).append( $("<div>").height(300).width(300) );
 673
 674         collisionTest({
 675                 of: "#scrollx",
 676                 collision: "fit",
 677                 within: "#scrollx"
 678         }, {
 679                 top: 90 - scrollbarInfo.height,
 680                 left: 90 - scrollbarInfo.width
 681         }, "auto, with scroll" );
 682 });
 683
 684 test( "fractions", function() {
 685         expect( 1 );
 686
 687         $( "#fractions-element" ).position({
 688                 my: "left top",
 689                 at: "left top",
 690                 of: "#fractions-parent",
 691                 collision: "none"
 692         });
 693         deepEqual( $( "#fractions-element" ).offset(), $( "#fractions-parent" ).offset(), "left top, left top" );
 694 });
 695
 696 test( "bug #5280: consistent results (avoid fractional values)", function() {
 697         expect( 1 );
 698
 699         var wrapper = $( "#bug-5280" ),
 700                 elem = wrapper.children(),
 701                 offset1 = elem.position({
 702                         my: "center",
 703                         at: "center",
 704                         of: wrapper,
 705                         collision: "none"
 706                 }).offset(),
 707                 offset2 = elem.position({
 708                         my: "center",
 709                         at: "center",
 710                         of: wrapper,
 711                         collision: "none"
 712                 }).offset();
 713         deepEqual( offset1, offset2 );
 714 });
 715
 716 }( jQuery ) );