library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Draggable Tests: Ensure Draggable tests are correctly testing offset under scroll conditions.

Browse Source
This commit is contained in:
Mike Sherov 2013-10-23 11:04:10 -04:00
parent df2c982640
commit dbbf3a9611
3 changed files with 108 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
tests/unit/draggable/draggable.html
View File

@ -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>

170
tests/unit/draggable/draggable_options.js
View File

@ -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,7 +660,7 @@ 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" );
@ -676,14 +670,14 @@ test( "{ helper: 'clone' }, relative", function() {
expect( 2 );
var element = $( "#draggable1" ).draggable({ helper: "clone" });
TestHelpers.draggable.shouldMovePositionButNotOffset( element, "helper: clone relative" );
TestHelpers.draggable.shouldMove( element, "helper: clone relative" );
});
test( "{ helper: 'clone' }, absolute", function() {
expect( 2 );
var element = $( "#draggable2" ).draggable({ helper: "clone" });
TestHelpers.draggable.shouldMovePositionButNotOffset( element, "helper: clone absolute" );
TestHelpers.draggable.shouldMove( element, "helper: clone absolute" );
});
test( "{ helper: 'original' }, relative, with scroll offset on parent", function() {
@ -758,6 +752,26 @@ test( "{ helper: 'original' }, absolute, with scroll offset on parent", function
TestHelpers.draggable.restoreScroll( "#main" );
});
test( "{ helper: 'original' }, absolute, with scroll offset on grandparent", function() {
expect( 6 );
var element = $( "#draggable1" ).css({ position: "absolute", top: 0, left: 0 }).draggable({ helper: "original" });
TestHelpers.draggable.setScrollable( "#main", false );
TestHelpers.draggable.setScrollable( "#scrollParent", true );
TestHelpers.draggable.setScroll( "#scrollParent" );
TestHelpers.draggable.testScroll( element, "relative" );
TestHelpers.draggable.setScroll( "#scrollParent" );
TestHelpers.draggable.testScroll( element, "static" );
TestHelpers.draggable.setScroll( "#scrollParent" );
TestHelpers.draggable.testScroll( element, "absolute" );
TestHelpers.draggable.restoreScroll( "#scrollParent" );
});
test( "{ helper: 'original' }, absolute, with scroll offset on root", function() {
expect( 6 );
@ -871,123 +885,61 @@ test( "{ helper: 'clone' }, absolute", function() {
});
test( "{ helper: 'clone' }, absolute with scroll offset on parent", function() {
expect( 3 );
expect( 6 );
TestHelpers.draggable.setScroll( "#main" );
var helperOffset = null,
origOffset = null,
element = $( "#draggable1" ).draggable({
helper: "clone",
drag: function( event, ui) {
helperOffset = ui.helper.offset();
}
var element = $( "#draggable1" ).draggable({
helper: "clone"
});
$( "#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]" );
TestHelpers.draggable.setScroll( "#main" );
TestHelpers.draggable.testScroll( element, "relative" );
$( "#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]" );
TestHelpers.draggable.setScroll( "#main" );
TestHelpers.draggable.testScroll( element, "static" );
$( "#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.setScroll( "#main" );
TestHelpers.draggable.testScroll( element, "absolute" );
TestHelpers.draggable.restoreScroll( "#main" );
});
test( "{ helper: 'clone' }, absolute with scroll offset on root", function() {
expect( 3 );
expect( 6 );
TestHelpers.draggable.setScroll( document );
var helperOffset = null,
origOffset = null,
element = $( "#draggable1" ).draggable({
helper: "clone",
drag: function( event, ui) {
helperOffset = ui.helper.offset();
}
var element = $( "#draggable1" ).draggable({
helper: "clone"
});
$( "#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]" );
TestHelpers.draggable.setScroll( document );
TestHelpers.draggable.testScroll( element, "relative" );
$( "#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]" );
TestHelpers.draggable.setScroll( document );
TestHelpers.draggable.testScroll( element, "static" );
$( "#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.setScroll( document );
TestHelpers.draggable.testScroll( element, "absolute" );
TestHelpers.draggable.restoreScroll( document );
});
test( "{ helper: 'clone' }, absolute with scroll offset on root and parent", function() {
expect( 3 );
expect( 6 );
var element = $( "#draggable1" ).draggable({
helper: "clone"
});
TestHelpers.draggable.setScroll( document );
TestHelpers.draggable.setScroll( "#main" );
TestHelpers.draggable.testScroll( element, "relative" );
var helperOffset = null,
origOffset = null,
element = $( "#draggable1" ).draggable({
helper: "clone",
drag: function( event, ui) {
helperOffset = ui.helper.offset();
}
});
TestHelpers.draggable.setScroll( document );
TestHelpers.draggable.setScroll( "#main" );
TestHelpers.draggable.testScroll( element, "static" );
$( "#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.setScroll( document );
TestHelpers.draggable.setScroll( "#main" );
TestHelpers.draggable.testScroll( element, "absolute" );
TestHelpers.draggable.restoreScroll( document );
TestHelpers.draggable.restoreScroll( "#main" );
@ -1098,8 +1050,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" );

10
tests/unit/draggable/draggable_test_helpers.js
View File

@ -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 ) {
@ -68,9 +68,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 );
},