diff options
Diffstat (limited to 'test/unit/dimensions.js')
-rw-r--r-- | test/unit/dimensions.js | 246 |
1 files changed, 124 insertions, 122 deletions
diff --git a/test/unit/dimensions.js b/test/unit/dimensions.js index 2eb6e73df..eadb06050 100644 --- a/test/unit/dimensions.js +++ b/test/unit/dimensions.js @@ -1,10 +1,10 @@ -(function() { +( function() { if ( !jQuery.fn.width ) { return; } -module("dimensions", { teardown: moduleTeardown }); +module( "dimensions", { teardown: moduleTeardown } ); function pass( val ) { return val; @@ -29,111 +29,111 @@ function fn( val ) { */ function testWidth( val ) { - expect(9); + expect( 9 ); var $div, blah; - $div = jQuery("#nothiddendiv"); - $div.width( val(30) ); - equal($div.width(), 30, "Test set to 30 correctly"); + $div = jQuery( "#nothiddendiv" ); + $div.width( val( 30 ) ); + equal( $div.width(), 30, "Test set to 30 correctly" ); $div.hide(); - equal($div.width(), 30, "Test hidden div"); + equal( $div.width(), 30, "Test hidden div" ); $div.show(); - $div.width( val(-1) ); // handle negative numbers by setting to 0 #11604 - equal($div.width(), 0, "Test negative width normalized to 0"); - $div.css("padding", "20px"); - equal($div.width(), 0, "Test padding specified with pixels"); - $div.css("border", "2px solid #fff"); - equal($div.width(), 0, "Test border specified with pixels"); + $div.width( val( -1 ) ); // handle negative numbers by setting to 0 #11604 + equal( $div.width(), 0, "Test negative width normalized to 0" ); + $div.css( "padding", "20px" ); + equal( $div.width(), 0, "Test padding specified with pixels" ); + $div.css( "border", "2px solid #fff" ); + equal( $div.width(), 0, "Test border specified with pixels" ); - $div.css({ "display": "", "border": "", "padding": "" }); + $div.css( { "display": "", "border": "", "padding": "" } ); - jQuery("#nothiddendivchild").css({ "width": 20, "padding": "3px", "border": "2px solid #fff" }); - equal(jQuery("#nothiddendivchild").width(), 20, "Test child width with border and padding"); - jQuery("#nothiddendiv, #nothiddendivchild").css({ "border": "", "padding": "", "width": "" }); + jQuery( "#nothiddendivchild" ).css( { "width": 20, "padding": "3px", "border": "2px solid #fff" } ); + equal( jQuery( "#nothiddendivchild" ).width(), 20, "Test child width with border and padding" ); + jQuery( "#nothiddendiv, #nothiddendivchild" ).css( { "border": "", "padding": "", "width": "" } ); - blah = jQuery("blah"); - equal( blah.width( val(10) ), blah, "Make sure that setting a width on an empty set returns the set." ); - equal( blah.width(), null, "Make sure 'null' is returned on an empty set"); + blah = jQuery( "blah" ); + equal( blah.width( val( 10 ) ), blah, "Make sure that setting a width on an empty set returns the set." ); + equal( blah.width(), null, "Make sure 'null' is returned on an empty set" ); - equal( jQuery(window).width(), document.documentElement.clientWidth, "Window width is equal to width reported by window/document." ); + equal( jQuery( window ).width(), document.documentElement.clientWidth, "Window width is equal to width reported by window/document." ); - QUnit.expectJqData( this, $div[0], "display" ); + QUnit.expectJqData( this, $div[ 0 ], "display" ); } -test("width()", function() { +test( "width()", function() { testWidth( pass ); -}); +} ); -test("width(Function)", function() { +test( "width(Function)", function() { testWidth( fn ); -}); +} ); -test("width(Function(args))", function() { +test( "width(Function(args))", function() { expect( 2 ); - var $div = jQuery("#nothiddendiv"); - $div.width( 30 ).width(function(i, width) { + var $div = jQuery( "#nothiddendiv" ); + $div.width( 30 ).width( function( i, width ) { equal( width, 30, "Make sure previous value is correct." ); return width + 1; - }); + } ); equal( $div.width(), 31, "Make sure value was modified correctly." ); -}); +} ); function testHeight( val ) { - expect(9); + expect( 9 ); var $div, blah; - $div = jQuery("#nothiddendiv"); - $div.height( val(30) ); - equal($div.height(), 30, "Test set to 30 correctly"); + $div = jQuery( "#nothiddendiv" ); + $div.height( val( 30 ) ); + equal( $div.height(), 30, "Test set to 30 correctly" ); $div.hide(); - equal($div.height(), 30, "Test hidden div"); + equal( $div.height(), 30, "Test hidden div" ); $div.show(); - $div.height( val(-1) ); // handle negative numbers by setting to 0 #11604 - equal($div.height(), 0, "Test negative height normalized to 0"); - $div.css("padding", "20px"); - equal($div.height(), 0, "Test padding specified with pixels"); - $div.css("border", "2px solid #fff"); - equal($div.height(), 0, "Test border specified with pixels"); + $div.height( val( -1 ) ); // handle negative numbers by setting to 0 #11604 + equal( $div.height(), 0, "Test negative height normalized to 0" ); + $div.css( "padding", "20px" ); + equal( $div.height(), 0, "Test padding specified with pixels" ); + $div.css( "border", "2px solid #fff" ); + equal( $div.height(), 0, "Test border specified with pixels" ); - $div.css({ "display": "", "border": "", "padding": "", "height": "1px" }); + $div.css( { "display": "", "border": "", "padding": "", "height": "1px" } ); - jQuery("#nothiddendivchild").css({ "height": 20, "padding": "3px", "border": "2px solid #fff" }); - equal(jQuery("#nothiddendivchild").height(), 20, "Test child height with border and padding"); - jQuery("#nothiddendiv, #nothiddendivchild").css({ "border": "", "padding": "", "height": "" }); + jQuery( "#nothiddendivchild" ).css( { "height": 20, "padding": "3px", "border": "2px solid #fff" } ); + equal( jQuery( "#nothiddendivchild" ).height(), 20, "Test child height with border and padding" ); + jQuery( "#nothiddendiv, #nothiddendivchild" ).css( { "border": "", "padding": "", "height": "" } ); - blah = jQuery("blah"); - equal( blah.height( val(10) ), blah, "Make sure that setting a height on an empty set returns the set." ); - equal( blah.height(), null, "Make sure 'null' is returned on an empty set"); + blah = jQuery( "blah" ); + equal( blah.height( val( 10 ) ), blah, "Make sure that setting a height on an empty set returns the set." ); + equal( blah.height(), null, "Make sure 'null' is returned on an empty set" ); - equal( jQuery(window).height(), document.documentElement.clientHeight, "Window width is equal to width reported by window/document." ); + equal( jQuery( window ).height(), document.documentElement.clientHeight, "Window width is equal to width reported by window/document." ); - QUnit.expectJqData( this, $div[0], "display" ); + QUnit.expectJqData( this, $div[ 0 ], "display" ); } -test("height()", function() { +test( "height()", function() { testHeight( pass ); -}); +} ); -test("height(Function)", function() { +test( "height(Function)", function() { testHeight( fn ); -}); +} ); -test("height(Function(args))", function() { +test( "height(Function(args))", function() { expect( 2 ); - var $div = jQuery("#nothiddendiv"); - $div.height( 30 ).height(function(i, height) { + var $div = jQuery( "#nothiddendiv" ); + $div.height( 30 ).height( function( i, height ) { equal( height, 30, "Make sure previous value is correct." ); return height + 1; - }); + } ); equal( $div.height(), 31, "Make sure value was modified correctly." ); -}); +} ); -test("innerWidth()", function() { +test( "innerWidth()", function() { expect( 6 ); var $div, div, @@ -144,11 +144,11 @@ test("innerWidth()", function() { equal( jQuery( document ).innerWidth(), $doc.width(), "Test on document" ); $div = jQuery( "#nothiddendiv" ); - $div.css({ + $div.css( { "margin": 10, "border": "2px solid #fff", "width": 30 - }); + } ); equal( $div.innerWidth(), 30, "Test with margin and border" ); $div.css( "padding", "20px" ); @@ -157,7 +157,7 @@ test("innerWidth()", function() { equal( $div.innerWidth(), 70, "Test hidden div" ); // reset styles - $div.css({ "display": "", "border": "", "padding": "", "width": "", "height": "" }); + $div.css( { "display": "", "border": "", "padding": "", "width": "", "height": "" } ); div = jQuery( "<div>" ); @@ -166,9 +166,9 @@ test("innerWidth()", function() { div.remove(); QUnit.expectJqData( this, $div[ 0 ], "display" ); -}); +} ); -test("innerHeight()", function() { +test( "innerHeight()", function() { expect( 6 ); var $div, div, @@ -179,11 +179,11 @@ test("innerHeight()", function() { equal( jQuery( document ).innerHeight(), $doc.height(), "Test on document" ); $div = jQuery( "#nothiddendiv" ); - $div.css({ + $div.css( { "margin": 10, "border": "2px solid #fff", "height": 30 - }); + } ); equal( $div.innerHeight(), 30, "Test with margin and border" ); $div.css( "padding", "20px" ); @@ -192,7 +192,7 @@ test("innerHeight()", function() { equal( $div.innerHeight(), 70, "Test hidden div" ); // reset styles - $div.css({ "display": "", "border": "", "padding": "", "width": "", "height": "" }); + $div.css( { "display": "", "border": "", "padding": "", "width": "", "height": "" } ); div = jQuery( "<div>" ); @@ -201,9 +201,9 @@ test("innerHeight()", function() { div.remove(); QUnit.expectJqData( this, $div[ 0 ], "display" ); -}); +} ); -test("outerWidth()", function() { +test( "outerWidth()", function() { expect( 11 ); var $div, div, @@ -231,7 +231,7 @@ test("outerWidth()", function() { equal( $div.outerWidth( true ), 94, "Test hidden div with padding, border and margin with margin option" ); // reset styles - $div.css({ "position": "", "display": "", "border": "", "padding": "", "width": "", "height": "" }); + $div.css( { "position": "", "display": "", "border": "", "padding": "", "width": "", "height": "" } ); div = jQuery( "<div>" ); @@ -240,23 +240,23 @@ test("outerWidth()", function() { div.remove(); QUnit.expectJqData( this, $div[ 0 ], "display" ); -}); +} ); -test("child of a hidden elem (or unconnected node) has accurate inner/outer/Width()/Height() see #9441 #9300", function() { - expect(16); +test( "child of a hidden elem (or unconnected node) has accurate inner/outer/Width()/Height() see #9441 #9300", function() { + expect( 16 ); // setup html - var $divNormal = jQuery("<div>").css({ "width": "100px", "height": "100px", "border": "10px solid white", "padding": "2px", "margin": "3px" }), + var $divNormal = jQuery( "<div>" ).css( { "width": "100px", "height": "100px", "border": "10px solid white", "padding": "2px", "margin": "3px" } ), $divChild = $divNormal.clone(), $divUnconnected = $divNormal.clone(), - $divHiddenParent = jQuery("<div>").css( "display", "none" ).append( $divChild ).appendTo("body"); - $divNormal.appendTo("body"); + $divHiddenParent = jQuery( "<div>" ).css( "display", "none" ).append( $divChild ).appendTo( "body" ); + $divNormal.appendTo( "body" ); // tests that child div of a hidden div works the same as a normal div equal( $divChild.width(), $divNormal.width(), "child of a hidden element width() is wrong see #9441" ); equal( $divChild.innerWidth(), $divNormal.innerWidth(), "child of a hidden element innerWidth() is wrong see #9441" ); equal( $divChild.outerWidth(), $divNormal.outerWidth(), "child of a hidden element outerWidth() is wrong see #9441" ); - equal( $divChild.outerWidth(true), $divNormal.outerWidth( true ), "child of a hidden element outerWidth( true ) is wrong see #9300" ); + equal( $divChild.outerWidth( true ), $divNormal.outerWidth( true ), "child of a hidden element outerWidth( true ) is wrong see #9300" ); // Support: IE 10-11, Edge // Child height is not always decimal @@ -269,7 +269,7 @@ test("child of a hidden elem (or unconnected node) has accurate inner/outer/Widt equal( $divUnconnected.width(), $divNormal.width(), "unconnected element width() is wrong see #9441" ); equal( $divUnconnected.innerWidth(), $divNormal.innerWidth(), "unconnected element innerWidth() is wrong see #9441" ); equal( $divUnconnected.outerWidth(), $divNormal.outerWidth(), "unconnected element outerWidth() is wrong see #9441" ); - equal( $divUnconnected.outerWidth(true), $divNormal.outerWidth( true ), "unconnected element outerWidth( true ) is wrong see #9300" ); + equal( $divUnconnected.outerWidth( true ), $divNormal.outerWidth( true ), "unconnected element outerWidth( true ) is wrong see #9300" ); // Support: IE 10-11, Edge // Child height is not always decimal @@ -281,9 +281,9 @@ test("child of a hidden elem (or unconnected node) has accurate inner/outer/Widt // teardown html $divHiddenParent.remove(); $divNormal.remove(); -}); +} ); -test("getting dimensions shouldn't modify runtimeStyle see #9233", function() { +test( "getting dimensions shouldn't modify runtimeStyle see #9233", function() { expect( 1 ); var $div = jQuery( "<div>" ).appendTo( "#qunit-fixture" ), @@ -304,36 +304,36 @@ test("getting dimensions shouldn't modify runtimeStyle see #9233", function() { } $div.remove(); -}); +} ); test( "table dimensions", function() { expect( 2 ); - var table = jQuery("<table><colgroup><col/><col/></colgroup><tbody><tr><td></td><td>a</td></tr><tr><td></td><td>a</td></tr></tbody></table>").appendTo("#qunit-fixture"), - tdElem = table.find("td").first(), - colElem = table.find("col").first().width( 300 ); + var table = jQuery( "<table><colgroup><col/><col/></colgroup><tbody><tr><td></td><td>a</td></tr><tr><td></td><td>a</td></tr></tbody></table>" ).appendTo( "#qunit-fixture" ), + tdElem = table.find( "td" ).first(), + colElem = table.find( "col" ).first().width( 300 ); - table.find("td").css({ "margin": 0, "padding": 0 }); + table.find( "td" ).css( { "margin": 0, "padding": 0 } ); equal( tdElem.width(), tdElem.width(), "width() doesn't alter dimension values of empty cells, see #11293" ); equal( colElem.width(), 300, "col elements have width(), see #12243" ); -}); +} ); -test("box-sizing:border-box child of a hidden elem (or unconnected node) has accurate inner/outer/Width()/Height() see #10413", function() { - expect(16); +test( "box-sizing:border-box child of a hidden elem (or unconnected node) has accurate inner/outer/Width()/Height() see #10413", function() { + expect( 16 ); // setup html - var $divNormal = jQuery("<div>").css({ "boxSizing": "border-box", "width": "100px", "height": "100px", "border": "10px solid white", "padding": "2px", "margin": "3px" }), + var $divNormal = jQuery( "<div>" ).css( { "boxSizing": "border-box", "width": "100px", "height": "100px", "border": "10px solid white", "padding": "2px", "margin": "3px" } ), $divChild = $divNormal.clone(), $divUnconnected = $divNormal.clone(), - $divHiddenParent = jQuery("<div>").css( "display", "none" ).append( $divChild ).appendTo("body"); - $divNormal.appendTo("body"); + $divHiddenParent = jQuery( "<div>" ).css( "display", "none" ).append( $divChild ).appendTo( "body" ); + $divNormal.appendTo( "body" ); // tests that child div of a hidden div works the same as a normal div equal( $divChild.width(), $divNormal.width(), "child of a hidden element width() is wrong see #10413" ); equal( $divChild.innerWidth(), $divNormal.innerWidth(), "child of a hidden element innerWidth() is wrong see #10413" ); equal( $divChild.outerWidth(), $divNormal.outerWidth(), "child of a hidden element outerWidth() is wrong see #10413" ); - equal( $divChild.outerWidth(true), $divNormal.outerWidth( true ), "child of a hidden element outerWidth( true ) is wrong see #10413" ); + equal( $divChild.outerWidth( true ), $divNormal.outerWidth( true ), "child of a hidden element outerWidth( true ) is wrong see #10413" ); // Support: IE 10-11, Edge // Child height is not always decimal @@ -346,7 +346,7 @@ test("box-sizing:border-box child of a hidden elem (or unconnected node) has acc equal( $divUnconnected.width(), $divNormal.width(), "unconnected element width() is wrong see #10413" ); equal( $divUnconnected.innerWidth(), $divNormal.innerWidth(), "unconnected element innerWidth() is wrong see #10413" ); equal( $divUnconnected.outerWidth(), $divNormal.outerWidth(), "unconnected element outerWidth() is wrong see #10413" ); - equal( $divUnconnected.outerWidth(true), $divNormal.outerWidth( true ), "unconnected element outerWidth( true ) is wrong see #10413" ); + equal( $divUnconnected.outerWidth( true ), $divNormal.outerWidth( true ), "unconnected element outerWidth( true ) is wrong see #10413" ); // Support: IE 10-11, Edge // Child height is not always decimal @@ -358,9 +358,9 @@ test("box-sizing:border-box child of a hidden elem (or unconnected node) has acc // teardown html $divHiddenParent.remove(); $divNormal.remove(); -}); +} ); -test("outerHeight()", function() { +test( "outerHeight()", function() { expect( 11 ); var $div, div, @@ -387,7 +387,7 @@ test("outerHeight()", function() { equal( $div.outerHeight( true ), 94, "Test hidden div with padding, border and margin with margin option" ); // reset styles - $div.css({ "display": "", "border": "", "padding": "", "width": "", "height": "" }); + $div.css( { "display": "", "border": "", "padding": "", "width": "", "height": "" } ); div = jQuery( "<div>" ); @@ -396,20 +396,20 @@ test("outerHeight()", function() { div.remove(); QUnit.expectJqData( this, $div[ 0 ], "display" ); -}); +} ); -test("passing undefined is a setter #5571", function() { - expect(4); - equal(jQuery("#nothiddendiv").height(30).height(undefined).height(), 30, ".height(undefined) is chainable (#5571)"); - equal(jQuery("#nothiddendiv").height(30).innerHeight(undefined).height(), 30, ".innerHeight(undefined) is chainable (#5571)"); - equal(jQuery("#nothiddendiv").height(30).outerHeight(undefined).height(), 30, ".outerHeight(undefined) is chainable (#5571)"); - equal(jQuery("#nothiddendiv").width(30).width(undefined).width(), 30, ".width(undefined) is chainable (#5571)"); -}); +test( "passing undefined is a setter #5571", function() { + expect( 4 ); + equal( jQuery( "#nothiddendiv" ).height( 30 ).height( undefined ).height(), 30, ".height(undefined) is chainable (#5571)" ); + equal( jQuery( "#nothiddendiv" ).height( 30 ).innerHeight( undefined ).height(), 30, ".innerHeight(undefined) is chainable (#5571)" ); + equal( jQuery( "#nothiddendiv" ).height( 30 ).outerHeight( undefined ).height(), 30, ".outerHeight(undefined) is chainable (#5571)" ); + equal( jQuery( "#nothiddendiv" ).width( 30 ).width( undefined ).width(), 30, ".width(undefined) is chainable (#5571)" ); +} ); test( "getters on non elements should return null", function() { expect( 8 ); - var nonElem = jQuery("notAnElement"); + var nonElem = jQuery( "notAnElement" ); strictEqual( nonElem.width(), null, ".width() is not null (#12283)" ); strictEqual( nonElem.innerWidth(), null, ".innerWidth() is not null (#12283)" ); @@ -420,14 +420,14 @@ test( "getters on non elements should return null", function() { strictEqual( nonElem.innerHeight(), null, ".innerHeight() is not null (#12283)" ); strictEqual( nonElem.outerHeight(), null, ".outerHeight() is not null (#12283)" ); strictEqual( nonElem.outerHeight( true ), null, ".outerHeight(true) is not null (#12283)" ); -}); +} ); -test("setters with and without box-sizing:border-box", function(){ - expect(20); +test( "setters with and without box-sizing:border-box", function() { + expect( 20 ); // Support: Android 2.3 (-webkit-box-sizing). - var el_bb = jQuery("<div style='width:114px;height:114px;margin:5px;padding:3px;border:4px solid white;-webkit-box-sizing:border-box;box-sizing:border-box;'>test</div>").appendTo("#qunit-fixture"), - el = jQuery("<div style='width:100px;height:100px;margin:5px;padding:3px;border:4px solid white;'>test</div>").appendTo("#qunit-fixture"), + var el_bb = jQuery( "<div style='width:114px;height:114px;margin:5px;padding:3px;border:4px solid white;-webkit-box-sizing:border-box;box-sizing:border-box;'>test</div>" ).appendTo( "#qunit-fixture" ), + el = jQuery( "<div style='width:100px;height:100px;margin:5px;padding:3px;border:4px solid white;'>test</div>" ).appendTo( "#qunit-fixture" ), expected = 100; equal( el_bb.width( 101 ).width(), expected + 1, "test border-box width(int) by roundtripping" ); @@ -453,9 +453,10 @@ test("setters with and without box-sizing:border-box", function(){ equal( el.outerHeight( 117 ).height(), expected + 3, "test border-box outerHeight(int) by roundtripping" ); equal( el.outerHeight( 118, false ).height(), expected + 4, "test border-box outerHeight(int, false) by roundtripping" ); equal( el.outerHeight( 129, true ).height(), expected + 5, "test border-box innerHeight(int, true) by roundtripping" ); -}); +} ); testIframe( "dimensions/documentSmall", "window vs. small document", function( jQuery, window, document ) { + // this test is practically tautological, but there is a bug in IE8 // with no simple workaround, so this test exposes the bug and works around it if ( document.body.offsetWidth >= document.documentElement.offsetWidth ) { @@ -464,18 +465,19 @@ testIframe( "dimensions/documentSmall", "window vs. small document", function( j equal( jQuery( document ).height(), jQuery( window ).height(), "document height matches window height" ); equal( jQuery( document ).width(), jQuery( window ).width(), "document width matches window width" ); } else { + // all tests should have at least one assertion expect( 1 ); ok( true, "skipping test (conditions not satisfied)" ); } -}); +} ); testIframe( "dimensions/documentLarge", "window vs. large document", function( jQuery, window, document ) { - expect(2); + expect( 2 ); ok( jQuery( document ).height() > jQuery( window ).height(), "document height is larger than window height" ); ok( jQuery( document ).width() > jQuery( window ).width(), "document width is larger than window width" ); -}); +} ); test( "allow modification of coordinates argument (gh-1848)", function() { expect( 1 ); @@ -483,15 +485,15 @@ test( "allow modification of coordinates argument (gh-1848)", function() { var offsetTop, element = jQuery( "<div/>" ).appendTo( "#qunit-fixture" ); - element.offset(function( index, coords ) { + element.offset( function( index, coords ) { coords.top = 100; return coords; - }); + } ); offsetTop = element.offset().top; - ok( Math.abs(offsetTop - 100) < 0.02, - "coordinates are modified (got offset.top: " + offsetTop + ")"); -}); + ok( Math.abs( offsetTop - 100 ) < 0.02, + "coordinates are modified (got offset.top: " + offsetTop + ")" ); +} ); -})(); +} )(); |