7 module("resizable: core");
10 test("element types", function() {
11 var typeNames = ("p,h1,h2,h3,h4,h5,h6,blockquote,ol,ul,dl,div,form"
12 + ",table,fieldset,address,ins,del,em,strong,q,cite,dfn,abbr"
13 + ",acronym,code,samp,kbd,var,img,object,hr"
14 + ",input,button,label,select,iframe").split(",");
16 $.each(typeNames, function(i) {
17 var typeName = typeNames[i];
18 el = $(document.createElement(typeName)).appendTo("body");
19 (typeName == "table" && el.append("<tr><td>content</td></tr>"));
21 ok(true, "$('<" + typeName + "/>').resizable()");
22 el.resizable("destroy");
28 test("n", function() {
31 var handle = ".ui-resizable-n", target = $("#resizable1").resizable({ handles: "all" });
33 TestHelpers.resizable.drag(handle, 0, -50);
34 equal( target.height(), 150, "compare height" );
36 TestHelpers.resizable.drag(handle, 0, 50);
37 equal( target.height(), 100, "compare height" );
39 equal( target[0].style.left, "", "left should not be modified" );
40 equal( target[0].style.width, "", "width should not be modified" );
43 test("s", function() {
46 var handle = ".ui-resizable-s", target = $("#resizable1").resizable({ handles: "all" });
48 TestHelpers.resizable.drag(handle, 0, 50);
49 equal( target.height(), 150, "compare height" );
51 TestHelpers.resizable.drag(handle, 0, -50);
52 equal( target.height(), 100, "compare height" );
54 equal( target[0].style.top, "", "top should not be modified" );
55 equal( target[0].style.left, "", "left should not be modified" );
56 equal( target[0].style.width, "", "width should not be modified" );
59 test("e", function() {
62 var handle = ".ui-resizable-e", target = $("#resizable1").resizable({ handles: "all" });
64 TestHelpers.resizable.drag(handle, 50);
65 equal( target.width(), 150, "compare width");
67 TestHelpers.resizable.drag(handle, -50);
68 equal( target.width(), 100, "compare width" );
70 equal( target[0].style.height, "", "height should not be modified" );
71 equal( target[0].style.top, "", "top should not be modified" );
72 equal( target[0].style.left, "", "left should not be modified" );
75 test("w", function() {
78 var handle = ".ui-resizable-w", target = $("#resizable1").resizable({ handles: "all" });
80 TestHelpers.resizable.drag(handle, -50);
81 equal( target.width(), 150, "compare width" );
83 TestHelpers.resizable.drag(handle, 50);
84 equal( target.width(), 100, "compare width" );
86 equal( target[0].style.height, "", "height should not be modified" );
87 equal( target[0].style.top, "", "top should not be modified" );
90 test("ne", function() {
93 var handle = ".ui-resizable-ne", target = $("#resizable1").css({ overflow: "hidden" }).resizable({ handles: "all" });
95 TestHelpers.resizable.drag(handle, -50, -50);
96 equal( target.width(), 50, "compare width" );
97 equal( target.height(), 150, "compare height" );
99 TestHelpers.resizable.drag(handle, 50, 50);
100 equal( target.width(), 100, "compare width" );
101 equal( target.height(), 100, "compare height" );
103 equal( target[0].style.left, "", "left should not be modified" );
106 test("se", function() {
109 var handle = ".ui-resizable-se", target = $("#resizable1").resizable({ handles: "all" });
111 TestHelpers.resizable.drag(handle, 50, 50);
112 equal( target.width(), 150, "compare width" );
113 equal( target.height(), 150, "compare height" );
115 TestHelpers.resizable.drag(handle, -50, -50);
116 equal( target.width(), 100, "compare width" );
117 equal( target.height(), 100, "compare height" );
119 equal( target[0].style.top, "", "top should not be modified" );
120 equal( target[0].style.left, "", "left should not be modified" );
123 test("sw", function() {
126 var handle = ".ui-resizable-sw", target = $("#resizable1").resizable({ handles: "all" });
128 TestHelpers.resizable.drag(handle, -50, -50);
129 equal( target.width(), 150, "compare width" );
130 equal( target.height(), 50, "compare height" );
132 TestHelpers.resizable.drag(handle, 50, 50);
133 equal( target.width(), 100, "compare width" );
134 equal( target.height(), 100, "compare height" );
136 equal( target[0].style.top, "", "top should not be modified" );
139 test("nw", function() {
142 var handle = ".ui-resizable-nw", target = $("#resizable1").resizable({ handles: "all" });
144 TestHelpers.resizable.drag(handle, -50, -50);
145 equal( target.width(), 150, "compare width" );
146 equal( target.height(), 150, "compare height" );
148 TestHelpers.resizable.drag(handle, 50, 50);
149 equal( target.width(), 100, "compare width" );
150 equal( target.height(), 100, "compare height" );
153 test("handle with complex markup (#8756)", function() {
159 .addClass("ui-resizable-handle")
160 .addClass("ui-resizable-w")
164 var handle = ".ui-resizable-w div", target = $("#resizable1").resizable({ handles: "all" });
166 TestHelpers.resizable.drag(handle, -50);
167 equal( target.width(), 150, "compare width" );
169 TestHelpers.resizable.drag(handle, 50);
170 equal( target.width(), 100, "compare width" );
173 test("resizable accounts for scroll position correctly (#3815)", function() {
176 var position, top, left,
177 container = $("<div style='overflow:scroll;height:300px;width:300px;position:relative;'></div>").appendTo("#qunit-fixture"),
178 overflowed = $("<div style='width: 1000px; height: 1000px;'></div>").appendTo( container ),
179 el = $("<div style='height:100px;width:100px;position:absolute;top:10px;left:10px;'></div>").appendTo( overflowed ).resizable({ handles: "all" }),
180 handle = ".ui-resizable-e";
182 container.scrollLeft( 100 ).scrollTop( 100 );
184 position = el.position();
185 left = el.css("left");
188 TestHelpers.resizable.drag(handle, 50, 50);
189 deepEqual( el.position(), position, "position stays the same when resized" );
190 equal( el.css("left"), left, "css('left') stays the same when resized" );
191 equal( el.css("top"), top, "css('top') stays the same when resized" );