aboutsummaryrefslogtreecommitdiffstats
path: root/tests/unit/resizable
diff options
context:
space:
mode:
authorEthan Romba <ethanromba@gmail.com>2012-07-10 01:02:25 -0700
committerMike Sherov <mike.sherov@gmail.com>2012-11-12 21:41:22 -0500
commit3974b55ba5078799df818c78d9273e11d9796ff3 (patch)
tree272e130bd69ecbbaa05bb0ef46a38495beabd665 /tests/unit/resizable
parent902df84fce790178da78c5830498911a487d50cf (diff)
downloadjquery-ui-3974b55ba5078799df818c78d9273e11d9796ff3.tar.gz
jquery-ui-3974b55ba5078799df818c78d9273e11d9796ff3.zip
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
Diffstat (limited to 'tests/unit/resizable')
-rw-r--r--tests/unit/resizable/resizable.html16
-rw-r--r--tests/unit/resizable/resizable_core.js35
-rw-r--r--tests/unit/resizable/resizable_events.js163
3 files changed, 202 insertions, 12 deletions
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 @@
<script src="resizable_test_helpers.js"></script>
<script src="../swarminject.js"></script>
+
+ <style>
+ #resizable1 {
+ background: green;
+ height: 100px;
+ width: 100px;
+ }
+ #resizable2 {
+ height: 100px;
+ width: 100px;
+ }
+ </style>
</head>
<body>
@@ -39,8 +51,8 @@
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">
-<div id="resizable1" style="background: green; width: 100px; height: 100px;">I'm a resizable.</div>
-<img src="images/test.jpg" id="resizable2" style="width: 100px; height: 100px;" alt="solid gray">
+<div id="resizable1">I'm a resizable.</div>
+<img src="images/test.jpg" id="resizable2" alt="solid gray">
</div>
</body>
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("<div>").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);
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-28 09:35:17 +0000