From 3974b55ba5078799df818c78d9273e11d9796ff3 Mon Sep 17 00:00:00 2001 From: Ethan Romba Date: Tue, 10 Jul 2012 01:02:25 -0700 Subject: Resizable: Update CSS dimensions selectively. Fixes #7605 - Setting width and height when only one is changing Resizable: Trigger resize event only when element is resized. Fixes #5545 - Callbacks ignore the grid. Resizable: Added event tests. Fixes #5817 - resize event reports unconstrained ui.size --- tests/unit/resizable/resizable.html | 16 ++- tests/unit/resizable/resizable_core.js | 35 +++++-- tests/unit/resizable/resizable_events.js | 163 ++++++++++++++++++++++++++++++- 3 files changed, 202 insertions(+), 12 deletions(-) (limited to 'tests') diff --git a/tests/unit/resizable/resizable.html b/tests/unit/resizable/resizable.html index eca465ae9..0a27f2a80 100644 --- a/tests/unit/resizable/resizable.html +++ b/tests/unit/resizable/resizable.html @@ -29,6 +29,18 @@ + + @@ -39,8 +51,8 @@

-

I'm a resizable.

-

solid gray

+

I'm a resizable.

+

solid gray

diff --git a/tests/unit/resizable/resizable_core.js b/tests/unit/resizable/resizable_core.js index a1ac22272..447499f05 100644 --- a/tests/unit/resizable/resizable_core.js +++ b/tests/unit/resizable/resizable_core.js @@ -26,7 +26,7 @@ test("element types", function() { */ test("n", function() { - expect(2); + expect(4); var handle = '.ui-resizable-n', target = $('#resizable1').resizable({ handles: 'all' }); @@ -35,10 +35,13 @@ test("n", function() { TestHelpers.resizable.drag(handle, 0, 50); equal( target.height(), 100, "compare height" ); + + equal( target[0].style.left, "", "left should not be modified" ); + equal( target[0].style.width, "", "width should not be modified" ); }); test("s", function() { - expect(2); + expect(5); var handle = '.ui-resizable-s', target = $('#resizable1').resizable({ handles: 'all' }); @@ -47,10 +50,14 @@ test("s", function() { TestHelpers.resizable.drag(handle, 0, -50); equal( target.height(), 100, "compare height" ); + + equal( target[0].style.top, "", "top should not be modified" ); + equal( target[0].style.left, "", "left should not be modified" ); + equal( target[0].style.width, "", "width should not be modified" ); }); test("e", function() { - expect(2); + expect(5); var handle = '.ui-resizable-e', target = $('#resizable1').resizable({ handles: 'all' }); @@ -59,10 +66,14 @@ test("e", function() { TestHelpers.resizable.drag(handle, -50); equal( target.width(), 100, "compare width" ); + + equal( target[0].style.height, "", "height should not be modified" ); + equal( target[0].style.top, "", "top should not be modified" ); + equal( target[0].style.left, "", "left should not be modified" ); }); test("w", function() { - expect(2); + expect(4); var handle = '.ui-resizable-w', target = $('#resizable1').resizable({ handles: 'all' }); @@ -71,10 +82,13 @@ test("w", function() { TestHelpers.resizable.drag(handle, 50); equal( target.width(), 100, "compare width" ); + + equal( target[0].style.height, "", "height should not be modified" ); + equal( target[0].style.top, "", "top should not be modified" ); }); test("ne", function() { - expect(4); + expect(5); var handle = '.ui-resizable-ne', target = $('#resizable1').css({ overflow: 'hidden' }).resizable({ handles: 'all' }); @@ -85,10 +99,12 @@ test("ne", function() { TestHelpers.resizable.drag(handle, 50, 50); equal( target.width(), 100, "compare width" ); equal( target.height(), 100, "compare height" ); + + equal( target[0].style.left, "", "left should not be modified" ); }); test("se", function() { - expect(4); + expect(6); var handle = '.ui-resizable-se', target = $('#resizable1').resizable({ handles: 'all' }); @@ -99,10 +115,13 @@ test("se", function() { TestHelpers.resizable.drag(handle, -50, -50); equal( target.width(), 100, "compare width" ); equal( target.height(), 100, "compare height" ); + + equal( target[0].style.top, "", "top should not be modified" ); + equal( target[0].style.left, "", "left should not be modified" ); }); test("sw", function() { - expect(4); + expect(5); var handle = '.ui-resizable-sw', target = $('#resizable1').resizable({ handles: 'all' }); @@ -113,6 +132,8 @@ test("sw", function() { TestHelpers.resizable.drag(handle, 50, 50); equal( target.width(), 100, "compare width" ); equal( target.height(), 100, "compare height" ); + + equal( target[0].style.top, "", "top should not be modified" ); }); test("nw", function() { diff --git a/tests/unit/resizable/resizable_events.js b/tests/unit/resizable/resizable_events.js index d7793ff2f..14de76da6 100644 --- a/tests/unit/resizable/resizable_events.js +++ b/tests/unit/resizable/resizable_events.js @@ -5,8 +5,165 @@ module("resizable: events"); -// this is here to make JSHint pass "unused", and we don't want to -// remove the parameter for when we finally implement -$.noop(); +test("start", function() { + + expect(5); + + var count = 0, + handle = ".ui-resizable-se"; + + $("#resizable1").resizable({ + handles: "all", + start: function(event, ui) { + equal( ui.size.width, 100, "compare width" ); + equal( ui.size.height, 100, "compare height" ); + equal( ui.originalSize.width, 100, "compare original width" ); + equal( ui.originalSize.height, 100, "compare original height" ); + count++; + } + }); + + TestHelpers.resizable.drag(handle, 50, 50); + + equal(count, 1, "start callback should happen exactly once"); + +}); + +test("resize", function() { + + expect(9); + + var count = 0, + handle = ".ui-resizable-se"; + + $("#resizable1").resizable({ + handles: "all", + resize: function(event, ui) { + if (count === 0) { + equal( ui.size.width, 101, "compare width" ); + equal( ui.size.height, 101, "compare height" ); + equal( ui.originalSize.width, 100, "compare original width" ); + equal( ui.originalSize.height, 100, "compare original height" ); + } else { + equal( ui.size.width, 150, "compare width" ); + equal( ui.size.height, 150, "compare height" ); + equal( ui.originalSize.width, 100, "compare original width" ); + equal( ui.originalSize.height, 100, "compare original height" ); + } + count++; + } + }); + + TestHelpers.resizable.drag(handle, 50, 50); + + equal(count, 2, "resize callback should happen exactly once per size adjustment"); + +}); + +test("resize (min/max dimensions)", function() { + + expect(5); + + var count = 0, + handle = ".ui-resizable-se"; + + $("#resizable1").resizable({ + handles: "all", + minWidth: 60, + minHeight: 60, + maxWidth: 100, + maxHeight: 100, + resize: function(event, ui) { + equal( ui.size.width, 60, "compare width" ); + equal( ui.size.height, 60, "compare height" ); + equal( ui.originalSize.width, 100, "compare original width" ); + equal( ui.originalSize.height, 100, "compare original height" ); + count++; + } + }); + + TestHelpers.resizable.drag(handle, -50, -50); + + equal(count, 1, "resize callback should happen exactly once per size adjustment"); + +}); + +test("resize (containment)", function() { + + expect(5); + + var count = 0, + handle = ".ui-resizable-se", + container = $("#resizable1").wrap("

").parent().css({ + height: "100px", + width: "100px" + }); + + $("#resizable1").resizable({ + handles: "all", + containment: container, + resize: function(event, ui) { + equal( ui.size.width, 50, "compare width" ); + equal( ui.size.height, 50, "compare height" ); + equal( ui.originalSize.width, 100, "compare original width" ); + equal( ui.originalSize.height, 100, "compare original height" ); + count++; + } + }); + + TestHelpers.resizable.drag(handle, -50, -50); + + equal(count, 1, "resize callback should happen exactly once per size adjustment"); + +}); + +test("resize (grid)", function() { + + expect(5); + + var count = 0, + handle = ".ui-resizable-se"; + + $("#resizable1").resizable({ + handles: "all", + grid: 50, + resize: function(event, ui) { + equal( ui.size.width, 150, "compare width" ); + equal( ui.size.height, 150, "compare height" ); + equal( ui.originalSize.width, 100, "compare original width" ); + equal( ui.originalSize.height, 100, "compare original height" ); + count++; + } + }); + + TestHelpers.resizable.drag(handle, 50, 50); + + equal(count, 1, "resize callback should happen exactly once per grid-unit size adjustment"); + +}); + +test("stop", function() { + + expect(5); + + var count = 0, + handle = ".ui-resizable-se"; + + $("#resizable1").resizable({ + handles: "all", + stop: function(event, ui) { + equal( ui.size.width, 150, "compare width" ); + equal( ui.size.height, 150, "compare height" ); + equal( ui.originalSize.width, 100, "compare original width" ); + equal( ui.originalSize.height, 100, "compare original height" ); + count++; + } + }); + + TestHelpers.resizable.drag(handle, 50, 50); + + equal(count, 1, "stop callback should happen exactly once"); + +}); })(jQuery); -- cgit v1.2.3