aboutsummaryrefslogtreecommitdiffstats
path: root/tests/unit/draggable
diff options
context:
space:
mode:
Diffstat (limited to 'tests/unit/draggable')
-rw-r--r--tests/unit/draggable/draggable.html44
-rw-r--r--tests/unit/draggable/draggable_options.js388
-rw-r--r--tests/unit/draggable/draggable_test_helpers.js20
3 files changed, 107 insertions, 345 deletions
diff --git a/tests/unit/draggable/draggable.html b/tests/unit/draggable/draggable.html
index 17f9745a6..dd284f280 100644
--- a/tests/unit/draggable/draggable.html
+++ b/tests/unit/draggable/draggable.html
@@ -8,8 +8,38 @@
<link rel="stylesheet" href="../../../external/qunit.css">
<style>
+ #main {
+ width: 1000px;
+ height: 1000px;
+ overflow: scroll;
+ overflow-x: scroll;
+ overflow-y: scroll;
+ position: relative;
+ left: 0;
+ top: 0;
+ }
+ #main-forceScrollable {
+ width: 1100px;
+ height: 1100px;
+ }
+ #scrollParent {
+ width: 1200px;
+ height: 1200px;
+ position: relative;
+ left: 0;
+ top: 0;
+ overflow: hidden;
+ overflow-x: hidden;
+ overflow-y: hidden;
+ }
+ #scrollParent-forceScrollable {
+ width: 1300px;
+ height: 1300px;
+ }
/* See #9077 */
- #draggable3, #draggable4 { z-index: 100; }
+ #draggable3, #draggable4 {
+ z-index: 100;
+ }
</style>
<script src="../../../external/qunit.js"></script>
@@ -46,10 +76,14 @@
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">
- <div id="main">
- <div id="draggable1" style="background: green; width: 200px; height: 100px;">Relative</div>
- <div id="draggable2" style="background: green; width: 200px; height: 100px; position: absolute; top: 10px; left: 10px;"><span><em>Absolute</em></span></div>
- <div id="droppable" style="background: green; width: 200px; height: 100px; position: absolute; top: 110px; left: 110px;"><span>Absolute</span></div>
+ <div id="scrollParent">
+ <div id="main">
+ <div id="draggable1" style="background: green; width: 200px; height: 100px;">Relative</div>
+ <div id="draggable2" style="background: green; width: 200px; height: 100px; position: absolute; top: 10px; left: 10px;"><span><em>Absolute</em></span></div>
+ <div id="droppable" style="background: green; width: 200px; height: 100px; position: absolute; top: 110px; left: 110px;"><span>Absolute</span></div>
+ <div id="main-forceScrollable"></div>
+ </div>
+ <div id="scrollParent-forceScrollable"></div>
</div>
<div style="width: 1px; height: 1000px;"></div>
<div style="position: absolute; width: 1px; height: 2000px;"></div>
diff --git a/tests/unit/draggable/draggable_options.js b/tests/unit/draggable/draggable_options.js
index 8a7a28735..ea52eb299 100644
--- a/tests/unit/draggable/draggable_options.js
+++ b/tests/unit/draggable/draggable_options.js
@@ -158,7 +158,7 @@ test( "axis, default, switching after initialization", function() {
test( "{ cancel: 'input,textarea,button,select,option' }, default", function() {
expect( 2 );
- $( "<div id='draggable-option-cancel-default'><input type='text'></div>" ).appendTo( "#main" );
+ $( "<div id='draggable-option-cancel-default'><input type='text'></div>" ).appendTo( "#qunit-fixture" );
var element = $( "#draggable-option-cancel-default" ).draggable({ cancel: "input,textarea,button,select,option" });
TestHelpers.draggable.shouldMove( element, "cancel: default, element dragged" );
@@ -230,7 +230,7 @@ test( "{ cancel: Selectors }, matching parent selector", function() {
test( "cancelement, default, switching after initialization", function() {
expect( 2 );
- $( "<div id='draggable-option-cancel-default'><input type='text'></div>" ).appendTo( "#main" );
+ $( "<div id='draggable-option-cancel-default'><input type='text'></div>" ).appendTo( "#qunit-fixture" );
var input = $( "#draggable-option-cancel-default input" ),
element = $( "#draggable-option-cancel-default" ).draggable();
@@ -346,7 +346,7 @@ test( "{ containment: 'parent' }, absolute", function() {
test( "containment, account for border", function() {
expect( 2 );
- var el = $("#draggable1").appendTo("#main"),
+ var el = $( "#draggable1" ).appendTo( "#scrollParent" ),
parent = el.parent().css({
height: "100px",
width: "100px",
@@ -368,9 +368,9 @@ test( "containment, account for border", function() {
dy: 100
});
- equal( el.offset().top, parentBottom - parentBorderBottom - el.height(),
+ closeEnough( el.offset().top, parentBottom - parentBorderBottom - el.height(), 1,
"The draggable should be on top of its parent's bottom border" );
- equal( el.offset().left, parentRight - parentBorderRight - el.width(),
+ closeEnough( el.offset().left, parentRight - parentBorderRight - el.width(), 1,
"The draggable should be to the right of its parent's right border" );
});
@@ -381,13 +381,7 @@ test( "containment, default, switching after initialization", function() {
TestHelpers.draggable.testDrag( element, element, -100, -100, -100, -100, "containment: default" );
- element.draggable( "option", "containment", "parent" )
- .css({
- top: 0,
- left: 0
- })
- .appendTo( $( "#main" ) );
-
+ element.draggable( "option", "containment", "parent" ).css({ top: 0, left: 0 });
TestHelpers.draggable.testDrag( element, element, -100, -100, 0, 0, "containment: parent as option" );
element.draggable( "option", "containment", false );
@@ -666,332 +660,66 @@ test( "helper, default, switching after initialization", function() {
TestHelpers.draggable.shouldMove( element, "helper: default" );
element.draggable( "option", "helper", "clone" );
- TestHelpers.draggable.shouldMovePositionButNotOffset( element, "helper: clone" );
+ TestHelpers.draggable.shouldMove( element, "helper: clone" );
element.draggable( "option", "helper", "original" );
TestHelpers.draggable.shouldMove( element, "helper: original" );
});
-test( "{ helper: 'clone' }, relative", function() {
- expect( 2 );
-
- var element = $( "#draggable1" ).draggable({ helper: "clone" });
- TestHelpers.draggable.shouldMovePositionButNotOffset( element, "helper: clone relative" );
-});
-
-test( "{ helper: 'clone' }, absolute", function() {
- expect( 2 );
-
- var element = $( "#draggable2" ).draggable({ helper: "clone" });
- TestHelpers.draggable.shouldMovePositionButNotOffset( element, "helper: clone absolute" );
-});
-
-test( "{ helper: 'original' }, relative, with scroll offset on parent", function() {
- expect( 6 );
-
- var element = $( "#draggable1" ).draggable({ helper: "original" });
-
- TestHelpers.draggable.setScroll( "#main" );
- TestHelpers.draggable.testScroll( element, "relative" );
-
- TestHelpers.draggable.setScroll( "#main" );
- TestHelpers.draggable.testScroll( element, "static" );
-
- TestHelpers.draggable.setScroll( "#main" );
- TestHelpers.draggable.testScroll( element, "absolute" );
-
- TestHelpers.draggable.restoreScroll( "#main" );
-});
-
-test( "{ helper: 'original' }, relative, with scroll offset on root", function() {
- expect( 6 );
-
- var element = $( "#draggable1" ).draggable({ helper: "original" });
-
- TestHelpers.draggable.setScroll( document );
- TestHelpers.draggable.testScroll( element, "relative" );
-
- TestHelpers.draggable.setScroll( document );
- TestHelpers.draggable.testScroll( element, "static" );
-
- TestHelpers.draggable.setScroll( document );
- TestHelpers.draggable.testScroll( element, "absolute" );
-
- TestHelpers.draggable.restoreScroll( document );
-});
-
-test( "{ helper: 'original' }, relative, with scroll offset on root and parent", function() {
- expect( 6 );
-
- var element = $( "#draggable1" ).draggable({ helper: "original" });
-
- TestHelpers.draggable.setScroll( "#main" );
- TestHelpers.draggable.setScroll( document );
- TestHelpers.draggable.testScroll( element, "relative" );
-
- TestHelpers.draggable.setScroll( "#main" );
- TestHelpers.draggable.setScroll( document );
- TestHelpers.draggable.testScroll( element, "static" );
-
- TestHelpers.draggable.setScroll( "#main" );
- TestHelpers.draggable.setScroll( document );
- TestHelpers.draggable.testScroll( element, "absolute" );
-
- TestHelpers.draggable.restoreScroll( "#main" );
- TestHelpers.draggable.restoreScroll( document );
-});
-
-test( "{ helper: 'original' }, absolute, with scroll offset on parent", function() {
- expect( 6 );
-
- var element = $( "#draggable1" ).css({ position: "absolute", top: 0, left: 0 }).draggable({ helper: "original" });
-
- TestHelpers.draggable.setScroll( "#main" );
- TestHelpers.draggable.testScroll( element, "relative" );
-
- TestHelpers.draggable.setScroll( "#main" );
- TestHelpers.draggable.testScroll( element, "static" );
-
- TestHelpers.draggable.setScroll( "#main" );
- TestHelpers.draggable.testScroll( element, "absolute" );
-
- TestHelpers.draggable.restoreScroll( "#main" );
-});
-
-test( "{ helper: 'original' }, absolute, with scroll offset on root", function() {
- expect( 6 );
-
- var element = $( "#draggable1" ).css({ position: "absolute", top: 0, left: 0 }).draggable({ helper: "original" });
-
- TestHelpers.draggable.setScroll( document );
- TestHelpers.draggable.testScroll( element, "relative" );
-
- TestHelpers.draggable.setScroll( document );
- TestHelpers.draggable.testScroll( element, "static" );
-
- TestHelpers.draggable.setScroll( document );
- TestHelpers.draggable.testScroll( element, "absolute" );
-
- TestHelpers.draggable.restoreScroll( document );
-});
-
-test( "{ helper: 'original' }, absolute, with scroll offset on root and parent", function() {
- expect( 6 );
-
- var element = $( "#draggable1" ).css({ position: "absolute", top: 0, left: 0 }).draggable({ helper: "original" });
-
- TestHelpers.draggable.setScroll( "#main" );
- TestHelpers.draggable.setScroll( document );
- TestHelpers.draggable.testScroll( element, "relative" );
-
- TestHelpers.draggable.setScroll( "#main" );
- TestHelpers.draggable.setScroll( document );
- TestHelpers.draggable.testScroll( element, "static" );
-
- TestHelpers.draggable.setScroll( "#main" );
- TestHelpers.draggable.setScroll( document );
- TestHelpers.draggable.testScroll( element, "absolute" );
-
- TestHelpers.draggable.restoreScroll( "#main" );
- TestHelpers.draggable.restoreScroll( document );
-});
-
-test( "{ helper: 'original' }, fixed, with scroll offset on parent", function() {
- expect( 4 );
-
- var element = $( "#draggable1" ).css({ position: "fixed", top: 0, left: 0 }).draggable({ helper: "original" });
-
- TestHelpers.draggable.setScroll( "#main" );
- TestHelpers.draggable.testScroll( element, "relative" );
-
- TestHelpers.draggable.setScroll( "#main" );
- TestHelpers.draggable.testScroll( element, "static" );
-
- TestHelpers.draggable.setScroll( "#main" );
- // TODO: investigate these failure in PhantomJS
- //TestHelpers.draggable.testScroll( element, "absolute" );
-
- TestHelpers.draggable.restoreScroll( "#main" );
-});
-
-test( "{ helper: 'original' }, fixed, with scroll offset on root", function() {
- expect( 4 );
-
- var element = $( "#draggable1" ).css({ position: "fixed", top: 0, left: 0 }).draggable({ helper: "original" });
-
- TestHelpers.draggable.setScroll( document );
- TestHelpers.draggable.testScroll( element, "relative" );
-
- TestHelpers.draggable.setScroll( document );
- TestHelpers.draggable.testScroll( element, "static" );
-
- TestHelpers.draggable.setScroll( document );
- // TODO: investigate these failure in PhantomJS
- //TestHelpers.draggable.testScroll( element, "absolute" );
-
- TestHelpers.draggable.restoreScroll( document );
-});
-
-test( "{ helper: 'original' }, fixed, with scroll offset on root and parent", function() {
- expect( 4 );
-
- var element = $( "#draggable1" ).css({ position: "fixed", top: 0, left: 0 }).draggable({ helper: "original" });
-
- TestHelpers.draggable.setScroll( "#main" );
- TestHelpers.draggable.setScroll( document );
- TestHelpers.draggable.testScroll( element, "relative" );
-
- TestHelpers.draggable.setScroll( "#main" );
- TestHelpers.draggable.setScroll( document );
- TestHelpers.draggable.testScroll( element, "static" );
-
- TestHelpers.draggable.setScroll( "#main" );
- TestHelpers.draggable.setScroll( document );
- // TODO: investigate these failure in PhantomJS
- //TestHelpers.draggable.testScroll( element, "absolute" );
-
- TestHelpers.draggable.restoreScroll( "#main" );
- TestHelpers.draggable.restoreScroll( document );
-});
-
-test( "{ helper: 'clone' }, absolute", function() {
- expect( 1 );
-
- var helperOffset = null,
- origOffset = $( "#draggable1" ).offset(),
- element = $( "#draggable1" ).draggable({ helper: "clone", drag: function( event, ui) {
- helperOffset = ui.helper.offset();
- } });
-
- element.simulate( "drag", {
- dx: 1,
- dy: 1
- });
- deepEqual({ top: helperOffset.top - 1, left: helperOffset.left - 1 }, origOffset, "dragged[1, 1]" );
-});
-
-test( "{ helper: 'clone' }, absolute with scroll offset on parent", function() {
- expect( 3 );
-
- TestHelpers.draggable.setScroll( "#main" );
- var helperOffset = null,
- origOffset = null,
- element = $( "#draggable1" ).draggable({
- helper: "clone",
- drag: function( event, ui) {
- helperOffset = ui.helper.offset();
- }
- });
-
- $( "#main" ).css( "position", "relative" );
- origOffset = $( "#draggable1" ).offset();
- element.simulate( "drag", {
- dx: 1,
- dy: 1
- });
- deepEqual({ top: helperOffset.top - 1, left: helperOffset.left - 1 }, origOffset, "dragged[1, 1]" );
-
- $( "#main" ).css( "position", "static" );
- origOffset = $( "#draggable1" ).offset();
- element.simulate( "drag", {
- dx: 1,
- dy: 1
- });
- deepEqual({ top: helperOffset.top - 1, left: helperOffset.left - 1 }, origOffset, "dragged[1, 1]" );
-
- $( "#main" ).css( "position", "absolute" );
- origOffset = $( "#draggable1" ).offset();
- element.simulate( "drag", {
- dx: 1,
- dy: 1
- });
- deepEqual({ top: helperOffset.top - 1, left: helperOffset.left - 1 }, origOffset, "dragged[1, 1]" );
-
- TestHelpers.draggable.restoreScroll( "#main" );
-});
-
-test( "{ helper: 'clone' }, absolute with scroll offset on root", function() {
- expect( 3 );
-
- TestHelpers.draggable.setScroll( document );
- var helperOffset = null,
- origOffset = null,
- element = $( "#draggable1" ).draggable({
- helper: "clone",
- drag: function( event, ui) {
- helperOffset = ui.helper.offset();
- }
- });
-
- $( "#main" ).css( "position", "relative" );
- origOffset = $( "#draggable1" ).offset();
- element.simulate( "drag", {
- dx: 1,
- dy: 1
- });
- deepEqual({ top: helperOffset.top - 1, left: helperOffset.left - 1 }, origOffset, "dragged[1, 1]" );
-
- $( "#main" ).css( "position", "static" );
- origOffset = $( "#draggable1" ).offset();
- element.simulate( "drag", {
- dx: 1,
- dy: 1
- });
- deepEqual({ top: helperOffset.top - 1, left: helperOffset.left - 1 }, origOffset, "dragged[1, 1]" );
-
- $( "#main" ).css( "position", "absolute" );
- origOffset = $( "#draggable1" ).offset();
- element.simulate( "drag", {
- dx: 1,
- dy: 1
- });
- deepEqual({ top: helperOffset.top - 1, left: helperOffset.left - 1 }, origOffset, "dragged[1, 1]" );
+/* jshint loopfunc: true */
+(function(){
+ var k, l, m,
+ scrollElements = {
+ "no elements": [],
+ "parent": [ "#main" ],
+ "root": [ document ],
+ "parent and root": [ "#main", document ],
+ "grandparent": [ "#scrollParent" ]
+ },
+ positions = [ "absolute", "fixed", "relative", "static" ],
+ helpers = [ "original", "clone" ],
+ scrollPositions = [ "relative", "static", "absolute", "fixed" ];
+
+ for ( m = 0 ; m < helpers.length; m++ ) {
+ for ( l = 0; l < positions.length; l++ ) {
+ for ( k in scrollElements ) {
+ (function( position, helper, scrollElements, scrollElementsTitle ){
+ test( "{ helper: '" + helper + "' }, " + position + ", with scroll offset on " + scrollElementsTitle, function() {
+ expect( 8 );
+ var i, j,
+ element = $( "#draggable1" ).css({ position: position, top: 0, left: 0 }).draggable({
+ helper: helper,
+ scroll: false
+ });
+
+ if ( scrollElements.length === 1 && scrollElements[ 1 ] === "#scrollParent" ) {
+ TestHelpers.draggable.setScrollable( "#main", false );
+ TestHelpers.draggable.setScrollable( "#scrollParent", true );
+ }
- TestHelpers.draggable.restoreScroll( document );
-});
+ for ( j = 0; j < scrollPositions.length; j++ ) {
+ for ( i = 0; i < scrollElements.length; i++ ) {
+ TestHelpers.draggable.setScroll( scrollElements[ i ] );
+ }
-test( "{ helper: 'clone' }, absolute with scroll offset on root and parent", function() {
- expect( 3 );
+ TestHelpers.draggable.testScroll( element, scrollPositions[ j ] );
- TestHelpers.draggable.setScroll( document );
- TestHelpers.draggable.setScroll( "#main" );
+ for ( i = 0; i < scrollElements.length; i++ ) {
+ TestHelpers.draggable.restoreScroll( scrollElements[ i ] );
+ }
+ }
- var helperOffset = null,
- origOffset = null,
- element = $( "#draggable1" ).draggable({
- helper: "clone",
- drag: function( event, ui) {
- helperOffset = ui.helper.offset();
+ if ( scrollElements.length === 1 && scrollElements[ 1 ] === "#scrollParent" ) {
+ TestHelpers.draggable.setScrollable( "#main", true );
+ TestHelpers.draggable.setScrollable( "#scrollParent", false );
+ }
+ });
+ })( positions[ l ], helpers[ m ], scrollElements[ k ], k );
}
- });
-
- $( "#main" ).css( "position", "relative" );
- origOffset = $( "#draggable1" ).offset();
- element.simulate( "drag", {
- dx: 1,
- dy: 1
- });
- deepEqual({ top: helperOffset.top - 1, left: helperOffset.left - 1 }, origOffset, "dragged[1, 1]" );
-
- $( "#main" ).css( "position", "static" );
- origOffset = $( "#draggable1" ).offset();
- element.simulate( "drag", {
- dx: 1,
- dy: 1
- });
- deepEqual({ top: helperOffset.top - 1, left: helperOffset.left - 1 }, origOffset, "dragged[1, 1]" );
-
- $( "#main" ).css( "position", "absolute" );
- origOffset = $( "#draggable1" ).offset();
- element.simulate( "drag", {
- dx: 1,
- dy: 1
- });
- deepEqual({ top: helperOffset.top - 1, left: helperOffset.left - 1 }, origOffset, "dragged[1, 1]" );
-
- TestHelpers.draggable.restoreScroll( document );
- TestHelpers.draggable.restoreScroll( "#main" );
-});
+ }
+ }
+})();
+/* jshint loopfunc: false */
test( "{ opacity: 0.5 }", function() {
expect( 1 );
@@ -1098,8 +826,10 @@ test( "scope", function() {
test( "scroll, scrollSensitivity, and scrollSpeed", function() {
expect( 2 );
+ TestHelpers.draggable.setScrollable( "#main", false );
+
var viewportHeight = $( window ).height(),
- element = $( "#draggable1" ).draggable({ scroll: true }),
+ element = $( "#draggable1" ).draggable({ scroll: true }).appendTo( "#qunit-fixture" ),
scrollSensitivity = element.draggable( "option", "scrollSensitivity" ),
scrollSpeed = element.draggable( "option", "scrollSpeed" );
diff --git a/tests/unit/draggable/draggable_test_helpers.js b/tests/unit/draggable/draggable_test_helpers.js
index 2edf7452f..0b533a4e1 100644
--- a/tests/unit/draggable/draggable_test_helpers.js
+++ b/tests/unit/draggable/draggable_test_helpers.js
@@ -20,8 +20,8 @@ TestHelpers.draggable = {
var offsetBefore = el.offset(),
offsetExpected = { left: offsetBefore.left + expectedDX, top: offsetBefore.top + expectedDY };
- $( el ).one( "dragstop", function() {
- deepEqual( el.offset(), offsetExpected, "offset dragged[" + dx + ", " + dy + "] " + msg );
+ $( el ).one( "dragstop", function( event, ui ) {
+ deepEqual( ui.helper.offset(), offsetExpected, "offset dragged[" + dx + ", " + dy + "] " + msg );
} );
},
testDrag: function( el, handle, dx, dy, expectedDX, expectedDY, msg ) {
@@ -30,10 +30,7 @@ TestHelpers.draggable = {
$( handle ).simulate( "drag", {
dx: dx,
- dy: dy,
- // moves is 1 here because simulate currently fire events synchronously
- // so we can't faithfully test things that rely on a scroll event (which is async)
- moves: 1
+ dy: dy
});
},
shouldMovePositionButNotOffset: function( el, msg, handle ) {
@@ -43,10 +40,7 @@ TestHelpers.draggable = {
$( handle ).simulate( "drag", {
dx: 100,
- dy: 100,
- // moves is 1 here because simulate currently fire events synchronously
- // so we can't faithfully test things that rely on a scroll event (which is async)
- moves: 1
+ dy: 100
});
},
shouldMove: function( el, msg, handle ) {
@@ -68,9 +62,13 @@ TestHelpers.draggable = {
});
$( el ).unbind( "dragstop" );
},
+ setScrollable: function ( what, isScrollable ) {
+ var overflow = isScrollable ? "scroll" : "hidden";
+ $( what ).css({ overflow: overflow, overflowX: overflow, overflowY: overflow });
+ },
testScroll: function( el, position ) {
var oldPosition = $( "#main" ).css( "position" );
- $( "#main" ).css( "position", position);
+ $( "#main" ).css({ position: position, top: "0px", left: "0px" });
TestHelpers.draggable.shouldMove( el, position + " parent" );
$( "#main" ).css( "position", oldPosition );
},
generated by cgit v1.2.3 (git 2.39.1) at 2025-05-09 05:28:34 +0000