From 37bcb36c74331d9bc03ecbaba23167d7ff36e8ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Garc=C3=ADa?= <93217193+Daniel-Garmig@users.noreply.github.com> Date: Tue, 20 Aug 2024 21:44:06 +0200 Subject: [PATCH 1/9] Resizable: Fix content shrink on resize Resizable element shrinks on resize when it has scrollbars and "box-sizing: content-box". Fixes: gh-2277 --- tests/unit/resizable/core.js | 53 ++++++++++++++++++++++++++++++ tests/unit/resizable/options.js | 58 +++++++++++++++++++++++++++++++++ ui/widgets/resizable.js | 30 ++++++++++++----- 3 files changed, 132 insertions(+), 9 deletions(-) diff --git a/tests/unit/resizable/core.js b/tests/unit/resizable/core.js index b3c61514a98..355d30601bf 100644 --- a/tests/unit/resizable/core.js +++ b/tests/unit/resizable/core.js @@ -244,4 +244,57 @@ QUnit.test( "nested resizable", function( assert ) { outer.remove(); } ); +QUnit.test( "Resizable with scrollbars and box-sizing: border-box", function( assert ) { + assert.expect( 2 ); + + var elementContent = $( "<div>" ) + .css( { + width: 50, + height: 200, + padding: 10, + border: 5, + borderStyle: "solid" + } ) + .appendTo( "#resizable1" ), + 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" ); + assert.equal( element.height(), 110, "element height" ); + + elementContent.remove(); +} ); + +QUnit.test( "Resizable with scrollbars and box-sizing: content-box", function( assert ) { + assert.expect( 2 ); + + var elementContent = $( "<div>" ) + .css( { + width: 50, + height: 200, + padding: 10, + border: 5, + borderStyle: "solid" + } ) + .appendTo( "#resizable1" ), + 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" ); + assert.equal( parseFloat( element.innerHeight() ), heightBefore + 10, "element height" ); + + elementContent.remove(); +} ); + } ); diff --git a/tests/unit/resizable/options.js b/tests/unit/resizable/options.js index add8d803448..8295957f631 100644 --- a/tests/unit/resizable/options.js +++ b/tests/unit/resizable/options.js @@ -565,4 +565,62 @@ QUnit.test( "alsoResize with box-sizing: border-box", function( assert ) { assert.equal( parseFloat( other.css( "height" ) ), 130, "alsoResize height" ); } ); +QUnit.test( "alsoResize with scrollbars and box-sizing: border-box", function( assert ) { + assert.expect( 4 ); + + var other = $( "<div>" ) + .css( { + width: 150, + height: 150, + padding: 10, + border: 5, + borderStyle: "solid", + overflow: "scroll" + } ) + .appendTo( "body" ), + 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" ); +} ); + +QUnit.test( "alsoResize with scrollbars and box-sizing: content-box", function( assert ) { + assert.expect( 4 ); + + var other = $( "<div>" ) + .css( { + width: 150, + height: 150, + overflow: "scroll" + } ) + .appendTo( "body" ), + element = $( "#resizable1" ).resizable( { + alsoResize: other + } ), + handle = ".ui-resizable-se"; + + $( "*" ).css( "box-sizing", "content-box" ); + + // In some browsers scrollbar may change element size. + var widthBefore = other.innerWidth(); + var heightBefore = other.innerHeight(); + + testHelper.drag( handle, 80, 80 ); + + assert.equal( element.width(), 180, "resizable width" ); + 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" ); +} ); + + } ); diff --git a/ui/widgets/resizable.js b/ui/widgets/resizable.js index 1698d55e8bb..5a3765fc78a 100644 --- a/ui/widgets/resizable.js +++ b/ui/widgets/resizable.js @@ -384,18 +384,12 @@ $.widget( "ui.resizable", $.ui.mouse, { this.size = this._helper ? { width: this.helper.width(), height: this.helper.height() - } : { - width: el.width(), - height: el.height() - }; + } : this._calculateAdjustedElementDimensions( el ); this.originalSize = this._helper ? { width: el.outerWidth(), height: el.outerHeight() - } : { - width: el.width(), - height: el.height() - }; + } : this._calculateAdjustedElementDimensions( el ); this.sizeDiff = { width: el.outerWidth() - el.width(), @@ -690,6 +684,21 @@ $.widget( "ui.resizable", $.ui.mouse, { }; }, + _calculateAdjustedElementDimensions: function( element ) { + if ( !( /content-box/ ).test( element.css( "box-sizing" ) ) ) { + return { + height: parseFloat( element.css( "height" ) ), + width: parseFloat( element.css( "width" ) ) + }; + } + + var outerDimensions = this._getPaddingPlusBorderDimensions( element ); + return { + height: element[ 0 ].getBoundingClientRect().height - outerDimensions.height, + width: element[ 0 ].getBoundingClientRect().width - outerDimensions.width + }; + }, + _proportionallyResize: function() { if ( !this._proportionallyResizeElements.length ) { @@ -1045,8 +1054,11 @@ $.ui.plugin.add( "resizable", "alsoResize", { $( o.alsoResize ).each( function() { var el = $( this ); + + var elSize = that._calculateAdjustedElementDimensions( el ); + el.data( "ui-resizable-alsoresize", { - width: parseFloat( el.css( "width" ) ), height: parseFloat( el.css( "height" ) ), + width: elSize.width, height: elSize.height, left: parseFloat( el.css( "left" ) ), top: parseFloat( el.css( "top" ) ) } ); } ); From 673b06970078a64a70fe9df291ecde84964e62ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Garc=C3=ADa?= <93217193+Daniel-Garmig@users.noreply.github.com> Date: Sat, 24 Aug 2024 13:36:12 +0200 Subject: [PATCH 2/9] Fixed and improved tests --- tests/unit/resizable/core.js | 62 +++++++++++++++++++++------------ tests/unit/resizable/options.js | 35 ++++++++++++------- 2 files changed, 61 insertions(+), 36 deletions(-) diff --git a/tests/unit/resizable/core.js b/tests/unit/resizable/core.js index 355d30601bf..25d262b28cf 100644 --- a/tests/unit/resizable/core.js +++ b/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(); } ); } ); diff --git a/tests/unit/resizable/options.js b/tests/unit/resizable/options.js index 8295957f631..ac20041d557 100644 --- a/tests/unit/resizable/options.js +++ b/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(); } ); From a90f83a3d214ce099dd18374a07e845e3a964e06 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Garc=C3=ADa?= <93217193+Daniel-Garmig@users.noreply.github.com> Date: Sat, 24 Aug 2024 15:54:30 +0200 Subject: [PATCH 3/9] Changed implementation to avoid getBoundingClientRect(). --- ui/widgets/resizable.js | 61 +++++++++++++++++++++++++++++++++-------- 1 file changed, 50 insertions(+), 11 deletions(-) diff --git a/ui/widgets/resizable.js b/ui/widgets/resizable.js index 5a3765fc78a..d06fceaabac 100644 --- a/ui/widgets/resizable.js +++ b/ui/widgets/resizable.js @@ -80,9 +80,13 @@ $.widget( "ui.resizable", $.ui.mouse, { _hasScroll: function( el, a ) { - if ( $( el ).css( "overflow" ) === "hidden" ) { + var overflow = $( el ).css( "overflow" ); + if ( overflow === "hidden" ) { return false; } + if ( overflow === "scroll" ) { + return true; + } var scroll = ( a && a === "left" ) ? "scrollLeft" : "scrollTop", has = false; @@ -381,15 +385,26 @@ $.widget( "ui.resizable", $.ui.mouse, { this.offset = this.helper.offset(); this.position = { left: curleft, top: curtop }; + var calculatedSize = undefined; + if ( !this._helper ) { + calculatedSize = this._calculateAdjustedElementDimensions( el ); + } + this.size = this._helper ? { width: this.helper.width(), height: this.helper.height() - } : this._calculateAdjustedElementDimensions( el ); + } : { + width: calculatedSize.width, + height: calculatedSize.height + }; this.originalSize = this._helper ? { width: el.outerWidth(), height: el.outerHeight() - } : this._calculateAdjustedElementDimensions( el ); + } : { + width: calculatedSize.width, + height: calculatedSize.height + }; this.sizeDiff = { width: el.outerWidth() - el.width(), @@ -685,20 +700,44 @@ $.widget( "ui.resizable", $.ui.mouse, { }, _calculateAdjustedElementDimensions: function( element ) { - if ( !( /content-box/ ).test( element.css( "box-sizing" ) ) ) { - return { - height: parseFloat( element.css( "height" ) ), - width: parseFloat( element.css( "width" ) ) - }; + var ce = element.get( 0 ); + + if ( element.css( "box-sizing" ) !== "content-box" || + ( !this._hasScroll( ce ) && !this._hasScroll( ce, "left" ) ) ) { + return { + height: parseFloat( element.css( "height" ) ), + width: parseFloat( element.css( "width" ) ) + }; + } + + // Check if CSS inline styles are set and use those (usually from previous resizes) + var elWidth = ce.style.width === "" ? "" : parseFloat( ce.style.width ); + var elHeight = ce.style.height === "" ? "" : parseFloat( ce.style.height ); + + if ( elWidth === "" ) { + elWidth = this._getElementSizeWithoutOverflow( element, "width" ); + } + if ( elHeight === "" ) { + elHeight = this._getElementSizeWithoutOverflow( element, "height" ); } - var outerDimensions = this._getPaddingPlusBorderDimensions( element ); return { - height: element[ 0 ].getBoundingClientRect().height - outerDimensions.height, - width: element[ 0 ].getBoundingClientRect().width - outerDimensions.width + height: elHeight, + width: elWidth }; }, + _getElementSizeWithoutOverflow: function( element, sizeProperty ) { + var overflowProperty = sizeProperty === "width" ? "overflow-y" : "overflow-x"; + + var origOverflow = element.css( overflowProperty ); + element.css( overflowProperty, "hidden" ); + var elSize = parseFloat( element.css( sizeProperty ) ); + element.css( overflowProperty, origOverflow ); + + return elSize; + }, + _proportionallyResize: function() { if ( !this._proportionallyResizeElements.length ) { From fe9c9f8820ce0742ba2aab55547445dc425292c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Garc=C3=ADa?= <93217193+Daniel-Garmig@users.noreply.github.com> Date: Sat, 24 Aug 2024 15:56:49 +0200 Subject: [PATCH 4/9] Added tests for resizable when a css transform is set. --- tests/unit/resizable/core.js | 69 ++++++++++++++++++++++++++++++++++++ 1 file changed, 69 insertions(+) diff --git a/tests/unit/resizable/core.js b/tests/unit/resizable/core.js index 25d262b28cf..ef85763f642 100644 --- a/tests/unit/resizable/core.js +++ b/tests/unit/resizable/core.js @@ -313,4 +313,73 @@ QUnit.test( "Resizable with scrollbars and box-sizing: content-box", function( a style.remove(); } ); +QUnit.test( "Resizable with scrollbars, a transform and box-sizing: border-box", function( assert ) { + assert.expect( 4 ); + + var style = $( "<style> * { box-sizing: border-box; } </style>" ).appendTo( "head" ); + + //Both scrollbars + var elementContent = $( "<div>" ) + .css( { + width: "200px", + height: "200px", + padding: "10px", + border: "5px", + borderStyle: "solid", + margin: "20px" + } ) + .appendTo( "#resizable1" ), + element = $( "#resizable1" ).css( { overflow: "auto", transform: "scale(1.5)" } ).resizable(), + handle = ".ui-resizable-se"; + + 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(), 120, "element width (only vertical scrollbar)" ); + assert.equal( element.height(), 120, "element height (only vertical scrollbar)" ); + + style.remove(); +} ); + +QUnit.test( "Resizable with scrollbars, a transform and box-sizing: content-box", function( assert ) { + assert.expect( 4 ); + + var style = $( "<style> * { box-sizing: content-box; } </style>" ).appendTo( "head" ); + + //Both scrollbars + var elementContent = $( "<div>" ) + .css( { + width: "200px", + height: "200px", + padding: "10px", + border: "5px", + borderStyle: "solid", + margin: "20px" + } ) + .appendTo( "#resizable1" ), + element = $( "#resizable1" ).css( { overflow: "auto", transform: "scale(1.5)" } ).resizable(), + handle = ".ui-resizable-se"; + + // 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)" ); + + //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)" ); + + style.remove(); +} ); + } ); From 4ad61c974c4657355bd9ce37d0ca0fab12c9883c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Garc=C3=ADa?= <93217193+Daniel-Garmig@users.noreply.github.com> Date: Sun, 25 Aug 2024 15:04:38 +0200 Subject: [PATCH 5/9] Changed element size calculations. --- ui/widgets/resizable.js | 35 ++++++++++++++++++++--------------- 1 file changed, 20 insertions(+), 15 deletions(-) diff --git a/ui/widgets/resizable.js b/ui/widgets/resizable.js index d06fceaabac..354a7516890 100644 --- a/ui/widgets/resizable.js +++ b/ui/widgets/resizable.js @@ -711,15 +711,16 @@ $.widget( "ui.resizable", $.ui.mouse, { } // Check if CSS inline styles are set and use those (usually from previous resizes) - var elWidth = ce.style.width === "" ? "" : parseFloat( ce.style.width ); - var elHeight = ce.style.height === "" ? "" : parseFloat( ce.style.height ); + var elWidth = parseFloat( ce.style.width ); + var elHeight = parseFloat( ce.style.height ); - if ( elWidth === "" ) { - elWidth = this._getElementSizeWithoutOverflow( element, "width" ); - } - if ( elHeight === "" ) { - elHeight = this._getElementSizeWithoutOverflow( element, "height" ); - } + var paddingBorder = this._getPaddingPlusBorderDimensions( element ); + elWidth = isNaN( elWidth ) ? + this._getElementTheoreticalSize( element, paddingBorder, "width" ) : + elWidth; + elHeight = isNaN( elHeight ) ? + this._getElementTheoreticalSize( element, paddingBorder, "height" ) : + elHeight; return { height: elHeight, @@ -727,15 +728,19 @@ $.widget( "ui.resizable", $.ui.mouse, { }; }, - _getElementSizeWithoutOverflow: function( element, sizeProperty ) { - var overflowProperty = sizeProperty === "width" ? "overflow-y" : "overflow-x"; + _getElementTheoreticalSize: function( element, extraSize, dimension ) { + + // offsetWidth/offsetHeight is a rounded sum of content, padding, scroll gutter, and border + var size = Math.max( 0, Math.ceil( + element.get( 0 )[ "offset" + dimension[ 0 ].toUpperCase() + dimension.slice( 1 ) ] - + extraSize[ dimension ] - + 0.5 - var origOverflow = element.css( overflowProperty ); - element.css( overflowProperty, "hidden" ); - var elSize = parseFloat( element.css( sizeProperty ) ); - element.css( overflowProperty, origOverflow ); + // If offsetWidth/offsetHeight is unknown, then we can't determine theoretical size. + // Use an explicit zero to avoid NaN (gh-3964) + ) ) || 0; - return elSize; + return size; }, _proportionallyResize: function() { From 80b2c3a8bcf39e5484c1be605030f292a88c6f41 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Garc=C3=ADa?= <93217193+Daniel-Garmig@users.noreply.github.com> Date: Sun, 25 Aug 2024 15:06:51 +0200 Subject: [PATCH 6/9] Updated tests. --- tests/unit/resizable/core.js | 16 ++++------------ tests/unit/resizable/options.js | 24 ++++++++++-------------- 2 files changed, 14 insertions(+), 26 deletions(-) diff --git a/tests/unit/resizable/core.js b/tests/unit/resizable/core.js index ef85763f642..0710b456db7 100644 --- a/tests/unit/resizable/core.js +++ b/tests/unit/resizable/core.js @@ -247,7 +247,7 @@ QUnit.test( "nested resizable", function( assert ) { QUnit.test( "Resizable with scrollbars and box-sizing: border-box", function( assert ) { assert.expect( 4 ); - var style = $( "<style> * { box-sizing: border-box; } </style>" ).appendTo( "head" ); + $( "<style> * { box-sizing: border-box; } </style>" ).appendTo( "#qunit-fixture" ); //Both scrollbars var elementContent = $( "<div>" ) @@ -272,14 +272,12 @@ QUnit.test( "Resizable with scrollbars and box-sizing: border-box", function( as testHelper.drag( handle, 10, 10 ); assert.equal( element.width(), 120, "element width (only vertical scrollbar)" ); assert.equal( element.height(), 120, "element height (only vertical scrollbar)" ); - - style.remove(); } ); QUnit.test( "Resizable with scrollbars and box-sizing: content-box", function( assert ) { assert.expect( 4 ); - var style = $( "<style> * { box-sizing: content-box; } </style>" ).appendTo( "head" ); + $( "<style> * { box-sizing: content-box; } </style>" ).appendTo( "#qunit-fixture" ); //Both scrollbars var elementContent = $( "<div>" ) @@ -309,14 +307,12 @@ QUnit.test( "Resizable with scrollbars and box-sizing: content-box", function( a 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)" ); - - style.remove(); } ); QUnit.test( "Resizable with scrollbars, a transform and box-sizing: border-box", function( assert ) { assert.expect( 4 ); - var style = $( "<style> * { box-sizing: border-box; } </style>" ).appendTo( "head" ); + $( "<style> * { box-sizing: border-box; } </style>" ).appendTo( "#qunit-fixture" ); //Both scrollbars var elementContent = $( "<div>" ) @@ -341,14 +337,12 @@ QUnit.test( "Resizable with scrollbars, a transform and box-sizing: border-box", testHelper.drag( handle, 10, 10 ); assert.equal( element.width(), 120, "element width (only vertical scrollbar)" ); assert.equal( element.height(), 120, "element height (only vertical scrollbar)" ); - - style.remove(); } ); QUnit.test( "Resizable with scrollbars, a transform and box-sizing: content-box", function( assert ) { assert.expect( 4 ); - var style = $( "<style> * { box-sizing: content-box; } </style>" ).appendTo( "head" ); + $( "<style> * { box-sizing: content-box; } </style>" ).appendTo( "#qunit-fixture" ); //Both scrollbars var elementContent = $( "<div>" ) @@ -378,8 +372,6 @@ QUnit.test( "Resizable with scrollbars, a transform and box-sizing: content-box" 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)" ); - - style.remove(); } ); } ); diff --git a/tests/unit/resizable/options.js b/tests/unit/resizable/options.js index ac20041d557..09fd6b21455 100644 --- a/tests/unit/resizable/options.js +++ b/tests/unit/resizable/options.js @@ -542,21 +542,22 @@ QUnit.test( "alsoResize + multiple selection", function( assert ) { QUnit.test( "alsoResize with box-sizing: border-box", function( assert ) { assert.expect( 4 ); + $( "<style> * { box-sizing: border-box; } </style>" ).appendTo( "#qunit-fixture" ); + var other = $( "<div>" ) .css( { - width: 50, - height: 50, - padding: 10, - border: 5 + width: "50px", + height: "50px", + padding: "10px", + border: "5px", + borderStyle: "solid" } ) - .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" ); @@ -568,7 +569,7 @@ 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" ); + $( "<style> * { box-sizing: border-box; } </style>" ).appendTo( "#qunit-fixture" ); var other = $( "<div>" ) .css( { @@ -592,14 +593,12 @@ QUnit.test( "alsoResize with scrollbars and box-sizing: border-box", function( a 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" ); + $( "<style> * { box-sizing: content-box; } </style>" ).appendTo( "#qunit-fixture" ); var other = $( "<div>" ) .css( { @@ -627,9 +626,6 @@ 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(); } ); - } ); From daee00b06046d6920a0dc564642234611a8818a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Garc=C3=ADa?= <93217193+Daniel-Garmig@users.noreply.github.com> Date: Sat, 7 Sep 2024 19:45:08 +0200 Subject: [PATCH 7/9] Fix comment and variable styles. --- tests/unit/resizable/core.js | 64 +++++++++++++++++++----------------- ui/widgets/resizable.js | 28 ++++++++-------- 2 files changed, 48 insertions(+), 44 deletions(-) diff --git a/tests/unit/resizable/core.js b/tests/unit/resizable/core.js index 0710b456db7..0b7bfa2a8a4 100644 --- a/tests/unit/resizable/core.js +++ b/tests/unit/resizable/core.js @@ -249,7 +249,7 @@ QUnit.test( "Resizable with scrollbars and box-sizing: border-box", function( as $( "<style> * { box-sizing: border-box; } </style>" ).appendTo( "#qunit-fixture" ); - //Both scrollbars + // Both scrollbars var elementContent = $( "<div>" ) .css( { width: "200px", @@ -260,14 +260,14 @@ QUnit.test( "Resizable with scrollbars and box-sizing: border-box", function( as margin: "20px" } ) .appendTo( "#resizable1" ), - element = $( "#resizable1" ).css( "overflow", "auto" ).resizable(), - handle = ".ui-resizable-se"; + element = $( "#resizable1" ).css( "overflow", "auto" ).resizable(), + handle = ".ui-resizable-se"; 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. + // Single (vertical) scrollbar. elementContent.css( "width", "50px" ); testHelper.drag( handle, 10, 10 ); assert.equal( element.width(), 120, "element width (only vertical scrollbar)" ); @@ -279,8 +279,9 @@ QUnit.test( "Resizable with scrollbars and box-sizing: content-box", function( a $( "<style> * { box-sizing: content-box; } </style>" ).appendTo( "#qunit-fixture" ); - //Both scrollbars - var elementContent = $( "<div>" ) + // Both scrollbars + var widthBefore, heightBefore, + elementContent = $( "<div>" ) .css( { width: "200px", height: "200px", @@ -290,18 +291,18 @@ QUnit.test( "Resizable with scrollbars and box-sizing: content-box", function( a margin: "20px" } ) .appendTo( "#resizable1" ), - element = $( "#resizable1" ).css( "overflow", "auto" ).resizable(), - handle = ".ui-resizable-se"; + element = $( "#resizable1" ).css( "overflow", "auto" ).resizable(), + handle = ".ui-resizable-se"; // In some browsers scrollbar may change element size (when "box-sizing: content-box") - var widthBefore = element.innerWidth(); - var heightBefore = element.innerHeight(); + widthBefore = element.innerWidth(); + 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)" ); - //Single (vertical) scrollbar. + // Single (vertical) scrollbar. elementContent.css( "width", "50px" ); testHelper.drag( handle, 10, 10 ); @@ -314,7 +315,7 @@ QUnit.test( "Resizable with scrollbars, a transform and box-sizing: border-box", $( "<style> * { box-sizing: border-box; } </style>" ).appendTo( "#qunit-fixture" ); - //Both scrollbars + // Both scrollbars var elementContent = $( "<div>" ) .css( { width: "200px", @@ -325,14 +326,14 @@ QUnit.test( "Resizable with scrollbars, a transform and box-sizing: border-box", margin: "20px" } ) .appendTo( "#resizable1" ), - element = $( "#resizable1" ).css( { overflow: "auto", transform: "scale(1.5)" } ).resizable(), - handle = ".ui-resizable-se"; + element = $( "#resizable1" ).css( { overflow: "auto", transform: "scale(1.5)" } ).resizable(), + handle = ".ui-resizable-se"; 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. + // Single (vertical) scrollbar. elementContent.css( "width", "50px" ); testHelper.drag( handle, 10, 10 ); assert.equal( element.width(), 120, "element width (only vertical scrollbar)" ); @@ -344,29 +345,30 @@ QUnit.test( "Resizable with scrollbars, a transform and box-sizing: content-box" $( "<style> * { box-sizing: content-box; } </style>" ).appendTo( "#qunit-fixture" ); - //Both scrollbars - var elementContent = $( "<div>" ) - .css( { - width: "200px", - height: "200px", - padding: "10px", - border: "5px", - borderStyle: "solid", - margin: "20px" - } ) - .appendTo( "#resizable1" ), - element = $( "#resizable1" ).css( { overflow: "auto", transform: "scale(1.5)" } ).resizable(), - handle = ".ui-resizable-se"; + // Both scrollbars + var widthBefore, heightBefore, + elementContent = $( "<div>" ) + .css( { + width: "200px", + height: "200px", + padding: "10px", + border: "5px", + borderStyle: "solid", + margin: "20px" + } ) + .appendTo( "#resizable1" ), + element = $( "#resizable1" ).css( { overflow: "auto", transform: "scale(1.5)" } ).resizable(), + handle = ".ui-resizable-se"; // In some browsers scrollbar may change element size (when "box-sizing: content-box") - var widthBefore = element.innerWidth(); - var heightBefore = element.innerHeight(); + widthBefore = element.innerWidth(); + 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)" ); - //Single (vertical) scrollbar. + // Single (vertical) scrollbar. elementContent.css( "width", "50px" ); testHelper.drag( handle, 10, 10 ); diff --git a/ui/widgets/resizable.js b/ui/widgets/resizable.js index 354a7516890..6f1e0ebdecb 100644 --- a/ui/widgets/resizable.js +++ b/ui/widgets/resizable.js @@ -80,7 +80,10 @@ $.widget( "ui.resizable", $.ui.mouse, { _hasScroll: function( el, a ) { - var overflow = $( el ).css( "overflow" ); + var scroll, + has = false, + overflow = $( el ).css( "overflow" ); + if ( overflow === "hidden" ) { return false; } @@ -88,8 +91,7 @@ $.widget( "ui.resizable", $.ui.mouse, { return true; } - var scroll = ( a && a === "left" ) ? "scrollLeft" : "scrollTop", - has = false; + scroll = ( a && a === "left" ) ? "scrollLeft" : "scrollTop"; if ( el[ scroll ] > 0 ) { return true; @@ -366,7 +368,7 @@ $.widget( "ui.resizable", $.ui.mouse, { _mouseStart: function( event ) { - var curleft, curtop, cursor, + var curleft, curtop, cursor, calculatedSize, o = this.options, el = this.element; @@ -385,7 +387,6 @@ $.widget( "ui.resizable", $.ui.mouse, { this.offset = this.helper.offset(); this.position = { left: curleft, top: curtop }; - var calculatedSize = undefined; if ( !this._helper ) { calculatedSize = this._calculateAdjustedElementDimensions( el ); } @@ -700,7 +701,8 @@ $.widget( "ui.resizable", $.ui.mouse, { }, _calculateAdjustedElementDimensions: function( element ) { - var ce = element.get( 0 ); + var elWidth, elHeight, paddingBorder, + ce = element.get( 0 ); if ( element.css( "box-sizing" ) !== "content-box" || ( !this._hasScroll( ce ) && !this._hasScroll( ce, "left" ) ) ) { @@ -711,10 +713,10 @@ $.widget( "ui.resizable", $.ui.mouse, { } // Check if CSS inline styles are set and use those (usually from previous resizes) - var elWidth = parseFloat( ce.style.width ); - var elHeight = parseFloat( ce.style.height ); + elWidth = parseFloat( ce.style.width ); + elHeight = parseFloat( ce.style.height ); - var paddingBorder = this._getPaddingPlusBorderDimensions( element ); + paddingBorder = this._getPaddingPlusBorderDimensions( element ); elWidth = isNaN( elWidth ) ? this._getElementTheoreticalSize( element, paddingBorder, "width" ) : elWidth; @@ -737,7 +739,8 @@ $.widget( "ui.resizable", $.ui.mouse, { 0.5 // If offsetWidth/offsetHeight is unknown, then we can't determine theoretical size. - // Use an explicit zero to avoid NaN (gh-3964) + // Use an explicit zero to avoid NaN. + // See https://github.com/jquery/jquery/issues/3964 ) ) || 0; return size; @@ -1097,9 +1100,8 @@ $.ui.plugin.add( "resizable", "alsoResize", { o = that.options; $( o.alsoResize ).each( function() { - var el = $( this ); - - var elSize = that._calculateAdjustedElementDimensions( el ); + var el = $( this ), + elSize = that._calculateAdjustedElementDimensions( el ); el.data( "ui-resizable-alsoresize", { width: elSize.width, height: elSize.height, From 6dd4bf730c41d6005dac8b88670c89cbd607056b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Garc=C3=ADa?= <93217193+Daniel-Garmig@users.noreply.github.com> Date: Sat, 7 Sep 2024 20:10:11 +0200 Subject: [PATCH 8/9] Changed test cases to use a generic function. --- tests/unit/resizable/core.js | 102 ++++---------------------------- tests/unit/resizable/options.js | 43 ++++---------- 2 files changed, 25 insertions(+), 120 deletions(-) diff --git a/tests/unit/resizable/core.js b/tests/unit/resizable/core.js index 0b7bfa2a8a4..a9f21ab4bf5 100644 --- a/tests/unit/resizable/core.js +++ b/tests/unit/resizable/core.js @@ -246,107 +246,28 @@ QUnit.test( "nested resizable", function( assert ) { QUnit.test( "Resizable with scrollbars and box-sizing: border-box", function( assert ) { assert.expect( 4 ); - - $( "<style> * { box-sizing: border-box; } </style>" ).appendTo( "#qunit-fixture" ); - - // Both scrollbars - var elementContent = $( "<div>" ) - .css( { - width: "200px", - height: "200px", - padding: "10px", - border: "5px", - borderStyle: "solid", - margin: "20px" - } ) - .appendTo( "#resizable1" ), - element = $( "#resizable1" ).css( "overflow", "auto" ).resizable(), - handle = ".ui-resizable-se"; - - 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(), 120, "element width (only vertical scrollbar)" ); - assert.equal( element.height(), 120, "element height (only vertical scrollbar)" ); + testResizableWithBoxSizing( assert, true, false ); } ); QUnit.test( "Resizable with scrollbars and box-sizing: content-box", function( assert ) { assert.expect( 4 ); - - $( "<style> * { box-sizing: content-box; } </style>" ).appendTo( "#qunit-fixture" ); - - // Both scrollbars - var widthBefore, heightBefore, - elementContent = $( "<div>" ) - .css( { - width: "200px", - height: "200px", - padding: "10px", - border: "5px", - borderStyle: "solid", - margin: "20px" - } ) - .appendTo( "#resizable1" ), - element = $( "#resizable1" ).css( "overflow", "auto" ).resizable(), - handle = ".ui-resizable-se"; - - // In some browsers scrollbar may change element size (when "box-sizing: content-box") - widthBefore = element.innerWidth(); - 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)" ); - - // 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)" ); + testResizableWithBoxSizing( assert, false, false ); } ); QUnit.test( "Resizable with scrollbars, a transform and box-sizing: border-box", function( assert ) { assert.expect( 4 ); - - $( "<style> * { box-sizing: border-box; } </style>" ).appendTo( "#qunit-fixture" ); - - // Both scrollbars - var elementContent = $( "<div>" ) - .css( { - width: "200px", - height: "200px", - padding: "10px", - border: "5px", - borderStyle: "solid", - margin: "20px" - } ) - .appendTo( "#resizable1" ), - element = $( "#resizable1" ).css( { overflow: "auto", transform: "scale(1.5)" } ).resizable(), - handle = ".ui-resizable-se"; - - 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(), 120, "element width (only vertical scrollbar)" ); - assert.equal( element.height(), 120, "element height (only vertical scrollbar)" ); + testResizableWithBoxSizing( assert, true, true ); } ); QUnit.test( "Resizable with scrollbars, a transform and box-sizing: content-box", function( assert ) { assert.expect( 4 ); + testResizableWithBoxSizing( assert, false, true ); +} ); - $( "<style> * { box-sizing: content-box; } </style>" ).appendTo( "#qunit-fixture" ); - - // Both scrollbars +function testResizableWithBoxSizing( assert, isBorderBox, applyScaleTransform ) { var widthBefore, heightBefore, + cssBoxSizing = isBorderBox ? "border-box" : "content-box", + cssTrasform = applyScaleTransform ? "scale(1.5)" : "", elementContent = $( "<div>" ) .css( { width: "200px", @@ -357,13 +278,16 @@ QUnit.test( "Resizable with scrollbars, a transform and box-sizing: content-box" margin: "20px" } ) .appendTo( "#resizable1" ), - element = $( "#resizable1" ).css( { overflow: "auto", transform: "scale(1.5)" } ).resizable(), + element = $( "#resizable1" ).css( { overflow: "auto", transform: cssTrasform } ).resizable(), handle = ".ui-resizable-se"; + $( "<style> * { box-sizing: " + cssBoxSizing + "; } </style>" ).appendTo( "#qunit-fixture" ); + // In some browsers scrollbar may change element size (when "box-sizing: content-box") widthBefore = element.innerWidth(); heightBefore = element.innerHeight(); + // Both scrollbars 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)" ); @@ -374,6 +298,6 @@ QUnit.test( "Resizable with scrollbars, a transform and box-sizing: content-box" 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)" ); -} ); +} } ); diff --git a/tests/unit/resizable/options.js b/tests/unit/resizable/options.js index 09fd6b21455..a889fdca387 100644 --- a/tests/unit/resizable/options.js +++ b/tests/unit/resizable/options.js @@ -568,39 +568,18 @@ 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 ); - - $( "<style> * { box-sizing: border-box; } </style>" ).appendTo( "#qunit-fixture" ); - - var other = $( "<div>" ) - .css( { - width: "150px", - height: "150px", - padding: "10px", - border: "5px", - borderStyle: "solid", - margin: "25px", - overflow: "scroll" - } ) - .appendTo( "#qunit-fixture" ), - element = $( "#resizable1" ).resizable( { - alsoResize: other - } ), - handle = ".ui-resizable-se"; - - 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" ); + testAlsoResizeWithBoxSizing( assert, true ); } ); QUnit.test( "alsoResize with scrollbars and box-sizing: content-box", function( assert ) { assert.expect( 4 ); + testAlsoResizeWithBoxSizing( assert, false ); +} ); - $( "<style> * { box-sizing: content-box; } </style>" ).appendTo( "#qunit-fixture" ); - - var other = $( "<div>" ) +function testAlsoResizeWithBoxSizing( assert, isBorderBox ) { + var widthBefore, heightBefore, + cssBoxSizing = isBorderBox ? "border-box" : "content-box", + other = $( "<div>" ) .css( { width: "150px", height: "150px", @@ -616,9 +595,11 @@ QUnit.test( "alsoResize with scrollbars and box-sizing: content-box", function( } ), handle = ".ui-resizable-se"; + $( "<style> * { box-sizing: " + cssBoxSizing + "; } </style>" ).appendTo( "#qunit-fixture" ); + // In some browsers scrollbar may change element computed size. - var widthBefore = other.innerWidth(); - var heightBefore = other.innerHeight(); + widthBefore = other.innerWidth(); + heightBefore = other.innerHeight(); testHelper.drag( handle, 80, 80 ); @@ -626,6 +607,6 @@ 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" ); -} ); +} } ); From 1de85547bd7fe10a39c68efc562728f93d6415d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Garc=C3=ADa?= <93217193+Daniel-Garmig@users.noreply.github.com> Date: Sun, 8 Sep 2024 14:14:57 +0200 Subject: [PATCH 9/9] Fixed boolean traps. --- tests/unit/resizable/core.js | 28 ++++++++++++++++++++-------- tests/unit/resizable/options.js | 12 ++++++++---- 2 files changed, 28 insertions(+), 12 deletions(-) diff --git a/tests/unit/resizable/core.js b/tests/unit/resizable/core.js index a9f21ab4bf5..b47f0b645f4 100644 --- a/tests/unit/resizable/core.js +++ b/tests/unit/resizable/core.js @@ -246,28 +246,40 @@ QUnit.test( "nested resizable", function( assert ) { QUnit.test( "Resizable with scrollbars and box-sizing: border-box", function( assert ) { assert.expect( 4 ); - testResizableWithBoxSizing( assert, true, false ); + testResizableWithBoxSizing( assert, { + isBorderBox: true, + applyScaleTransform: false + } ); } ); QUnit.test( "Resizable with scrollbars and box-sizing: content-box", function( assert ) { assert.expect( 4 ); - testResizableWithBoxSizing( assert, false, false ); + testResizableWithBoxSizing( assert, { + isBorderBox: false, + applyScaleTransform: false + } ); } ); QUnit.test( "Resizable with scrollbars, a transform and box-sizing: border-box", function( assert ) { assert.expect( 4 ); - testResizableWithBoxSizing( assert, true, true ); + testResizableWithBoxSizing( assert, { + isBorderBox: true, + applyScaleTransform: true + } ); } ); QUnit.test( "Resizable with scrollbars, a transform and box-sizing: content-box", function( assert ) { assert.expect( 4 ); - testResizableWithBoxSizing( assert, false, true ); + testResizableWithBoxSizing( assert, { + isBorderBox: false, + applyScaleTransform: true + } ); } ); -function testResizableWithBoxSizing( assert, isBorderBox, applyScaleTransform ) { +function testResizableWithBoxSizing( assert, options ) { var widthBefore, heightBefore, - cssBoxSizing = isBorderBox ? "border-box" : "content-box", - cssTrasform = applyScaleTransform ? "scale(1.5)" : "", + cssBoxSizing = options.isBorderBox ? "border-box" : "content-box", + cssTransform = options.applyScaleTransform ? "scale(1.5)" : "", elementContent = $( "<div>" ) .css( { width: "200px", @@ -278,7 +290,7 @@ function testResizableWithBoxSizing( assert, isBorderBox, applyScaleTransform ) margin: "20px" } ) .appendTo( "#resizable1" ), - element = $( "#resizable1" ).css( { overflow: "auto", transform: cssTrasform } ).resizable(), + element = $( "#resizable1" ).css( { overflow: "auto", transform: cssTransform } ).resizable(), handle = ".ui-resizable-se"; $( "<style> * { box-sizing: " + cssBoxSizing + "; } </style>" ).appendTo( "#qunit-fixture" ); diff --git a/tests/unit/resizable/options.js b/tests/unit/resizable/options.js index a889fdca387..b80c051d588 100644 --- a/tests/unit/resizable/options.js +++ b/tests/unit/resizable/options.js @@ -568,17 +568,21 @@ 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 ); - testAlsoResizeWithBoxSizing( assert, true ); + testAlsoResizeWithBoxSizing( assert, { + isBorderBox: true + } ); } ); QUnit.test( "alsoResize with scrollbars and box-sizing: content-box", function( assert ) { assert.expect( 4 ); - testAlsoResizeWithBoxSizing( assert, false ); + testAlsoResizeWithBoxSizing( assert, { + isBorderBox: false + } ); } ); -function testAlsoResizeWithBoxSizing( assert, isBorderBox ) { +function testAlsoResizeWithBoxSizing( assert, options ) { var widthBefore, heightBefore, - cssBoxSizing = isBorderBox ? "border-box" : "content-box", + cssBoxSizing = options.isBorderBox ? "border-box" : "content-box", other = $( "<div>" ) .css( { width: "150px",