diff options
author | Alexander Schmitz <arschmitz@gmail.com> | 2015-08-24 09:33:22 -0400 |
---|---|---|
committer | Alexander Schmitz <arschmitz@gmail.com> | 2015-09-11 08:36:41 -0400 |
commit | 4b39e131b5938ac159110896e3016ce328a35980 (patch) | |
tree | b344114b551066ca3e896ea413c8b9a3929f7ec0 /tests | |
parent | f520f9ef4231a0abf58c24d0811bb8f598e4dd86 (diff) | |
download | jquery-ui-4b39e131b5938ac159110896e3016ce328a35980.tar.gz jquery-ui-4b39e131b5938ac159110896e3016ce328a35980.zip |
Position: Style updates
Ref #14246
Diffstat (limited to 'tests')
-rw-r--r-- | tests/unit/position/core.js | 282 |
1 files changed, 141 insertions, 141 deletions
diff --git a/tests/unit/position/core.js b/tests/unit/position/core.js index c480e2178..79aac76c4 100644 --- a/tests/unit/position/core.js +++ b/tests/unit/position/core.js @@ -18,63 +18,63 @@ module( "position", { setup: function() { win.scrollTop( 0 ).scrollLeft( 0 ); } -}); +} ); common.testJshint( "position" ); test( "my, at, of", function() { expect( 4 ); - $( "#elx" ).position({ + $( "#elx" ).position( { my: "left top", at: "left top", of: "#parentx", collision: "none" - }); + } ); deepEqual( $( "#elx" ).offset(), { top: 40, left: 40 }, "left top, left top" ); - $( "#elx" ).position({ + $( "#elx" ).position( { my: "left top", at: "left bottom", of: "#parentx", collision: "none" - }); + } ); deepEqual( $( "#elx" ).offset(), { top: 60, left: 40 }, "left top, left bottom" ); - $( "#elx" ).position({ + $( "#elx" ).position( { my: "left", at: "bottom", of: "#parentx", collision: "none" - }); + } ); deepEqual( $( "#elx" ).offset(), { top: 55, left: 50 }, "left, bottom" ); - $( "#elx" ).position({ + $( "#elx" ).position( { my: "left foo", at: "bar baz", of: "#parentx", collision: "none" - }); + } ); deepEqual( $( "#elx" ).offset(), { top: 45, left: 50 }, "left foo, bar baz" ); -}); +} ); test( "multiple elements", function() { expect( 3 ); var elements = $( "#el1, #el2" ), - result = elements.position({ + result = elements.position( { my: "left top", at: "left bottom", of: "#parent", collision: "none" - }), + } ), expected = { top: 10, left: 4 }; deepEqual( result, elements ); - elements.each(function() { + elements.each( function() { deepEqual( $( this ).offset(), expected ); - }); -}); + } ); +} ); test( "positions", function() { expect( 18 ); @@ -94,67 +94,67 @@ test( "positions", function() { $.each( [ "left", "center", "right" ], function( hindex, horizontal ) { var _my = my ? horizontal + " " + vertical : "left top", _at = !my ? horizontal + " " + vertical : "left top"; - el.position({ + el.position( { my: _my, at: _at, of: "#parent", collision: "none" - }); + } ); deepEqual( el.offset(), { - top: start.top + offsets[ vertical ] * (my ? -1 : 1), - left: start.left + offsets[ horizontal ] * (my ? -1 : 1) - }, "Position via " + QUnit.jsDump.parse({ my: _my, at: _at }) ); - }); - }); - }); -}); + top: start.top + offsets[ vertical ] * ( my ? -1 : 1 ), + left: start.left + offsets[ horizontal ] * ( my ? -1 : 1 ) + }, "Position via " + QUnit.jsDump.parse( { my: _my, at: _at } ) ); + } ); + } ); + } ); +} ); test( "of", function() { - expect( 9 + (scrollTopSupport() ? 1 : 0) ); + expect( 9 + ( scrollTopSupport() ? 1 : 0 ) ); var event; - $( "#elx" ).position({ + $( "#elx" ).position( { my: "left top", at: "left top", of: "#parentx", collision: "none" - }); + } ); deepEqual( $( "#elx" ).offset(), { top: 40, left: 40 }, "selector" ); - $( "#elx" ).position({ + $( "#elx" ).position( { my: "left top", at: "left bottom", - of: $( "#parentx"), + of: $( "#parentx" ), collision: "none" - }); + } ); deepEqual( $( "#elx" ).offset(), { top: 60, left: 40 }, "jQuery object" ); - $( "#elx" ).position({ + $( "#elx" ).position( { my: "left top", at: "left top", of: $( "#parentx" )[ 0 ], collision: "none" - }); + } ); deepEqual( $( "#elx" ).offset(), { top: 40, left: 40 }, "DOM element" ); - $( "#elx" ).position({ + $( "#elx" ).position( { my: "right bottom", at: "right bottom", of: document, collision: "none" - }); + } ); deepEqual( $( "#elx" ).offset(), { top: $( document ).height() - 10, left: $( document ).width() - 10 }, "document" ); - $( "#elx" ).position({ + $( "#elx" ).position( { my: "right bottom", at: "right bottom", of: $( document ), collision: "none" - }); + } ); deepEqual( $( "#elx" ).offset(), { top: $( document ).height() - 10, left: $( document ).width() - 10 @@ -162,23 +162,23 @@ test( "of", function() { win.scrollTop( 0 ); - $( "#elx" ).position({ + $( "#elx" ).position( { my: "right bottom", at: "right bottom", of: window, collision: "none" - }); + } ); deepEqual( $( "#elx" ).offset(), { top: win.height() - 10, left: win.width() - 10 }, "window" ); - $( "#elx" ).position({ + $( "#elx" ).position( { my: "right bottom", at: "right bottom", of: win, collision: "none" - }); + } ); deepEqual( $( "#elx" ).offset(), { top: win.height() - 10, left: win.width() - 10 @@ -186,12 +186,12 @@ test( "of", function() { if ( scrollTopSupport() ) { win.scrollTop( 500 ).scrollLeft( 200 ); - $( "#elx" ).position({ + $( "#elx" ).position( { my: "right bottom", at: "right bottom", of: window, collision: "none" - }); + } ); deepEqual( $( "#elx" ).offset(), { top: win.height() + 500 - 10, left: win.width() + 200 - 10 @@ -200,95 +200,95 @@ test( "of", function() { } event = $.extend( $.Event( "someEvent" ), { pageX: 200, pageY: 300 } ); - $( "#elx" ).position({ + $( "#elx" ).position( { my: "left top", at: "left top", of: event, collision: "none" - }); + } ); deepEqual( $( "#elx" ).offset(), { top: 300, left: 200 }, "event - left top, left top" ); event = $.extend( $.Event( "someEvent" ), { pageX: 400, pageY: 600 } ); - $( "#elx" ).position({ + $( "#elx" ).position( { my: "left top", at: "right bottom", of: event, collision: "none" - }); + } ); deepEqual( $( "#elx" ).offset(), { top: 600, left: 400 }, "event - left top, right bottom" ); -}); +} ); test( "offsets", function() { expect( 9 ); var offset; - $( "#elx" ).position({ + $( "#elx" ).position( { my: "left top", at: "left+10 bottom+10", of: "#parentx", collision: "none" - }); + } ); deepEqual( $( "#elx" ).offset(), { top: 70, left: 50 }, "offsets in at" ); - $( "#elx" ).position({ + $( "#elx" ).position( { my: "left+10 top-10", at: "left bottom", of: "#parentx", collision: "none" - }); + } ); deepEqual( $( "#elx" ).offset(), { top: 50, left: 50 }, "offsets in my" ); - $( "#elx" ).position({ + $( "#elx" ).position( { my: "left top", at: "left+50% bottom-10%", of: "#parentx", collision: "none" - }); + } ); deepEqual( $( "#elx" ).offset(), { top: 58, left: 50 }, "percentage offsets in at" ); - $( "#elx" ).position({ + $( "#elx" ).position( { my: "left-30% top+50%", at: "left bottom", of: "#parentx", collision: "none" - }); + } ); deepEqual( $( "#elx" ).offset(), { top: 65, left: 37 }, "percentage offsets in my" ); - $( "#elx" ).position({ + $( "#elx" ).position( { my: "left-30.001% top+50.0%", at: "left bottom", of: "#parentx", collision: "none" - }); + } ); offset = $( "#elx" ).offset(); equal( Math.round( offset.top ), 65, "decimal percentage offsets in my" ); equal( Math.round( offset.left ), 37, "decimal percentage offsets in my" ); - $( "#elx" ).position({ + $( "#elx" ).position( { my: "left+10.4 top-10.6", at: "left bottom", of: "#parentx", collision: "none" - }); + } ); offset = $( "#elx" ).offset(); equal( Math.round( offset.top ), 49, "decimal offsets in my" ); equal( Math.round( offset.left ), 50, "decimal offsets in my" ); - $( "#elx" ).position({ + $( "#elx" ).position( { my: "left+right top-left", at: "left-top bottom-bottom", of: "#parentx", collision: "none" - }); + } ); deepEqual( $( "#elx" ).offset(), { top: 60, left: 40 }, "invalid offsets" ); -}); +} ); test( "using", function() { expect( 10 ); @@ -315,14 +315,14 @@ test( "using", function() { vertical: "top", important: "vertical" }, - originalPosition = elems.position({ + originalPosition = elems.position( { my: "right bottom", at: "rigt bottom", of: "#parentx", collision: "none" - }).offset(); + } ).offset(); - elems.position({ + elems.position( { my: "left top", at: "center+10 bottom", of: "#parentx", @@ -334,15 +334,15 @@ test( "using", function() { deepEqual( feedback, expectedFeedback ); count++; } - }); + } ); - elems.each(function() { + elems.each( function() { deepEqual( $( this ).offset(), originalPosition, "elements not moved" ); - }); -}); + } ); +} ); function collisionTest( config, result, msg ) { - var elem = $( "#elx" ).position( $.extend({ + var elem = $( "#elx" ).position( $.extend( { my: "left top", at: "right bottom", of: "#parent" @@ -351,7 +351,7 @@ function collisionTest( config, result, msg ) { } function collisionTest2( config, result, msg ) { - collisionTest( $.extend({ + collisionTest( $.extend( { my: "right bottom", at: "left top" }, config ), result, msg ); @@ -360,35 +360,35 @@ function collisionTest2( config, result, msg ) { test( "collision: fit, no collision", function() { expect( 2 ); - collisionTest({ + collisionTest( { collision: "fit" }, { top: 10, left: 10 }, "no offset" ); - collisionTest({ + collisionTest( { collision: "fit", at: "right+2 bottom+3" }, { top: 13, left: 12 }, "with offset" ); -}); +} ); // Currently failing in IE8 due to the iframe used by TestSwarm if ( !/msie [\w.]+/.exec( navigator.userAgent.toLowerCase() ) ) { test( "collision: fit, collision", function() { - expect( 2 + (scrollTopSupport() ? 1 : 0) ); + expect( 2 + ( scrollTopSupport() ? 1 : 0 ) ); - collisionTest2({ + collisionTest2( { collision: "fit" }, { top: 0, left: 0 }, "no offset" ); - collisionTest2({ + collisionTest2( { collision: "fit", at: "left+2 top+3" }, { @@ -398,7 +398,7 @@ test( "collision: fit, collision", function() { if ( scrollTopSupport() ) { win.scrollTop( 300 ).scrollLeft( 200 ); - collisionTest({ + collisionTest( { collision: "fit" }, { top: 300, @@ -407,188 +407,188 @@ test( "collision: fit, collision", function() { win.scrollTop( 0 ).scrollLeft( 0 ); } -}); +} ); } test( "collision: flip, no collision", function() { expect( 2 ); - collisionTest({ + collisionTest( { collision: "flip" }, { top: 10, left: 10 }, "no offset" ); - collisionTest({ + collisionTest( { collision: "flip", at: "right+2 bottom+3" }, { top: 13, left: 12 }, "with offset" ); -}); +} ); test( "collision: flip, collision", function() { expect( 2 ); - collisionTest2({ + collisionTest2( { collision: "flip" }, { top: 10, left: 10 }, "no offset" ); - collisionTest2({ + collisionTest2( { collision: "flip", at: "left+2 top+3" }, { top: 7, left: 8 }, "with offset" ); -}); +} ); test( "collision: flipfit, no collision", function() { expect( 2 ); - collisionTest({ + collisionTest( { collision: "flipfit" }, { top: 10, left: 10 }, "no offset" ); - collisionTest({ + collisionTest( { collision: "flipfit", at: "right+2 bottom+3" }, { top: 13, left: 12 }, "with offset" ); -}); +} ); test( "collision: flipfit, collision", function() { expect( 2 ); - collisionTest2({ + collisionTest2( { collision: "flipfit" }, { top: 10, left: 10 }, "no offset" ); - collisionTest2({ + collisionTest2( { collision: "flipfit", at: "left+2 top+3" }, { top: 7, left: 8 }, "with offset" ); -}); +} ); test( "collision: none, no collision", function() { expect( 2 ); - collisionTest({ + collisionTest( { collision: "none" }, { top: 10, left: 10 }, "no offset" ); - collisionTest({ + collisionTest( { collision: "none", at: "right+2 bottom+3" }, { top: 13, left: 12 }, "with offset" ); -}); +} ); test( "collision: none, collision", function() { expect( 2 ); - collisionTest2({ + collisionTest2( { collision: "none" }, { top: -6, left: -6 }, "no offset" ); - collisionTest2({ + collisionTest2( { collision: "none", at: "left+2 top+3" }, { top: -3, left: -4 }, "with offset" ); -}); +} ); test( "collision: fit, with margin", function() { expect( 2 ); - $( "#elx" ).css({ + $( "#elx" ).css( { marginTop: 6, marginLeft: 4 - }); + } ); - collisionTest({ + collisionTest( { collision: "fit" }, { top: 10, left: 10 }, "right bottom" ); - collisionTest2({ + collisionTest2( { collision: "fit" }, { top: 6, left: 4 }, "left top" ); -}); +} ); test( "collision: flip, with margin", function() { expect( 3 ); - $( "#elx" ).css({ + $( "#elx" ).css( { marginTop: 6, marginLeft: 4 - }); + } ); - collisionTest({ + collisionTest( { collision: "flip" }, { top: 10, left: 10 }, "left top" ); - collisionTest2({ + collisionTest2( { collision: "flip" }, { top: 10, left: 10 }, "right bottom" ); - collisionTest2({ + collisionTest2( { collision: "flip", my: "left top" }, { top: 0, left: 4 }, "right bottom" ); -}); +} ); test( "within", function() { expect( 7 ); - collisionTest({ + collisionTest( { within: document }, { top: 10, left: 10 }, "within document" ); - collisionTest({ + collisionTest( { within: "#within", collision: "fit" }, { @@ -596,7 +596,7 @@ test( "within", function() { left: 2 }, "fit - right bottom" ); - collisionTest2({ + collisionTest2( { within: "#within", collision: "fit" }, { @@ -604,7 +604,7 @@ test( "within", function() { left: 0 }, "fit - left top" ); - collisionTest({ + collisionTest( { within: "#within", collision: "flip" }, { @@ -612,7 +612,7 @@ test( "within", function() { left: -6 }, "flip - right bottom" ); - collisionTest2({ + collisionTest2( { within: "#within", collision: "flip" }, { @@ -620,7 +620,7 @@ test( "within", function() { left: -6 }, "flip - left top" ); - collisionTest({ + collisionTest( { within: "#within", collision: "flipfit" }, { @@ -628,26 +628,26 @@ test( "within", function() { left: 0 }, "flipfit - right bottom" ); - collisionTest2({ + collisionTest2( { within: "#within", collision: "flipfit" }, { top: 4, left: 0 }, "flipfit - left top" ); -}); +} ); test( "with scrollbars", function() { expect( 4 ); - $( "#scrollx" ).css({ + $( "#scrollx" ).css( { width: 100, height: 100, left: 0, top: 0 - }); + } ); - collisionTest({ + collisionTest( { of: "#scrollx", collision: "fit", within: "#scrollx" @@ -656,13 +656,13 @@ test( "with scrollbars", function() { left: 90 }, "visible" ); - $( "#scrollx" ).css({ + $( "#scrollx" ).css( { overflow: "scroll" - }); + } ); var scrollbarInfo = $.position.getScrollInfo( $.position.getWithinInfo( $( "#scrollx" ) ) ); - collisionTest({ + collisionTest( { of: "#scrollx", collision: "fit", within: "#scrollx" @@ -671,11 +671,11 @@ test( "with scrollbars", function() { left: 90 - scrollbarInfo.width }, "scroll" ); - $( "#scrollx" ).css({ + $( "#scrollx" ).css( { overflow: "auto" - }); + } ); - collisionTest({ + collisionTest( { of: "#scrollx", collision: "fit", within: "#scrollx" @@ -684,11 +684,11 @@ test( "with scrollbars", function() { left: 90 }, "auto, no scroll" ); - $( "#scrollx" ).css({ + $( "#scrollx" ).css( { overflow: "auto" - }).append( $("<div>").height(300).width(300) ); + } ).append( $( "<div>" ).height( 300 ).width( 300 ) ); - collisionTest({ + collisionTest( { of: "#scrollx", collision: "fit", within: "#scrollx" @@ -696,45 +696,45 @@ test( "with scrollbars", function() { top: 90 - scrollbarInfo.height, left: 90 - scrollbarInfo.width }, "auto, with scroll" ); -}); +} ); test( "fractions", function() { expect( 1 ); - $( "#fractions-element" ).position({ + $( "#fractions-element" ).position( { my: "left top", at: "left top", of: "#fractions-parent", collision: "none" - }); + } ); deepEqual( $( "#fractions-element" ).offset(), $( "#fractions-parent" ).offset(), "left top, left top" ); -}); +} ); test( "bug #5280: consistent results (avoid fractional values)", function() { expect( 1 ); var wrapper = $( "#bug-5280" ), elem = wrapper.children(), - offset1 = elem.position({ + offset1 = elem.position( { my: "center", at: "center", of: wrapper, collision: "none" - }).offset(), - offset2 = elem.position({ + } ).offset(), + offset2 = elem.position( { my: "center", at: "center", of: wrapper, collision: "none" - }).offset(); + } ).offset(); deepEqual( offset1, offset2 ); -}); +} ); test( "bug #8710: flip if flipped position fits more", function() { expect( 3 ); // Positions a 10px tall element within 99px height at top 90px. - collisionTest({ + collisionTest( { within: "#bug-8710-within-smaller", of: "#parentx", collision: "flip", @@ -745,7 +745,7 @@ test( "bug #8710: flip if flipped position fits more", function() { }, "flip - top fits all" ); // Positions a 10px tall element within 99px height at top 92px. - collisionTest({ + collisionTest( { within: "#bug-8710-within-smaller", of: "#parentx", collision: "flip", @@ -756,7 +756,7 @@ test( "bug #8710: flip if flipped position fits more", function() { }, "flip - top fits more" ); // Positions a 10px tall element within 101px height at top 92px. - collisionTest({ + collisionTest( { within: "#bug-8710-within-bigger", of: "#parentx", collision: "flip", @@ -765,6 +765,6 @@ test( "bug #8710: flip if flipped position fits more", function() { top: 92, left: 60 }, "no flip - top fits less" ); -}); +} ); } ); |