Fixed and improved tests

Author: Daniel-Garmig

tests/unit/resizable/core.js

@@ -245,56 +245,72 @@ QUnit.test( "nested resizable", function( assert ) {
 } );
 
 QUnit.test( "Resizable with scrollbars and box-sizing: border-box", function( assert ) {
-	assert.expect( 2 );
+	assert.expect( 4 );
+
+	var style = $( "<style> * { box-sizing: border-box; } </style>" ).appendTo( "head" );
 
+	//Both scrollbars
 	var elementContent = $( "<div>" )
 			.css( {
-				width: 50,
-				height: 200,
-				padding: 10,
-				border: 5,
-				borderStyle: "solid"
+				width: "200px",
+				height: "200px",
+				padding: "10px",
+				border: "5px",
+				borderStyle: "solid",
+				margin: "20px"
 			} )
 			.appendTo( "#resizable1" ),
-	element = $( "#resizable1" ).css( { overflow: "auto" } ).resizable(),
+	element = $( "#resizable1" ).css( "overflow", "auto" ).resizable(),
 	handle = ".ui-resizable-se";
 
-	$( "*" ).css( "box-sizing", "border-box" );
+	testHelper.drag( handle, 10, 10 );
+	assert.equal( element.width(), 110, "element width (both scrollbars)" );
+	assert.equal( element.height(), 110, "element height (both scrollbars)" );
 
+	//Single (vertical) scrollbar.
+	elementContent.css( "width", "50px" );
 	testHelper.drag( handle, 10, 10 );
-	assert.equal( element.width(), 110, "element width" );
-	assert.equal( element.height(), 110, "element height" );
+	assert.equal( element.width(), 120, "element width (only vertical scrollbar)" );
+	assert.equal( element.height(), 120, "element height (only vertical scrollbar)" );
 
-	elementContent.remove();
+	style.remove();
 } );
 
 QUnit.test( "Resizable with scrollbars and box-sizing: content-box", function( assert ) {
-	assert.expect( 2 );
+	assert.expect( 4 );
+
+	var style = $( "<style> * { box-sizing: content-box; } </style>" ).appendTo( "head" );
 
+	//Both scrollbars
 	var elementContent = $( "<div>" )
 			.css( {
-				width: 50,
-				height: 200,
-				padding: 10,
-				border: 5,
-				borderStyle: "solid"
+				width: "200px",
+				height: "200px",
+				padding: "10px",
+				border: "5px",
+				borderStyle: "solid",
+				margin: "20px"
 			} )
 			.appendTo( "#resizable1" ),
-	element = $( "#resizable1" ).css( { overflow: "auto" } ).resizable(),
+	element = $( "#resizable1" ).css( "overflow", "auto" ).resizable(),
 	handle = ".ui-resizable-se";
 
-	$( "*" ).css( "box-sizing", "content-box" );
-
 	// In some browsers scrollbar may change element size (when "box-sizing: content-box")
 	var widthBefore = element.innerWidth();
 	var heightBefore = element.innerHeight();
 
 	testHelper.drag( handle, 10, 10 );
+	assert.equal( parseFloat( element.innerWidth() ), widthBefore + 10, "element width (both scrollbars)" );
+	assert.equal( parseFloat( element.innerHeight() ), heightBefore + 10, "element height (both scrollbars)" );
 
-	assert.equal( parseFloat( element.innerWidth() ), widthBefore + 10, "element width" );
-	assert.equal( parseFloat( element.innerHeight() ), heightBefore + 10, "element height" );
+	//Single (vertical) scrollbar.
+	elementContent.css( "width", "50px" );
+
+	testHelper.drag( handle, 10, 10 );
+	assert.equal( parseFloat( element.innerWidth() ), widthBefore + 20, "element width (only vertical scrollbar)" );
+	assert.equal( parseFloat( element.innerHeight() ), heightBefore + 20, "element height (only vertical scrollbar)" );
 
-	elementContent.remove();
+	style.remove();
 } );
 
 } );

tests/unit/resizable/options.js

@@ -568,49 +568,56 @@ QUnit.test( "alsoResize with box-sizing: border-box", function( assert ) {
 QUnit.test( "alsoResize with scrollbars and box-sizing: border-box", function( assert ) {
 	assert.expect( 4 );
 
+	var style = $( "<style> * { box-sizing: border-box; } </style>" ).appendTo( "head" );
+
 	var other = $( "<div>" )
 			.css( {
-				width: 150,
-				height: 150,
-				padding: 10,
-				border: 5,
+				width: "150px",
+				height: "150px",
+				padding: "10px",
+				border: "5px",
 				borderStyle: "solid",
+				margin: "25px",
 				overflow: "scroll"
 			} )
-			.appendTo( "body" ),
+			.appendTo( "#qunit-fixture" ),
 		element = $( "#resizable1" ).resizable( {
 			alsoResize: other
 		} ),
 		handle = ".ui-resizable-se";
 
-
-	$( "*" ).css( "box-sizing", "border-box" );
 	testHelper.drag( handle, 80, 80 );
 
 	assert.equal( element.width(), 180, "resizable width" );
 	assert.equal( parseFloat( other.css( "width" ) ), 230, "alsoResize width" );
 	assert.equal( element.height(), 180, "resizable height" );
 	assert.equal( parseFloat( other.css( "height" ) ), 230, "alsoResize height" );
+
+	style.remove();
 } );
 
 QUnit.test( "alsoResize with scrollbars and box-sizing: content-box", function( assert ) {
 	assert.expect( 4 );
 
+	var style = $( "<style> * { box-sizing: content-box; } </style>" ).appendTo( "head" );
+
 	var other = $( "<div>" )
 			.css( {
-				width: 150,
-				height: 150,
+				width: "150px",
+				height: "150px",
+				padding: "10px",
+				border: "5px",
+				borderStyle: "solid",
+				margin: "20px",
 				overflow: "scroll"
 			} )
-			.appendTo( "body" ),
+			.appendTo( "#qunit-fixture" ),
 		element = $( "#resizable1" ).resizable( {
 			alsoResize: other
 		} ),
 		handle = ".ui-resizable-se";
 
-	$( "*" ).css( "box-sizing", "content-box" );
-
-	// In some browsers scrollbar may change element size.
+	// In some browsers scrollbar may change element computed size.
 	var widthBefore = other.innerWidth();
 	var heightBefore = other.innerHeight();
 
@@ -620,6 +627,8 @@ QUnit.test( "alsoResize with scrollbars and box-sizing: content-box", function(
 	assert.equal( parseFloat( other.innerWidth() ), widthBefore + 80, "alsoResize width" );
 	assert.equal( element.height(), 180, "resizable height" );
 	assert.equal( parseFloat( other.innerHeight() ), heightBefore + 80, "alsoResize height" );
+
+	style.remove();
 } );