[Summary view] [Print] [Text view]

   1  /*

   2   * resizable tests

   3   */
   4  (function($) {
   5  //

   6  // Resizable Test Helper Functions

   7  //

   8  
   9  var defaults = {
  10      animate: false,
  11      animateDuration: 'slow',
  12      animateEasing: 'swing',
  13      alsoResize: false,
  14      aspectRatio: false,
  15      autoHide: false,
  16      cancel: ':input',
  17      containment: false,
  18      delay: 0,
  19      disabled: false,
  20      disableSelection: true,
  21      distance: 1,
  22      ghost: false,
  23      grid: false,
  24      handles: '???',
  25      helper: null,
  26      knobHandles: false,
  27      maxHeight: null,
  28      maxWidth: null,
  29      minHeight: 10,
  30      minWidth: 10,
  31      preserveCursor: true,
  32      preventDefault: true,
  33      proportionallyResize: false,
  34      transparent: false
  35  };
  36  
  37  var drag = function(el, dx, dy, complete) {
  38  
  39      // speed = sync -> Drag syncrhonously.

  40      // speed = fast|slow -> Drag asyncrhonously - animated.

  41  
  42      //this mouseover is to work around a limitation in resizable

  43      //TODO: fix resizable so handle doesn't require mouseover in order to be used

  44      $(el).simulate("mouseover");
  45  
  46      return $(el).simulate("drag", {
  47          dx: dx||0, dy: dy||0, speed: 'sync', complete: complete 
  48      });
  49  };
  50  
  51  // Resizable Tests

  52  module("resizable");
  53  
  54  test("init", function() {
  55      expect(6);
  56  
  57      $("<div></div>").appendTo('body').resizable().remove();
  58      ok(true, '.resizable() called on element');
  59  
  60      $([]).resizable().remove();
  61      ok(true, '.resizable() called on empty collection');
  62  
  63      $('<div></div>').resizable().remove();
  64      ok(true, '.resizable() called on disconnected DOMElement');
  65  
  66      $('<div></div>').resizable().resizable("foo").remove();
  67      ok(true, 'arbitrary method called after init');
  68  
  69      el = $('<div></div>').resizable()
  70      var foo = el.data("foo.resizable");
  71      el.remove();
  72      ok(true, 'arbitrary option getter after init');
  73  
  74      $('<div></div>').resizable().data("foo.resizable", "bar").remove();
  75      ok(true, 'arbitrary option setter after init');
  76  });
  77  
  78  test("destroy", function() {
  79      expect(6);
  80  
  81      $("<div></div>").appendTo('body').resizable().resizable("destroy").remove();
  82      ok(true, '.resizable("destroy") called on element');
  83  
  84      $([]).resizable().resizable("destroy").remove();
  85      ok(true, '.resizable("destroy") called on empty collection');
  86  
  87      $('<div></div>').resizable().resizable("destroy").remove();
  88      ok(true, '.resizable("destroy") called on disconnected DOMElement');
  89  
  90      $('<div></div>').resizable().resizable("destroy").resizable("foo").remove();
  91      ok(true, 'arbitrary method called after destroy');
  92  
  93      el = $('<div></div>').resizable();
  94      var foo = el.resizable("destroy").data("foo.resizable");
  95      el.remove();
  96      ok(true, 'arbitrary option getter after destroy');
  97  
  98      $('<div></div>').resizable().resizable("destroy").data("foo.resizable", "bar").remove();
  99      ok(true, 'arbitrary option setter after destroy');
 100  });
 101  
 102  test("element types", function() {
 103      var typeNames = ('p,h1,h2,h3,h4,h5,h6,blockquote,ol,ul,dl,div,form'
 104          + ',table,fieldset,address,ins,del,em,strong,q,cite,dfn,abbr'
 105          + ',acronym,code,samp,kbd,var,img,object,hr'
 106          + ',input,button,label,select,iframe').split(',');
 107  
 108      $.each(typeNames, function(i) {
 109          var typeName = typeNames[i];
 110          el = $(document.createElement(typeName)).appendTo('body');
 111          (typeName == 'table' && el.append("<tr><td>content</td></tr>"));
 112          el.resizable();
 113          ok(true, '$("&lt;' + typeName + '/&gt").resizable()');
 114          el.resizable("destroy");
 115          el.remove();
 116      });
 117  });
 118  
 119  test("defaults", function() {
 120      el = $('<div></div>').resizable();
 121      $.each(defaults, function(key, val) {
 122          var actual = el.data(key + ".resizable"), expected = val;
 123          same(actual, expected, key);
 124      });
 125      el.remove();
 126  });
 127  
 128  test("n", function() {
 129      expect(2);
 130  
 131      var handle = '.ui-resizable-n', target = $('#resizable1').resizable({ handles: 'all' });
 132  
 133      drag(handle, 0, -50);
 134      equals( target.height(), 150, "compare height" );
 135  
 136      drag(handle, 0, 50);
 137      equals( target.height(), 100, "compare height" );
 138  });
 139  
 140  test("s", function() {
 141      expect(2);
 142  
 143      var handle = '.ui-resizable-s', target = $('#resizable1').resizable({ handles: 'all' });
 144  
 145      drag(handle, 0, 50);
 146      equals( target.height(), 150, "compare height" );
 147  
 148      drag(handle, 0, -50);
 149      equals( target.height(), 100, "compare height" );
 150  });
 151  
 152  test("e", function() {
 153      expect(2);
 154  
 155      var handle = '.ui-resizable-e', target = $('#resizable1').resizable({ handles: 'all' });
 156  
 157      drag(handle, 50);
 158      equals( target.width(), 150, "compare width");
 159  
 160      drag(handle, -50);
 161      equals( target.width(), 100, "compare width" );
 162  });
 163  
 164  test("w", function() {
 165      expect(2);
 166  
 167      var handle = '.ui-resizable-w', target = $('#resizable1').resizable({ handles: 'all' });
 168  
 169      drag(handle, -50);
 170      equals( target.width(), 150, "compare width" );
 171  
 172      drag(handle, 50);
 173      equals( target.width(), 100, "compare width" );
 174  });
 175  
 176  test("ne", function() {
 177      expect(4);
 178  
 179      var handle = '.ui-resizable-ne', target = $('#resizable1').css({ overflow: 'hidden' }).resizable({ handles: 'all' });
 180  
 181      drag(handle, -50, -50);
 182      equals( target.width(), 50, "compare width" );
 183      equals( target.height(), 150, "compare height" );
 184  
 185      drag(handle, 50, 50);
 186      equals( target.width(), 100, "compare width" );
 187      equals( target.height(), 100, "compare height" );
 188  });
 189  
 190  test("se", function() {
 191      expect(4);
 192  
 193      var handle = '.ui-resizable-se', target = $('#resizable1').resizable({ handles: 'all' });
 194  
 195      drag(handle, 50, 50);
 196      equals( target.width(), 150, "compare width" );
 197      equals( target.height(), 150, "compare height" );
 198  
 199      drag(handle, -50, -50);
 200      equals( target.width(), 100, "compare width" );
 201      equals( target.height(), 100, "compare height" );
 202  });
 203  
 204  test("sw", function() {
 205      expect(4);
 206  
 207      var handle = '.ui-resizable-sw', target = $('#resizable1').resizable({ handles: 'all' });
 208  
 209      drag(handle, -50, -50);
 210      equals( target.width(), 150, "compare width" );
 211      equals( target.height(), 50, "compare height" );
 212  
 213      drag(handle, 50, 50);
 214      equals( target.width(), 100, "compare width" );
 215      equals( target.height(), 100, "compare height" );
 216  });
 217  
 218  test("nw", function() {
 219      expect(4);
 220  
 221      var handle = '.ui-resizable-nw', target = $('#resizable1').resizable({ handles: 'all' });
 222  
 223      drag(handle, -50, -50);
 224      equals( target.width(), 150, "compare width" );
 225      equals( target.height(), 150, "compare height" );
 226  
 227      drag(handle, 50, 50);
 228      equals( target.width(), 100, "compare width" );
 229      equals( target.height(), 100, "compare height" );
 230  });
 231  
 232  module("resizable: Options");
 233  
 234  test("aspectRatio: 'preserve' (e)", function() {
 235      expect(4);
 236  
 237      var handle = '.ui-resizable-e', target = $('#resizable1').resizable({ aspectRatio: 'preserve', handles: 'all', minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 });
 238  
 239      drag(handle, 80);
 240      equals( target.width(), 130, "compare maxWidth");
 241      equals( target.height(), 130, "compare maxHeight");
 242  
 243      drag(handle, -130);
 244      equals( target.width(), 70, "compare minWidth");
 245      equals( target.height(), 70, "compare minHeight");
 246  });
 247  
 248  test("aspectRatio: 'preserve' (w)", function() {
 249      expect(4);
 250  
 251      var handle = '.ui-resizable-w', target = $('#resizable1').resizable({ aspectRatio: 'preserve', handles: 'all', minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 });
 252  
 253      drag(handle, -80);
 254      equals( target.width(), 130, "compare maxWidth");
 255      equals( target.height(), 130, "compare maxHeight");
 256  
 257      drag(handle, 130);
 258      equals( target.width(), 70, "compare minWidth");
 259      equals( target.height(), 70, "compare minHeight");
 260  });
 261  
 262  test("aspectRatio: 'preserve' (n)", function() {
 263      expect(4);
 264  
 265      var handle = '.ui-resizable-n', target = $('#resizable1').resizable({ aspectRatio: 'preserve', handles: 'all', minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 });
 266  
 267      drag(handle, 0, -80);
 268      equals( target.width(), 130, "compare maxWidth");
 269      equals( target.height(), 130, "compare maxHeight");
 270  
 271      drag(handle, 0, 80);
 272      equals( target.width(), 70, "compare minWidth");
 273      equals( target.height(), 70, "compare minHeight");
 274  });
 275  
 276  test("aspectRatio: 'preserve' (s)", function() {
 277      expect(4);
 278  
 279      var handle = '.ui-resizable-s', target = $('#resizable1').resizable({ aspectRatio: 'preserve', handles: 'all', minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 });
 280  
 281      drag(handle, 0, 80);
 282      equals( target.width(), 130, "compare maxWidth");
 283      equals( target.height(), 130, "compare maxHeight");
 284  
 285      drag(handle, 0, -80);
 286      equals( target.width(), 70, "compare minWidth");
 287      equals( target.height(), 70, "compare minHeight");
 288  });
 289  
 290  test("aspectRatio: 'preserve' (se)", function() {
 291      expect(4);
 292  
 293      var handle = '.ui-resizable-se', target = $('#resizable1').resizable({ aspectRatio: 'preserve', handles: 'all', minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 });
 294  
 295      drag(handle, 80, 80);
 296      equals( target.width(), 130, "compare maxWidth");
 297      equals( target.height(), 130, "compare maxHeight");
 298  
 299      drag(handle, -80, -80);
 300      equals( target.width(), 70, "compare minWidth");
 301      equals( target.height(), 70, "compare minHeight");
 302  });
 303  
 304  test("aspectRatio: 'preserve' (sw)", function() {
 305      expect(4);
 306  
 307      var handle = '.ui-resizable-sw', target = $('#resizable1').resizable({ aspectRatio: 'preserve', handles: 'all', minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 });
 308  
 309      drag(handle, -80, 80);
 310      equals( target.width(), 130, "compare maxWidth");
 311      equals( target.height(), 130, "compare maxHeight");
 312  
 313      drag(handle, 80, -80);
 314      equals( target.width(), 70, "compare minWidth");
 315      equals( target.height(), 70, "compare minHeight");
 316  });
 317  
 318  test("aspectRatio: 'preserve' (ne)", function() {
 319      expect(4);
 320  
 321      var handle = '.ui-resizable-ne', target = $('#resizable1').resizable({ aspectRatio: 'preserve', handles: 'all', minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 });
 322  
 323      drag(handle, 80, -80);
 324      equals( target.width(), 130, "compare maxWidth");
 325      equals( target.height(), 130, "compare maxHeight");
 326  
 327      drag(handle, -80, 80);
 328      equals( target.width(), 70, "compare minWidth");
 329      equals( target.height(), 70, "compare minHeight");
 330  });
 331  
 332  test("grid", function() {
 333      expect(4);
 334  
 335      var handle = '.ui-resizable-se', target = $('#resizable1').resizable({ handles: 'all', grid: [0, 20] });
 336  
 337      drag(handle, 3, 9);
 338      equals( target.width(), 103, "compare width");
 339      equals( target.height(), 100, "compare height");
 340  
 341      drag(handle, 15, 11);
 342      equals( target.width(), 118, "compare width");
 343      equals( target.height(), 120, "compare height");
 344  });
 345  
 346  test("grid (wrapped)", function() {
 347      expect(4);
 348  
 349      var handle = '.ui-resizable-se', target = $('#resizable2').resizable({ handles: 'all', grid: [0, 20] });
 350  
 351      drag(handle, 3, 9);
 352      equals( target.width(), 103, "compare width");
 353      equals( target.height(), 100, "compare height");
 354  
 355      drag(handle, 15, 11);
 356      equals( target.width(), 118, "compare width");
 357      equals( target.height(), 120, "compare height");
 358  });
 359  
 360  test("ui-resizable-se { handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 }", function() {
 361      expect(4);
 362  
 363      var handle = '.ui-resizable-se', target = $('#resizable1').resizable({ handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 });
 364  
 365      drag(handle, -50, -50);
 366      equals( target.width(), 60, "compare minWidth" );
 367      equals( target.height(), 60, "compare minHeight" );
 368  
 369      drag(handle, 70, 70);
 370      equals( target.width(), 100, "compare maxWidth" );
 371      equals( target.height(), 100, "compare maxHeight" );
 372  });
 373  
 374  test("ui-resizable-sw { handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 }", function() {
 375      expect(4);
 376  
 377      var handle = '.ui-resizable-sw', target = $('#resizable1').resizable({ handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 });
 378  
 379      drag(handle, 50, -50);
 380      equals( target.width(), 60, "compare minWidth" );
 381      equals( target.height(), 60, "compare minHeight" );
 382  
 383      drag(handle, -70, 70);
 384      equals( target.width(), 100, "compare maxWidth" );
 385      equals( target.height(), 100, "compare maxHeight" );
 386  });
 387  
 388  test("ui-resizable-ne { handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 }", function() {
 389      expect(4);
 390  
 391      var handle = '.ui-resizable-ne', target = $('#resizable1').resizable({ handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 });
 392  
 393      drag(handle, -50, 50);
 394      equals( target.width(), 60, "compare minWidth" );
 395      equals( target.height(), 60, "compare minHeight" );
 396  
 397      drag(handle, 70, -70);
 398      equals( target.width(), 100, "compare maxWidth" );
 399      equals( target.height(), 100, "compare maxHeight" );
 400  });
 401  
 402  test("ui-resizable-nw { handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 }", function() {
 403      expect(4);
 404  
 405      var handle = '.ui-resizable-nw', target = $('#resizable1').resizable({ handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 });
 406  
 407      drag(handle, 70, 70);
 408      equals( target.width(), 60, "compare minWidth" );
 409      equals( target.height(), 60, "compare minHeight" );
 410  
 411      drag(handle, -70, -70);
 412      equals( target.width(), 100, "compare maxWidth" );
 413      equals( target.height(), 100, "compare maxHeight" );
 414  });
 415  
 416  })(jQuery);