diff options
| -rw-r--r-- | tests/unit/resizable/resizable_core.js | 10 | ||||
| -rw-r--r-- | tests/visual/compound/draggable_resizable.html | 51 | ||||
| -rw-r--r-- | tests/visual/index.html | 1 | ||||
| -rw-r--r-- | ui/resizable.js | 8 |
4 files changed, 58 insertions, 12 deletions
diff --git a/tests/unit/resizable/resizable_core.js b/tests/unit/resizable/resizable_core.js index f0b5cea20..f43cde623 100644 --- a/tests/unit/resizable/resizable_core.js +++ b/tests/unit/resizable/resizable_core.js @@ -171,13 +171,14 @@ test("handle with complex markup (#8756)", function() { }); test("resizable accounts for scroll position correctly (#3815)", function() { - expect( 3 ); + expect( 4 ); var position, top, left, container = $("<div style='overflow:scroll;height:300px;width:300px;position:relative;'></div>").appendTo("#qunit-fixture"), overflowed = $("<div style='width: 1000px; height: 1000px;'></div>").appendTo( container ), el = $("<div style='height:100px;width:100px;position:absolute;top:10px;left:10px;'></div>").appendTo( overflowed ).resizable({ handles: "all" }), - handle = ".ui-resizable-e"; + handle = ".ui-resizable-e", + handlePosition = $(handle).position().left; container.scrollLeft( 100 ).scrollTop( 100 ); @@ -189,6 +190,7 @@ test("resizable accounts for scroll position correctly (#3815)", function() { deepEqual( el.position(), position, "position stays the same when resized" ); equal( el.css("left"), left, "css('left') stays the same when resized" ); equal( el.css("top"), top, "css('top') stays the same when resized" ); + equal( $(handle).position().left, handlePosition + 50, "handle also moved" ); }); test( "resizable stores correct size when using helper and grid (#9547)", function() { @@ -208,7 +210,7 @@ test( "resizable stores correct size when using helper and grid (#9547)", functi test( "nested resizable", function() { expect( 4 ); - + var outer = $( "<div id='outer' style='width:50px'></div>" ), inner = $( "<div id='inner' style='width:30px'></div>" ), target = $( "#resizable1" ), @@ -224,7 +226,7 @@ test( "nested resizable", function() { innerHandle = $( "#inner > .ui-resizable-e" ); outerHandle = $( "#outer > .ui-resizable-e" ); - + TestHelpers.resizable.drag( innerHandle, 10 ); equal( inner.width(), 40, "compare width of inner element" ); TestHelpers.resizable.drag( innerHandle, -10 ); diff --git a/tests/visual/compound/draggable_resizable.html b/tests/visual/compound/draggable_resizable.html new file mode 100644 index 000000000..d38399431 --- /dev/null +++ b/tests/visual/compound/draggable_resizable.html @@ -0,0 +1,51 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Compound Visual Test: Draggable and Resizable block element</title> + <link rel="stylesheet" href="../visual.css"> + <link rel="stylesheet" href="../../../themes/base/all.css"> + <script src="../../../jquery.js"></script> + <script src="../../../ui/core.js"></script> + <script src="../../../ui/widget.js"></script> + <script src="../../../ui/mouse.js"></script> + <script src="../../../ui/draggable.js"></script> + <script src="../../../ui/resizable.js"></script> + <style> + .draggable { + margin: 0.5em; + padding: 0.5em; + } + .absolute { + color: red; + position: absolute !important; + } + </style> + <script> + $(function() { + $( ".draggable" ) + .addClass( "ui-widget ui-widget-header ui-corner-all" ) + .draggable({ + revert: "invalid" + }) + .resizable({ + minHeight: 13, + handles: "s" + }); + $( ".draggable:last" ).addClass( "absolute" ); + }); + </script> +</head> +<body> + +<p>WHAT: Three draggable and resizable elements, with only a bottom handle. Last one (red color) is absolutely positioned.</p> +<p>EXPECTED: Each element can be dragged and resized. The first two stay with their relative positioning (induced by draggable). The last one can be resized despite the absolute positioning.</p> + +<div id="first"> + <div class="draggable">Draggable 1-1</div> + <div class="draggable">Draggable 1-2</div> + <div class="draggable">Draggable 1-3</div> +</div> + +</body> +</html> diff --git a/tests/visual/index.html b/tests/visual/index.html index d7b93cb53..593ddcb07 100644 --- a/tests/visual/index.html +++ b/tests/visual/index.html @@ -75,6 +75,7 @@ <li><a href="compound/dialog_widgets.html">Various Widgets in Dialog</a></li> <li><a href="compound/draggable_accordion.html">Draggable Accordion</a></li> <li><a href="compound/draggable_accordion_accordion_tabs_draggable.html">Nested Widgets</a></li> + <li><a href="compound/draggable_resizable.html">Draggable Resizable</a></li> <li><a href="compound/sortable_accordion_sortable_tabs.html">Sortable Tabs in Sortable Accordion</a></li> <li><a href="compound/tabs_tabs.html">Nested Tabs</a></li> <li><a href="compound/tabs_tooltips.html">Tabs with Tooltips</a></li> diff --git a/ui/resizable.js b/ui/resizable.js index 741ff0406..b59f32013 100644 --- a/ui/resizable.js +++ b/ui/resizable.js @@ -287,18 +287,10 @@ $.widget("ui.resizable", $.ui.mouse, { var curleft, curtop, cursor, o = this.options, - iniPos = this.element.position(), el = this.element; this.resizing = true; - // Bugfix for http://bugs.jqueryui.com/ticket/1749 - if ( (/absolute/).test( el.css("position") ) ) { - el.css({ position: "absolute", top: el.css("top"), left: el.css("left") }); - } else if (el.is(".ui-draggable")) { - el.css({ position: "absolute", top: iniPos.top, left: iniPos.left }); - } - this._renderProxy(); curleft = this._num(this.helper.css("left")); |