third-party/jquery-ui-1.10.2/tests/unit/resizable/resizable_options.js

   1 /*
   2  * resizable_options.js
   3  */
   4 (function($) {
   5
   6 module("resizable: options");
   7
   8 test( "alsoResize", function() {
   9         expect( 2 );
  10
  11         var other = $( "<div>" )
  12                         .css({
  13                                 width: 50,
  14                                 height: 50
  15                         })
  16                         .appendTo( "body" ),
  17                 element = $( "#resizable1" ).resizable({
  18                         alsoResize: other
  19                 }),
  20                 handle = ".ui-resizable-e";
  21
  22         TestHelpers.resizable.drag( handle, 80 );
  23         equal( element.width(), 180, "resizable width" );
  24         equal( other.width(), 130, "alsoResize width" );
  25 });
  26
  27
  28 test("aspectRatio: 'preserve' (e)", function() {
  29         expect(4);
  30
  31         var handle = ".ui-resizable-e", target = $("#resizable1").resizable({ aspectRatio: "preserve", handles: "all", minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 });
  32
  33         TestHelpers.resizable.drag(handle, 80);
  34         equal( target.width(), 130, "compare maxWidth");
  35         equal( target.height(), 130, "compare maxHeight");
  36
  37         TestHelpers.resizable.drag(handle, -130);
  38         equal( target.width(), 70, "compare minWidth");
  39         equal( target.height(), 70, "compare minHeight");
  40 });
  41
  42 test("aspectRatio: 'preserve' (w)", function() {
  43         expect(4);
  44
  45         var handle = ".ui-resizable-w", target = $("#resizable1").resizable({ aspectRatio: "preserve", handles: "all", minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 });
  46
  47         TestHelpers.resizable.drag(handle, -80);
  48         equal( target.width(), 130, "compare maxWidth");
  49         equal( target.height(), 130, "compare maxHeight");
  50
  51         TestHelpers.resizable.drag(handle, 130);
  52         equal( target.width(), 70, "compare minWidth");
  53         equal( target.height(), 70, "compare minHeight");
  54 });
  55
  56 test("aspectRatio: 'preserve' (n)", function() {
  57         expect(4);
  58
  59         var handle = ".ui-resizable-n", target = $("#resizable1").resizable({ aspectRatio: "preserve", handles: "all", minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 });
  60
  61         TestHelpers.resizable.drag(handle, 0, -80);
  62         equal( target.width(), 130, "compare maxWidth");
  63         equal( target.height(), 130, "compare maxHeight");
  64
  65         TestHelpers.resizable.drag(handle, 0, 80);
  66         equal( target.width(), 70, "compare minWidth");
  67         equal( target.height(), 70, "compare minHeight");
  68 });
  69
  70 test("aspectRatio: 'preserve' (s)", function() {
  71         expect(4);
  72
  73         var handle = ".ui-resizable-s", target = $("#resizable1").resizable({ aspectRatio: "preserve", handles: "all", minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 });
  74
  75         TestHelpers.resizable.drag(handle, 0, 80);
  76         equal( target.width(), 130, "compare maxWidth");
  77         equal( target.height(), 130, "compare maxHeight");
  78
  79         TestHelpers.resizable.drag(handle, 0, -80);
  80         equal( target.width(), 70, "compare minWidth");
  81         equal( target.height(), 70, "compare minHeight");
  82 });
  83
  84 test("aspectRatio: 'preserve' (se)", function() {
  85         expect(4);
  86
  87         var handle = ".ui-resizable-se", target = $("#resizable1").resizable({ aspectRatio: "preserve", handles: "all", minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 });
  88
  89         TestHelpers.resizable.drag(handle, 80, 80);
  90         equal( target.width(), 130, "compare maxWidth");
  91         equal( target.height(), 130, "compare maxHeight");
  92
  93         TestHelpers.resizable.drag(handle, -80, -80);
  94         equal( target.width(), 70, "compare minWidth");
  95         equal( target.height(), 70, "compare minHeight");
  96 });
  97
  98 test("aspectRatio: 'preserve' (sw)", function() {
  99         expect(4);
 100
 101         var handle = ".ui-resizable-sw", target = $("#resizable1").resizable({ aspectRatio: "preserve", handles: "all", minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 });
 102
 103         TestHelpers.resizable.drag(handle, -80, 80);
 104         equal( target.width(), 130, "compare maxWidth");
 105         equal( target.height(), 130, "compare maxHeight");
 106
 107         TestHelpers.resizable.drag(handle, 80, -80);
 108         equal( target.width(), 70, "compare minWidth");
 109         equal( target.height(), 70, "compare minHeight");
 110 });
 111
 112 test("aspectRatio: 'preserve' (ne)", function() {
 113         expect(4);
 114
 115         var handle = ".ui-resizable-ne", target = $("#resizable1").resizable({ aspectRatio: "preserve", handles: "all", minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 });
 116
 117         TestHelpers.resizable.drag(handle, 80, -80);
 118         equal( target.width(), 130, "compare maxWidth");
 119         equal( target.height(), 130, "compare maxHeight");
 120
 121         TestHelpers.resizable.drag(handle, -80, 80);
 122         equal( target.width(), 70, "compare minWidth");
 123         equal( target.height(), 70, "compare minHeight");
 124 });
 125
 126 test( "containment", function() {
 127         expect( 4 );
 128         var element = $( "#resizable1" ).resizable({
 129                 containment: "#container"
 130         });
 131
 132         TestHelpers.resizable.drag( ".ui-resizable-se", 20, 30 );
 133         equal( element.width(), 120, "unconstrained width within container" );
 134         equal( element.height(), 130, "unconstrained height within container" );
 135
 136         TestHelpers.resizable.drag( ".ui-resizable-se", 400, 400 );
 137         equal( element.width(), 300, "constrained width at containment edge" );
 138         equal( element.height(), 200, "constrained height at containment edge" );
 139 });
 140
 141 test("grid", function() {
 142         expect(4);
 143
 144         var handle = ".ui-resizable-se", target = $("#resizable1").resizable({ handles: "all", grid: [0, 20] });
 145
 146         TestHelpers.resizable.drag(handle, 3, 9);
 147         equal( target.width(), 103, "compare width");
 148         equal( target.height(), 100, "compare height");
 149
 150         TestHelpers.resizable.drag(handle, 15, 11);
 151         equal( target.width(), 118, "compare width");
 152         equal( target.height(), 120, "compare height");
 153 });
 154
 155 test("grid (min/max dimensions)", function() {
 156         expect(4);
 157
 158         var handle = ".ui-resizable-se", target = $("#resizable1").resizable({ handles: "all", grid: 20, minWidth: 65, minHeight: 65, maxWidth: 135, maxHeight: 135 });
 159
 160         TestHelpers.resizable.drag(handle, 50, 50);
 161         equal( target.width(), 120, "grid should respect maxWidth");
 162         equal( target.height(), 120, "grid should respect maxHeight");
 163
 164         TestHelpers.resizable.drag(handle, -100, -100);
 165         equal( target.width(), 80, "grid should respect minWidth");
 166         equal( target.height(), 80, "grid should respect minHeight");
 167 });
 168
 169 test("grid (wrapped)", function() {
 170         expect(4);
 171
 172         var handle = ".ui-resizable-se", target = $("#resizable2").resizable({ handles: "all", grid: [0, 20] });
 173
 174         TestHelpers.resizable.drag(handle, 3, 9);
 175         equal( target.width(), 103, "compare width");
 176         equal( target.height(), 100, "compare height");
 177
 178         TestHelpers.resizable.drag(handle, 15, 11);
 179         equal( target.width(), 118, "compare width");
 180         equal( target.height(), 120, "compare height");
 181 });
 182
 183 test("ui-resizable-se { handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 }", function() {
 184         expect(4);
 185
 186         var handle = ".ui-resizable-se", target = $("#resizable1").resizable({ handles: "all", minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 });
 187
 188         TestHelpers.resizable.drag(handle, -50, -50);
 189         equal( target.width(), 60, "compare minWidth" );
 190         equal( target.height(), 60, "compare minHeight" );
 191
 192         TestHelpers.resizable.drag(handle, 70, 70);
 193         equal( target.width(), 100, "compare maxWidth" );
 194         equal( target.height(), 100, "compare maxHeight" );
 195 });
 196
 197 test("ui-resizable-sw { handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 }", function() {
 198         expect(4);
 199
 200         var handle = ".ui-resizable-sw", target = $("#resizable1").resizable({ handles: "all", minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 });
 201
 202         TestHelpers.resizable.drag(handle, 50, -50);
 203         equal( target.width(), 60, "compare minWidth" );
 204         equal( target.height(), 60, "compare minHeight" );
 205
 206         TestHelpers.resizable.drag(handle, -70, 70);
 207         equal( target.width(), 100, "compare maxWidth" );
 208         equal( target.height(), 100, "compare maxHeight" );
 209 });
 210
 211 test("ui-resizable-ne { handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 }", function() {
 212         expect(4);
 213
 214         var handle = ".ui-resizable-ne", target = $("#resizable1").resizable({ handles: "all", minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 });
 215
 216         TestHelpers.resizable.drag(handle, -50, 50);
 217         equal( target.width(), 60, "compare minWidth" );
 218         equal( target.height(), 60, "compare minHeight" );
 219
 220         TestHelpers.resizable.drag(handle, 70, -70);
 221         equal( target.width(), 100, "compare maxWidth" );
 222         equal( target.height(), 100, "compare maxHeight" );
 223 });
 224
 225 test("ui-resizable-nw { handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 }", function() {
 226         expect(4);
 227
 228         var handle = ".ui-resizable-nw", target = $("#resizable1").resizable({ handles: "all", minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 });
 229
 230         TestHelpers.resizable.drag(handle, 70, 70);
 231         equal( target.width(), 60, "compare minWidth" );
 232         equal( target.height(), 60, "compare minHeight" );
 233
 234         TestHelpers.resizable.drag(handle, -70, -70);
 235         equal( target.width(), 100, "compare maxWidth" );
 236         equal( target.height(), 100, "compare maxHeight" );
 237 });
 238
 239 test("zIndex, applied to all handles", function() {
 240         expect(8);
 241
 242         var target = $("<div></div>").resizable({ handles: "all", zIndex: 100 });
 243         target.children( ".ui-resizable-handle" ).each( function( index, handle ) {
 244                 equal( $( handle ).css( "zIndex" ), 100, "compare zIndex" );
 245         });
 246 });
 247
 248 test( "alsoResize + containment", function() {
 249         expect( 4 );
 250         var other = $( "<div>" )
 251                         .css({
 252                                 width: 50,
 253                                 height: 50
 254                         })
 255                         .appendTo( "body" ),
 256                 element = $( "#resizable1" ).resizable({
 257                         alsoResize: other,
 258                         containment: "#container"
 259                 });
 260
 261         TestHelpers.resizable.drag( ".ui-resizable-se", 400, 400 );
 262         equal( element.width(), 300, "resizable constrained width at containment edge" );
 263         equal( element.height(), 200, "resizable constrained height at containment edge" );
 264         equal( other.width(), 250, "alsoResize constrained width at containment edge" );
 265         equal( other.height(), 150, "alsoResize constrained height at containment edge" );
 266 });
 267
 268 })(jQuery);